android 自定义八边形进度条

news2024/11/22 18:26:11

自定义八边形动画效果图如下图片: ![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();
    }
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言经典练习3——[NOIP2008]ISBN号码与圣诞树

C语言经典练习3——[NOIP2008]ISBN号码与圣诞树

前言 在学习C语言的过程中刷题是很重要的&#xff0c;俗话说眼看千遍不如手动一遍因为在真正动手去刷题的时候会暴露出更多你没有意识到的问题接下来我就为各位奉上两道我认为比较有代表性的题 1. [NOIP2008]ISBN号码 1.1 题目描述 每一本正式出版的图书都有一个ISBN号码与之对…
阅读更多...
BKP备份寄存器读取

BKP备份寄存器读取

1.简介&#xff1a; BKP&#xff08;Backup&#xff09;备份寄存器是一种特殊的功能寄存器&#xff0c;用于存储某些设备的备份数据。这些数据通常是非常重要的&#xff0c;因此需要定期备份以防止意外丢失。 具体来说&#xff0c;BKP寄存器可以用于以下几种情况&#xff1a;…
阅读更多...
100天精通鸿蒙从入门到跳槽——第6天：TypeScript 知识储备：类

100天精通鸿蒙从入门到跳槽——第6天：TypeScript 知识储备：类

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…
阅读更多...
保留图片原画质图片无损放大

保留图片原画质图片无损放大

在数字时代&#xff0c;图片的放大和缩放是常见的操作。然而&#xff0c;传统的图片放大方法往往会导致图片质量的损失&#xff0c;使得图片的细节和清晰度降低。为了解决这个问题&#xff0c;水印云推出了一项新的功能——无损放大&#xff0c;让你可以在不损失图片质量的情况…
阅读更多...
精选100 GPTs深度解析专题

精选100 GPTs深度解析专题

精选100 GPTs深度解析专题 背景 1月10日&#xff0c;GPT应用商店&#xff08;GPT Store&#xff09;的正式上线&#xff0c;GPT技术的应用已经呈现爆炸性增长。目前&#xff0c;市场上已经出现了超过300万种GPTs&#xff0c;应用领域涵盖图像生成、写作、效率提升、研究分析、编…
阅读更多...
部署Sqli-labs靶场：一篇文章解析全过程

部署Sqli-labs靶场：一篇文章解析全过程

部署Sqli-labs靶场&#xff1a;一篇文章解析全过程 0x01 前言 Sqli-labs是一个在线的SQL注入练习平台&#xff0c;提供了一系列关卡供用户练习SQL注入的技巧和防范方法。在这个平台上&#xff0c;用户可以尝试注入攻击&#xff0c;并测试自己的技能和工具&#xff0c;同时也可…
阅读更多...
python数字图像处理基础（六）——模板匹配、直方图

python数字图像处理基础（六）——模板匹配、直方图

目录 模板匹配概念单对象模板匹配多对象模板匹配 直方图1.查找直方图2.绘制直方图3.掩膜的应用 模板匹配 概念 模板匹配和卷积原理很像&#xff0c;模板在原图像上从原点开始滑动&#xff0c;计算模板与图像被模板覆盖的地方的差别程度&#xff0c;这个差别程度的计算方法在o…
阅读更多...
CS8370错误，这是由于使用了C# 7.3中不支持的功能

CS8370错误，这是由于使用了C# 7.3中不支持的功能

目录 背景: 第一种方法: 第二种办法: 背景: 在敲代码的时候&#xff0c;程序提示报错消息提示:CS8370错误&#xff0c;那么这是什么原因导致的&#xff0c;这是由于使用了C# 7.3中不支持的功能&#xff0c;不支持该功能&#xff0c;那就是版本太低我们就需要升级更高的版本&…
阅读更多...
DAY03_Spring—自动装配注解模式优化XML文件

DAY03_Spring—自动装配注解模式优化XML文件

目录 1 Spring注解模式1.1 自动装配1.1.1 说明1.1.2 配置规则 1.2 注解模式1.2.1 关于注解的说明1.2.2 注解使用原理1.2.3 编辑配置文件1.2.4 属性注解 1.3 实现MVC结构的纯注解开发1.3.1 编写java代码1.3.2 编辑xml配置文件1.3.3 编写测试类1.3.4 关于注解说明1.3.5 关于Sprin…
阅读更多...
python对自动驾驶进行模拟

python对自动驾驶进行模拟

使用了 Pygame 库来创建一个简单的游戏环境,模拟了一辆自动驾驶汽车在道路上行驶。汽车的位置和速度通过键盘控制&#xff0c;可以左右移动和加速减速。道路的宽度和颜色可以根据需要进行调整。 import pygame import random # 游戏窗口大小 WINDOW_WIDTH 800 WINDOW_HEIG…
阅读更多...
3dmax中怎么在模型上开洞?

