HarmonyOS Canvas 绘画的内容如何跟随外部的状态变动重新绘制？

export enum BAWStyle {White, Black}

@Component
export struct CaptureButton {
  @Prop bawStyle: BAWStyle = BAWStyle.White
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Canvas(this.context)
      .width('100%')
      .height('100%')
      .backgroundColor('#F5DC62')
      .onReady(() => {
        this.onDraw()
      })
  }

  private onDraw() {
    this.drawOuterCircle()
    this.drawInnerCircle()
  }

  private drawOuterCircle() {
    const width = this.context.width
    const height = this.context.height
    const diameter = Math.min(width, height)
    const lineWidth = 4 / 80 * diameter
    this.context.beginPath()
    this.context.arc(
      width / 2,
      height / 2,
      diameter / 2 - lineWidth / 2,
      0,
      2 * Math.PI
    )
    this.context.strokeStyle = this.bawStyle == BAWStyle.White ? '#2E5BFF' : Color.White
    this.context.lineWidth = lineWidth
    this.context.stroke()
  }

  private drawInnerCircle() {
    const width = this.context.width
    const height = this.context.height
    const diameter = Math.min(width, height) * 64 / 80
    this.context.beginPath()
    this.context.arc(
      width / 2,
      height / 2,
      diameter / 2,
      0,
      2 * Math.PI
    )
    this.context.fillStyle = this.bawStyle == BAWStyle.White ? '#2E5BFF' : Color.White
    this.context.lineWidth = 0
    this.context.fill()
  }
}

这段代码是我项目中要绘制一个按钮，但我需要他跟随外部的 BAWStyle 的变化，按钮重新绘制，可以绘制为不同颜色。

HarmonyOS

Excelsior_abit

2024-12-25 07:25:53

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

可以使用CanvasRenderingContext2D接口， CanvasRenderingContext2D接口支持在下一帧刷新绘制内容，因此只要调用了这个接口，系统会在下一帧自动刷新绘制内容。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-42-V5

canvas不会根据数据变化自行重绘，需要调用canvas的clearRect方法清空画布后再重新绘制。同时，需要使用@watch监听更新的那个变量，在更新后触发方法重新绘制canvas画布。可以参考以下代码实现：

@Entry
@CustomDialog
export struct AudioRecorderDialog {
  controller: CustomDialogController
  @State @Watch('draw')
  volumeList: number[] = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private timer: number = 0;

  aboutToAppear() {
    this.volumeList.fill(Math.floor(Math.random() * 100) + 1);
  }

  aboutToDisappear() {
    clearInterval(this.timer);
  }

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('50%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.draw()
        })
      Text(this.volumeList.toString())
        .onClick(() => {
          this.timer = setInterval(() => {
            let tem = Math.floor(Math.random() * 100) + 1;
            this.volumeList.shift();
            this.volumeList.push(tem);
            console.error('licheeng', '点击执行 ' + this.volumeList);
          }, 1000)
        })
        .height(50)
    }
  }

  draw() {
    console.log('demoTest :' + 's')
    // this.context.clearRect()
    for (let index = 1; index < this.volumeList.length; index++) {
      let element = this.volumeList[index];
      this.context.fillRect(index * 5, (100 - element) / 2, 1, element);
    }
  }
}

2024-12-25 09:53:25

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Canvas 绘画的内容如何跟随外部的状态变动重新绘制？

订阅鸿蒙技术特刊，精选内容抢先看