HarmonyOS是否有刻度控件

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

刻度控件可以使用Canvas画布去实现,使用arc描绘弧度,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-canvas-path2d-V5#arc

类似demo:

// xxx.ets
@Entry
@Component
struct Arc {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  @State @Watch('onCountUpdated') radianTest: number = 0
  @State color: string = "#ff8c909b" //"#ff144cd2"
  onCountUpdated(): void {
    this.test()
  }
  test(): void {
    let offContext = this.offCanvas.getContext("2d", this.settings)
    offContext.lineCap = "round"
    offContext.lineWidth = 8
    offContext.beginPath()
    offContext.arc(
      150, 20, 150, 70, 150
    )
    offContext.strokeStyle = "#ff8c909b"
    offContext.stroke()
    let image = this.offCanvas.transferToImageBitmap()
    this.context.transferFromImageBitmap(image)
  }
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(
          this.test
        )
      Button('test')
        .onClick(() => {
          this.color = "#ff144cd2"
          this.radianTest = Number(this.radianTest + 0.01)
          if (this.radianTest > 1) {
            this.radianTest = 0
          }
        })
    }
    .width('100%')
    .height(500)
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 是否全局loading这种控件
429浏览 • 1回复 待解决
HarmonyOS table表格控件
52浏览 • 1回复 待解决
如何实现带刻度的进度条?
710浏览 • 1回复 待解决
Tab控件切换问题哪些?
274浏览 • 1回复 待解决
访问控制的系统控件哪些
432浏览 • 1回复 待解决
HarmonyOS 是否reflection机制
39浏览 • 1回复 待解决