PixiJS V5 教學 (3) - Container
前言
前面基本知識也算是講得差不多,接下來將會介紹 PIXI 中的一個重要的東西,也就是 Container。
Container
說到 Container 若是有寫過 Boostrap 的人就會知道它是網格系統必備的東西,而在 PixiJS 中也是非常重要的要點之一,在 IT 鐵人賽中有一位大大就有 介紹 PIXI.container 的特效
- 容器 :可加入其他元件與元件索引操作,如新增移除設定深度
- 可互動 :預設不可互動,設定為可互動後,可使用各種互動監聽
- 可視物件:可設定 x、y、alpha、setTransform 等
這邊拉回 Boostrap 的場面,我們都知道 Container 的頂頭就是 HTML 的 <body>
,但是在 Pixi 的 Container 卻不是,Pixi 的 Container 起始點是 stage,也可以把 stage 看成 <body>
。
那由於我們知道 PIXI 的頂層是 stage 了,所以假使我們要加入一個新的 container (容器),那麼就要這樣子寫
1 | const container = new PIXI.container(); |
addChild
的意思就在 stage 加入一個可以看見的物件,當然語法不只有 addChild
,還有另一種 addChildAt
,但是 addChildAt
較複雜,因為還有包含深度。
那假使是要取得容器呢?那就是變成使用 getChildAt
以及 getChildIndex
,這兩者差別在於前者是取得物件,後者則為回傳物件的 index。
此外也可以指定物件深度 setChildIndex
。
前面講一推廢話說真的也看不出 Container 的用處,就跟你直接在網頁上使用 .container
若沒包含 .row
> .col
以及內容是看不出效果的,所以就試著加入一些東西囉~
首先若要在 PIXI 裡面加入文字是使用 PIXI 中的一個 API,也就是 PIXI.Text
的方法
1 | const app = new PIXI.Application({ |
而 new PIXI.Text('這是一段話')
就會加入至 container 底下,其概念就跟群組類似。