使用canvas2d实现环形进度条
发布于 4 年前 作者 rwei 3282 次浏览 来自 分享

考虑到环形进度条的需求很多,所以通过canvas实现了一个简易的环形进度条的组件

组件一共提供了6个属性,分别是

width 环形进度条的宽度,单位是rpx,环形进度条宽度和高度是一样的,这里只用设置width就行了

borderColor 环形进度条的边框颜色

borderWidth 环形进度条的边框宽度,单位是rpx

angle 环形进度条的旋转角度,单位是deg

duration 过渡时间,如果大于0,环形进度条将根据时间进行平滑绘制

startAngle 起点角度,默认为0,就是钟表12点的位置

angle 环形进度条的旋转角度

这个旋转角度的意思是终点角度相对于起点角度的值

如果startAngle为0,angle 为90,相当于绘制从0到90这一段的角度,

如果startAngle为90,angle为90,相当于绘制从90到180这一段的角度,

这样做的好处是可以直接通过angle的值判断绘制方向

angle如果大于0,就进行顺时针绘制

angle如果小于0,就进行逆时针绘制

git地址:https://github.com/newZhaoZilong/progress

代码片段:https://developers.weixin.qq.com/s/oEd12Kmx7hnB

1 回复
回到顶部