大家好，我是前端西瓜哥，今天帶大家看一下 PixiJS 的源碼實(shí)現(xiàn)。

PixiJS 是一個(gè)非常流行的 Canvas 庫(kù)，start 數(shù)將近 4w。

使用 PixiJS 簡(jiǎn)單易用的 API，我們可以在瀏覽器頁(yè)面的 Canvas 元素上高性能地繪制圖形，實(shí)現(xiàn)流暢的動(dòng)畫(huà)。它的底層是 WebGL。

用 PixiJS 繪制一個(gè)矩形，代碼實(shí)現(xiàn)為：

const app = new PIXI.Application({
  width: 500,
  height: 300,
});
document.body.appendChild(app.view);

const graph = new PIXI.Graphics();
graph.beginFill(0xff0044); // 填充色
graph.drawRect(10, 10, 100, 80);
graph.endFill();

app.stage.addChild(graph);

渲染結(jié)果：

這些代碼的底層究竟做了什么呢？這次西瓜哥就帶大家來(lái)一探究竟。

使用的 PixiJS 版本為 7.2.4。

Application 的初始化

首先是調(diào)用 Application 類的構(gòu)造函數(shù)，創(chuàng)建 app 對(duì)象。

下面是 Application 構(gòu)造函數(shù)的代碼。

export class Application {
  // 創(chuàng)建 stage
  public stage: Container = new Container();
  // ...
  constructor(options) {
    options = Object.assign(
      {
        // 是否強(qiáng)制使用 Canvas 2D，否則如果支持 WebGL，用 WebGL
        // 默認(rèn)為 false，且已經(jīng)廢棄 Canvas 2D，僅 pixi.js-legacy 可用
        forceCanvas: false, 
      },
      options
    );
 
    // 選擇渲染器
    this.renderer = autoDetectRenderer(options);

    // 插件初始化
    Application._plugins.forEach((plugin) => {
      plugin.init.call(this, options);
    });
  }
}

主要做了以下幾件事。

1. 初始化 this.stage 為一個(gè)新的 Container 對(duì)象，將其作為根容器，之后我們繪制的矩形會(huì)放置于其下。
2. 選擇渲染器 renderer，有兩種：Renderer（基于 WebGL） 和 CanvasRenderer（基于 Canvas 2D）。最新版 PixiJS 只內(nèi)置了  Renderer。如果你希望在 WebGL 不可用時(shí)回退為 CanvasRenderer，需要改用 pixie.js-legacy 庫(kù)。
3. 調(diào)用 Renderer 的構(gòu)造函數(shù)。它的屬性 view 會(huì)指向一個(gè) canvas 元素，Application 的 view 通過(guò) getter 的代理方式拿到這個(gè) view。
4. 調(diào)用 Application 中注冊(cè)插件的 init 方法，進(jìn)行初始化。

Application 默認(rèn)內(nèi)置兩個(gè)插件：

• TickerPlugin：不停地在繪制下一幀前調(diào)用（基于 requestAnimationFrame）傳入的回調(diào)函數(shù)，PixiJS 會(huì)在這里指定下一幀數(shù)要繪制的新內(nèi)容。
• ResizePlugin：監(jiān)聽(tīng)容器尺寸變化，重繪畫(huà)布。

創(chuàng)建圖形

const graph = new PIXI.Graphics();

創(chuàng)建一個(gè) Graphics 對(duì)象。這個(gè) Graphics 對(duì)象下可以繪制任何圖形，這里我只繪制一個(gè)矩形。

graph.beginFill(0xff0044); // 填充色

該方法會(huì)給 Graphics 對(duì)象的 _fillStyle 設(shè)置為指定的顏色值。傳入的顏色值會(huì)進(jìn)行標(biāo)準(zhǔn)化（normalize）。

Pixijs 實(shí)現(xiàn)有自己的風(fēng)格：喜歡用類似 _varX 的方法保存 “私有” 變量，然后提供對(duì)應(yīng)的 setter 和 getter 去讀寫(xiě)這個(gè)內(nèi)部變量。

getter 可能不提供，這樣一個(gè)屬性就會(huì)變成只讀屬性。有些 getter 里會(huì)做懶加載，在第一次讀取的時(shí)候再初始化，比如 Texture.WHITE。

如果我們不指定顏色，這個(gè) _fillStyle 會(huì)使用默認(rèn)值，且其 visible 屬性為 false，表示圖形沒(méi)有填充色，也會(huì)在之后的渲染階段跳過(guò)填充的邏輯。

然后是創(chuàng)建一個(gè)矩形。

