android 锥形进度条,canvas锥形进度条怎么渐变
从一个渐变圆角进度条浅出画一个圆
开始
这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了
echarts
然后上echarts试了一下发现实现不出来了
设计图这边采用的是锥形渐变,而echarts只有线性渐变和径向渐变。
css
然后准备换种方案,css就有锥形渐变,然后通过conic-gradient加上mask画出了一个渐变的环形然后可以再通过剪裁实现出进度的展示。
但是存在两个问题,一个是conic-gradient属性兼容性不好ie和火狐都不支持,二个是后来发现了还存在一个需求进度条的两端需要有圆角,然后这种实现方式就不行了。
其实在写这篇文章的时候才想到一个方法就是在两端加上两个半圆形,不过得计算半圆形的位置。
Canvas & SVG
在我的理解中在页面上作图总共有四种方式。
dom+css
Canvas
SVG
WebGL
WebGL是一头雾水还是试试Canvas和SVG吧,因为更熟悉Canvas一些,我这边就采用Canvas来试试。
Canvas可以轻松的实现圆角和环形,但是他的api里面居然没有锥形渐变
然后就想着尝试手动来实现一个锥形渐变,然后查阅资料看到了一篇文章手把手教你画圆锥渐变,就是相当于画圆嘛,我们可以通过一条线一条线的画从而画出一个圆,然后把两端渐变的颜色通过计算找到中间画圆的每一条线的颜色组合起来就是一个渐变的效果了。
然后问题就是给你两个色值怎么计算中间的线段的颜色,其实对于rgba的颜色我们可以看到他是由四个数字组成的,那我把这四个数字分别求出四组长度相同且组内间隔相同的中间值那就可以得到颜色的中间值了,然后在搭配上张老师硬核的色值转换JS HEX十六进制与RGB,HSL颜色的相互转换那就可以实现出我们想要的效果了。
通过一个开始颜色和一个结束颜色,默认是rgba的颜色,num是分段数,就可以求出中间每一段的颜色了
// 把颜色分段
const beginColor = begin.slice(5, -1).split(',').map(item => Number(item))
const endColor = end.slice(5, -1).split(',').map(item => Number(item))
// 分段后的颜色储存在这个数组
const middleColor = [[], [], [], []]
// 循环rgba四种
beginColor.forEach((item, index) => {
// 当前的值每段颜色之间的间隔
const differ = (endColor[index] - item) / (num - 1)
// 循环分段数的次数
for(let i = 0; i< num; i++) {
// 每次加上这个间隔
middleColor[index].push((item + differ * i).toFixed(2))
}
})
console.log(middleColor)
console.log(num)
然后绘制的话就是一段一段的画了,麻烦的地方就是计算每次从多少的角度画到多少的角度
for(let i = 0; i< num; i++) {
ctx.beginPath()
// 这里是每次绘制的过程
// 每次绘制一段小圆弧
// 最后一段只需要画一段就好
if(i === num - 1)
ctx.arc( 150 * dpr,150 * dpr, 100 * dpr, (Math.PI * 2 * value) / num * i, (Math.PI * 2 * value) / num * (i + 1));
else
ctx.arc( 150 * dpr,150 * dpr, 100 * dpr, (Math.PI * 2 * value) / num * i, (Math.PI * 2 * value) / num * (i + 2));
ctx.lineWidth = 60;
// ctx.lineCap = "round";
ctx.strokeStyle= `rgba(${middleColor[0][i]}, ${middleColor[1][i]}, ${middleColor[2][i]}, ${middleColor[3][i]})`;
ctx.stroke();
ctx.closePath()
}
结果非常的顺利,就是自己想要的结果,具体怎么一段一段的画,怎么求出颜色的中间值看这里
优化
其实把绘制的过程放慢看
就是这个过程,每次画一段,每段不同的颜色组合起来就是一个渐变色,然后分段数再加多一点就会靠上去很流畅。
在完成后发现了几个问题,首先是在分段数很少的时候就会出现一块一块的间隔
就像这样,我大概分析了一下,猜测这个间隔出现的原因应该是我计算每一段的角度的时候肯定有除不尽的,我就四舍五入了,应该就会产生一些小间隔。
然后我就觉得把分段数提高应该就会好一些,然后就发现分段数高间隔会生成类似于摩尔纹的东西
然后就开始思考怎么去消除,最后想到了一种方案就是在每次绘制的时候绘制两段的长度,然后移动只移动一段的长度,就会下一段覆盖在上一段,就不会有间隔了,然后颜色渐变也还是一段一段的不会有影响。
然后还有一个问题就是有锯齿,不清楚,解决方案也很简单,就是把你的画布放大指定倍数,然后半径也放大同样的倍数,最后dom的高宽不变,就会让绘制的图形更加的清晰。
android 锥形进度条,canvas锥形进度条怎么渐变相关推荐
- android 锥形进度条,canvas锥形渐变进度条
从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
- android canvas_Android仿IOS11 控制中心进度条
这篇文章我们就用简单的自定义View实现类似iOS11的控制中心里边出现的很新颖的进度条. 先看一下目标效果图,以及最后的实现效果: 自定义属性分析 名字 释义 progressMax 最大值 pro ...
- Android自定义波浪加载圆形进度条——(自定义控件 一)
2019独角兽企业重金招聘Python工程师标准>>> 自定义控件-- 波浪形状圆形进度加载 时间管理的基础是精力管理,精力的高低.正负分影响到我们的效率 而时间是无法管理的,能够管 ...
- 【Android 应用开发】 自定义 圆形进度条 组件
转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...
- Android自定义滑动进度条,Android自定义View实现圆形水波进度条
每次听到某大牛谈论自定义View,顿时敬佩之心,如滔滔江水连绵不绝,心想我什么时候能有如此境界,好了,心动不如行动,于是我开始了自定义View之路,虽然过程有坎坷,但是结果我还是挺满意的.我知道大牛还 ...
- Android可触摸圆形进度条,Android 可滚动圆形进度条 滑块和进度在进度条上面跟着滚动...
Android 可滚动圆形进度条 滑块和进度在进度条上面跟着滚动.package com.example.test; import android.content.Context; import an ...
- android 安全检测 动画,Android仿小米安全中心检测进度条效果
模仿小米安全中心检测效果 废话少说,咱们先上效果图: 这个效果的使用场景并不多,主要是各种检测的时候,比如垃圾清理,手机安全检测, 当然如果你不嫌弃这个效果丑, 也可以用作进度条.哈哈. 下面说点干货 ...
- android图标随着进度条动画,Android开发之ProgressBar字体随着进度条的加载而滚动...
在网上翻阅了很多关于ProgressBar滚动效果,但是始终没有找到适合项目中的这种效果,故自己写这篇文章,记录一下写作过程,给大家做一个参考.先看下最终效果效果图 我这里用的是LICEcap软件录制 ...
- Canvas之进度条的制作(矩形,圆环)
Canvas之进度条的绘制 基本进度条的绘制 1.矩形进度条 关键语法 获取画笔 var ctx=document.getElementById("id").getContext( ...
最新文章
- C/C++中传值和传地址(引用)
- javascript forEach无法break,使用every代替
- 新闻发布项目——接口类(newsTbDao)
- [LeedCode]921. 使括号有效的最少添加
- 2021.08.28-MMsegmentation0.16.0+Cuda10.1+Ubuntu16.04+Pytorch1.8环境安装
- asp.net C#绘制太极图
- H5视频播放demo
- OGNL表达式学习笔记
- java 工作流框架都有哪些_java工作流框架有哪些?哪个比较好?
- 计算机桌面视频录制,电脑上怎么录制屏幕上的视频?
- QT界面怎么让控件跟随窗口大小变化
- s20赛季服务器维护,王者荣耀S20赛季什么时候结束 S20赛季具体结束日期
- 【2019 CSP-JのT4】[洛谷P5663]加工零件【最短路 · 变式】
- OpenHarmony 3.1Release 电话功能演示—基于润和DAYU200开发套件
- mysql insert 阻塞_insert遭遇阻塞
- Linux下笔记本禁用触摸板
- X~N(0,1),如何求E(X^2),E(X^4),E(X^n)
- springboot毕设茶会微电影评价系统37iza(java+VUE+Mybatis+Maven+Mysql)
- Linux中查看二进制文件
- 11. Django 2.1.7 MVT模型示例 - 查询数据,返回渲染模板数据