[原创]书写不再“断片”！Pen Kit报点预测丝滑如真笔-HarmonyOS-看雪安全社区

[原创]书写不再“断片”！Pen Kit报点预测丝滑如真笔

发表于: 2025-8-30 11:20 298

[原创]书写不再“断片”！Pen Kit报点预测丝滑如真笔

HarmonyOS SDK 活跃值

2025-8-30 11:20

298

传统手写场景中，用户常因笔尖滞后、轨迹抖动等问题导致书写体验割裂，而开发者则面临跨设备适配复杂、算法优化成本高等痛点。

HarmonyOS SDK手写笔服务（Pen Kit）提供报点预测能力，根据书写轨迹预测报点提前进行绘制，提高手写跟手性，手写套件已默认开启报点预测，您也可以在应用中单独集成报点预测功能。

在应用的自定义界面中，获取到界面的触摸事件，通过调用报点预测的接口，可以得到预测的下一个报点的位置信息。

应用场景

教育创作：提升涂鸦场景的跟手性。

开发步骤

导入相关模块。

import { PointPredictor } from '@kit.Penkit';

获取当前界面的触摸事件信息，调用接口计算预测点信息。

@Entry
@Component
struct PointPredictorDemo {
  @State actualXCoordinate: number = 0
  @State actualYCoordinate: number = 0
  @State predictorXCoordinate: Dimension = 0
  @State predictorYCoordinate: Dimension = 0
  pointPredictor: PointPredictor = new PointPredictor();
 
  aboutToAppear() {
    console.info('getPredictionPoint aboutToAppear')
  }
 
  aboutToDisappear() {
    console.info('getPredictionPoint aboutToDisappear')
  }
 
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      this.Canvas() // Canvas.
    }.height('100%').width('100%')
  }
 
  // 画布
  @Builder
  Canvas() {
    Column() {
      Text("实际点坐标： X: " + this.actualXCoordinate + " Y: " + this.actualYCoordinate).textAlign(TextAlign.Start)
      Text("预测点坐标： X: " + this.predictorXCoordinate + " Y: " + this.predictorYCoordinate)
        .textAlign(TextAlign.Start)
    }.position({ x: 0, y: 0 })
    .alignItems(HorizontalAlign.Start)
 
    Stack()
      .width('100%')
      .height('100%')
      .onTouch((event: TouchEvent) => {
        switch (event.type) {
          case TouchType.Down: // Create a drawing path when the screen is touched.
            break;
          case TouchType.Move: // Use the prediction algorithm to perform prediction and obtain the prediction point.
            let point = this.pointPredictor?.getPredictionPoint(event)
            this.actualXCoordinate = event.touches[0]?.x
            this.actualYCoordinate = event.touches[0]?.y
            this.predictorXCoordinate = point?.x
            this.predictorYCoordinate = point?.y
            console.info("pointPredictor 实际点坐标 x:" + event.touches[0]?.x + " y:" + event.touches[0]?.y)
            console.info("pointPredictor 预测点坐标 x:" + point?.x + "  y:" + point?.y)
            break;
          case TouchType.Up:
            break;
        }
      })
  }
}