前端动画渲染引擎pixi.js系列（2）container和Sprite的概念和继承关系

雨点打透心脏的1/2处 2021-09-12 05:30 529阅读 0赞

博主曾经有过2年的AS3开发经验，发现PixiJS框架与AS3有太多相似之处，就连对象的函数和事件都大体类似。曾经有过AS3开发经验的前端朋友，对容器、精灵的概念应该都不陌生。

## 一.container容器和Sprite精灵概念 ##

(1)容器表示显示对象的集合。它是作为其他对象的容器的所有显示对象的基类，即容器是用来装载多个显示对象的，其中也包括它自身的类别即Container。

创建方法：

var container = new PIXI.Container();
    container.addChild(sprite);

(2)精灵对象表示基于纹理对象存在，是能将纹理显示到舞台的显示对象。  
创建方法：

var sprite = new PIXI.Sprite.fromImage('assets/image.png');

（注）容器与精灵的继承关系是PIXI.Sprite->PIXI.Container。

下面是一个容器Container装载多个Sprite显示对象的源码例子，例子中创建了5行5列的Sprirte显示精灵，并装载到容器container中，最终把container添加至app.stage舞台。

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>容器与精灵</title>
    		<script type="text/javascript" src="../libs/pixi.js"></script>
    	</head>
    
    	<body>
    		<script>
    			var app = new PIXI.Application(800, 600, {
    				backgroundColor: 0x1099bb
    			});
    			document.body.appendChild(app.view);
    
    			var container = new PIXI.Container();
    			app.stage.addChild(container);
    
    			var texture = PIXI.Texture.fromImage('../img/bunny.png');
    			for(var i = 0; i < 25; i++) {
    				var bunny = new PIXI.Sprite(texture);
    				bunny.anchor.set(0.5);
    				bunny.x = (i % 5) * 40;
    				bunny.y = Math.floor(i / 5) * 40;
    				container.addChild(bunny);
    			}
    
    			container.x = app.renderer.width / 2;
    			container.y = app.renderer.height / 2;
    			//设置container容器原点
    			container.pivot.x = container.width / 2;
    			container.pivot.y = container.height / 2;
    
    			app.ticker.add(function(delta) {
    				container.rotation -= 0.01 * delta;
    			});
    		</script>
    	</body>
    
    </html>

展示效果：创建了5行5列的显示精灵，这些精灵都添加到了容器container中且容器在画布居中旋转。  
![Center][]

## 二.基本显示对象PIXI.DisplayObject ##

上面提到了Sprite是继承于Container的，那么Container又继承于什么对象呢？那就是DisplayObject，DisplayObject是最基本的显示对象，也就是说，三者之间的继承关系是

PIXI.Sprite->PIXI.Container->PIXI.DisplayObject

那么这意味着Sprite和Container均共享了DisplayObject的函数和方法。那么接下来只要知道PIXI.DisplayObject的函数和方法，通过继承关系就可知道Sprite和Container的函数与方法了。

**------------------------------------------------------------------------------------**

### **1.PIXI.DisplayObject参考函数(\[\]里表示入参或出参类型)：** ###

**------------------------------------------------------------------------------------**

**alpha\[number\]:**

对象的透明度。

**cacheAsBitmap\[boolean\]:**

该值默认为false，指将显示对象转换为一张位图。该值的作用是无论该对象包括了多少其他显示对象，设为true后，其他对象都集合渲染成一张位图，消耗内存较大，然后最终显示时只渲染一张位图即可。如保留默认值，则显示时会把其他对象逐个都渲染一遍，消耗CPU较大。一般遇到大量图静态图片放到同一个容器时，可以设为true，可起优化作用，动画最好使用默认值。

**filterArea\[PIXI.Rectangle\]:**

过滤器后的显示面积。

**filters\[Array.<PIXI.Filter>\]:**

过滤器，过滤器主要功能如加一些显示特效等，要移除过滤器把属性设为null即可。  
(只读)localTransform\[PIXI.Matrix\]:获取对象矩阵数据,matrix(cosθ,sinθ,-sinθ,cosθ,x,y)。

**mask\[PIXI.Graphics|PIXI.Sprite\]:**

遮罩层，显示对象设置该值后，之后遮罩区域显示，其他区域均被隐藏，要移除遮罩层把属性设为null即可。

**(只读)parent\[PIXI.Container\]:**

父级容器。

**pivot\[PIXI.Point|PIXI.ObservablePoint\]:**

对象的原点坐标值。

**position\[PIXI.Point|PIXI.ObservablePoint\]:**

对象的位移坐标值。

**renderable\[boolean\]:**

对象是否能被渲染，设为false时，将不会被渲染到舞台，但对象依然存在。当重新设为true时，对象会重新显示出来。

**rotation\[number\]:**

旋转值。

sprite.rotation = (30 * Math.PI / 180); //表示顺时针转30度

**scale\[PIXI.Point|PIXI.ObservablePoint\]:**

