Canvas 离屏渲染实现多图层图表合成与交互拾取- 惊觉

Canvas 离屏渲染实现多图层图表合成与交互拾取

封面信息图

在用 HTML5 Canvas 绘制复杂自定义图表（如百万点热力图、多轴股票行情图或大型网络拓扑）时，开发者常常陷入两难境地：每次鼠标微小的移动（Hover）或十字光标（Crosshair）重绘，若对整个画布全量清空重画，CPU 负载会立刻飙升；而如果在图元上进行几何数学求交（如多边形内点判定、贝塞尔曲线距离测算），在图元数量过万时数学运算会直接锁死主线程。

解决这两大性能痛点的经典架构方案是：多图层离屏分治合成与基于离屏颜色编码的像素级拾取（Color Picking）。

图层分拆与合成架构设计

一张高频交互图表应当按刷新频率拆分为三个独立的 Canvas 渲染层：

[视图顶层] Interaction Canvas (透明) -> 负责十字准星、Hover 描边、Tooltip 标记 (60fps 高频)
    ▲
[视图中层] Series Canvas (主图)      -> 负责数据折线、柱体、散点等数据图元 (数据变动时重绘)
    ▲
[视图底层] Background Canvas (静态)  -> 负责坐标轴、背景网格线、水印、图例 (几乎不重绘)

通过 CSS 绝对定位将三层 Canvas 叠放在同一容器内：

鼠标在图表上划过时，底层和中层完全不需要重绘，只需以 0 成本保持原样；
顶层 Interaction Canvas 尺寸极小或仅清空局部，耗时 < 1ms。

基于离屏颜色编码（Color Picking）的万级图元拾取

数学射线检测与点多边形求交算法的时间复杂度是 $O(N)$。当图元形态为复杂不规则图形、散布在画布各处时，数学判定极其昂贵。

颜色拾取法利用 GPU/Canvas 的栅格化能力，将图元 ID 编码为一个唯一的 RGB 颜色值，在不可见的“离屏 Canvas”上绘制完全相同几何轮廓的单色色块。鼠标移动到 $(x, y)$ 时，仅需读取离屏画布该点处的 1 像素颜色值，反向解码为数字 ID，时间复杂度恒定为 $O(1)$。

export class ColorPickingManager {
  private offscreenCanvas: HTMLCanvasElement;
  private offscreenCtx: CanvasRenderingContext2D;
  private idToElementMap = new Map<number, any>();
  private nextId = 1;

  constructor(width: number, height: number) {
    this.offscreenCanvas = document.createElement('canvas');
    this.offscreenCanvas.width = width;
    this.offscreenCanvas.height = height;
    this.offscreenCtx = this.offscreenCanvas.getContext('2d', {
      willReadFrequently: true, // 告知浏览器针对频繁 getImageData 优化内存
    })!;
  }

  // 将自增 ID 编码为 RGB 颜色字符串
  private idToColor(id: number): string {
    const r = (id >> 16) & 0xff;
    const g = (id >> 8) & 0xff;
    const b = id & 0xff;
    return `rgb(${r},${g},${b})`;
  }

  // 将像素 RGB 还原为 ID
  private colorToId(r: number, g: number, b: number): number {
    return (r << 16) | (g << 8) | b;
  }

  // 注册图元并分配颜色
  registerElement(element: any): string {
    const id = this.nextId++;
    this.idToElementMap.set(id, element);
    return this.idToColor(id);
  }

  getOffscreenContext(): CanvasRenderingContext2D {
    return this.offscreenCtx;
  }

  clear() {
    this.offscreenCtx.clearRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
    this.idToElementMap.clear();
    this.nextId = 1;
  }

  // 根据鼠标物理坐标拾取图元 (O(1) 极速判定)
  pick(x: number, y: number): any | null {
    // 读取 1x1 像素数据
    const pixel = this.offscreenCtx.getImageData(x, y, 1, 1).data;
    const [r, g, b, a] = pixel;

    // a === 0 说明点击在空白透明区域
    if (a === 0) return null;

    const id = this.colorToId(r, g, b);
    return this.idToElementMap.get(id) || null;
  }
}

