HarmonyOS 6 轻相机应用开发5：实时自动戴眼镜功能实现

引言

如果你用过各种美颜相机，一定会被那些能够精准跟随机械动作的"大头贴"特效所吸引，之前很好奇是如何实现的，经过一番研究终于找到了思路，离线人脸检测返回坐标 + 特效组件爱你绘制。在上一章中，我们让相机拥有了"识物"的智慧，而今天，我们要让这份智慧产生互动------实现实时自动戴眼镜。

这不仅是简单的贴图，它涉及到 AI 归一化坐标到屏幕像素坐标的精密转换，以及在 60 帧高刷新率下的动态同步技巧。

技术挑战：坐标系的"跨界"转换

在 HarmonyOS 6 中，我们的 AI 推理路径（AI Path）通常使用 1:1 的正方形输入（如 128x128），得到的坐标是 [0.0, 1.0] 的归一化数值。

然而，用户的手机屏幕通常是 19.5:9 的长比例，且预览画面采用了 Center-Crop（中心裁剪） 策略。这就产生了一个核心矛盾：AI 眼中的世界和用户看到的画面是不重合的。

核心实现：投影矩阵算法

为了让眼镜贴纸精准覆盖在眼睛上，我们在 StickerManager.ets 中构建了一套投影算法：

typescript 复制代码

// 坐标转换核心逻辑
public calculateStickerPosition(face: Face, canvasWidth: number, canvasHeight: number): StickerPosition | null {
    const isPortrait = canvasHeight > canvasWidth;
    const size = isPortrait ? canvasWidth : canvasHeight; // 预览短边作为 AI 1:1 的基准
    
    // 计算中心裁剪带来的偏移量
    const offsetX = isPortrait ? 0 : (canvasWidth - size) / 2;
    const offsetY = isPortrait ? (canvasHeight - size) / 2 : 0;

    // 重要：前置摄像头镜像处理
    // AI 传回的是原始图像坐标，在前置预览镜像时，X 轴需要水平反转
    const mirroredX = 1 - face.x2; 

    // 计算 UI 层最终坐标
    const x = mirroredX * size + offsetX;
    const y = face.y1 * size + offsetY;
    const w = (face.x2 - face.x1) * size;
    const h = (face.y2 - face.y1) * size;
    
    // 根据贴纸类型微调锚点
    if (this.activeSticker.type === 'face') {
        // 针对"眼镜"类型，下移 10%，并缩小高度以贴合眼部区域
        return { x: x, y: y + h * 0.1, width: w, height: h * 0.5 };
    }
}

贴纸管理器的策略设计

为了支持多种特效（如头上的猫耳、脸上的眼镜），我们为 Sticker 定义了不同的锚点类型：

head 类型：基准点设在额头上方，宽度略大于人脸。
face 类型：基准点设在眼睛中心高度，宽度与人脸等宽。

这种"语义化"的分类设计，使得我们只需要增加一张素材，就能轻松扩展出数十种甚至上百种 AR 特效。

ArkTS 实战：响应式贴纸渲染

在 Index.ets 中，我们利用 ArkTS 强大的状态管理机制，实现贴纸的毫秒级跟随：

typescript 复制代码

// 当 AI 检测到人脸数据更新时，自动触发重绘
@State @Watch('onAIUpdate') faces: Face[] = [];

build() {
  Stack() {
    // 渲染预览层
    XComponent(...)
    
    // 渲染贴纸层：根据检测到的人脸数量动态生成 Image 组件
    if (this.aiMode === 'face' && this.selectedStickerIndex >= 0) {
      ForEach(this.faces, (face: Face) => {
        Image(STICKERS[this.selectedStickerIndex].resource)
          .width(this.calcPos(face).width)
          .height(this.calcPos(face).height)
          .position({ x: this.calcPos(face).x, y: this.calcPos(face).y })
      })
    }
  }
}

通过将 Image 贴纸组件放在 Stack 容器的最上层，并绑定到 faces 数据源，我们利用了系统的自绘能力。每当 AI 线程回传新的坐标，ArkTS 引擎会立即计算新的位置参数，从而实现眼镜"粘"在脸上的丝滑效果。

效果展示

这里贴纸找了一个简单的示例，识别到人脸后返回坐标给ArkUI层展示贴纸特效：

总结

从"滤镜"的底色渲染，到"物品分类"的智能认知，再到今天"自动戴眼镜"的 AR 交互，"轻相机"应用已经构建了一套完整的 HarmonyOS 6 智能影像流水线。

这种 Native 推理 + ArkTS UI 融合 的模式，既保持了底层计算的高性能，又极大降低了 UI 交互的开发难度。这就是 HarmonyOS 混合开发模式的魅力所在。