弧形进度条实现,有人知道方法吗?

设备绑定过程中需要展示弧形进度条progress组件不能设置为弧形不满足需求,如果使用画布组件,属性动画和显式动画都是对组件的通用属性做变化(长宽、旋转等),这种弧形进度条的动画该如何设置?


HarmonyOS
2024-05-26 11:17:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
honda1999

使用的核心API

Canvas画布组件

核心代码解释

用画布画弧形的进度条

test=():void=>{ 
    let offContext = this.offCanvas.getContext("2d", this.settings) 
    offContext.lineCap = "round" 
    offContext.lineWidth=8 
    offContext.beginPath() 
    offContext.arc( 
      100, 
      75, 
      50, 
      (225-90) * Math.PI / 180, 
      (135-90) * Math.PI / 180 
    ) 
    offContext.strokeStyle = "#ff8c909b" 
    offContext.stroke() 
  
    offContext.beginPath() 
    offContext.arc( 
      100, 
      75, 
      50, 
      (225 - 90) * (Math.PI / 180), 
      this.radianTest===0?(135 - 90) * (Math.PI / 180):(135 - 270 * (1 -this.radianTest) - 90) * (Math.PI / 180), 
  
    ) 
    offContext.strokeStyle = this.color 
    offContext.stroke() 
    let image = this.offCanvas.transferToImageBitmap() 
    this.context.transferFromImageBitmap(image) 
  }

实现效果

适配版本信息

SDK:OpenHarmony-4.1.6.8

IDE:DevEco Studio 4.1.1.600

分享
微博
QQ
微信
回复
2024-05-27 11:02:48
相关问题
如何实现带刻度的进度条
55浏览 • 1回复 待解决
如何实现带图片的进度条
394浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
52浏览 • 1回复 待解决
服务卡片的进度条如何停止动画
7470浏览 • 1回复 待解决
app切换到后台时进度条的处理的问题
1555浏览 • 0回复 待解决
怎么在进度条更新的时候刷新页面?
3509浏览 • 1回复 待解决
视频进度滑动的三种实现方式
391浏览 • 1回复 待解决
如何实现振动,有人知道
713浏览 • 2回复 待解决
简单的绘图板有人知道方法
346浏览 • 1回复 待解决
图片压缩并保存方法有人知道
349浏览 • 0回复 待解决
有人知道如何实现图文混排
372浏览 • 1回复 待解决
如何实现翻页功能,有人知道
672浏览 • 1回复 待解决
热重载该如何实现有人知道
360浏览 • 1回复 待解决
如何实现http长连接,有人知道
630浏览 • 1回复 待解决
如何实现防截屏功能,有人知道
836浏览 • 1回复 待解决
有人知道关于页demo
419浏览 • 1回复 待解决
如何发送短信,有人知道?
673浏览 • 1回复 待解决
如何保存faultLogger ,有人知道
178浏览 • 1回复 待解决
有人知道JS menu如何隐藏
3221浏览 • 1回复 待解决