[原创]手写套件五大能力，让创作办公高效流畅-HarmonyOS-看雪安全社区

[原创]手写套件五大能力，让创作办公高效流畅

发表于: 2025-11-24 17:14 2033

[原创]手写套件五大能力，让创作办公高效流畅

HarmonyOS SDK 活跃值

2025-11-24 17:14

2033

在数字创作与移动办公场景中，手写功能是提升效率与体验的关键。然而，传统手写工具存在诸多痛点：对于用户来说，频繁切换笔刷、调整颜色、保存笔迹等操作繁琐且容易打断创作思路；而对于开发者而言，自研手写功能需要处理复杂的笔迹渲染、多设备适配以及功能集成等问题，开发成本高且周期长。

HarmonyOS SDK 手写笔服务（Pen Kit）推出了手写套件功能，提供笔刷效果、笔迹编辑、报点预测、一笔成形、全局取色和手写交互的功能，为用户带来流畅且高效的书写体验，同时为开发者提供了一站式的解决方案，大大降低了开发难度和成本。

目前Pen Kit提供了五种能力：手写套件、报点预测、一笔成形、全局取色和手写交互。

功能优势

多种笔刷效果

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

丰富的编辑能力

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

低时延

提升三方应用手写跟手性（具体数据与机器硬件相关性较强）。

应用场景

教育领域

教师可以利用手写套件在课件上进行实时批注和讲解，学生则可以在电子作业本上用手写笔答题，让线上教学更加生动有趣，提高教学效果。

办公场景

用户可以在会议记录、文档批注等应用中使用手写功能，快速记录灵感和要点，提升工作效率。

创意设计

如绘画、设计草图等，手写套件的丰富笔刷和精准书写能力能够帮助设计师更好地表达创意，激发无限创作灵感。

接入手写套件后，可以在应用中创建手写功能界面。界面包括画布和工具栏两部分，画布部分支持手写笔和手指的书写效果绘制，工具栏部分提供多种笔刷和编辑工具，并支持对手写功能进行设置。接入手写套件后将自动开启一笔成形和报点预测功能，无需再单独接入。

三方应用直接集成手写套件组件，提供如下功能。

画布

笔迹绘制、笔迹保存、画布缩放、一笔成形功能。

工具栏
笔刷：圆珠笔、钢笔、铅笔、马克笔、荧光笔、马赛克笔、激光笔七种笔刷效果，5档笔宽，100+种颜色选择。
橡皮擦：笔划擦除、像素擦除、仅擦除荧光笔、清空画布。
套索：框选、移动、剪切粘贴、复制粘贴、删除、调整大小。
其他功能：撤销、重做、禁止手指书写。

开发步骤

1.EntryAbility入口设置Context。

import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import GlobalContext from '../utils/ContextConfig';
 
export default class EntryAbility extends UIAbility {
 
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // 主窗口已创建，为此功能设置主页面
    windowStage.loadContent('pages/HandWritingDemo', (err) => {
      if (err.code) {
        return;
      }
    });
    GlobalContext.setContext(this.context);
  }
}

2.新建GlobalContext类。

import type common from '@ohos.app.ability.common';
 
declare namespace globalThis {
  let _brushEngineContext: common.UIAbilityContext;
};
 
export default class GlobalContext {
 
  static getContext(): common.UIAbilityContext {
    return globalThis._brushEngineContext;
  }
 
  static setContext(context: common.UIAbilityContext): void {
    globalThis._brushEngineContext = context;
  }
}

3.构造包含手写组件的控件/页面，下面以控件为例。

@Entry
@Component
struct HandWritingComponent {
  controller: HandwriteController = new HandwriteController();
  // 根据应用存储规则，获取到手写文件保存的路径，此处仅为实例参考
  initPath: string = this.getUIContext().getHostContext()?.filesDir + '/aa';
  defaultPenType: number = 10;
  pen: number = 1;
  penWidth: number = 5;
  ballpointPen: number = 2;
  ballpointPenWidth: number = 6;
 
  aboutToAppear() {
    // 加载时设置保存动作完成后的回调。
    this.controller.onLoad(this.callback);
  }
 
  // 手写文件内容加载完毕渲染上屏后的回调,通知接入用户,可在此处进行自定义行为
  callback = () => {
    // 自定义行为,例如文件加载完毕后展示用户操作指导
  }
 
  aboutToDisappear() {
  }
 
  build() {
    Row() {
      Stack({ alignContent: Alignment.TopStart }) {
        HandwriteComponent({
          handwriteController: this.controller,
          defaultPenType: this.defaultPenType, // 可选属性，默认笔刷
          defaultPenInfo: [{ penType: this.pen, penWidth: this.penWidth },
            { penType: this.ballpointPen, penWidth: this.ballpointPenWidth }], //可选属性，各笔刷的默认宽度
          onInit: () => {
            // 画布初始化完成时的回调。此时可以调用接口加载和显示笔记内容
            this.controller?.load(this.initPath);
          },
          onScale: (scale: number) => {
            // 画布缩放时的回调方法，将返回当前手写控件的缩放比例，可在此处进行自定义行为。
          }
        })
        Button("save")
          .onClick(async () => {
            // 保存
            const path = this.getUIContext().getHostContext()?.filesDir + '/aa';
            await this.controller?.save(path);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}