HarmonyOS canvas是否有定时刷新的函数？

Question

如题：HarmonyOS canvas是否有定时刷新的函数？

Answer 1

Canvas控件自身没有刷新绘制区域的api接口。当前刷新内容的方案为：@State装饰的变量使用@Watch监听，变量变化时触发自定义方法重新绘制。

@Watch 参考链接: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-watch-V5

可以如下参考demo：

const VOLUME_DEFAULT: number = 5600;
const VOLUME_LIST_LENGTH: number = 10;
const VOLUME_MAX_HEIGHT: number = 16;
const VOLUME_MIN_HEIGHT: number = 10;
const VOLUME_WIDTH: number = 5;
const VOLUME_SPACE_WIDTH: number = 10;

@Preview
@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')
    for (let index = 1; index < this.volumeList.length; index++) {
      let element = this.volumeList[index];
      this.context.fillRect(index * 5, (100 - element) / 2, 1, element);
    }
  }
}