[原创]一笔成形，秒绘标准图！Pen Kit重构“自然书写”体验-HarmonyOS-看雪安全社区

[原创]一笔成形，秒绘标准图！Pen Kit重构“自然书写”体验

发表于: 2025-9-5 14:37 383

[原创]一笔成形，秒绘标准图！Pen Kit重构“自然书写”体验

HarmonyOS SDK 活跃值

2025-9-5 14:37

383

传统手写场景中，用户需反复调整笔迹（如画圆需多次描边、画直线需切换工具），且手写内容难以直接转化为标准图形，导致效率低下；开发者则面临图形识别算法自研成本高、跨设备适配复杂等痛点。

HarmonyOS SDK 手写笔服务（Pen Kit）推出一笔成形功能，可以传入手写笔迹的点位信息、通过手写笔/手指在屏幕上停顿一定的时间后触发此功能，触发功能后将自动识别当前绘制的图形，并生成对应的图像信息。手写套件已默认开启一笔成形功能，您也可以在应用中单独集成一笔成形功能。

Pen Kit支持以下图形的识别：

手写笔服务功能优势

多种笔刷效果

提供圆珠笔、钢笔、铅笔、马克笔和荧光笔等笔刷效果。

丰富的编辑能力

提供橡皮擦、套索工具、调色盘、undo/redo 和一笔成形的能力。

应用场景

教育领域

教师可以通过一笔成形功能快速绘制教学用的几何图形，帮助学生更好地理解抽象概念。

艺术创作

设计师可以利用这一功能快速勾勒出草图，节省大量时间和精力，让创意得以更自由地表达。

日常办公

普通用户可以在会议中快速记录笔记，使用一笔成形功能添加图表和示意图，提高工作效率。

开发步骤

导入相关模块。

1	`import` `{ InstantShapeGenerator, ShapeInfo}` `from` `'@kit.Penkit';`

构造包含一笔成型能力，下面以控件为例：

100

101

102

103

@Component
struct InstantShapeDemo {
  private instantShapeGenerator: InstantShapeGenerator = new InstantShapeGenerator();
 
  private shapeString: string = "";
 
  private points: DrawPathPointModel[] = [];
  // 绘制路径
  private drawPath = new Path2D();
 
  private shapePath = new Path2D();
 
  private mShapeSuccess = false;
 
  private shapeType: number = -1;
 
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
  // 通过回调方法获取识别结果
  private shapeInfoCallback = (shapeInfo: ShapeInfo) => {
    this.shapeString = shapeInfo.shapeString;
    this.shapePath = shapeInfo.shapePath;
    this.shapeType = shapeInfo.shapeType;
    this.mShapeSuccess = true;
    this.context.beginPath();
    this.context.reset();
    this.drawCurrentPathModel(this.shapePath);
  }
 
  aboutToAppear() {
    console.info('InstantShapeGenerator aboutToAppear');
    // 设置触发识别的暂停时间
    this.instantShapeGenerator?.setPauseTime(280);
    // 注册完成时的回调方法
    this.instantShapeGenerator?.onShapeRecognized(this.shapeInfoCallback);
  }
  aboutToDisappear(){
    console.info('InstantShapeGenerator aboutToDisappear')
    this.instantShapeGenerator?.release();
  }
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .onAreaChange((oldValue: Area, newValue: Area) => {
          // 通知组件大小变化。形状的大小（例如圆的半径）根据组件尺寸而变化
          this.instantShapeGenerator?.notifyAreaChange(Number(newValue.width), Number(newValue.height));
        }).onTouch((event: TouchEvent) => {
        // 传递触摸事件
        this.instantShapeGenerator?.processTouchEvent(event);
        switch (event.type) {
          case TouchType.Down:
            this.moveStart(event.touches[0]?.x, event.touches[0]?.y);
            break;
          case TouchType.Move:
            this.moveUpdate(event.touches[0]?.x, event.touches[0]?.y);
            break;
          case TouchType.Up:
            this.moveEnd();
            break;
        }
      })
    }.height('100%').width('100%')
  }
 
  moveStart(x: number, y: number) {
    this.points.push({x: x, y: y})
    this.drawPath.moveTo(x, y);
    this.drawCurrentPathModel(this.drawPath);
    this.mShapeSuccess = false;
  }
 
  moveUpdate(x: number, y: number) {
    let lastPoint = this.points[this.points.length - 1];
    this.points.push({x: x, y: y});
    this.drawPath.quadraticCurveTo((x + lastPoint?.x) / 2, (y + lastPoint?.y) / 2, x, y);
    if (!this.mShapeSuccess) {
      this.drawCurrentPathModel(this.drawPath);
    }
  }
 
  moveEnd() {
    this.points = [];
    this.drawPath = new Path2D();
    this.shapePath = new Path2D();
  }
 
  private drawCurrentPathModel(path : Path2D) {
    this.context.globalCompositeOperation = 'source-over';
    this.context.lineWidth = 8;
    this.context.strokeStyle = "#ED1B1B";
    this.context.lineJoin = 'round';
    this.context.stroke(path);
  }
}
 
export class DrawPathPointModel {
  x: number = 0;
  y: number = 0;
}