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

设备绑定过程中需要展示弧形进度条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
相关问题
HarmonyOS 怎样实现进度条
1379浏览 • 1回复 待解决
实现一个发送进度条通知的方法
1171浏览 • 1回复 待解决
HarmonyOS 进度条样式
1195浏览 • 1回复 待解决
如何实现带图片的进度条
1719浏览 • 1回复 待解决
如何实现带刻度的进度条
1624浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
2213浏览 • 1回复 待解决
HarmonyOS 多彩色进度条展示
681浏览 • 1回复 待解决
基于Progress组件的进度条
1843浏览 • 1回复 待解决
HarmonyOS 环状渐变色进度条
1137浏览 • 1回复 待解决
HarmonyOS 多图片合集轮播+进度条
850浏览 • 1回复 待解决
服务卡片的进度条如何停止动画
10271浏览 • 1回复 待解决
如何实现一个月食样式的进度条
1040浏览 • 1回复 待解决
如何实现振动,有人知道
2325浏览 • 2回复 待解决
简单的绘图板有人知道方法
1628浏览 • 1回复 待解决
图片压缩并保存方法有人知道
1663浏览 • 1回复 待解决
如何实现镂空效果,有人知道?
1359浏览 • 1回复 待解决