使用canvas渲染文本时,如何基于文本变化,正确绘制出对应的内容?

使用canvas渲染文本时,如何基于文本变化,正确绘制出对应的内容?

HarmonyOS
2024-05-06 23:08:23
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

content值的变化会同时刷新build的ui页面,但是不会重调this.context.fillText这个方法,需要监听并重新调用这个方法,同时需要清理画布内容;示例如下:

@Prop @Watch(‘contentUpdate’)content: string = “” 
 
contentUpdate() { 
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) 
console.error(“aaa — content=” + this.content) 
}) 
Text(this.content) 
.textAlign(TextAlign.Center)// .backgroundColor(‘gray’) 
.width(‘100%’) 
.height(‘50%’) 
.fontSize(60) 
} 
.borderColor(’#31525B’) 
.borderWidth(12) 
.width(‘100%’) 
.height(‘100%’) 
}
分享
微博
QQ
微信
回复
2024-05-07 15:54:11
相关问题
webview 如何显示纯文本html内容
147浏览 • 1回复 待解决
如何实现文本竖向排列
423浏览 • 1回复 待解决
Canvas如何绘制app.media下面的图片?
510浏览 • 1回复 待解决
鸿蒙-富文本如何添加图片
4951浏览 • 1回复 待解决
有谁知道如何计算文本宽度
425浏览 • 1回复 待解决
如何计算文本是否溢出省略
243浏览 • 1回复 待解决
JS中input值文本对齐该如何实现?
6546浏览 • 1回复 待解决
arkui怎么展示接口返回文本?
1112浏览 • 1回复 待解决
关于mysql存大文本字段问题
2477浏览 • 1回复 待解决
肉眼没有看出来文本行差异
2959浏览 • 1回复 待解决
Input组件是否支持设置文本居中对齐
239浏览 • 1回复 待解决
文本在web组件中无法展示
115浏览 • 1回复 待解决