Canvas 性能優化：臟矩形渲染

作者：前端西瓜哥 2022-12-12 09:01:13

開發前端

我們改變畫布中的某個圖形，去更新畫布，最簡單的是清空畫布，然后根據圖形樹將所有圖形再繪制一遍，這在圖形較少的情況下是沒什么問題的。但如果圖形數量很多，那繪制起來可能就出現卡頓了。

大家好，我是前端西瓜哥。

使用 Canvas 做圖形編輯器時，我們需要自己維護自己的圖形樹，來保存圖形的信息，并定義元素之間的關系。

那么，有沒有什么辦法來優化一下？有，臟矩形渲染。

畫布該如何更新？

這里我們假設這么一個場景，畫布上繪制了隨機位置大量的綠球，然后頂層再繪制一個紅球。

現在我們希望紅球跟著光標進行移動，底層的綠球保存不動，該怎么做更新？

首先我們不考慮 Canvas 分層的做法，因為我這里只是為了方便，使用了比較簡單的場景。實際場景會更復雜，通常是用光標選中一個元素去拖拽它，涉及圖形拾取的實現，同時元素是會在任意層級的。這里為了聚焦于更新，所以去掉了這些無關緊要的點。

OK，回到正題，思考一下怎么做更新？

一種容易想到的方案是全量更新，在鼠標移動的時候，將所有的球重新繪制一遍。前面也說了，這在球的數量較少的情況下倒是沒什么問題，但如果圖形逐漸增多，達到一定數量，就會出現 GPU 的瓶頸，出現掉幀的情況。因為要在非常短的時間內繪制大量的圖形。

另一種方案就是本文的主題臟矩形渲染了，本質上是局部重繪。

臟矩形渲染原理

在講解之前，我們先明白幾個概念。

臟矩形：改變某個圖形的物理信息后，需要重新渲染的矩形區域，通常為目標圖形的當前幀和下一幀組成的包圍盒。
包圍盒：包圍圖形的最小矩形。通常用作低成本的碰撞檢測。因為矩形的碰撞檢測的算法是簡單高效的，而復雜圖形的碰撞檢測是復雜且低效的。

臟矩形渲染簡單來說，就是計算被改變的目標圖形兩幀所產生的包圍盒（臟矩形），將該區域清空，然后將和臟矩形發生相交的所有圖形在這個區域內重繪。

對于前面移動紅球的場景，具體邏輯為：

計算紅球在當前幀和下一幀所形成的包圍盒，這個包圍盒就是臟矩形。
遍歷綠球的物理信息，計算它們的包圍盒，取出和臟矩形發生相交的綠球。
將臟矩形區域清空。
將臟矩形設置為裁剪區域，這樣保證只能繪制在臟矩形中。
按順序繪制綠球，最后繪制紅球。按順序是為了保證層級正確。

相比全部繪制，局部繪制能有效減少需要繪制的圖形數量，減少對 GPU 繪制指令的調用，從而提高渲染性能。

這里還有個優化點，就是減少遍歷的圖形數量，可以使用 四叉樹碰撞檢測 來做優化，具體讀者可以自行網上搜索，晚點我會寫一篇文章進行講解。

臟矩形渲染實現

具體實現請看這個線上 demo：

https://codesandbox.io/s/1jr5lj。

其中有下面這么一段代碼，你可以通過注釋和反注釋來選擇 “全局渲染” 還是 “臟矩形渲染”。

canvas.addEventListener("mousemove", (e) => {
  const x = e.clientX;
  const y = e.clientY;

  // 全部重渲染（性能很差）
  // ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // drawGreenBalls(greenBalls);
  // drawRedBall(x, y);

  // 局部重渲染（性能好）
  partRender(x, y);
});

此外，可通過 greenBallCount 變量設置綠球數量，測試性能的上限。

然后說說其中涉及的一些簡單的算法，這些算法可以在我的 github 項目中找到：

https://github.com/F-star/graphics-algorithm。

TypeScript 類型：

export interface IPoint {
  x: number;
  y: number;
}
export interface IRect {
  x: number;
  y: number;
  width: number;
  height: number;
}
/**
 * 數組長度必須大于等于 1 的 IRect 數組
 */
export type INoEmptyArray<T> = [T, ...T[]];

export type IBox = IRect;

export interface ICircle {
  x: number;
  y: number;
  radius: number;
}

（1）求多個圓形組成的包圍盒

這個算法用于兩幀紅球形成的包圍盒，也就是臟矩形。以及計算綠球的包圍盒。

/**
 * 多個圓形組成的包圍盒
 */
export function getCircleBBox(...circles: INoEmptyArray<ICircle>): IBox {
  // TODO:
  const rects: IRect[] = circles.map((circle) => {
    const { x, y, radius } = circle;
    const d = radius * 2;
    return {
      x: x - radius,
      y: y - radius,
      width: d,
      height: d,
    };
  });
  return getRectBBox(...(rects as INoEmptyArray<IRect>));
}

/**
 * 多個矩形組成的包圍盒
 */
export function getRectBBox(...rects: INoEmptyArray<IRect>): IBox {
  const first = rects[0];
  let x = first.x;
  let y = first.y;
  let x2 = x + first.width;
  let y2 = y + first.height;
  for (let i = 1, len = rects.length; i < len; i++) {
    const rect = rects[i];
    if (rect.x < x) {
      x = rect.x;
    }
    if (rect.y < y) {
      y = rect.y;
    }
    const _x2 = rect.x + rect.width;
    if (_x2 > x2) {
      x2 = _x2;
    }
    const _y2 = rect.y + rect.height;
    if (_y2 > y2) {
      y2 = _y2;
    }
  }
  return {
    x,
    y,
    width: x2 - x,
    height: y2 - y,
  };
}

（2）多個矩形是否相交（碰撞）

該算法用于找出和臟矩形碰撞的綠球。

/**
 * 矩形是否相交
 */
export function isRectIntersect(rect1: IRect, rect2: IRect) {
  return (
    rect1.x <= rect2.x + rect2.width &&
    rect1.x + rect1.width >= rect2.x &&
    rect1.y <= rect2.y + rect2.height &&
    rect1.height + rect1.y >= rect2.y
  );
}

（3）計算特定范圍內的隨機坐標

用于生成大量隨機綠球。

function getRandPos(w, h, offset) {
  function getRandInt(min, max) {
    min = Math.floor(min);
    max = Math.ceil(max);
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  const x = getRandInt(0 + offset, w - offset);
  const y = getRandInt(0 + offset, h - offset);
  return { x, y };
}