学习笔记：一起进入 PixiJS 的世界 (五)

目前已接触的DisplayObject包含了PIXI.Graphics()的图像绘制、PIXI.Text()的文字建立，这些物件都能将互动属性interactive设定为true值，定义物件的互动效果。

而DisplayObject这些物件除了interactive外，还有其他属性可以直接定义，像是可以使用x、y属性，可以直接定义物件的位置、rotation定义了旋转角度、alpha定义不透明度，除了直接定义这些属性外，也可於之後利用PIXI.Ticker将定期渲染的机制加进场景，搭配运算机制来建立基础的小动画。

变更物件的位置、旋转角度、设定不透明度与其他属性的方式很简单，直接利用.把建构出的物件的属性定义新的数值即可。

myObj.x = 200;
myObj.y = 200;
myObj.rotation = 45 - 2 * Math.PI;
myObj.alpha = 0.5;

除了直接控制物件的定位外，也可透过在场景中建立container的方式，可以当作图层概念，利用各层container去管理物件之间的位置，对於重复或多类型复杂的图像与场景来说，是个很合适的方式。

//建立基础场景
let app = new PIXI.Application({ width:800, height: 400 })
document.body.appendChild(app.view);
//建立container并放入场景中
const container = new PIXI.Container();
app.stage.addChild(container);
//产生物件、放置於container中
let myObj = new PIXI.Graphics();
myObj.beginFill(0xffdd00);
myObj.drawCircle(0,0,50);
container.addChild(myObj);
//定位container
container.x = 200;
container.y = 200;

另外，除了数值外，也可以运用数学预算轻松达成置中效果；另外，因为初始建立的container的轴心为左上角位置，因此要达到正中央，可以在把container的pivot位置调整至container中间，之後用於等比例放大缩小、以中心旋转角度等会更加方便。

//调整container至场景中心
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
//调整container的轴心位置
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;

另外，container也是DisplayObject一员，所以也可以进行x、y、rotation属性控制外，也可以将互动属性interactive设定为true值，定义物件的互动效果罗！