鸿蒙开发（NEXT/API 12）【硬件（接入一笔成形）】手写功能开发

移动开发技术栈

于 2024-09-28 20:16:13 发布

阅读量525

点赞数 15

分类专栏：鸿蒙开发文章标签： harmonyos 华为 openharmony 鸿蒙系统鸿蒙硬件架构系统架构

本文链接：https://blog.csdn.net/m0_70748845/article/details/142620630

版权

鸿蒙开发专栏收录该内容

597 篇文章 16 订阅

订阅专栏

接入一笔成形功能，可以传入手写笔迹的点位信息、通过手写笔/手指在屏幕上停顿一定的时间后触发此功能，触发功能后将自动识别当前绘制的图形，并生成对应的图像信息。

场景介绍

在应用中实现一笔成形，效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

支持获取识别的图像信息，图像信息支持存储。
支持从存储的图像信息中读取信息。

接口说明

类名	方法名称	说明
[InstantShapeGenerator]	[processTouchEvent]	传递触摸事件。
[InstantShapeGenerator]	[getPathFromString]	从给定的形状字符串中提取形状信息。
[InstantShapeGenerator]	[notifyAreaChange]	通知控件大小变化。
[InstantShapeGenerator]	[setPauseTime]	设置触发识别的暂停时间，单位：毫秒。
[InstantShapeGenerator]	[release]	销毁识别工具。
[InstantShapeGenerator]	[onShapeRecognized]	注册识别完成时的回调方法。

开发步骤

1.导入相关模块。

import { InstantShapeGenerator, ShapeInfo} from '@kit.Penkit';

2.构造包含一笔成型能力，下面以控件为例：

@Component
struct InstantShapeDemo {
  private instantShapeGenerator: InstantShapeGenerator = new InstantShapeGenerator();

  private shapeString: string = "";

  private points: DrawPathPointModel[] = [];
  // 绘制路径
  private drawPath = new Path2D();

  private shapePath = new Path2D();

  private mShapeSuccess = false;

  private shapeType: number = -1;

  private settings: RenderingContextSettings = new RenderingContextSettings(true);

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  // 通过回调方法获取识别结果
  private shapeInfoCallback = (shapeInfo: ShapeInfo) => {
    this.shapeString = shapeInfo.shapeString;
    this.shapePath = shapeInfo.shapePath;
    this.shapeType = shapeInfo.shapeType;
    this.mShapeSuccess = true;
    this.context.beginPath();
    this.context.reset();
    this.drawCurrentPathModel(this.shapePath);
  }

  aboutToAppear() {
    console.info('InstantShapeGenerator aboutToAppear');
    this.instantShapeGenerator?.setPauseTime(280);
    this.instantShapeGenerator?.onShapeRecognized(this.shapeInfoCallback);
  }
  aboutToDisappear(){
    console.info('InstantShapeGenerator aboutToDisappear')
    this.instantShapeGenerator?.release();
  }
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .onAreaChange((oldValue: Area, newValue: Area) => {
          this.instantShapeGenerator?.notifyAreaChange(Number(newValue.width), Number(newValue.height));
        }).onTouch((event: TouchEvent) => {
        this.instantShapeGenerator?.processTouchEvent(event);
        switch (event.type) {
          case TouchType.Down:
            this.moveStart(event.touches[0]?.x, event.touches[0]?.y);
            break;
          case TouchType.Move:
            this.moveUpdate(event.touches[0]?.x, event.touches[0]?.y);
            break;
          case TouchType.Up:
            this.moveEnd();
            break;
        }
      })
    }.height('100%').width('100%')
  }

  moveStart(x: number, y: number) {
    this.points.push({x: x, y: y})
    this.drawPath.moveTo(x, y);
    this.drawCurrentPathModel(this.drawPath);
    this.mShapeSuccess = false;
  }

  moveUpdate(x: number, y: number) {
    let lastPoint = this.points[this.points.length - 1];
    this.points.push({x: x, y: y});
    this.drawPath.quadraticCurveTo((x + lastPoint?.x) / 2, (y + lastPoint?.y) / 2, x, y);
    if (!this.mShapeSuccess) {
      this.drawCurrentPathModel(this.drawPath);
    }
  }

  moveEnd() {
    this.points = [];
    this.drawPath = new Path2D();
    this.shapePath = new Path2D();
  }

  private drawCurrentPathModel(path : Path2D) {
    this.context.globalCompositeOperation = 'source-over';
    this.context.lineWidth = 8;
    this.context.strokeStyle = "#ED1B1B";
    this.context.lineJoin = 'round';
    this.context.stroke(path);
  }
}

export class DrawPathPointModel {
  x: number = 0;
  y: number = 0;
}

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

在这里插入图片描述