缩放值。

**skew\[PIXI.ObservablePoint\]:**

斜切值。

**transform\[PIXI.TransformBase\]:**

设置矩阵对象，注意此处的值为TransformBase类型，而TransformBase有操作矩阵PIXI.Matrix的相关函数和事件。

**visible\[boolean\]:**

显示隐藏，默认值为true，表示显示。与renderable的区别在于visible设为false后渲染时不会执行updateTransform，而renderable设为false后对象依然会执行updateTransform方法。

**x\[number\]:**

X坐标值。

**y\[number\]:**

Y坐标值。

**------------------------------------------------------------------------------------**

### **2.PIXI.DisplayObject参考事件,()内表示参数,\[\]里表示参数类型:** ###

**------------------------------------------------------------------------------------**

**\_recursivePostUpdateTransform():**

从根部起，递归更新所有的对象。  
destroy():通用显示对象的基销毁方法。这将自动将显示对象从其父容器中移除并移除所有当前事件侦听器和内部的引用。

**getBounds(skipUpdate, rect)\[boolean,PIXI.Rectangle\]:**

获取显示对象相对所在渲染的Canvas对象的矩形范围和绝对坐标。  
返回值类型:PIXI.Rectangle;  
参数skipUpdate一般设为false，当设为true时，表示获取矩形范围时将停止正在变换更新的显示对象，这意味着返回的结果可能是过时的，但会给你一个很好的性能提升。参数rect可选，等同于返回值。

**renderCanvas(renderer)\[PIXI.CanvasRenderer\]:**

使用指定的Canvas渲染器来渲染对象。

**renderWebGL(renderer)\[PIXI.WebGLRenderer\]:**

使用WebGL渲染器来渲染对象。

**setParent(container)\[PIXI.Container\]:**

设置该对象的父类容器。  
返回值类型:PIXI.Container,即要添加到的父类容器对象;

**setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY)\[number\]:**

便捷设置位置，缩放，倾斜和枢轴一次。  
参数(x坐标,y坐标,水平缩放,垂直缩放,旋转度,水平斜切,垂直斜切,x原点坐标，y原点坐标)

**toGlobal(position, point, skipUpdate)\[PIXI.Point,PIXI.Point,boolean\]:**

以position坐标为0,0点，获取显示对象相对所在渲染的Canvas对象的绝对坐标。  
返回值类型:PIXI.Point;  
参数：position为模拟的舞台的原点坐标，point和skipUpdate可选参数，point参数等同于返回值。

sprite.x = 100;
    sprite.y = 100;
    var p = new PIXI.Point(100, 100); //模拟的舞台原点100，100 
    var r = sprite.toGlobal(p); // 在模拟的舞台原点100，100的基础上，加上sprite自身x,y；此时 sprite 模拟的距所在渲染的Canvas对象的距离是 200,200
    console.log(r); //返回值 Point {x: 200, y: 200}

**toLocal(position, from, point, skipUpdate)\[PIXI.Point,PIXI.DisplayObject,PIXI.Point,boolean\]:**

from以position坐标为0,0点，获取from到显示对象的距离  
返回值类型:PIXI.Point;  
参数：position为模拟的舞台的原点坐标，from表示将要计算距离的对象，point和skipUpdate可选参数，point参数等同于返回值。

//容器container添加bunny1显示对象
    container.x = 0;
    container.y = 0;
    var bunny1 = new PIXI.Sprite(texture);
    bunny1.x = 50;
    bunny1.y = 50;
    container.addChild(bunny1);
    //容器containerOne添加bunny2显示对象
    containerOne.x = 50;
    containerOne.y = 50;
    var bunny2 = new PIXI.Sprite(texture);
    bunny2.x = 200;
    bunny2.y = 200;
    containerOne.addChild(bunny2);
    //bunny1、bunny2虽然在不同容器中，然而容器container、containerOne都在同一渲染的Canvas对象内，故具有相同的参考系
    var p = new PIXI.Point(100,100); //模拟舞台坐标,一般为0，0
    var r = bunny2.toLocal(p,bunny1); //bunny1在模拟舞台坐标100，100的基础上加上自身坐标，得到模拟坐标为150，150，与bunny2坐标(50+200，50+200)比较后，在距离bunny2的-100，-100方向
    console.log(r); // Point {x: -100, y: -100}

上例中所设的p模拟舞台坐标只对bunny1生效，对bunny2无效，即bunny2的参考系依然是显示对象相对所在渲染的Canvas对象。

(注)getBounds、toGlobal、toLocal三种方法计算的参考系都是所在渲染的Canvas对象，他们的应用于计算所在渲染的Canvas对象内部显示对象的位置或对象间位置关系,比如计算不同容器的对象是否有碰撞等。

**updateTransform():**

刷新并渲染显示对象。

[Center]: /images/20210813/fa3ea6be0e1d4c178ebdced63b06e2e1.png