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

HarmonyOS 手写笔服务让你的应用支持手写输入什么是手写笔服务你有没有用过华为平板的手写笔在平板上写字、画画感觉就像在纸上一样。手写笔服务Pen Kit就是让开发者能在自己的应用里实现这种手写体验。手写笔服务提供了一套完整的手写功能笔刷效果不同粗细、不同风格的笔刷笔迹编辑撤销、恢复、橡皮擦报点预测让手写更流畅一笔成形画直线、圆形自动变成标准图形简单说手写笔服务就是一个手写工具箱让你的应用轻松支持手写功能。核心功能手写笔服务提供以下功能手写画布提供一个专门用来手写的画布组件HandwriteComponent你只需要把它放到页面上用户就能在上面写字画画了。画布支持缩放、平移等操作体验就像在纸上写字一样自然笔刷管理支持多种笔刷类型比如钢笔笔迹有粗细变化适合写字、圆珠笔笔迹均匀适合画线。你可以设置每种笔刷的粗细从 1 像素到几十像素都行笔迹编辑写错了可以撤销undo撤销过头了可以恢复redo。还有橡皮擦功能可以擦掉不需要的笔迹。套索功能可以选中一部分笔迹然后移动或删除保存加载写完的手写内容可以保存到文件里下次打开应用时可以加载回来继续编辑。保存的格式是 Pen Kit 自定义的格式体积小、加载快缩略图可以把手写内容生成一张缩略图图片方便在列表页展示预览。比如你的笔记列表里每条笔记旁边显示一个小缩略图用户一眼就能看到笔记的内容环境搭建硬件要求设备类型华为手机、华为平板、华为 PC/2in1HarmonyOS 系统HarmonyOS 6.0.0 及以上软件要求DevEco Studio 版本DevEco Studio 6.0.0 及以上HarmonyOS SDK 版本HarmonyOS 6.0.0 SDK 及以上搭建步骤安装 DevEco Studio去华为开发者官网下载安装配置开发环境确保网络环境正常设备调试使用真机进行调试项目结构├── entryability │ └── EntryAbility.ets // 本地启动 ability └── pages │ ├── HandWritingDemo.ets // 基础手写界面 │ ├── ImageFeaturePicker.ets // 全局取色界面 │ ├── InstantShapeGenerator.ets // 一笔成形界面 │ └── PointPredictor.ets // 报点预测界面 └── utils └── ContextConfig.ts // 上下文配置项目按功能分成了几个页面每个页面对应一个手写功能。手写笔初始化流程下面是手写笔服务的初始化流程导入手写笔模块创建 HandwriteController设置保存路径配置笔刷类型和宽度使用 HandwriteComponent 组件画布初始化完成加载已有手写内容用户开始手写手写内容保存流程下面是手写内容的保存和加载流程用户完成手写点击保存按钮调用 controller.save保存手写文件调用 getThumbnail生成缩略图下次打开应用调用 controller.load加载手写内容渲染到画布第一步导入模块import{HandwriteController,HandwriteComponent,PenHspInfo,PenType}fromkit.Penkit;导入手写笔服务的核心模块HandwriteController手写控制器管理手写的各种功能HandwriteComponent手写画布组件PenHspInfo笔刷信息PenType笔刷类型第二步初始化 HandwriteControllercontroller:HandwriteControllernewHandwriteController();// 根据应用存储规则获取到手写文件保存的路径initPath:stringthis.getUIContext().getHostContext()?.filesDir/aa;penWidth:number5;ballpointPenWidth:number6;创建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-1heightRatio:1,// 画布高度占比0-1onInit:(){// 画布初始化完成时的回调// 此时可以调用接口加载和显示笔记内容this.controller?.load(this.initPath);},onScale:(scale:number){// 画布缩放时的回调方法// 返回当前手写控件的缩放比例}})HandwriteComponent是手写画布组件配置了handwriteController手写控制器defaultPenType默认笔刷类型defaultPenInfo各种笔刷的默认宽度widthRatio和heightRatio画布大小占比onInit画布初始化完成的回调onScale画布缩放的回调第四步保存手写内容Button(save).onClick(async(){// 根据应用存储规则获取到手写文件保存的路径constpaththis.getUIContext().getHostContext()?.filesDir/aa;awaitthis.controller?.save(path).then().catch((error:Error){console.info(errerror);});// 获取缩略图this.controller.getThumbnail(this.controller?.getContentRange())?.then((pixelMap:PixelMap){if(pixelMap){pixelMap.release();console.info(getThumbnail success);}});})点击保存按钮时调用this.controller.save(path)保存手写内容调用this.controller.getThumbnail()获取缩略图笔刷类型手写笔服务支持多种笔刷类型PenType.PEN钢笔{penType:PenType.PEN,penWidth:5}钢笔效果适合日常书写。PenType.BALLPOINT_PEN圆珠笔{penType:PenType.BALLPOINT_PEN,penWidth:6}圆珠笔效果笔迹更均匀。实际应用场景手写笔服务在实际开发中有很多用途笔记应用// 创建笔记应用支持手写输入EntryComponentstruct NoteApp{controller:HandwriteControllernewHandwriteController();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();})}}}}绘画应用// 创建绘画应用支持多种笔刷EntryComponentstruct DrawingApp{controller:HandwriteControllernewHandwriteController();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();})}}}}签名应用// 创建签名应用EntryComponentstruct SignatureApp{controller:HandwriteControllernewHandwriteController();build(){Column(){Text(请在下方签名).fontSize(20).margin(10)HandwriteComponent({handwriteController:this.controller,defaultPenType:PenType.PEN,widthRatio:0.8,heightRatio:0.3})Button(确认签名).onClick(async(){constsignaturePaththis.getUIContext().getHostContext()?.filesDir/signature;awaitthis.controller.save(signaturePath);// 获取签名图片letpixelMapawaitthis.controller.getThumbnail(this.controller.getContentRange());// 处理签名图片})}}}适用场景手写笔服务适合以下场景笔记应用手写笔记、课堂记录绘画应用数字绘画、涂鸦签名应用电子签名、合同签署教育应用手写答题、批注办公应用手写批注、文档标注注意事项设备支持需要设备支持手写笔输入笔刷设置要根据场景选择合适的笔刷类型和粗细保存路径要根据应用的存储规则设置保存路径缩放处理画布缩放时要处理好回调性能优化大量手写内容时要注意性能总结手写笔服务让你的应用支持手写输入核心流程导入手写笔服务模块初始化 HandwriteController使用 HandwriteComponent 组件保存和加载手写内容掌握了这些你就能开发出手写笔记、绘画、签名等各种应用。