iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
0
Modern Web

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

[Re:PixiJS - Day13] 感應(三) interactive 與 interactiveChildren 屬性

在看互動相關的屬性時,除了 interactive 外還有一個類似的 interactiveChildren

Demo 與實作後,覺得可把 interactiveChildren 當作進階設定,大部分情況下可不用更動,避免混亂。


前幾篇的 結論:因為繼承關係,可把可視物件當成容器再放入物件

物件本身在各類別所指:

  • Sprite類別:使用的材質
  • Text類別:文字
  • Graphics類別:畫出來的圖

子物件:

  • 物件透過 addChild(child) 加入的子物件,可透過 getChildAt()、getChildByName() 方法 取得子物件

interactive 與 interactiveChildren 屬性的預設值:

各種可視物件在產生出來的時候:

  • interactive :預設 false,讓物件本身可互動
  • interactiveChildren : 預設 true,讓物件的子物件可互動

interactiveChildren 設定為 true 時,其 children陣列 內子元件的互動效果才會觸發。
反之可透過父物件設定 interactiveChildren 一次取消子物件內的互動


[ Demo ]
結構: 命名為 testGraphic 的 Graphics實體 裡放入三個方塊

測試方式:
testGraphic 點了會顯示 testGraphic pointerdown
方塊點了會顯示 方塊名 pointerdown

testGraphic.on('pointerdown', ()=>{
	console.log(`testGraphic pointerdown`);
});
box.on('pointerdown', ()=>{
    console.log(`${name} pointerdown`);
});

各種 interactive 與 interactiveChildren 的交叉測試

測試1:

  • interactive:true
  • interactiveChildren:true

白色三角形:觸發 graphic 實體(父物件) 的互動事件

方塊

  1. 觸發 方塊(子物件) 的互動事件
  2. 觸發 graphic 實體(父物件) 的互動事件


測試2:

  • interactive:true
  • interactiveChildren:false

白色三角形:觸發graphic 實體(父物件) 的互動事件

游標位置:此時感應到的是白色三角形無視橘色方塊

方塊(與三角形無交疊時):無觸發事件

游標位置:此時離開白色三角形,無觸發事件


測試3:

  • interactive:false
  • interactiveChildren:true

白色三角形:無觸發事件

游標位置:無觸發事件,滑鼠為預設

方塊:觸發方塊(子物件) 的互動事件

游標位置:此時感應到方塊的互動事件,滑鼠改變


測試4:

  • interactive:false
  • interactiveChildren:false

白色三角形:無觸發事件
方塊:無觸發事件


容易混淆的地方:

SpriteTextGraphic 等類別當容器放入子元件,
且分開控制物件本身與子物件的互動行為
可行,但可能會遇到 互動控制(本篇討論)、深度 等...問題

我在專案中,習慣使用 Container類別 放入物件
並只使用 interactive,控制元件的互動


今日小節

interactive:設定該物件本身可不可被互動
interactiveChildren:設定該物件 children陣列 裡的子物件可不可被互動

父物件interactiveChildrenfalse 時,
即使子物件interactivetrue,也不會觸發事件


上一篇
[Re:PixiJS - Day12] 感應(二) alpha0 與 beginFill(color, 0) 時是否可以感應?
下一篇
[Re:PixiJS - Day14] hitArea 屬性
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言