android 自定义八边形进度条

自定义八边形动画效果图如下图片: ![Alt](https://img-home.csdnimg.cn/images/20220524100510.pn
绘制步骤:
1.先绘制橙色底部八边形实心
2.黑色画笔绘制第二层,让最外层显示一条线条宽度即可
3.再用黄色画笔绘制黄色部分
4.使用渐变画笔根据当前进度绘制覆盖黄色部分
5.使用黑色画笔根据当前进度绘制刻度条
6.黑色画笔绘制第三层留出黄色部分的宽度

完整代码

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RadialGradient;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

public class EightView extends View {
    private Paint mPaint;
    private Paint roundPaint;
    private Paint bgPaint;
    private float mR, mCx, mCy,mR1,mR2;
    private static final int mN = 8;
    private static final float DEGREES_UNIT = 360 / mN; //正N边形每个角  360/mN能整除
    private int width = 0;
    private int height = 0;


    //外部描边色:#d06d38

    private int[] colors = new int[]{
            Color.parseColor("#e3682f"),
            Color.parseColor("#e3682f"),
            Color.parseColor("#e59f3a"),
            Color.parseColor("#e59f3a"),
    };

    public EightView(Context context) {
        this(context, null);
    }

    public EightView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public EightView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //   PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
        //绘制8边形外环
        mPaint = new Paint();
        mPaint.setColor(Color.parseColor("#e3682f"));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND); // 设置转弯处为圆角
        // 当绘图样式为 STROKE 时,该方法用于指定线条连接处的拐角样式,能使绘制的图形更加平滑
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeWidth(50F);
        //  mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST));
        mPaint.setAntiAlias(true);

        //绘制刻度圆,然后进行裁剪,按照外环的大小
        roundPaint=new Paint();
        roundPaint.setStyle(Paint.Style.FILL);
        roundPaint.setAntiAlias(true);
        roundPaint.setStrokeWidth(8);
        //  roundPaint.setXfermode(porterDuffXfermode);

        //绘制黑色背景,bgPaint


        bgPaint=new Paint();
        bgPaint.setColor(Color.YELLOW);
        bgPaint.setStyle(Paint.Style.FILL);
        bgPaint.setAntiAlias(true);
        //    bgPaint.setXfermode(porterDuffXfermode);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getSize(widthMeasureSpec);
        height = getSize(heightMeasureSpec);
        if (width < height) {
            height = width;
        } else {
            width = height;
        }
        setMeasuredDimension(width, height);
    }

    private int getSize(int measureSpec) {
        int mySize = 100;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        switch (mode) {
            case MeasureSpec.UNSPECIFIED: {//如果没有指定大小:就设置为默认大小
                mySize = 100;
                break;
            }
            case MeasureSpec.AT_MOST: //如果测里模式是最大取值为size,我们将大小取最大值,你也可以取其他值
            case MeasureSpec.EXACTLY: {//如果是固定的大小,那就不要去改变它
                mySize = size;
                break;
            }
        }
        return mySize;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        float mW = getMeasuredWidth();
        float mH = getMeasuredHeight();

        if (mW < mH) {
            mH = mW;
        } else {
            mW = mH;
        }
        //----mCx-230.0---mCy-230.0---mR-172.5
        mCx = mW / 2;
        mCy = mH / 2;
        //mCx和mCy中的较小者
        mR = Math.min(mCx, mCy) / 4 * 3;

        mR1 = mW/7*3;
        mR2=mR1-5;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.rotate(23, mCx, mCy);
//        canvas.rotate(-45, mCx, mCy);
        canvas.drawColor(bgColor);
        mPaint.setColor(Color.parseColor("#e3682f"));
        float d1 = (float) (2 * mR1 * Math.sin(Math.toRadians(DEGREES_UNIT / 2)));
        float c1 = mCy - mR1;
        float y1 = (d1 * d1 + mCy * mCy - c1 * c1 - mR1 * mR1) / (2 * (mCy - c1));
        float x1 = (float) (mCx + Math.sqrt(-1 * c1 * c1 + 2 * c1 * y1 + d1 * d1 - y1 * y1));
        for (int i = 0; i < 8; i++) {
            canvas.save();
            canvas.rotate(DEGREES_UNIT * i, mCx, mCy);
            canvas.drawLine(mCx, c1, x1, y1, mPaint);
            canvas.restore();
        }

        mPaint.setColor(bgColor);
        float d2 = (float) (2 * mR2 * Math.sin(Math.toRadians(DEGREES_UNIT / 2)));
        float c2 = mCy - mR2;
        float y2 = (d2 * d2 + mCy * mCy - c2 * c2 - mR2 * mR2) / (2 * (mCy - c2));
        float x2 = (float) (mCx + Math.sqrt(-1 * c2 * c2 + 2 * c2 * y2 + d2 * d2 - y2 * y2));
        for (int i = 0; i < 8; i++) {
            canvas.save();
            canvas.rotate(DEGREES_UNIT * i, mCx, mCy);
            // canvas.drawLine(mCx, mCy, mCx, c, mPaint);//中间的连接线
            canvas.drawLine(mCx, c2, x2, y2, mPaint);
            canvas.restore();
        }
        //离屏绘制
        int layer1 = canvas.saveLayer(0, 0, width, height, mPaint);
        int layer2 = canvas.saveLayer(0, 0, width, height, bgPaint);
        int layer3 = canvas.saveLayer(0, 0, width, height, roundPaint);

        mPaint.setColor(Color.parseColor("#e59f3a"));
        float d = (float) (2 * mR * Math.sin(Math.toRadians(DEGREES_UNIT / 2)));
        float c = mCy - mR;
        float y = (d * d + mCy * mCy - c * c - mR * mR) / (2 * (mCy - c));
        float x = (float) (mCx + Math.sqrt(-1 * c * c + 2 * c * y + d * d - y * y));
        for (int i = 0; i < 8; i++) {
            canvas.save();
            canvas.rotate(DEGREES_UNIT * i, mCx, mCy);
            canvas.drawLine(mCx, c, x, y, mPaint);
            canvas.restore();
        }
        if (gradient==null){
            gradient =new RadialGradient(mCx,mCy, mCx/5,
                    colors,null, Shader.TileMode.MIRROR);
        }
        bgPaint.setShader(gradient);
        /**
         * left–矩形左侧的X坐标
         * top–矩形顶部的Y坐标
         * right–矩形右侧的X坐标
         * bottom–矩形底部的Y坐标
         */
        if (rectF==null){
            rectF = new RectF(0, 0, width, height);
        }
        bgPaint.setXfermode(mode);
        canvas.drawArc(rectF, 67, indexCircle, true, bgPaint);//底部圆
        //最后将画笔去除Xfermode
        bgPaint.setXfermode(null);

        //绘制刻度线
        canvas.translate(width / 2, height / 2);
        roundPaint.setXfermode(mode);
        roundPaint.setColor(bgColor);
        //90度12根,360度48根 270度36  //90度8根,360度30根
        int index=indexCircle*46/360;
        for (int i = 0; i < index; i++) {//共48等分,根据绘制的角度更改
            canvas.save();//画布保存
            int degress=i * 8+67;
            if (degress>360){
                degress=degress-360;
            }
            canvas.rotate(degress);//绘制图标的旋转360 + i * 36
//            int alpha = (int) ((i / 60f * 255 + circleAlpha) % 255);
//            mPaint.setAlpha(alpha);//设置画笔的透明度[0-255],0是完全透明,255是完全不透明
            canvas.translate(width/2-mCircleWidth, 0);//绘图坐标的平移。
            canvas.drawLine(0, 0, mCircleWidth, 0, roundPaint);//绘制线.drawLine,drawLines绘制多条线
            canvas.restore();//合并保存后的图层
        }
        //最后将画笔去除Xfermode
        roundPaint.setXfermode(null);

        //恢复图层
        canvas.restoreToCount(layer1);
        canvas.restoreToCount(layer2);
        canvas.restoreToCount(layer3);
    }
    private  RadialGradient gradient;
    private  RectF rectF;
    private PorterDuffXfermode mode=new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);

    private int mCircleWidth = 120;//圆弧的长度
    private int indexCircle=0;
    private int bgColor=Color.BLACK;

    public void setBgColor(int BgColor){
        bgColor=BgColor;
    }

    public void setAngle(int mStepNum) {
        mStepNum=360-mStepNum;
        if (mStepNum > 360) {
            mStepNum = 360;
        }
        if (mStepNum < 0) {
            mStepNum = 0;
        }
        this.indexCircle = mStepNum;
        invalidate();
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/331238.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SQL-窗口函数

什么是窗口函数 可以像聚合函数一样对一组数据进行分析并返回结果&#xff0c;二者的不同之处在于&#xff0c;窗口函数不是将一组数据汇总成单个结果&#xff0c;而是为每一行数据都返回一个结果。 窗口函数组成部分 1.创建数据分区 窗口函数OVER子句中的PARTITION BY选项用…

【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后,输入的内容中包含表情符号时,获取输入的内容数还是会超出限制的问题

这是【Flutter 问题系列第 80 篇】&#xff0c;如果觉得有用的话&#xff0c;欢迎关注专栏。 博文当前所用 Flutter SDK&#xff1a;3.10.5、Dart SDK&#xff1a;3.0.5 一&#xff1a;问题描述 在输入用户名称、简介等内容时&#xff0c;一般我们都会限制输入框内最大可输入…

深入解析JavaScript的原生原型

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 在JavaScript中,除了自定义对象,还存在很多由JavaScript语言本身提供…

vue3 知识

vue3介绍 Vue3的变化: 1、vue3完全兼容vue2&#xff0c;但是vue3不建议用vue2的写法 2、拥抱TypeScript&#xff0c;ts完全兼容js 3、组合式API和配置项API vue2 是配置项api vue3 组合式api vue3项目创建和启动 # 创建vue3项目&a…

C++创建窗口程序

实现一个基本的 Windows 应用程序&#xff0c;使用 C 和 WinAPI&#xff08;Windows API&#xff09;编写。运行这段代码时&#xff0c;它将显示一个标题为“Hello World”的窗口&#xff0c;并且可以通过关闭窗口来结束程序。 #include <windows.h> // 包含Windows头文…

【Python3】【力扣题】389. 找不同

【力扣题】题目描述&#xff1a; 【Python3】代码&#xff1a; 1、解题思路&#xff1a;使用计数器分别统计字符串中的元素和出现次数&#xff0c;两个计数器相减&#xff0c;结果就是新添加的元素。 知识点&#xff1a;collections.Counter(...)&#xff1a;字典子类&#x…

ONLYOFFICE:开源、免费、安全,打造定制化办公平台的最佳选择

文章目录 写在前面ONLYOFFICE是什么&#xff1f;ONLYOFFICE的惊艳之处齐全的插件&#xff0c;助你锦上添花部署一款自己的安全可靠的办公平台写在最后 写在前面 说起 Office 办公软件&#xff0c;我想大家最常用的应该就是微软的 Microsoft Office 以及国产的 WPS Office。两款…

C语言:进制转换以及原码、反码、补码

一、二进制 其实我们经常能听到2进制、8进制、10进制、16进制这样的讲法&#xff0c;那是什么意思呢&#xff1f;其实2进制、8进制、10进制、16进制是数值的不同表⽰形式⽽已。 比如&#xff1a; 数值15的各种进制的表⽰形式&#xff1a; 15的2进制&#xff1a;1111 15的8进…

HBuilder X中uView UI框架的安装及使用

开发工具: HBuilder X 在最上方的工具中点击 插件安装 ——> 安装新插件 ——> 前往插件市场安装 在作者排行榜中找到 uView UI 选择该版本 然后点击下载并导入HBuilder X 然后选择你想导入的项目 在项目根目录中的main.js中&#xff0c;引入并使用uView的JS库&#xff…

Java基础面试题(五)

Java基础面试题&#xff08;五&#xff09; 文章目录 Java基础面试题&#xff08;五&#xff09;标识符和关键字的区别是什么&#xff1f;Java 语言关键字有哪些&#xff1f;自增自减运算符移位运算符continue、break 和 return 的区别是什么&#xff1f; 单行注释&#xff1a;…

【软件设计】基于SSM的334考研图书电子商务平台

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

msvcr120.dll找不到要怎么处理?电脑文件msvcr120.dll修复攻略

在使用基于Windows操作系统的计算机的日常过程中&#xff0c;用户可能会遇到多种程序错误&#xff0c;其中之一就是“找不到msvcr120.dll”或者“msvcr120.dll丢失”的系统提示。这个问题往往在启动某些程序时发生&#xff0c;很让人无可奈何。为了解决这个问题&#xff0c;重要…

【Linux系统编程】环境变量的组织方式

environ和getenv函数 在Linux中&#xff0c;environ是一个全局的外部变量&#xff0c;其类型为char**&#xff0c;存储着系统的环境变量。除了使用主函数中的第三个参数外&#xff0c;我们也可使用environ函数直接访问系统的环境变量。 注意&#xff1a;这里在代码内部使用envi…

Spring Boot多环境配置

Spring Boot的针对不同的环境创建不同的配置文件&#xff0c; 语法结构&#xff1a;application-{profile}.properties profile:代表的就是一套环境 1.需求 application-dev.yml 开发环境 端口8090 application-test.yml 测试环境 端口8091 application-pro…

如何给新华网投稿发稿?新华网的媒体发稿方法步骤

现如今&#xff0c;互联网已经成为了人们获取信息的主要途径&#xff0c;各大媒体网站也成为了发布自己作品的首选平台。其中&#xff0c;新华网作为中国最具影响力的新闻媒体之一&#xff0c;其内容覆盖面广、触及人群众多&#xff0c;因此&#xff0c;能够在新华网上发表文章…

Tuxera NTFS2024下载使用详细操作教程

你是否还在为Mac不能正常读写NTFS格式分区而感到苦恼呢&#xff1f;想要适合Mac系统使用来回转换磁盘格式又十分麻烦&#xff0c;这该怎么办呢&#xff0c;有了这款软件Tuxera ntfs就能马上帮你解决目前遇到的问题。 Tuxera NTFS2024最新免费版下载如下&#xff1a; https://…

htb monitored root方式其中的一种(仅作记录)

快下班时候审出来的&#xff0c;目前root的第5种方式 nagiosmonitored:~$ cat /usr/local/nagiosxi/scripts/backup_xi.sh #!/bin/bash # # Creates a Full Backup of Nagios XI # Copyright (c) 2011-2020 Nagios Enterprises, LLC. All rights reserved. #BASEDIR$(dirname …

CentOS使用docker本地部署StackEdit Markdown编辑器并实现公网访问

文章目录 1. docker部署Stackedit2. 本地访问3. Linux 安装cpolar4. 配置Stackedit公网访问地址5. 公网远程访问Stackedit6. 固定Stackedit公网地址 StackEdit是一个受欢迎的Markdown编辑器&#xff0c;在GitHub上拥有20.7k Star&#xff01;&#xff0c;它支持将Markdown笔记保…

Linux:软硬链接的概念与应用

文章目录 软链接和硬链接软链接的应用场景硬链接的应用场景当前目录和上级目录总结 本篇要探讨的主题是关于软硬链接的概念 在Linux系统链接文件中有两种&#xff0c;一种是硬链接&#xff0c;一种是软链接&#xff0c;那么本篇就基于上述的两种链接方式来进行一定的总结和拓展…

IOS-UIAlertController简单使用-Swift

UIAlertControlle时IOS的对话框控制器&#xff08;警报控制器&#xff09;&#xff0c;简单使用方法如下&#xff1a; 步骤都一样&#xff0c;先是创建UIAlertController&#xff0c;然后创建UIAlertAction&#xff0c;再将UIAlertAction添加到UIAlertController中&#xff0c;…