HarmonyOS Canvas如何触发重绘

Canvas(this.renderContext)
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  .width('100%')
  .height('100%')
  .backgroundColor(Color.White)
  .padding(this.calcPadding(this.isValidate))
  .onReady(() => {
    this.renderContext.....
  })

Canvas组件在onReady中可以进行初次绘制,后续用户交互以后,比如移动、点击、缩放等操作之后,我需要将Canvas组件进行重新绘制,请问该如何触发?或者有其他解决方案也可以

HarmonyOS
2024-12-20 17:48:22
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

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')
  }
}
分享
微博
QQ
微信
回复
2024-12-20 19:22:44
相关问题
HarmonyOS 如何Canvas
368浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制?
1286浏览 • 1回复 待解决
HarmonyOS websocket断网后如何
543浏览 • 1回复 待解决
HarmonyOS ArkTS数组去
343浏览 • 1回复 待解决
HarmonyOS Canvas如何重置clip
482浏览 • 1回复 待解决
HarmonyOS Canvas如何设置圆角
347浏览 • 1回复 待解决
HarmonyOS 如何使用Canvas画扇形
558浏览 • 1回复 待解决
HarmonyOS Canvas绘制内容如何更新
303浏览 • 1回复 待解决
HarmonyOS 如何使用canvas绘制虚线
245浏览 • 1回复 待解决
如何实现ArrayList的删除、去等功能
805浏览 • 1回复 待解决