HarmonyOS 鸿蒙Next如何实现简单手写板效果，提供实现方案思路和源码

HarmonyOS 鸿蒙Next如何实现简单手写板效果，提供实现方案思路和源码

鸿蒙如何实现简单手写板效果，提供实现方案思路和源码

5 回复

一、结论

实现一个手写板功能，基本思路如下：

创建一个可交互的组件，用户在屏幕上触摸并移动手指时，会根据触摸的位置动态生成路径，并使用黑色描边绘制在屏幕上。当用户按下屏幕时，记录按下点的坐标作为路径的起点。当用户移动手指时，不断记录移动点的坐标，通过线段连接起来形成路径。

系统提供了非常便捷的画线组件Path。该组件将画布和画线功能合二为一。提供了简洁的画线组件。

二、代码实现和详细解释

注意： 因为path不能作为build的根节点，所以用容器组件row进行了包裹。

onTouch得到的坐标xy单位为vp，而svg描述符的单位为vp，所以数值要做单位转化。否则会造成能画出东西， 但是坐标跟下笔的位置都缩小了。

需要给path组件设置宽高，否则会不显示。

@Entry
@Component
struct PathTestPage {

  @State pathCommands: string = "";

  private setPathCommands(str: string, event: TouchEvent){
    let x = event.touches[0].x;
    let y = event.touches[0].y;
    this.pathCommands += str + vp2px(x) + ' ' + vp2px(y);
    console.log("georgeDebug", " this.pathCommands: " + this.pathCommands);
  }

  onTouchEvent(event: TouchEvent){
    // event xy 单位：vp
    switch (event.type){
      case TouchType.Down:
        this.setPathCommands('M', event);
        break;

      case TouchType.Move:
        this.setPathCommands('L', event);
        break;
        default:
          break;
    }
  }

  build() {
    Stack({
      alignContent: Alignment.TopStart
    }){
      Path()
        .commands(this.pathCommands) // 设置SVG路径描述字符串
        .strokeWidth(5) // 设置路径的描边宽度为 5
        .fill("none") // 设置路径的填充颜色为无
        .stroke(Color.Black) // 设置路径的描边颜色为黑色
        .height('100%')
        .width('100%')
        .onTouch((event: TouchEvent)=>{
          this.onTouchEvent(event);
        })

      Button("清空绘制")
        .onClick(()=>{
          this.pathCommands = "";
        })
    }
    .height('100%')
    .width('100%')

  }
}

关键参数/方法说明

三、引用资料地址

1、鸿蒙Path组件官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-drawing-components-path

更多关于HarmonyOS 鸿蒙Next如何实现简单手写板效果，提供实现方案思路和源码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


this.setPathCommands('M', event); 里面的 M 参数是啥意思啊，

SVG 路径描述符是用于定义矢量图形路径的一组命令，在使用Path组件绘制图形时发挥关键作用，可创建各种复杂的自定义形状。主要作用如下：

（1）构建基础图形：

通过M（moveto）命令确定起始点，配合L（lineto）、H（horizontal lineto）、V（vertical lineto）等命令绘制直线段，能构建出三角形、矩形等基础图形。例如commands(‘M0 20 L50 50 L50 100 Z’)定义了一个起始于（0，20），通过绘制两条直线段，最后用Z（closepath）命令关闭路径形成的三角形 。

（2）绘制曲线图形：

借助C（curveto）、S（smooth curveto）、Q（quadratic Belzier curve）、T（smooth quadratic Belzier curveto）等命令，能绘制不同类型的贝塞尔曲线，实现复杂的曲线图形绘制。像C100 100 250 100 250 200可绘制一条从当前点到（250, 200）点的三次贝塞尔曲线，用于创建诸如花瓣、波浪线等曲线形状。

（3）绘制椭圆弧：

A（elliptical Arc）命令用于从当前点到指定点绘制椭圆弧，通过设置椭圆的半径、旋转角度以及其他标志位，能绘制各种椭圆形状的部分弧线，比如绘制饼图的扇区。

鸿蒙Next实现手写板效果

鸿蒙Next实现手写板效果，主要使用Canvas组件进行绘制。

核心思路是：监听Canvas的触摸事件（如onTouch事件），在手指移动时，获取触点坐标，并使用CanvasRenderingContext2D的路径API（如beginPath、lineTo、stroke）将这些坐标点连接起来形成笔迹。

关键步骤：

  1. 创建Canvas组件并设置其触摸事件。
  2. 在onTouch事件中，通过event.touches[0]获取当前触点的位置（局部坐标）。
  3. 使用getContext('2d')获取绘图上下文。
  4. 在手指按下时（type: TouchType.Down），调用beginPath()开始新路径，并移动画笔到起点（moveTo）。
  5. 在手指移动时（type: TouchType.Move），调用lineTo()连接点，并立即stroke()绘制线段。
  6. 可设置lineWidth、strokeStyle等属性调整笔迹样式。

此方案完全基于ArkTS/ArkUI和系统图形API，不依赖Java或C。

在HarmonyOS Next中实现手写板效果，主要依赖Canvas组件进行绘制，并结合手势事件记录轨迹。以下是核心思路与示例代码：

实现思路

  1. 使用Canvas组件作为画布。
  2. 通过TouchEvent监听手指触摸事件（onTouch）。
  3. 在触摸事件中获取坐标点，使用CanvasRenderingContext2D的路径API（moveTo、lineTo）连接坐标点形成笔迹。
  4. 通过stroke方法绘制路径到画布。

示例代码（ArkTS）

// 引入必要模块
import { TouchEvent } from '@kit.ArkUI';

@Entry
@Component
struct HandwritingBoard {
  // 保存触摸点坐标
  private points: Array<number> = [];
  // Canvas上下文
  private context: CanvasRenderingContext2D | null = null;

  build() {
    Column() {
      // 1. 创建Canvas画布
      Canvas(this.context)
        .width('100%')
        .height('80%')
        .backgroundColor('#FFF')
        .onReady(() => {
          // 获取2D绘图上下文
          this.context = this.context2d;
          // 设置画笔样式
          this.context.strokeStyle = '#000';
          this.context.lineWidth = 3;
          this.context.lineCap = 'round';
        })
        // 2. 监听触摸事件
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            // 触摸开始：记录起始点
            this.points = [event.touches[0].x, event.touches[0].y];
          } else if (event.type === TouchType.Move) {
            // 触摸移动：绘制路径
            if (this.context && this.points.length >= 2) {
              const x = event.touches[0].x;
              const y = event.touches[0].y;
              
              this.context.beginPath();
              this.context.moveTo(this.points[0], this.points[1]);
              this.context.lineTo(x, y);
              this.context.stroke();
              
              // 更新当前点坐标
              this.points = [x, y];
            }
          }
        })

      // 清除按钮
      Button('清除画布')
        .onClick(() => {
          if (this.context) {
            // 清空画布
            this.context.clearRect(0, 0, 1000, 1000);
          }
        })
    }
  }
}

关键说明

  • 通过onTouch事件区分触摸按下（TouchType.Down）和移动（TouchType.Move）状态。
  • 使用beginPath()和stroke()确保每次移动独立绘制线段。
  • 清除功能通过clearRect()实现，参数范围需覆盖画布尺寸。

扩展建议

  • 可增加画笔颜色/粗细选择功能，通过修改strokeStyle和lineWidth实现。
  • 可添加轨迹平滑算法（如贝塞尔曲线）提升书写流畅度。

此方案实现了基础手写功能，代码可直接在HarmonyOS Next的Stage模型中运行。

回到顶部