HarmonyOS-基于ArkUI（JS）的自定义圆形进度条

时间：2023-03-11 23:37:15 科技观察

了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言最近在开发FA项目中，遇到过这样的圆形进度条。参考开发文档使用canvas封装了一个组件，是基于JS扩展的类Web开发范式组件中的基础组件。组件介绍圆形进度条组件在开发中经常用到，形式多样。参考canvas文档做一个简单的，支持各种属性调整。有需要的可以参考。代码演示默认正常显示显示百分比文本自定义宽度自定义颜色自定义渐变色自定义背景色自定义drawingdirection注意：父子组件属性使用：camelCase（驼峰式大小写）prop名称，从外部父组件传递参数时需要使用kebab——case（破折号分隔命名）形式，即属性compProp被父组件引用时，需要转换为comp-prop。APIprops参数说明类型默认值percent进度条百分比Number50colorNum颜色值，1：纯色2：渐变色String-bgWidth背景圆宽度Number10fWidth动态圆宽度Number10istext显示百分比文本Booleanfalsedirection绘制方向，顺时针false/逆时针trueBooleanfalsebgColor背景圆ColorString'#cccccc'部分代码展示1、html部分

2.js部分相关api引用名称类型默认值说明lineCapstring'butt'指定线条端点的样式，可选值为：-'butt'：线端点以正方形结束。-'round'：线端点以圆圈结尾。-'square':线的末端以正方形结束，在该样式中将添加一个长度与线段粗细相同且为线段粗细一半的矩形。strokeStyle|CanvasGradient|CanvasPattern-设置描边的颜色。-当类型为时，表示设置描边使用的颜色。-当type为CanvasGradient时，代表一个渐变对象，使用createLinearGradient方法创建。-当type为CanvasPattern时，使用createPattern方法创建。fontstring'normalnormal14pxsans-serif'设置文字绘制时的字体样式。语法：ctx.font='font-sizefont-family'-font-size（可选），指定字号和行高，单位只支持px。-font-family（可选），指定字体系列。语法：ctx.font='font-stylefont-weightfont-sizefont-family'-font-style（可选），用于指定字体样式，支持以下样式：'normal'，talic。-font-weight（可选），用于指定字体的粗细，支持以下类型：'normal','bold','bolder','lighter',100,200,300,400,500,600,700,800,900.-font-size（可选），指定字号和行高，单位只支持px。-font-family（可选），指定字体系列，支持以下类型：'sans-serif'、'serif'、'monospace'。封装组件在onshow()循环中绘制，无法显示动画图片。修改为onpageshow()绘制成功，canvas绘制延迟200毫秒在页面显示后绘制。//初始绘制onPageShow(){setTimeout(()=>{constdarw_el=this.$refs.canvasbox;console.info(darw_el)//颜色值不支持#ccc#f60十六进制颜色不支持缩写this。circleFun(darw_el,this.colorNum,this.percent,this.bgWidth,this.fWidth,this.bgColor,this.textColor,this.istext,this.direction,this.startC,this.endC,this.colorC)},200)},获取canvas绘制的图片的宽高，无法直接获取，需要使用getBoundingClientRect()方法；此处绘制的中心点以画布的中点为中心。//定义变量varrect=draw_item.getBoundingClientRect();varcontext=draw_item.getContext('2d');varcenter_x=(rect.width)/2;varcenter_y=(rect.height)/2;varrad=(数学.PI*2)/100;变量速度=0；绘制圆的半径主要与画布的宽度和线圈的宽度有关。这里，宽度没有作为props属性值传入。使用modification直接修改画布大小和半径线圈的宽度减去画布宽度的一半，结束形状的值作为参考。//在函数backCircle(){context.save()context.beginPath()context.lineWidth=lineWidth_b//设置线宽varradius=center_x-context.lineWidth//设置半径context.lineCap='round'//结束形状context.strokeStyle=color_b//线条颜色context.arc(center_x,center_y,radius,0,Math.PI*2,false)context.stroke()context.closePath()context.restore()}进度条的填充颜色可以自定义。colornums的值为1，对应Color_C的颜色值，colornums的值为2，为渐变色。需要传入两个颜色值，起始颜色start_C和结束颜色end_C。//画前面圆functionfoceCircle(n){context.save()//context.strokeStyle=color_f//判断圆的颜色context.lineWidth=lineWidth_f;//前面动态圆宽context.lineCap='round';//结束形状varradius=center_x-context.lineWidth;//radiuscontext.beginPath()if(colornums==1){context.strokeStyle=Color_C}if(colornums==2){//创建渐变对象，渐变起点和渐变终点letg=context.createLinearGradient(0,90,90,0);g.addColorStop(0,start_C);//添加颜色点g.addColorStop(1,end_C);//添加颜色点context.strokeStyle=g;//使用渐变对象作为圆环的颜色}//用来绘制圆弧context.arc(x坐标,y坐标,半径,起始角,结束角,顺时针/逆时针)//context.arc(center_x,center_y,radius,-Math.PI/4,-Math.PI/4+n*rad,direct)context.arc(center_x,center_y,radius,Math.PI/20,n*rad,direct)context.stroke()context.closePath()context.restore()}文本绘制相关api参考，组件百分比文本显示可选，需要显示时传入istext字段即可。//绘制文本functiontext(n){context.save();context.fillStyle=color_f;//文本颜色varfont_size=20;//字体大小context.font=font_size+'pxHelvetica'//字体大小和文本形状vartext_width=context.measureText(n.toFixed(0)+'%').width;//文字宽度context.fillText(n.toFixed(0)+'%',center_x-text_width/2,center_y+font_size/2)context.restore()}动画结束时动态增加文本百分比。这个块有一个小问题。文字动态增加过程中，会出现绘制闪烁的问题，目前尚未解决。但不影响正常使用。后续更新会陆续更新。//执行动画(functiondrawFrame(){if(speed<=percent){requestAnimationFrame(drawFrame)}else{returnfalse}context.clearRect(0,0,rect.width,rect.height)//context.globalCompositeOperation="copy"backCircle();//控制百分比文本显示和隐藏if(textshow){text(speed);}foceCircle(speed);if(speed>=percent){speed++}else{speed+=1}})()总结本自定义组件使用canvas绘制，参考官方api进行使用练习，同时还结合了组件通信，父子组件直接传值。缺点是不支持拖动事件，事件部分没有添加。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。