在數字創作與移動辦公場景中，手寫功能是提升效率與體驗的關鍵。然而，傳統手寫工具存在諸多痛點：對於用户來説，頻繁切換筆刷、調整顏色、保存筆跡等操作繁瑣且容易打斷創作思路；而對於開發者而言，自研手寫功能需要處理複雜的筆跡渲染、多設備適配以及功能集成等問題，開發成本高且週期長。

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%')
  }
}

瞭解更多詳情\>\>

訪問手寫筆服務官網

獲取手寫套件開發指導文檔