跳到主要内容

接入报点预测

接入报点预测功能,可以优化应用中手写效果的绘制跟手性,提升应用中手写笔书写场景的跟手体验。

场景介绍

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

接口说明

类名接口名描述
PointPredictorgetPredictionPoint(event: TouchEvent): TouchPoint获取预测点

开发步骤

  1. 导入相关模块。

    import { PointPredictor } from '@kit.Penkit';
  2. 获取当前界面的触摸事件信息,调用接口计算预测点信息。

    @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() // 画布
    }.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: // 按下时,新建一条画图路径
    break;
    case TouchType.Move: // 使用预测算法进行预测,获得预测点
    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;
    }
    })
    }
    }