传统手写场景中，用户需反复调整笔迹（如画圆需多次描边、画直线需切换工具），且手写内容难以直接转化为标准图形，导致效率低下；开发者则面临图形识别算法自研成本高、跨设备适配复杂等痛点。
HarmonyOS SDK 手写笔服务（Pen Kit）推出一笔成形功能，可以传入手写笔迹的点位信息、通过手写笔/手指在屏幕上停顿一定的时间后触发此功能，触发功能后将自动识别当前绘制的图形，并生成对应的图像信息。手写套件已默认开启一笔成形功能，您也可以在应用中单独集成一笔成形功能。
Pen Kit 支持以下图形的识别：
手写笔服务功能优势
多种笔刷效果
提供圆珠笔、钢笔、铅笔、马克笔和荧光笔等笔刷效果。
丰富的编辑能力
提供橡皮擦、套索工具、调色盘、undo/redo 和一笔成形的能力。
应用场景
教育领域
教师可以通过一笔成形功能快速绘制教学用的几何图形，帮助学生更好地理解抽象概念。
艺术创作
设计师可以利用这一功能快速勾勒出草图，节省大量时间和精力，让创意得以更自由地表达。
日常办公
普通用户可以在会议中快速记录笔记，使用一笔成形功能添加图表和示意图，提高工作效率。
开发步骤
导入相关模块。
import { InstantShapeGenerator, ShapeInfo} from '@kit.Penkit';
复制代码
构造包含一笔成型能力，下面以控件为例：
@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; }
复制代码
了解更多详情>>
访问手写笔服务官网
获取一笔成形开发指导文档
评论