使用canvas2d实现环形进度条
考虑到环形进度条的需求很多,所以通过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,就进行逆时针绘制