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

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

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

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

畫布該如何更新？

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

現(xiàn)在我們希望紅球跟著光標(biāo)進(jìn)行移動，底層的綠球保存不動，該怎么做更新？

首先我們不考慮 Canvas 分層 的做法，因?yàn)槲疫@里只是為了方便，使用了比較簡單的場景。實(shí)際場景會更復(fù)雜，通常是用光標(biāo)選中一個元素去拖拽它，涉及 圖形拾取 的實(shí)現(xiàn)，同時元素是會在任意層級的。這里為了聚焦于更新，所以去掉了這些無關(guān)緊要的點(diǎn)。

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

一種容易想到的方案是 全量更新，在鼠標(biāo)移動的時候，將所有的球重新繪制一遍。前面也說了，這在球的數(shù)量較少的情況下倒是沒什么問題，但如果圖形逐漸增多，達(dá)到一定數(shù)量，就會出現(xiàn)  GPU 的瓶頸，出現(xiàn)掉幀的情況。因?yàn)橐诜浅６痰臅r間內(nèi)繪制大量的圖形。

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

臟矩形渲染原理

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

1. 臟矩形：改變某個圖形的物理信息后，需要重新渲染的矩形區(qū)域，通常為目標(biāo)圖形的當(dāng)前幀和下一幀組成的包圍盒。
2. 包圍盒：包圍圖形的最小矩形。通常用作低成本的碰撞檢測。因?yàn)榫匦蔚呐鲎矙z測的算法是簡單高效的，而復(fù)雜圖形的碰撞檢測是復(fù)雜且低效的。

臟矩形渲染簡單來說，就是計(jì)算被改變的目標(biāo)圖形兩幀所產(chǎn)生的包圍盒（臟矩形），將該區(qū)域清空，然后將和臟矩形發(fā)生相交的所有圖形在這個區(qū)域內(nèi)重繪。

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

1. 計(jì)算紅球在當(dāng)前幀和下一幀所形成的包圍盒，這個包圍盒就是臟矩形。
2. 遍歷綠球的物理信息，計(jì)算它們的包圍盒，取出和臟矩形發(fā)生相交的綠球。
3. 將臟矩形區(qū)域清空。
4. 將臟矩形設(shè)置為裁剪區(qū)域，這樣保證只能繪制在臟矩形中。
5. 按順序繪制綠球，最后繪制紅球。按順序是為了保證層級正確。

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

這里還有個優(yōu)化點(diǎn)，就是減少遍歷的圖形數(shù)量，可以使用 四叉樹碰撞檢測 來做優(yōu)化，具體讀者可以自行網(wǎng)上搜索，晚點(diǎn)我會寫一篇文章進(jìn)行講解。

臟矩形渲染實(shí)現(xiàn)

具體實(shí)現(xiàn)請看這個線上 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 變量設(shè)置綠球數(shù)量，測試性能的上限。

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

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;
}
/**
 * 數(shù)組長度必須大于等于 1 的 IRect 數(shù)組
 */
export type INoEmptyArray<T> = [T, ...T[]];

export type IBox = IRect;

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

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

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

/**
 * 多個圓形組成的包圍盒
 */
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）計(jì)算特定范圍內(nèi)的隨機(jī)坐標(biāo)

用于生成大量隨機(jī)綠球。

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 };
}

性能測試

主要是看 fps。

我們先開啟瀏覽器的 fps 監(jiān)測。

然后選中這個，即可打開 fps 監(jiān)測。

綠球在 3300 個的情況下，快速地移動光標(biāo)讓紅球不斷改變位置。對我的設(shè)備來說，測試結(jié)果如下。

使用臟矩形渲染的情況下，除了一開始初始化必要的全部渲染外，之后 fps 能穩(wěn)定在滿幀數(shù) 59.4 毫無波動（不同的顯示器的滿 FPS 不同）。

后來我改成 30000 個，結(jié)果還是穩(wěn)定 59.4。主要還是移動的兩幀形成的臟矩形太小了，所以重繪的圖形數(shù)量其實(shí)并不多，如果臟矩形變大，渲染性能就會下降。當(dāng)臟矩形變成畫布大小，其實(shí)就退化為全局渲染了。

而全局渲染則掉到了 37.8 fps，這還是 3300 個的情況下。

結(jié)尾

臟矩形渲染，其實(shí)就是局部渲染，找到圖形會變化的區(qū)域（臟矩形）做去更新，這個區(qū)域外都是不變的。找出所有和臟矩形相交的圖形，將它們在這個區(qū)域內(nèi)進(jìn)行更新。