如何让HarmonyOS鸿蒙Next中Canvas重绘

如何让HarmonyOS鸿蒙Next中Canvas重绘 如何让Canvas重绘
在Canvas的onReady中会有一些状态变量，在变化后需要让此Canvas重绘，该如何操作呢

4 回复

canvas不会根据数据变化自行重绘，需要调用canvas的clearRect方法清空画布后再重新绘制。同时，需要使用@watch监听更新的那个变量，在更新后触发方法重新绘制canvas画布。

可以参考这个demo：

@Entry
@Component
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')

    // this.context.clearRect()

    for (let index = 1; index < this.volumeList.length; index++) {
      let element = this.volumeList[index];
      this.context.fillRect(index * 5, (100 - element) / 2, 1, element);
    }
  }
}

更多关于如何让HarmonyOS鸿蒙Next中Canvas重绘的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


this.context.reset()

Canvas的能力都在Context里面。。。。reset然后需要全部重绘。。。

在HarmonyOS鸿蒙Next中，Canvas的重绘可以通过调用invalidate()方法来实现。invalidate()方法会标记Canvas为需要重绘的状态，系统会在下一个UI刷新周期自动调用onDraw()方法进行重绘。

具体步骤如下：

  1. 自定义Canvas组件：首先，你需要自定义一个继承自Component的组件，并重写onDraw()方法。在onDraw()方法中，你可以使用Canvas进行绘制操作。
import { Component, CanvasRenderingContext2D } from '@ohos.arkui';

class MyCanvas extends Component {
    onDraw(context: CanvasRenderingContext2D) {
        // 在这里进行绘制操作
        context.fillStyle = '#FF0000';
        context.fillRect(10, 10, 100, 100);
    }
}
  1. 调用invalidate()方法：当你需要重绘Canvas时，调用invalidate()方法。这个方法会触发onDraw()方法的重新调用。
const myCanvas = new MyCanvas();
// 当需要重绘时
myCanvas.invalidate();
  1. 处理UI刷新：系统会自动在下一个UI刷新周期调用onDraw()方法，完成Canvas的重绘。

通过这种方式，你可以在HarmonyOS鸿蒙Next中实现Canvas的重绘。

在HarmonyOS鸿蒙Next中，Canvas的重绘可以通过以下步骤实现：

  1. 获取Canvas对象：首先，通过Component的onDraw方法获取Canvas对象。
  2. 绘制内容：在onDraw方法中使用Canvas进行自定义绘制。
  3. 触发重绘：调用Component的invalidate方法，强制触发onDraw方法的执行，从而重新绘制Canvas内容。

示例代码：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 自定义绘制逻辑
    canvas.drawColor(Color.WHITE); // 例如，绘制白色背景
}

public void refreshCanvas() {
    invalidate(); // 触发重绘
}

通过invalidate方法可以随时触发Canvas的重绘，确保UI内容更新。

回到顶部