往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

接入手写套件

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

场景介绍

在应用中创建手写功能界面，效果如下：

1. 可以加载和显示手写文件。
2. 可以编辑和保存手写文件。
3. Pen Kit手写套件仅支持上下滑动，不支持左右滑动。

开发流程

接口说明

开发步骤

1.导入GlobalContext，以开发者自己声明的路径为准。

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);
  }
}

完整示例代码可参考手写笔服务（ArkTS）。

2.导入相关模块。

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

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

​