HarmonyOS 鸿蒙Next Canvas CanvasRenderingContext2D如何触发刷新重复绘制？需要相关demo

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Canvas CanvasRenderingContext2D如何触发刷新重复绘制？需要相关demo

CanvasRenderingContext2D绘制成功，然后数据请求后需要根据相关数据重新绘制，如何去刷新，文档表述不明确，希望提供相关demo

Harmonyos Next教程
2 回复

在进行重新绘制前调用clearRect就可以先删除之前绘制的内容，然后重新绘制就可以了。详见：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-components-canvas-canvasrenderingcontext2d-V5#clearrect

可参考：

import display from '[@ohos](/user/ohos).display';

[@Entry](/user/Entry)

[@Component](/user/Component)

export struct WaterMark {

 private settings: RenderingContextSettings = new RenderingContextSettings(true)

 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

 private sWidth:number = 0;

 private sHeight:number = 0;

 [@State](/user/State) count: string = ''

 [@State](/user/State) address: string = '******'

 [@State](/user/State) time: string = ''

 [@State](/user/State) version: string = ''

 [@State](/user/State) showStr: string = ''

 aboutToAppear() {

   this.sHeight = display.getDefaultDisplaySync().height;

   this.sWidth = display.getDefaultDisplaySync().width;

   this.context.clearRect(0,0,px2vp(this.sWidth),px2vp(this.sHeight))

   this.time = new Date().getSeconds() + "s"

   this.setData()

   setInterval(()=>{

     this.context.clearRect(0,0,px2vp(this.sWidth),px2vp(this.sHeight))

     this.time = new Date().getSeconds() + "s"

     this.setData()

   },1000)

 }

 private setData(){

   console.log("asdfafddasfsafsaf")

   try {

     this.context.save()

     this.context.fillStyle = '#26000000'

     this.context.font = "14vp"

     this.context.textAlign = "center"

     this.context.textBaseline = "middle"

     // 在这里绘制文字水印，也可以是图片水印

     for (let i = 0; i < this.context.width / 160; i++) {

       this.context.translate(160, 0)

       let j = 0

       for (; j < this.context.height / 160; j++) {

         this.context.rotate(-Math.PI / 180 * 30)

         //水印数据

         this.context.fillText('银行\n' + "工号:" + this.count + "\n地址:" + this.address + "\n时间:" + this.time +

           "\n版本:" + this.version, -80, -80)

         this.context.rotate(Math.PI / 180 * 30)

         this.context.translate(0, 160)

       }

       this.context.translate(0, -160 * j)

     }

     this.context.restore()

   } catch (e) {

     console.log('asdfafddasfsafsaf',e)

   }

 }

 build() {

   Canvas(this.context)

     .width("100%")

     .height("100%")

     .hitTestBehavior(HitTestMode.Transparent)

     .onReady(() => {

       this.setData()

     })

 }

}

在HarmonyOS鸿蒙Next中，Canvas组件的刷新与重复绘制主要通过调用绘制接口来实现。Canvas组件上的图像在绘制后不会自行改变，但可以通过编程逻辑来清除并重新绘制内容。

要触发Canvas的刷新与重复绘制，你可以使用CanvasRenderingContext2D对象的相关方法。以下是一个简单的Demo示例：

@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.draw();
                })
            TextInput({ text: $$this.content })
        }
    }
}

在这个示例中，draw方法被绑定到@Watch('draw')，当content状态改变时，draw方法会被调用，从而触发Canvas的刷新与重新绘制。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部