HarmonyOS 手写笔服务：让你的应用支持手写输入

HarmonyOS 手写笔服务：让你的应用支持手写输入

什么是手写笔服务

你有没有用过华为平板的手写笔？在平板上写字、画画，感觉就像在纸上一样。手写笔服务（Pen Kit）就是让开发者能在自己的应用里实现这种手写体验。

手写笔服务提供了一套完整的手写功能：

• 笔刷效果：不同粗细、不同风格的笔刷
• 笔迹编辑：撤销、恢复、橡皮擦
• 报点预测：让手写更流畅
• 一笔成形：画直线、圆形自动变成标准图形

简单说，手写笔服务就是一个"手写工具箱"，让你的应用轻松支持手写功能。

核心功能

手写笔服务提供以下功能：

1. 手写画布：提供一个专门用来手写的画布组件（HandwriteComponent），你只需要把它放到页面上，用户就能在上面写字画画了。画布支持缩放、平移等操作，体验就像在纸上写字一样自然
2. 笔刷管理：支持多种笔刷类型，比如钢笔（笔迹有粗细变化，适合写字）、圆珠笔（笔迹均匀，适合画线）。你可以设置每种笔刷的粗细，从 1 像素到几十像素都行
3. 笔迹编辑：写错了可以撤销（undo），撤销过头了可以恢复（redo）。还有橡皮擦功能，可以擦掉不需要的笔迹。套索功能可以选中一部分笔迹，然后移动或删除
4. 保存加载：写完的手写内容可以保存到文件里，下次打开应用时可以加载回来继续编辑。保存的格式是 Pen Kit 自定义的格式，体积小、加载快
5. 缩略图：可以把手写内容生成一张缩略图图片，方便在列表页展示预览。比如你的笔记列表里，每条笔记旁边显示一个小缩略图，用户一眼就能看到笔记的内容

环境搭建

硬件要求

• 设备类型：华为手机、华为平板、华为 PC/2in1
• HarmonyOS 系统：HarmonyOS 6.0.0 及以上

软件要求

• DevEco Studio 版本：DevEco Studio 6.0.0 及以上
• HarmonyOS SDK 版本：HarmonyOS 6.0.0 SDK 及以上

搭建步骤

1. 安装 DevEco Studio：去华为开发者官网下载安装
2. 配置开发环境：确保网络环境正常
3. 设备调试：使用真机进行调试

项目结构

├── entryability │ └── EntryAbility.ets // 本地启动 ability └── pages │ ├── HandWritingDemo.ets // 基础手写界面 │ ├── ImageFeaturePicker.ets // 全局取色界面 │ ├── InstantShapeGenerator.ets // 一笔成形界面 │ └── PointPredictor.ets // 报点预测界面 └── utils └── ContextConfig.ts // 上下文配置

项目按功能分成了几个页面，每个页面对应一个手写功能。

手写笔初始化流程

下面是手写笔服务的初始化流程：

手写内容保存流程

下面是手写内容的保存和加载流程：

第一步：导入模块

import{HandwriteController,HandwriteComponent,PenHspInfo,PenType}from'@kit.Penkit';

导入手写笔服务的核心模块：

• HandwriteController：手写控制器，管理手写的各种功能
• HandwriteComponent：手写画布组件
• PenHspInfo：笔刷信息
• PenType：笔刷类型

第二步：初始化 HandwriteController

controller:HandwriteController=newHandwriteController();// 根据应用存储规则，获取到手写文件保存的路径initPath:string=this.getUIContext().getHostContext()?.filesDir+'/aa';penWidth:number=5;ballpointPenWidth:number=6;

创建HandwriteController实例，设置保存路径和笔刷宽度。

