PixiJS 源码解读:绘制矩形,底层都做了什么?

PixiJS 源码解读:绘制矩形,底层都做了什么?大家好 我是前端西瓜哥 今天带大家看一下 PixiJS 的源码实现 PixiJS 是一个非常流行的 Canvas 库 start 数将近 4w 使用 PixiJS 简单易用的 API 我们可以在浏览器页面的 Canvas 元素上高性能地绘制

大家好,欢迎来到IT知识分享网。

大家好,我是前端西瓜哥,今天带大家看一下 PixiJS 的源码实现。

PixiJS 是一个非常流行的 Canvas 库,start 数将近 4w。

使用 PixiJS 简单易用的 API,我们可以在浏览器页面的 Canvas 元素上高性能地绘制图形,实现流畅的动画。它的底层是 WebGL。

用 PixiJS 绘制一个矩形,代码实现为:

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

渲染结果:

PixiJS 源码解读:绘制矩形,底层都做了什么?

这些代码的底层究竟做了什么呢?这次西瓜哥就带大家来一探究竟。

使用的 PixiJS 版本为 7.2.4。

Application 的初始化

首先是调用 Application 类的构造函数,创建 app 对象。

下面是 Application 构造函数的代码。

export class Application {   // 创建 stage   public stage: Container = new Container();   // ...   constructor(options) {     options = Object.assign(       {         // 是否强制使用 Canvas 2D,否则如果支持 WebGL,用 WebGL         // 默认为 false,且已经废弃 Canvas 2D,仅 pixi.js-legacy 可用         forceCanvas: false,        },       options     );       // 选择渲染器     this.renderer = autoDetectRenderer(options);     // 插件初始化     Application._plugins.forEach((plugin) => {       plugin.init.call(this, options);     });   } } 

主要做了以下几件事。

  1. 初始化 this.stage 为一个新的 Container 对象,将其作为根容器,之后我们绘制的矩形会放置于其下;
  2. 选择渲染器 renderer,有两种:Renderer(基于 WebGL) 和 CanvasRenderer(基于 Canvas 2D)。最新版 PixiJS 只内置了 Renderer。如果你希望在 WebGL 不可用时回退为 CanvasRenderer,需要改用 pixie.js-legacy 库。
  3. 调用 Renderer 的构造函数。它的属性 view 会指向一个 canvas 元素,Application 的 view 通过 getter 的代理方式拿到这个 view;
  4. 调用 Application 中注册插件的 init 方法,进行初始化。

Application 默认内置两个插件:

  • TickerPlugin:不停地在绘制下一帧前调用(基于 requestAnimationFrame)传入的回调函数,PixiJS 会在这里指定下一帧数要绘制的新内容;
  • ResizePlugin:监听容器尺寸变化,重绘画布。
PixiJS 源码解读:绘制矩形,底层都做了什么?

创建图形

const graph = new PIXI.Graphics(); 

创建一个 Graphics 对象。这个 Graphics 对象下可以绘制任何图形,这里我只绘制一个矩形。

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

该方法会给 Graphics 对象的 _fillStyle 设置为指定的颜色值。传入的颜色值会进行标准化(normalize)。

PixiJS 源码解读:绘制矩形,底层都做了什么?

Pixijs 实现有自己的风格:喜欢用类似 _varX 的方法保存 “私有” 变量,然后提供对应的 setter 和 getter 去读写这个内部变量。

getter 可能不提供,这样一个属性就会变成只读属性。有些 getter 里会做懒加载,在第一次读取的时候再初始化,比如 Texture.WHITE。

如果我们不指定颜色,这个 _fillStyle 会使用默认值,且其 visible 属性为 false,表示图形没有填充色,也会在之后的渲染阶段跳过填充的逻辑。

然后是创建一个矩形。

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

上面代码其实调用的是:

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

首先创建一个 Rectangle 对象。

然后基于该 Rectangle 对象、之前设置的 fillStyle、lineStyle、matrix 创建一个 GraphicsData 对象,最后添加到给 rect._geometry.graphicsData 数组上。

PixiJS 源码解读:绘制矩形,底层都做了什么?

总之就是将这个矩形的数据记录下来,之后 PixiJS 会基于这些值构造出绘制 WebGL 可以直接使用的数据。

然后是重置填充色。

rect.endFill(); 

将 rect 的 _fillStyle 设置为默认值:

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

对应的源码是:

export class Container extends DisplayObject {   // ...   addChild(...children) {     if (children.length > 1) {       // 有多个图形要添加,会遍历调用当前 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; // 表示没有排序       child.transform._parentID = -1;       this.children.push(child);       this._boundsID++;       // 触发子节点改变的相关事件       this.onChildrenChange(this.children.length - 1);        this.emit("childAdded", child, this, this.children.length - 1);       child.emit("added", this);     }     return children[0];   } } 

至此,我们的矩形设置好属性并添加到图形树上。

下面是渲染环节。

绘制

还记得我们初始化 Application 时,初始化的两个插件吗?

其中一个就是 TickerPlugin,它是 raf(requestAnimationFrame)的封装,会在页面绘制下一帧要之前执行回调函数。

Application 初始化时,调用了TickerPlugin.init() 方法,将 renderer 的 render 方法绑定到 Ticker 上。这样,render 就会不断地被异步调用。

class TickerPlugin {   static init(options) {     Object.defineProperty(this, "ticker", {       set(ticker) {         // 将 app.render 函数传入 ticker 的回调列表         ticker.add(this.render, this, UPDATE_PRIORITY.LOW);       },       // ...     });          // 触发 ticker setter     this.ticker = options.sharedTicker ? Ticker.shared : new Ticker();   }   // ... } 

render 方法:

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

因为渲染的过程非常长,代码逻辑太多,各种细枝末节,这里只讲大致流程,之后会写一篇文章具体讲解。

  1. 递归 app.stage 下的子 graph 对象,将其变换矩阵与父容器的做矩阵乘法(父容器的 transfrom 会影响子节点),最终计算出所有节点的最终复合变换矩阵;
  2. 之前创建的 Rectangle 对象,它的 x、y、width、height,转换为 WebGL 顶点着色器(Vertex Shader)需要的 8 个顶点数据;
  3. 对顶点应用变换矩阵;
  4. 计算好的顶点和颜色的一些中间批量数据。最后在 BatchRenderer.drawBatches() 方法中,调用了 WebGL 的 API:gl.drawElements

PixiJS 高性能的一个原因是减少 draw call,尽可能一次性批量(batch)提供大量顶点和片元给到 WebGL 去处理,充分利用 GPU 的并发计算能力。

结尾

我是前端西瓜哥,欢迎关注我,学习更多前端知识。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/97142.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信