【HarmonyOS 5.0.0 或以上】构建 WASM 驱动的图形交互题引擎：几何构造题自动评分 + 动态演示-CSDN博客

本文链接：https://blog.csdn.net/weixin_43815680/article/details/148114948

🎯 一、目标

传统的几何题多为静态选择/填空，然而几何构造题（如“作角平分线”“连线找中点”）需要学生在屏幕上手动绘图/操作，因此需要：

记录学生绘图轨迹或构造动作
使用 WASM 判断几何构造是否正确（位置、角度、交点等）
实现动态图形演示与构造过程评分
在 HarmonyOS 5.0.0 或以上设备上流畅运行

🧱 二、系统结构总览

[ Canvas 图形构造界面 ]
      ↓（坐标轨迹 / 操作记录）
[ WASM 图形引擎分析模块 ]
      ↓（误差容忍分析）
[ 判定结果 + 得分 + 反馈 ]
      ↓
[ 动态演示 / 再现绘图过程 ]

📦 三、交互题示例：“作角平分线”

标准输入数据：

{
  "questionId": "GEO001",
  "type": "angle_bisect",
  "givenPoints": [{ x: 100, y: 100 }, { x: 150, y: 150 }, { x: 100, y: 200 }],
  "studentLine": [{ x: 100, y: 100 }, { x: 160, y: 160 }]
}

📐 四、WASM 模块实现：角平分线判断（简化）

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

float distance(float x1, float y1, float x2, float y2) {
    return sqrtf((x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2));
}

float angle(float ax, float ay, float bx, float by) {
    return atan2f(ay - by, ax - bx);
}

int score_angle_bisect(float* pts, float* line) {
    float ax = pts[0], ay = pts[1];
    float bx = pts[2], by = pts[3];
    float cx = pts[4], cy = pts[5];
    float dx = line[2], dy = line[3];

    float ang1 = angle(ax, ay, bx, by);
    float ang2 = angle(ax, ay, cx, cy);
    float target = (ang1 + ang2) / 2.0;
    float student = angle(ax, ay, dx, dy);

    float delta = fabsf(student - target);
    return delta < 0.2 ? 1 : 0; // 小于 ~11.5° 认为正确
}

编译：

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

⚙️ 五、ArkTS 评分调用逻辑（简化）

async function scoreAngleBisect(input: {
  givenPoints: number[], // [ax, ay, bx, by, cx, cy]
  studentLine: number[]  // [ax, ay, dx, dy]
}) {
  const instance = await loadWasmInstance('geo_score.wasm')
  const memory = instance.exports.memory as WebAssembly.Memory
  const f32 = new Float32Array(memory.buffer)

  const offset1 = 1024
  const offset2 = 2048

  f32.set(input.givenPoints, offset1 / 4)
  f32.set(input.studentLine, offset2 / 4)

  const fn = instance.exports.score_angle_bisect as CallableFunction
  const result = fn(offset1, offset2)
  return result === 1
}

🖋️ 六、动态绘图 UI 构建示意（Canvas 交互）

Canvas({
  onDraw: (ctx) => {
    // 绘制角
    ctx.moveTo(ax, ay)
    ctx.lineTo(bx, by)
    ctx.moveTo(ax, ay)
    ctx.lineTo(cx, cy)

    // 学生绘线
    ctx.moveTo(ax, ay)
    ctx.lineTo(dx, dy)
    ctx.stroke()
  },
  onTouch: (e) => {
    // 记录学生绘制的终点
    dx = e.touches[0].x
    dy = e.touches[0].y
  }
})
.width(300)
.height(300)

📊 七、反馈结果展示建议

Text(score ? '✔ 恭喜你，作图正确！' : '✘ 请检查角度，稍有偏差')
Text('提示：角平分线应将角一分为二，可尝试使用量角工具辅助')

📚 八、拓展支持的图形题类型

题型	判定方法建议
作垂直线	两向量夹角约等于 90°
作中垂线	中点判断 + 垂直判定
连线找中点	判断中点是否落在线段中点±误差范围
复制角/长度	判定等长或等角 + 起点一致性

每种题型建议单独封装成函数，如 score_midpoint, score_perpendicular。

🧠 九、高阶评分建议

评分维度	说明
构造步骤正确性	绘制路径是否按题意完成
图形误差容忍度	设置角度、距离容差范围
使用辅助工具情况	鼓励使用直尺/量角器等操作工具（模拟）
动作耗时 + 重试次数	判断熟练度，进行附加评分或推荐复习