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。