HandwriteComponent（手写套件组件）

导入模块

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

HandwriteComponent

模型约束： 此接口仅可在Stage模型下使用。

装饰器类型：@Component

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 5.0.0(12)

[h2]build

build(): void

struct的默认构造函数，无法直接调用此方法。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 5.0.0(12)

InitCallback

type InitCallback = () => void

套件初始化的回调。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 5.1.0(18)

ScaleCallback

type ScaleCallback = (scale: number) => void

画布缩放的回调。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 5.1.0(18)

参数：

DidScrollCallback

type DidScrollCallback = (yOffset: number) => void

画布滚动的回调。在画布滚动时触发，用于获取当前画布的偏移量。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 6.1.0(23)

参数：

PenType

笔刷number枚举类型。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 5.1.0(18)

PenHspInfo

笔刷类型及笔宽。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 5.1.0(18)

参数：

HiddenConfig

隐藏工具栏上的特定工具。适用于为应用程序构建手写工具栏的场景。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 26.0.0

HiddenToolType

可隐藏的手写工具枚举类型。适用于为应用程序构建手写工具栏的场景。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.Stylus.Handwrite

起始版本： 26.0.0

示例:

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

@Entry
@Component
struct HandWriteDemoComp {
  controller: HandwriteController = new HandwriteController();
  // 根据应用存储规则，获取到手写文件保存的路径，此处仅为实例参考。
  initPath: string = this.getUIContext().getHostContext()?.filesDir + '/aa';
  penWidth: number = 5;
  ballpointPenWidth: number = 6;
  @State yOffset: number = 0;

  aboutToAppear() {
    // 加载时设置保存动作完成后的回调。
    this.controller.onLoad(this.callback);
  }

  // 手写文件内容加载完毕渲染上屏后的回调，通知接入用户，可在此处进行自定义行为。
  callback = () => {
    // 自定义行为，例如文件加载完毕后展示用户操作指导。
  }

  build() {
    Row() {
      Stack({ alignContent: Alignment.TopStart }) {
        HandwriteComponent({
          handwriteController: this.controller,
          defaultPenType: PenType.PEN, // 可选属性，默认笔刷
          defaultPenInfo: [{ penType: PenType.PEN, penWidth: this.penWidth },
            { penType: PenType.BALLPOINT_PEN, penWidth: this.ballpointPenWidth }] as PenHspInfo[], // 可选属性，各笔刷的默认宽度。
          widthRatio: 1, // 可选属性，自定义画布大小，宽度占比（0-1）。
          heightRatio: 1, // 可选属性，自定义画布大小，高度占比（0-1）。
          maxCanvasHeight: 5000, // 可选属性，自定义画布最大高度。
          scaleDisabled: false, // 可选属性，是否禁止缩放。
          hiddenTools: {
            hiddenOptionalTools: [HiddenToolType.PENCIL], // 可选属性，设置需要隐藏的工具类集合。
            hiddenArcBox: false  // 可选属性，设置是否隐藏波轮菜单。
          } as HiddenConfig, // 可选属性，隐藏不需要的手写工具。
          onInit: () => {
            // 画布初始化完成时的回调。此时可以调用接口加载和显示笔记内容。
            this.controller?.load(this.initPath);
          },
          onScale: (scale: number) => {
            // 画布缩放时的回调方法，将返回当前手写控件的缩放比例，可在此处进行自定义行为。
          },
          onDidScroll: (yOffset: number) => {
            // 画布滚动时的回调方法，将返回当前滚动位置的纵坐标，可在此处进行自定义行为。
            this.yOffset = yOffset;
          }
        })
        // 保存及获取缩略图。非必要组件，用户可自行调整或删除。
        Button('save')
          .onClick(async () => {
            // 需根据应用存储规则，获取到手写文件保存的路径，此处仅为实例参考。
            const path = this.getUIContext().getHostContext()?.filesDir + '/aa';
            await this.controller?.save(path).then().catch((error: Error) => {
              console.error('err: ' + error);
            })
            // 获取缩略图。
            this.controller.getThumbnail(this.controller?.getContentRange())?.then((pixelMap: PixelMap) => {
              if (pixelMap) {
                pixelMap.release();
                console.info('getThumbnail success');
              }
            })
          })
        // 设置长画布的滚动位置。当前可滚动最大距离为px2vp(1000000)减去list组件高度。
        Search()
          .searchButton('scrollTo').onSubmit((value: string) => {
          if (!Number.isNaN(Number(value))) {
            this.controller.scrollTo(Number(value));
          }
        }).margin({ top: 100 }).width(220)
        // 当前画布的偏移量。
        Text('onDidScroll: ' + this.yOffset)
          .margin({ top: 150 }).width(220)
      }
      .width('100%')
    }
    .height('100%')
  }
}

HandwriteController中的方法需要放在上述示例的画布控件初始化的回调中运行或自定义的方法中运行。

使用前需要先设置context信息。

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