Canvas绘制内容如何动态更新

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

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

在声明式语法中是数据驱动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
相关问题
如何操作canvas重新绘制
355浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制
334浏览 • 1回复 待解决
按钮内子控件如何动态更新
376浏览 • 1回复 待解决
Canvas如何绘制app.media下面的图片?
850浏览 • 1回复 待解决
canvas怎么绘制资源目录下的图片
208浏览 • 1回复 待解决
JS UI框架中canvas如何动态指定宽高
5181浏览 • 1回复 待解决
bitmap绘制内容需要支持清屏功能
407浏览 • 1回复 待解决
鸿蒙如何实现位图绘制
8204浏览 • 1回复 待解决
canvas如何实现水印效果
373浏览 • 1回复 待解决
如何使用canvas添加水印
404浏览 • 1回复 待解决
DevEco Stduio如何绘制折线图
3006浏览 • 1回复 待解决
Chart内容如何清空。谢谢。
1193浏览 • 1回复 待解决
如何通过JS动态引入页面?
1201浏览 • 1回复 待解决
鸿蒙js 如何使用动态style
6020浏览 • 1回复 待解决
SurfaceProvider绘制延迟
5996浏览 • 4回复 已解决