HarmonyOS鸿蒙Next开发中如何基于Canvas实现在儿童绘画板中动态绘制图形的demo

HarmonyOS鸿蒙Next开发中如何基于Canvas实现在儿童绘画板中动态绘制图形的demo HarmonyOS 5 儿童教育类应用如何基于Canvas实现在绘画板中动态绘制矩形、圆形、三角形等固定图形？

3 回复

https://developer.huawei.com/consumer/cn/doc/architecture-guides/draw_fixed_shape-0000002366469545

更多关于HarmonyOS鸿蒙Next开发中如何基于Canvas实现在儿童绘画板中动态绘制图形的demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中使用Canvas实现动态绘制图形，需通过@ohos.graphics.canvas模块创建Canvas对象。在ArkUI中声明Canvas组件并绑定onReady回调，获取CanvasContext后即可使用moveTo、lineTo等方法绘制路径。通过beginPath和closePath控制图形闭合，使用stroke或fill完成绘制。动态效果需结合requestAnimationFrame实现帧动画，修改路径坐标后调用clearRect清空画布并重绘。触控事件通过@ohos.app.ability.common的触摸监听实时更新坐标数据。

在HarmonyOS Next中基于Canvas实现儿童绘画板的动态图形绘制，可以通过以下方式实现：

  1. 基础Canvas绘制实现：
// 创建Canvas上下文
const canvas = this.$refs.canvas as CanvasRenderingContext2D;

// 绘制矩形
function drawRect(x, y, width, height) {
  canvas.beginPath();
  canvas.rect(x, y, width, height);
  canvas.stroke();
}

// 绘制圆形
function drawCircle(x, y, radius) {
  canvas.beginPath();
  canvas.arc(x, y, radius, 0, Math.PI * 2);
  canvas.stroke();
}

// 绘制三角形
function drawTriangle(x, y, size) {
  canvas.beginPath();
  canvas.moveTo(x, y - size);
  canvas.lineTo(x - size, y + size);
  canvas.lineTo(x + size, y + size);
  canvas.closePath();
  canvas.stroke();
}
  1. 动态交互实现：
// 触摸事件处理
onTouchStart(e) {
  this.startX = e.touches[0].x;
  this.startY = e.touches[0].y;
}

onTouchMove(e) {
  const currentX = e.touches[0].x;
  const currentY = e.touches[0].y;
  
  // 根据选择的图形类型调用不同绘制方法
  switch(this.selectedShape) {
    case 'rect':
      drawRect(this.startX, this.startY, 
              currentX - this.startX, 
              currentY - this.startY);
      break;
    case 'circle':
      const radius = Math.sqrt(
        Math.pow(currentX - this.startX, 2) + 
        Math.pow(currentY - this.startY, 2)
      );
      drawCircle(this.startX, this.startY, radius);
      break;
    case 'triangle':
      const size = Math.max(
        Math.abs(currentX - this.startX),
        Math.abs(currentY - this.startY)
      );
      drawTriangle(this.startX, this.startY, size);
      break;
  }
}
  1. 关键优化点：
  • 使用双缓冲技术避免闪烁
  • 实现图形颜色、线宽等属性设置
  • 添加撤销/重做功能栈
  • 考虑不同屏幕尺寸适配

注意：实际开发中需要根据具体UI框架(如ArkUI)调整API调用方式，但核心Canvas绘制逻辑是通用的。

回到顶部