iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 7

[Re:PixiJS - Day07] 容器取得可視物件的 getChildAt()、getChildByName() 方法

在 PixiJS 裡,使用 addChild(...children) 方式將顯示物件放入 container 後
並不是直接使用 container[childName] 的方式取得放入的物件

const bunny = PIXI.Sprite.from('assets/basics/bunny.png');
app.stage.addChild(bunny);

但可用 parent 找到父層 (app.stage 是 Container,也是 bunny 此時的 parent)


小小懷念,flash 時代時可以直接透過名字的方式取得物件實體
也因此在寫 PixiJS 時曾混亂過


子物件的取法有兩種:

  • getChildAt:回傳 children 陣列裡索引位置的可視物件
  • getChildByName:透過名字查找children 陣列裡名為 name 的可視物件

children 陣列裡放著各種透過 addChild(...children) 加入的可視物件
getChildAt(index),實作 上是回傳 children 陣列裡 index 位置的可視物件
getChildByName(name, deep),實作 上是回傳 容器 children 陣列裡 名為 [name] 的可視物件

這部分不太困難,對於理解 PixiJS 的結構、繼承,
或學習從 PixiJS 文件查找實作的原始碼都滿方便的


我在執行專案時,會將 addChild(...children) 的子物件,同時設定為 容器 [子物件名]
並在 removeChild(...children) 時,將 容器 [子物件名] 設為 undefined

// 場景加入兔子
app.stage.addChild(bunny);
app.stage.bunny = bunny;

// 場景移除兔子
app.stage.removeChild(bunny);
app.stage.bunny = undefined;

關於移除

1. removeChild() 只是從場景上看不到,並不是真的移除

const bunny = PIXI.Sprite.from('assets/basics/bunny.png');

app.stage.addChild(bunny); // 加入場景
app.stage.removeChild(bunny); // 於場景移除

app.stage.addChild(bunny); // bunny 並未消失,當然可以再加進場景

2. removeChild(...children) 並將物件設定成 undefined 後,還有跟兔子有關的東西嗎?

有喔

[ Demo for remove ]
讀入的 Texture / BaseTexture 會存放在 Cache 裡,
若是有很多 Texture / BaseTexture 的情形時,這些 Cache 有可能讓網頁掛掉

Texture / BaseTexture 後續會討論到,先有個印象即可


上一篇
[Re:PixiJS - Day06] 顯示物件的奇妙行為與 Clone() 方法
下一篇
[Re:PixiJS - Day08] 互動常見問題 - 多次指定事件 / 手機版測試
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言