Canvas绘制内容如何动态更新

Canvas组件只有onReady方法,只能在初始化的时候去绘制,如何动态的通过数据变化去进行绘制。

HarmonyOS
2024-05-23 23:26:07
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
妙蛙菜籽油

在声明式语法中是数据驱动UI进行刷新,可以将变化的数据通过@Watch监听,同时绑定一个自己封装的draw()方法,当数据刷新时就会调用Watch绑定的方法执行绘制逻辑。

参考代码:

@Entry 
@Component 
struct CanvasDemo { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  @State @Watch('draw')content: string = "" 
   
  draw() { 
    this.context.clearRect(0, 0, 200, 200) // 清理画布内容 
    this.context.fillText(this.content, 50, 50) // 重新填充 
  } 
  
  build() { 
    Column() { 
      Canvas(this.context) 
        .width('100%') 
        .height('25%') 
        .backgroundColor('#F5DC62') 
        .onReady(() => { 
          //可以在这里绘制内容。 
          this.context.font = '55px sans-serif' 
          this.context.fillText(this.content, 50, 50) 
        }) 
      TextInput({ 
        text:$$this.content 
      }) 
    } 
    .borderColor('#31525B') 
    .borderWidth(12) 
    .width('100%') 
    .height('100%') 
  } 
}

注意:

只有组件的属性变化才会刷新UI,如果只是某个方法体中有状态变量的刷新,并不会刷新UI,比如如果不用@Watch装饰content,则content的变化不会被Canvas监听到。

分享
微博
QQ
微信
回复
2024-05-24 23:15:33
相关问题
HarmonyOS Canvas绘制内容如何更新
798浏览 • 1回复 待解决
HarmonyOS 如何清空canvas绘制内容
1126浏览 • 1回复 待解决
如何操作canvas重新绘制
2132浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制
1886浏览 • 1回复 待解决
HarmonyOS 如何使用canvas绘制虚线
784浏览 • 1回复 待解决
如何使用canvas绘制圆角矩形
1517浏览 • 1回复 待解决
HarmonyOS Canvas绘制圆角
1151浏览 • 1回复 待解决
HarmonyOS 如何Canvas中直接绘制SVG?
1033浏览 • 1回复 待解决
HarmonyOS canvas如何绘制成图片导出
1062浏览 • 1回复 待解决
HarmonyOS Canvas绘制圆角矩形
1303浏览 • 1回复 待解决
HarmonyOS Canvas绘制曲线相关
1040浏览 • 1回复 待解决
Canvas如何绘制app.media下面的图片?
3613浏览 • 1回复 待解决