HarmonyOS 鸿蒙Next中Canvas自定义绘制

HarmonyOS 鸿蒙Next中Canvas自定义绘制 如何在 ArkUI 中使用 Canvas 组件进行自定义绘制？如何绘制基本图形、文字和图片？如何实现动态绑定和动画效果？Canvas 的性能优化有哪些技巧？（问题来源项目案例整理:https://github.com/heqiyuan35-creator/HydroQuiz.git）

3 回复

Canvas 组件提供了底层绑制能力，可以实现高度自定义的图形效果。

Canvas 基础绑制：

@Component
struct ProgressRing {
  @Prop progress: number = 0;  // 0-100
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Canvas(this.context)
      .width(120)
      .height(120)
      .onReady(() => this.draw())
  }

  private draw(): void {
    const ctx = this.context;
    const centerX = 60;
    const centerY = 60;
    const radius = 50;
    const lineWidth = 8;

    // 清空画布
    ctx.clearRect(0, 0, 120, 120);

    // 绑制背景圆环
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.strokeStyle = '#E8E8E8';
    ctx.lineWidth = lineWidth;
    ctx.stroke();

    // 绘制进度圆环
    const startAngle = -Math.PI / 2;
    const endAngle = startAngle + (this.progress / 100) * Math.PI * 2;
    
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.strokeStyle = '#1890FF';
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';
    ctx.stroke();

    // 绘制中心文字
    ctx.font = '24px sans-serif';
    ctx.fillStyle = '#333333';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`${this.progress}%`, centerX, centerY);
  }
}

动态更新：

@State progress: number = 0;

aboutToAppear(): void {
  // 动画更新进度
  const timer = setInterval(() => {
    if (this.progress < 100) {
      this.progress += 1;
    } else {
      clearInterval(timer);
    }
  }, 50);
}

// 监听 progress 变化重绘
@Watch('progress')
onProgressChange(): void {
  this.draw();
}

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


HarmonyOS Next中Canvas自定义绘制通过ArkTS的CanvasRenderingContext2D API实现。开发者可使用Canvas组件创建画布，调用fillRect、strokeRect等方法绘制图形，通过moveTo、lineTo、arc等路径操作绘制复杂形状，并利用fillStyle、strokeStyle设置样式。支持图像绘制、文本渲染及变换操作（如translate、rotate）。Canvas提供高性能的2D渲染能力，适用于图表、游戏等场景。

在HarmonyOS Next的ArkUI中，Canvas组件通过CanvasRenderingContext2D API进行自定义绘制。以下是关键点：

  1. 基本使用：在ArkTS文件中声明Canvas组件，通过onReady回调获取CanvasRenderingContext2D上下文进行绘制。
Canvas()
  .onReady((ctx: CanvasRenderingContext2D) => {
    // 绘制逻辑
  })

  1. 绘制基本图形：

    • 矩形：fillRect()、strokeRect()
    • 路径：beginPath()、moveTo()、lineTo()、arc()等
    • 样式：通过fillStyle、strokeStyle设置颜色，lineWidth设置线宽

  2. 绘制文字：使用fillText()或strokeText()，可通过font属性设置字体样式。

  3. 绘制图片：使用drawImage()方法，支持Image对象或像素图数据。

  4. 动态绑定与动画：

    • 状态驱动：将绘制数据与@State变量绑定，数据变化触发Canvas重绘
    • 动画效果：结合setInterval或requestAnimationFrame更新绘制状态实现动画

  5. 性能优化：

    • 离屏绘制：复杂静态内容可预先绘制到离屏Canvas
    • 分层绘制：将动态和静态内容分离到不同Canvas层
    • 减少绘制区域：使用clearRect()只清除变化区域而非整个画布
    • 避免频繁创建路径：复用路径对象

注意：Canvas绘制是同步操作，大量绘制操作建议在后台线程处理。对于HydroQuiz这类应用，可将游戏背景等静态元素预渲染，仅动态更新游戏角色和交互元素。

回到顶部