Parameter	Type	Mandatory	Description
path	string	Yes	Path of the file to be loaded. The path must be an existing file path. If the path does not exist, a note file will be created.

ID	Error Message
1010400001	load failed.

Parameter	Type	Mandatory	Description
path	string	Yes	Path for saving the file.

Type	Description
Promise<void>	Promise that returns no value.

ID	Error Message
1010400002	save failed.

Parameter	Type	Mandatory	Description
callback	AsyncCallback<string>	Yes	Callback. If loading is successful, err is load success. If loading fails, err is load failed. string indicates the loading path.

ID	Error Message
1010400001	load failed.

Type	Description
Rect	Rect information, which indicates the rectangular area that includes the content.

Parameter	Type	Mandatory	Description
rect	Rect	Yes	Rect information, which indicates the rectangular area that includes the thumbnail.

Type	Description
Promise<PixelMap>	Promise used to return the thumbnail data.

Parameter	Type	Mandatory	Description
yOffset	number	Yes	Vertical coordinate (absolute value) of the scrolling position. The unit is vp. The maximum scrollable distance is px2vp(1000000) minus the height of the list component. If the value is out of range, the boundary value is used.

Name	Type	Description
left	number	Left side of the rectangle. Unit: 1/1000 of the width of the HandwriteComponent.
top	number	Top of the rectangle. Unit: 1/1000 of the width of the HandwriteComponent.
right	number	Right side of the rectangle. Unit: 1/1000 of the width of the HandwriteComponent.
bottom	number	Bottom of the rectangle. Unit: 1/1000 of the width of the HandwriteComponent.

Example

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

@Entry
@Component
struct HandWriteDemoComp {
  controller: HandwriteController = new HandwriteController();
  // Obtain the path for storing the handwritten file based on the app's storage rule. The path is for reference only.
  initPath: string = this.getUIContext().getHostContext()?.filesDir + '/aa';
  penWidth: number = 5;
  ballpointPenWidth: number = 6;
  @State yOffset: number = 0;

  aboutToAppear() {
    // Set the callback for the completion of the saving action during loading.
    this.controller.onLoad(this.callback);
  }

  // Callback triggered once the handwritten file is loaded and rendered on the screen. You will be notified of the result and can then customize actions here.
  callback = () => {
    // Custom action, for example, displaying the user operation guide after the file is loaded.
  }

  build() {
    Row() {
      Stack({ alignContent: Alignment.TopStart }) {
        HandwriteComponent({
          handwriteController: this.controller,
          defaultPenType: PenType.PEN, // (Optional) Default brush.
          defaultPenInfo: [{ penType: PenType.PEN, penWidth: this.penWidth },
            { penType: PenType.BALLPOINT_PEN, penWidth: this.ballpointPenWidth }] as PenHspInfo[], // (Optional) Default width of each brush.
          widthRatio: 1, // (Optional) Width ratio of the custom canvas size (ranging from 0 to 1).
          heightRatio: 1, // (Optional) Height ratio of the custom canvas size (ranging from 0 to 1).
          maxCanvasHeight: 5000, // (Optional) Maximum height of the custom canvas.
          scaleDisabled: false, // (Optional) Whether to disable scaling.
          hiddenTools: {
            hiddenOptionalTools: [HiddenToolType.PENCIL], // (Optional) Collection of tools to be hidden.
            hiddenArcBox: false // (Optional) Whether to hide the radial menu.
          } as HiddenConfig, // (Optional) Hide unnecessary handwriting tools.
          onInit: () => {
            // Callback triggered once the canvas initialization is complete. In this case, you can call the API to load and display the note content.
            this.controller?.load(this.initPath);
          },
          onScale: (scale: number) => {
            // Callback triggered when the canvas is scaled. The scaling factor of the current handwriting control is returned. Custom actions can be performed here.
          },
          onDidScroll: (yOffset: number) => {
            // Callback triggered when the canvas is scrolled. The vertical coordinate of the current scrolling position is returned. Custom actions can be performed here.
            this.yOffset = yOffset;
          }
        })
        // (Optional) Save and obtain the thumbnail. You can adjust or delete this component as required.
        Button('save')
          .onClick(async () => {
            // Obtain the path for storing the handwritten file based on the app's storage rule. The path is for reference only.
            const path = this.getUIContext().getHostContext()?.filesDir + '/aa';
            await this.controller?.save(path).then().catch((error: Error) => {
              console.error('err: ' + error);
            })
            // Obtain the thumbnail.
            this.controller.getThumbnail(this.controller?.getContentRange())?.then((pixelMap: PixelMap) => {
              if (pixelMap) {
                pixelMap.release();
                console.info('getThumbnail success');
              }
            })
          })
        // Set the scrolling position of the long canvas. The maximum scrolling distance is px2vp (1000000) minus the height of the list component.
        Search()
          .searchButton('scrollTo').onSubmit((value: string) => {
          if (!Number.isNaN(Number(value))) {
            this.controller.scrollTo(Number(value));
          }
        }).margin({ top: 100 }).width(220)
        // Offset of the current canvas.
        Text('onDidScroll: ' + this.yOffset)
          .margin({ top: 150 }).width(220)
      }
      .width('100%')
    }
    .height('100%')
  }
}

The methods in HandwriteController need to be executed in the canvas control initialization callback or in custom methods in the preceding example.

Set context information before using the method.

For details about the complete sample code, please refer to Penkit (ArkTS).

目录

HandwriteController (Handwriting Suite Function)

Modules to Import

HandwriteController

[h2]load

[h2]save

[h2]onLoad

[h2]getContentRange

[h2]getThumbnail

[h2]scrollTo

Rect

Example