JS技巧Canvas性能優(yōu)化臟矩形渲染實(shí)例詳解

更新時(shí)間：2023年01月16日 11:13:56 作者：前端西瓜哥

這篇文章主要為大家介紹了JS技巧Canvas?性能優(yōu)化臟矩形渲染實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

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

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

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

畫布該如何更新？

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

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

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

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

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

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

臟矩形渲染原理

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

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

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

對(duì)于前面移動(dòng)紅球的場(chǎng)景，具體邏輯為：

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

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

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

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

具體實(shí)現(xiàn)請(qǐng)看這個(gè)線上 demo：

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ù)量，測(cè)試性能的上限。

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

github.com/F-star/grap…

TypeScript 類型：

export interface IPoint {
  x: number;
  y: number;
}
export interface IRect {
  x: number;
  y: number;
  width: number;
  height: number;
}
/**
 * 數(shù)組長(zhǎng)度必須大于等于 1 的 IRect 數(shù)組
 */
export type INoEmptyArray<T> = [T, ...T[]];
export type IBox = IRect;
export interface ICircle {
  x: number;
  y: number;
  radius: number;
}

（1）求多個(gè)圓形組成的包圍盒

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

/**
 * 多個(gè)圓形組成的包圍盒
 */
export function getCircleBBox(...circles: INoEmptyArray<ICircle>): IBox {
  // TODO: 優(yōu)化為一次遍歷
  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>));
}
/**
 * 多個(gè)矩形組成的包圍盒
 */
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）多個(gè)矩形是否相交（碰撞）

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

/**
 * 矩形是否相交
 */
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 };
}