多图层合成与离屏预渲染实践

对于包含复杂纹理或高开销渐变的静态背景，在主线程初始化时先将其离线绘制到独立的 OffscreenCanvas 缓冲中。主屏幕渲染循环中直接调用 ctx.drawImage(offscreenBuffer, 0, 0)：

export class LayeredChartRenderer {
  private mainCtx: CanvasRenderingContext2D;
  private bgOffscreen: HTMLCanvasElement;
  private pickingManager: ColorPickingManager;
  private width: number;
  private height: number;

  constructor(mainCanvas: HTMLCanvasElement, width: number, height: number) {
    this.width = width;
    this.height = height;
    mainCanvas.width = width;
    mainCanvas.height = height;
    this.mainCtx = mainCanvas.getContext('2d')!;

    this.bgOffscreen = document.createElement('canvas');
    this.bgOffscreen.width = width;
    this.bgOffscreen.height = height;

    this.pickingManager = new ColorPickingManager(width, height);
    this.renderStaticBackground();
  }

  private renderStaticBackground() {
    const bgCtx = this.bgOffscreen.getContext('2d')!;
    bgCtx.strokeStyle = '#e2e8f0';
    bgCtx.lineWidth = 1;

    // 绘制 100 条背景网格线
    for (let y = 0; y < this.height; y += 20) {
      bgCtx.beginPath();
      bgCtx.moveTo(0, y);
      bgCtx.lineTo(this.width, y);
      bgCtx.stroke();
    }
  }

  renderSeries(dataPoints: Array<{ x: number; y: number; r: number; meta: any }>) {
    // 1. 清空主屏与拾取画布
    this.mainCtx.clearRect(0, 0, this.width, this.height);
    this.pickingManager.clear();
    const pickCtx = this.pickingManager.getOffscreenContext();

    // 2. 贴底静态网格 (极速位图直拷)
    this.mainCtx.drawImage(this.bgOffscreen, 0, 0);

    // 3. 绘制数据图元并同步着色到离屏拾取缓冲
    for (const pt of dataPoints) {
      const pickColor = this.pickingManager.registerElement(pt.meta);

      // 主屏幕正常着色
      this.mainCtx.fillStyle = '#3b82f6';
      this.mainCtx.beginPath();
      this.mainCtx.arc(pt.x, pt.y, pt.r, 0, Math.PI * 2);
      this.mainCtx.fill();

      // 拾取画布绘制纯 ID 色块
      pickCtx.fillStyle = pickColor;
      pickCtx.beginPath();
      pickCtx.arc(pt.x, pt.y, pt.r, 0, Math.PI * 2);
      pickCtx.fill();
    }
  }

  handleMouseMove(mouseX: number, mouseY: number) {
    const hitTarget = this.pickingManager.pick(mouseX, mouseY);
    if (hitTarget) {
      // 命中目标，高亮并显示 Tooltip
      console.log('拾取到图元数据:', hitTarget);
    }
  }
}

架构收益与工程防坑

willReadFrequently: true 的必要性：在创建 2D 上下文时声明该标志，能防止 Chrome / Safari 将 Canvas 强制放入仅写显存，从而避免 getImageData 时引发昂贵的 GPU-CPU 显存回读停顿（Pipeline Stall）。
DPR 像素对齐：在 Retina 屏下，离屏拾取画布的尺寸必须与物理像素（width * dpr）严格对齐，鼠标坐标读取时需乘上 DPR 系数。

通过离屏预渲染将静态开销剥离，利用颜色拾取将动态交互复杂度压至 $O(1)$，前端图表在面对十万级图元时也能如丝般顺滑。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/2301_77785315/article/details/166482370

Canvas 离屏渲染实现多图层图表合成与交互拾取