bitArt 是一个 HarmonyOS 版像素画编辑器。本文拆解它的 Canvas 渲染链路、图层合成缓存和脏区更新策略。

图 1：bitArt 在 HarmonyOS 模拟器中的像素画编辑工作台。

图 2：bitArt HarmonyOS 工程服务分层关系。

渲染链路先分层

页面负责触控、状态和 UI 组合，PixelCanvasService 处理单图层像素数组，LayerCanvasService 处理图层可见性与透明度合成，PixelCanvasRendererService 把合成后的像素数组画到 ArkUI Canvas 上。

图层合成是渲染缓存的基础

bitArt 维护 compositePixels 作为当前可见图层按透明度混合后的结果，Canvas 主要消费这份数组。

static createCompositePixels(layersPixels: string[][], layers: LayerItem[], width: number, height: number): string[] {
  const compositePixels: string[] = new Array<string>(width * height);
  for (let row = 0; row < height; row++) {
    for (let col = 0; col < width; col++) {
      compositePixels[row * width + col] = LayerCanvasService.getCompositePixel(layersPixels, layers, width, row, col);
    }
  }
  return compositePixels;
}

高频绘制要走脏区更新

画笔或橡皮只影响局部区域，bitArt 会计算本次 stroke 的 dirtyBounds，再只重算对应的矩形范围。

static updateCompositePixels(compositePixels: string[], layersPixels: string[][], layers: LayerItem[], width: number,
  height: number, minRow: number, minCol: number, maxRow: number, maxCol: number): string[] {
  const nextCompositePixels = compositePixels.slice();
  for (let row = minRow; row <= maxRow; row++) {
    for (let col = minCol; col <= maxCol; col++) {
      nextCompositePixels[row * width + col] = LayerCanvasService.getCompositePixel(layersPixels, layers, width, row, col);
    }
  }
  return nextCompositePixels;
}