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

设备绑定过程中需要展示弧形进度条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
相关问题
如何实现带图片的进度条
350浏览 • 1回复 待解决
服务卡片的进度条如何停止动画
7348浏览 • 1回复 待解决
app切换到后台时进度条的处理的问题
1432浏览 • 0回复 待解决
怎么在进度条更新的时候刷新页面?
3363浏览 • 1回复 待解决
视频进度滑动的三种实现方式
342浏览 • 1回复 待解决
图片压缩并保存方法有人知道
308浏览 • 0回复 待解决
简单的绘图板有人知道方法
321浏览 • 1回复 待解决
如何实现翻页功能,有人知道
571浏览 • 1回复 待解决
有人知道如何实现图文混排
339浏览 • 1回复 待解决
热重载该如何实现有人知道
306浏览 • 1回复 待解决
如何实现http长连接,有人知道
448浏览 • 1回复 待解决
如何实现防截屏功能,有人知道
725浏览 • 1回复 待解决
SnapShot定位,有人知道怎么处理
375浏览 • 1回复 待解决
有人知道JS menu如何隐藏
3079浏览 • 1回复 待解决
如何跳出ForEach,有人知道
590浏览 • 1回复 待解决
有人知道社区怎么预约直播
1244浏览 • 1回复 已解决
如何保存faultLogger ,有人知道
136浏览 • 1回复 待解决
如何发送短信,有人知道?
551浏览 • 1回复 待解决
taskpool 使用问题,有人知道
388浏览 • 1回复 待解决