HarmonyOS 鸿蒙Next：清除canvas内容，重新画

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

HarmonyOS 鸿蒙Next：清除canvas内容，重新画 有一个画布控件canvas, 在上面画了一些东西
此时有新的数据过来了，我想将画布原本的内容都清除掉，再重新画，
请问如何清除画布内容

Harmonyos Next教程
2 回复

可以将变化的数据通过@Watch监听，同时绑定一个自己封装的draw()方法，当数据刷新时就会调用Watch绑定的方法执行绘制逻辑。

@Entry
@Component
struct CanvasDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State [@Watch](/user/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%')
  }
}

更多关于HarmonyOS 鸿蒙Next：清除canvas内容，重新画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，清除Canvas内容并重新绘制通常涉及以下几个步骤。Canvas是图形绘制的核心组件，它提供了一个画布，可以在上面绘制各种图形和图像。

要清除Canvas内容并重新绘制，你可以使用以下方法：

  1. 调用invalidate()方法： 在包含Canvas的自定义组件或视图中，调用invalidate()方法。这个方法会触发视图的重绘流程，系统会调用组件的onDraw(Canvas canvas)方法，此时你可以在onDraw方法中重新绘制Canvas的内容。

  2. 在onDraw()中清空Canvas： 在onDraw(Canvas canvas)方法的开始处，使用Canvas的drawColor()方法或drawPaint()方法清空画布。例如，canvas.drawColor(Color.WHITE);会将画布填充为白色，从而清除之前的内容。

  3. 重新绘制内容： 清空画布后，继续在onDraw()方法中编写绘制新内容的代码。

通过上述步骤，你可以实现清除Canvas内容并重新绘制的效果。

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

回到顶部