aboutToAppear(){// 加载时设置保存动作完成后的回调this.controller.onLoad(this.callback);}// 手写文件内容加载完毕渲染上屏后的回调callback=()=>{// 自定义行为，例如文件加载完毕后展示用户操作指导}

在页面出现时，设置加载回调。当手写文件加载完成后，会调用这个回调。

第三步：使用 HandwriteComponent 组件

HandwriteComponent({handwriteController:this.controller,defaultPenType:PenType.PEN,// 默认笔刷类型defaultPenInfo:[{penType:PenType.PEN,penWidth:this.penWidth},{penType:PenType.BALLPOINT_PEN,penWidth:this.ballpointPenWidth}]asPenHspInfo[],// 各笔刷的默认宽度widthRatio:1,// 画布宽度占比（0-1）heightRatio:1,// 画布高度占比（0-1）onInit:()=>{// 画布初始化完成时的回调// 此时可以调用接口加载和显示笔记内容this.controller?.load(this.initPath);},onScale:(scale:number)=>{// 画布缩放时的回调方法// 返回当前手写控件的缩放比例}})

HandwriteComponent是手写画布组件，配置了：

• handwriteController：手写控制器
• defaultPenType：默认笔刷类型
• defaultPenInfo：各种笔刷的默认宽度
• widthRatio和heightRatio：画布大小占比
• onInit：画布初始化完成的回调
• onScale：画布缩放的回调

第四步：保存手写内容

Button("save").onClick(async()=>{// 根据应用存储规则，获取到手写文件保存的路径constpath=this.getUIContext().getHostContext()?.filesDir+'/aa';awaitthis.controller?.save(path).then().catch((error:Error)=>{console.info("err："+error);});// 获取缩略图this.controller.getThumbnail(this.controller?.getContentRange())?.then((pixelMap:PixelMap)=>{if(pixelMap){pixelMap.release();console.info('getThumbnail success');}});})

点击保存按钮时：

1. 调用this.controller.save(path)保存手写内容
2. 调用this.controller.getThumbnail()获取缩略图

笔刷类型

手写笔服务支持多种笔刷类型：

PenType.PEN（钢笔）

{penType:PenType.PEN,penWidth:5}

钢笔效果，适合日常书写。

PenType.BALLPOINT_PEN（圆珠笔）

{penType:PenType.BALLPOINT_PEN,penWidth:6}

圆珠笔效果，笔迹更均匀。

实际应用场景

手写笔服务在实际开发中有很多用途：

笔记应用

// 创建笔记应用，支持手写输入@Entry@Componentstruct NoteApp{controller:HandwriteController=newHandwriteController();build(){Column(){HandwriteComponent({handwriteController:this.controller,onInit:()=>{// 加载笔记内容this.controller.load(notePath);}})Row(){Button('保存').onClick(()=>{this.controller.save(notePath);})Button('撤销').onClick(()=>{this.controller.undo();})Button('恢复').onClick(()=>{this.controller.redo();})}}}}

绘画应用

// 创建绘画应用，支持多种笔刷@Entry@Componentstruct DrawingApp{controller:HandwriteController=newHandwriteController();build(){Column(){HandwriteComponent({handwriteController:this.controller,defaultPenType:PenType.PEN,defaultPenInfo:[{penType:PenType.PEN,penWidth:3},{penType:PenType.BALLPOINT_PEN,penWidth:8}]})Row(){Button('细笔').onClick(()=>{this.controller.setPenWidth(3);})Button('粗笔').onClick(()=>{this.controller.setPenWidth(10);})Button('橡皮擦').onClick(()=>{this.controller.setEraser();})}}}}

签名应用

// 创建签名应用@Entry@Componentstruct SignatureApp{controller:HandwriteController=newHandwriteController();build(){Column(){Text('请在下方签名').fontSize(20).margin(10)HandwriteComponent({handwriteController:this.controller,defaultPenType:PenType.PEN,widthRatio:0.8,heightRatio:0.3})Button('确认签名').onClick(async()=>{constsignaturePath=this.getUIContext().getHostContext()?.filesDir+'/signature';awaitthis.controller.save(signaturePath);// 获取签名图片letpixelMap=awaitthis.controller.getThumbnail(this.controller.getContentRange());// 处理签名图片})}}}

适用场景

手写笔服务适合以下场景：

• 笔记应用：手写笔记、课堂记录
• 绘画应用：数字绘画、涂鸦
• 签名应用：电子签名、合同签署
• 教育应用：手写答题、批注
• 办公应用：手写批注、文档标注

注意事项

1. 设备支持：需要设备支持手写笔输入
2. 笔刷设置：要根据场景选择合适的笔刷类型和粗细
3. 保存路径：要根据应用的存储规则设置保存路径
4. 缩放处理：画布缩放时要处理好回调
5. 性能优化：大量手写内容时要注意性能

总结

手写笔服务让你的应用支持手写输入，核心流程：

1. 导入手写笔服务模块
2. 初始化 HandwriteController
3. 使用 HandwriteComponent 组件
4. 保存和加载手写内容

掌握了这些，你就能开发出手写笔记、绘画、签名等各种应用。