3dmax中怎么在模型上开洞?

3dmaxS是Autodesk公司开发的基于PC系统的三维动画渲染和制作软件。我们可以使用它来做各种模型。那么怎么在模型上开洞呢&#xff1f;我们一起来看看吧&#xff01; 1、首先我们打开我们的3damx&#xff0c;这里面我使用的版本为3damxs2012,虽然版本可能各不相同。但是功能并没…
阅读更多...
原生SSM整合(Spring+SpringMVC+MyBatis)案例

原生SSM整合(Spring+SpringMVC+MyBatis)案例

SSM框架是Spring、Spring MVC和MyBatis三个开源框架的整合&#xff0c;常用于构建数据源较简单的web项目。该框架是Java EE企业级开发的主流技术&#xff0c;也是每一个java开发者必备的技能。下面通过查询书籍列表的案例演示SSM整合的过程. 新建项目 创建文件目录 完整文件结…
阅读更多...
拼多多无货源中转仓项目真的靠谱吗？发展前景如何？

拼多多无货源中转仓项目真的靠谱吗？发展前景如何？

阿阳最近一直在关注无货源电商这一块&#xff0c;尤其是拼多多无货源中转仓&#xff0c; 现如今也有了自己的运营团队和交付团队&#xff0c;整体来看这个项目还算不错&#xff01; 说实话&#xff0c;在考察这个项目的时候&#xff0c;看到市面上很多人在做&#xff0c;包括我…
阅读更多...
JavaScript 类型判断及类型转换规则

JavaScript 类型判断及类型转换规则

文章目录 JavaScript 类型及其判断使用 typeof 判断类型使用 instanceof 判断类型使用 constructor 和 Object.prototype.toString 判断类型JavaScript 类型及其转换JavaScript 函数参数传递cannot read property of undefined 问题解决方案分析一道网红题目JavaScript 类型判断…
阅读更多...
【GAMES101】Lecture 08 着色-Blinn-Phong反射模型

【GAMES101】Lecture 08 着色-Blinn-Phong反射模型

目录 Blinn-Phong反射模型-高光 Blinn-Phong反射模型-环境光照 Blinn-Phong反射模型 Blinn-Phong反射模型-高光 我们在lecture7的时候讲了这个Blinn-Phong反射模型的漫反射部分&#xff0c;现在我们继续讲Blinn-Phong反射模型的高光部分 这个高光是怎么产生的呢&#xff0…
阅读更多...
} expected.Vetur(1005)

} expected.Vetur(1005)

typescript TS 错误码大全&#xff01;收藏了 - 环信 } expected.Vetur(1005) 没有补齐} 虽然他给的是最后代码出错了&#xff0c;但可以看看之前的代码有没有红色的{&#xff0c;补齐即可以
阅读更多...
Air780E开发板开发环境搭建

Air780E开发板开发环境搭建

开发板原理图 开发软件 下载网站 https://luatos.com/luatools/download/last 使用教程 烧录教程 - LuatOS 文档 开发流程 首先下载最新版本的Luatools 然后新建一个Luatools文件夹&#xff0c;将下载的exe文件放入其中后&#xff0c;再打开exe文件&#xff08;会生成目…
阅读更多...
MB51选择屏幕与报表增强

MB51选择屏幕与报表增强

1、文档说明 如之前文档《MIGO新增页签增强》&#xff0c;在MIGO中增强自定义字段&#xff0c;那么在查询MB51时&#xff0c;想通过自定义字段进行筛选&#xff0c;并将数据展示到报表中&#xff0c;就需要对MB51进行增强。 此处需要说明&#xff0c;文档 《MIGO新增页签增强…
阅读更多...
Leetcode刷题笔记题解（C++）：200. 岛屿数量

Leetcode刷题笔记题解（C++）：200. 岛屿数量

思路&#xff1a;利用深度优先搜索的思路来查找1身边的1&#xff0c;并且遍历之后进行0替换防止重复dfs&#xff0c;代码如下所示 class Solution { public:int numIslands(vector<vector<char>>& grid) {int row grid.size();int col grid[0].size();int n…
阅读更多...
【从0上手cornerstone3D】如何加载nifti格式的文件

【从0上手cornerstone3D】如何加载nifti格式的文件

在线演示 支持加载的文件格式 .nii .nii.gz 代码实现 npm install cornerstonejs/nifti-volume-loader// ------------- 核心代码 Start------------------- // 注册一个nifti格式的加载器 volumeLoader.registerVolumeLoader("nifti",cornerstoneNiftiImageVolu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023