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

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


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

使用的核心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
相关问题
如何实现带刻度的进度条
650浏览 • 1回复 待解决
实现一个发送进度条通知的方法
372浏览 • 1回复 待解决
如何实现带图片的进度条
797浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
742浏览 • 1回复 待解决
基于Progress组件的进度条
523浏览 • 1回复 待解决
服务卡片的进度条如何停止动画
8826浏览 • 1回复 待解决
如何实现一个月食样式的进度条
346浏览 • 1回复 待解决
app切换到后台时进度条的处理的问题
2582浏览 • 0回复 待解决
怎么在进度条更新的时候刷新页面?
4670浏览 • 1回复 待解决
图片压缩并保存方法有人知道
804浏览 • 0回复 待解决