HarmonyOS鸿蒙Next中Canvas绘画的内容如何跟随外部的状态变动重新绘制？

HarmonyOS鸿蒙Next中Canvas绘画的内容如何跟随外部的状态变动重新绘制？

export enum BAWStyle {White, Black}

@Component export struct CaptureButton { @Prop bawStyle: BAWStyle = BAWStyle.White private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

build() { Canvas(this.context) .width(‘100%’) .height(‘100%’) .backgroundColor(’#F5DC62’) .onReady(() => { this.onDraw() }) }

private onDraw() { this.drawOuterCircle() this.drawInnerCircle() }

private drawOuterCircle() { const width = this.context.width const height = this.context.height const diameter = Math.min(width, height) const lineWidth = 4 / 80 * diameter this.context.beginPath() this.context.arc( width / 2, height / 2, diameter / 2 - lineWidth / 2, 0, 2 * Math.PI ) this.context.strokeStyle = this.bawStyle == BAWStyle.White ? ‘#2E5BFF’ : Color.White this.context.lineWidth = lineWidth this.context.stroke() }

private drawInnerCircle() { const width = this.context.width const height = this.context.height const diameter = Math.min(width, height) * 64 / 80 this.context.beginPath() this.context.arc( width / 2, height / 2, diameter / 2, 0, 2 * Math.PI ) this.context.fillStyle = this.bawStyle == BAWStyle.White ? ‘#2E5BFF’ : Color.White this.context.lineWidth = 0 this.context.fill() } }


希望代码跟随外部的 BAWStyle 的变化，按钮重新绘制，可以绘制为不同颜色。

更多关于HarmonyOS鸿蒙Next中Canvas绘画的内容如何跟随外部的状态变动重新绘制？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

可以使用CanvasRenderingContext2D接口， CanvasRenderingContext2D接口支持在下一帧刷新绘制内容，因此只要调用了这个接口，系统会在下一帧自动刷新绘制内容。 参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-42-V5

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

可以参考以下代码实现：

@Entry
@CustomDialog
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


我之前做过，但我感觉不好
我是先清除之前的再重新绘制

在HarmonyOS鸿蒙Next中，Canvas绘画内容可以通过监听外部状态的变化来自动重新绘制。首先，使用@State装饰器声明需要监听的状态变量。当状态变量发生变化时，系统会自动触发UI更新。在Canvas组件中，重写onDraw方法，根据当前状态变量值进行绘画操作。当状态变量更新时，onDraw方法会被重新调用，从而实现Canvas内容的动态更新。

例如，假设有一个状态变量color，表示Canvas绘制的颜色。当color变化时，Canvas会根据新的颜色值重新绘制。具体实现如下：

@Entry
@Component
struct MyCanvas {
  @State color: string = '#FF0000';

  build() {
    Column() {
      Canvas(this.onDraw)
        .width('100%')
        .height('100%')
      Button('Change Color')
        .onClick(() => {
          this.color = '#00FF00';
        })
    }
  }

  onDraw(ctx: CanvasRenderingContext2D) {
    ctx.fillStyle = this.color;
    ctx.fillRect(0, 0, 200, 200);
  }
}

在上述代码中，点击按钮改变color状态变量，Canvas会根据新的颜色值重新绘制矩形。

在HarmonyOS鸿蒙Next中，Canvas绘画内容可以通过监听外部状态变化并调用invalidate()方法触发重绘。具体步骤如下：

  1. 定义状态变量：使用@State或@Link装饰器定义状态变量。
  2. 监听状态变化：在onPageShow或onChange等生命周期方法中监听状态变化。
  3. 触发重绘：在状态变化时调用Canvas组件的invalidate()方法，强制重新执行onDraw回调。
  4. 绘制逻辑：在onDraw回调中根据最新状态绘制内容。

示例代码片段：

@State private count: number = 0;

Canvas(this.context)
  .onDraw((canvas: CanvasRenderingContext2D) => {
    // 根据count状态绘制内容
    canvas.fillText(`Count: ${this.count}`, 50, 50);
  })
  .onClick(() => {
    this.count++;
    this.context.invalidate(); // 触发重绘
  })
回到顶部