HarmonyOS开发实战之ArkGraphics 2D实现美颜相机贴纸功能

作为一名专注于HarmonyOS应用开发的工程师，今天我要记录如何利用ArkGraphics 2D为"拍摄美颜相机"App实现高性能的2D贴纸渲染。这个轻量级图形引擎完美支持矢量图形和位图的混合渲染，特别适合处理用户交互式贴纸场景。

开发全记录

import { Canvas, Path2D, ImageBitmap } from '@ohos/arkgraphics_2d';
// 创建绘制上下文
const canvas = new Canvas(this.context);
const ctx = canvas.getContext('2d');

// 加载贴纸资源
const sticker = await ImageBitmap.createFromPath('resources/sticker/cat_ears.png');

// 结合人脸识别坐标
faceDetector.on('faceUpdate', (landmarks) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制猫耳贴纸
  ctx.save();
  ctx.translate(landmarks[0].x, landmarks[0].y - 80);
  ctx.rotate(calculateHeadAngle(landmarks));
  ctx.drawImage(sticker, 0, 0, 150, 150);
  ctx.restore();
});

// 创建离屏画布
const offscreen = new Canvas(this.context, { willReadFrequently: true });
const offCtx = offscreen.getContext('2d');

// 预渲染复杂路径
const sparklePath = new Path2D();
sparklePath.arc(50, 50, 30, 0, Math.PI*2);
offCtx.fillStyle = 'radial-gradient(white, gold)';
offCtx.fill(sparklePath);

// 使用硬件加速
canvas.setAttribute('hardwareAccelerated', true);

// 帧动画控制
let lastTime = 0;
const animate = (timestamp) => {
  const delta = timestamp - lastTime;
  if (delta > 16) { // 60fps节流
    updateStickerPosition();
    lastTime = timestamp;
  }
  requestAnimationFrame(animate);
}

开发踩坑
发现drawImage()在连续调用时存在内存泄漏，需手动调用imageBitmap.recycle()
文字渲染建议使用ctx.font = '24px HarmonyOS Sans'系统字体
复杂路径建议转为Path2D对象复用
效果验证：在P50 Pro设备上测试，可同时渲染20+动态贴纸仍保持55FPS以上。特别在实现"跟随头部旋转"功能时，ArkGraphics 2D的矩阵变换性能明显优于传统Canvas API。