部落客曾經有過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中且容器在畫布居中旋轉。
二.基本顯示對象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():
重新整理并渲染顯示對象。
![React中setState的怪異行為 ——setState沒有即時生效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)