graph.drawRect(10, 10, 100, 80);

上面代碼其實(shí)調(diào)用的是：

return this.drawShape(new PIXI.Rectangle(x, y, width, height));

首先創(chuàng)建一個(gè) Rectangle 對(duì)象。

然后基于該 Rectangle 對(duì)象、之前設(shè)置的 fillStyle、lineStyle、matrix 創(chuàng)建一個(gè) GraphicsData 對(duì)象，最后添加到給 rect._geometry.graphicsData 數(shù)組上。

總之就是將這個(gè)矩形的數(shù)據(jù)記錄下來(lái)，之后 PixiJS 會(huì)基于這些值構(gòu)造出繪制 WebGL 可以直接使用的數(shù)據(jù)。

然后是重置填充色。

rect.endFill();

將 rect 的 _fillStyle 設(shè)置為默認(rèn)值：

public reset() {
  this.color = 0xFFFFFF;
  this.alpha = 1;
  this.texture = Texture.WHITE;
  this.matrix = null;
  this.visible = false;
}

最后是把 rect 添加到容器 app.stage 下。

app.stage.addChild(rect);

對(duì)應(yīng)的源碼是：

export class Container extends DisplayObject {
  // ...

  addChild(...children) {
    if (children.length > 1) {
      // 有多個(gè)圖形要添加，會(huì)遍歷調(diào)用當(dāng)前 addChild 方法
      for (let i = 0; i < children.length; i++) {
        this.addChild(children[i]);
      }
    } else {
      const child = children[0];
      if (child.parent) {
        child.parent.removeChild(child);
      }

      child.parent = this;
      this.sortDirty = true; // 表示沒(méi)有排序

      child.transform._parentID = -1;

      this.children.push(child);

      this._boundsID++;

      // 觸發(fā)子節(jié)點(diǎn)改變的相關(guān)事件
      this.onChildrenChange(this.children.length - 1); 
      this.emit("childAdded", child, this, this.children.length - 1);
      child.emit("added", this);
    }
    return children[0];
  }
}

至此，我們的矩形設(shè)置好屬性并添加到圖形樹(shù)上。

下面是渲染環(huán)節(jié)。

繪制

還記得我們初始化 Application 時(shí)，初始化的兩個(gè)插件嗎？

其中一個(gè)就是 TickerPlugin，它是 raf（requestAnimationFrame）的封裝，會(huì)在頁(yè)面繪制下一幀要之前執(zhí)行回調(diào)函數(shù)。

Application 初始化時(shí)，調(diào)用了TickerPlugin.init() 方法，將 renderer 的 render 方法綁定到 Ticker 上。這樣，render 就會(huì)不斷地被異步調(diào)用。

class TickerPlugin {
  static init(options) {
    Object.defineProperty(this, "ticker", {
      set(ticker) {
        // 將 app.render 函數(shù)傳入 ticker 的回調(diào)列表
        ticker.add(this.render, this, UPDATE_PRIORITY.LOW);
      },
      // ...
    });
    
    // 觸發(fā) ticker setter
    this.ticker = options.sharedTicker ? Ticker.shared : new Ticker();
  }
  // ...
}

render 方法：

class Application {
  // ...
  public render() {
    this.renderer.render(this.stage);
  }
}

因?yàn)殇秩镜倪^(guò)程非常長(zhǎng)，代碼邏輯太多，各種細(xì)枝末節(jié)，這里只講大致流程，之后會(huì)寫(xiě)一篇文章具體講解。

1. 遞歸 app.stage 下的子 graph 對(duì)象，將其變換矩陣與父容器的做矩陣乘法（父容器的 transfrom 會(huì)影響子節(jié)點(diǎn)），最終計(jì)算出所有節(jié)點(diǎn)的最終復(fù)合變換矩陣；
2. 之前創(chuàng)建的 Rectangle 對(duì)象，它的 x、y、width、height，轉(zhuǎn)換為 WebGL 頂點(diǎn)著色器（Vertex Shader）需要的 8 個(gè)頂點(diǎn)數(shù)據(jù)；
3. 對(duì)頂點(diǎn)應(yīng)用變換矩陣；
4. 計(jì)算好的頂點(diǎn)和顏色的一些中間批量數(shù)據(jù)。最后在 BatchRenderer.drawBatches() 方法中，調(diào)用了  WebGL 的 API：gl.drawElements。

PixiJS 高性能的一個(gè)原因是減少 draw call，盡可能一次性批量（batch）提供大量頂點(diǎn)和片元給到 WebGL 去處理，充分利用 GPU 的并發(fā)計(jì)算能力。