【HarmonyOS 5.0.0 或以上】打造 WASM 图像标注与图形识别组件（支持绘制、计算与识别联动）

本文链接：https://blog.csdn.net/2501_92049284/article/details/148108563

【HarmonyOS 5.0.0 或以上】打造 WASM 图像标注与图形识别组件（支持绘制、计算与识别联动）

🎯 一、目标

本篇将基于 HarmonyOS 5.0.0 或以上，通过 WASM 实现一个具备 图像标注、几何计算、图形识别联动能力 的组件，支持：

用户在图片上自由绘制多边形/矩形/点
将标注数据传入 WASM 计算角度、面积、交点等几何属性
联动图像识别模块，标注特定区域后自动识别内容（如文字/编号）

🧱 二、核心组件设计结构

[ 图片展示 + Canvas 标注层 ]
           ↑
  [ 手势绘制点 / 多边形路径 ]
           ↓
[ 传入 WASM 模块计算 ]
           ↓
[ 输出面积、角度、交点、识别结果 ]
           ↓
[ 动态标注结果展示在 UI 上 ]

📦 三、C 模块：多边形面积 + 点角度计算

// geometry.c
#include <math.h>

// 计算简单多边形面积（Shoelace公式）
float polygon_area(float* x, float* y, int n) {
    float area = 0.0;
    for (int i = 0; i < n; i++) {
        int j = (i + 1) % n;
        area += (x[i] * y[j]) - (x[j] * y[i]);
    }
    return fabsf(area) / 2.0;
}

// 计算向量夹角（角度制）
float angle_between(float ax, float ay, float bx, float by) {
    float dot = ax * bx + ay * by;
    float lenA = sqrtf(ax * ax + ay * ay);
    float lenB = sqrtf(bx * bx + by * by);
    float cos = dot / (lenA * lenB);
    return acosf(cos) * (180.0 / 3.14159);
}

编译为 `.wasm`：

emcc geometry.c -Os -s WASM=1 -s SIDE_MODULE=1 -o geometry.wasm

🖋️ 四、ArkTS 图像标注 UI 构建（简化）

@Entry
@Component
struct MarkerCanvas {
  points: Array<{ x: number, y: number }> = []
  area: number = 0

  build() {
    Column() {
      Canvas({
        onDraw: (ctx) => {
          if (this.points.length >= 2) {
            ctx.beginPath()
            ctx.moveTo(this.points[0].x, this.points[0].y)
            this.points.slice(1).forEach(p => ctx.lineTo(p.x, p.y))
            ctx.closePath()
            ctx.stroke()
          }
        },
        onTouch: (e) => {
          const touch = e.touches[0]
          this.points.push({ x: touch.x, y: touch.y })
        }
      }).width('100%').height(300)

      Button('计算面积')
        .onClick(() => this.computeArea())
        .margin(10)

      Text('面积: ' + this.area.toFixed(2) + ' px²').fontSize(18)
    }
  }

  async computeArea() {
    const instance = await loadWasmInstance('geometry.wasm')
    const memory = instance.exports.memory as WebAssembly.Memory
    const buf = new Float32Array(memory.buffer)

    const offsetX = 1024
    const offsetY = 2048
    const n = this.points.length

    this.points.forEach((p, i) => {
      buf[offsetX / 4 + i] = p.x
      buf[offsetY / 4 + i] = p.y
    })

    const fn = instance.exports.polygon_area as CallableFunction
    this.area = fn(offsetX, offsetY, n)
  }
}

🧠 五、进阶联动识别功能

在 computeArea() 之后，如果标注的是图像特定区域，还可以：

提取对应像素区域（readPixelsToBuffer() 裁剪区域）
传入 WASM OCR 模块识别文字/编号（复用第 17 篇内容）
将识别结果回显在 Canvas 图层或 Text 标签中

🧩 六、可拓展的图形分析方向

功能	实现方式建议
多边形角度分析	每三个点为一组，使用 `angle_between()`
碰撞检测 / 包围盒	计算边界框，与其他元素比较交集
多边形内点判断	使用射线法或奇偶性算法
交点计算	实现线段相交检测逻辑