iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

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

[Re:PixiJS - Day14] hitArea 屬性

實測後的 hitArea 幾個特性:

1: hitArea 不影響物件本身的寬高
2: 設定 hitArea 時,感應區以 hitArea 設定為主,物件本身的邊界範圍不感應
3: hitArea 的座標為物件座標裡的 絕對位置
4: 設定 hitArea 後,如與其他物件重疊時,仍依據 物件深度 觸發事件

hitArea 屬性 的說明文件:DisplayObject#hitArea

hitArea:
Interaction shape. Children will be hit first, then this shape will be checked. Setting this will cause this shape to be checked in hit tests rather than the displayObject's bounds.


1. hitArea 不影響物件本身的寬高

[ Demo-1 ]:
測試: 加入 hitArea 並測試寬高
結果: 不影響物件寬高


2. 設定 hitArea 時,感應區以 hitArea 設定為主,物件本身的邊界範圍不感應

[ Demo-2 ]:
測試: 做一個小於物件的 hitArea,測試在物件內但不在 hitArea 範圍的互動行為
結果: hitArea 範圍內可互動,hitArea 範圍外不可互動

bunny.on('pointerdown', ()=>{
	console.log('bunny pointerdown');
});

// bunny 的寬高為 26x37, 做一個大約半個兔子高的 hitArea
bunny.hitArea = new PIXI.Rectangle(0, 0, 26, 19);

因為 hitArea 不會顯示在畫面上,做了一個色塊墊在下面
色塊的大小、座標皆與 hitArea 相同,
但沒有設定 interactivebuttonMode,不影響互動行為


滑鼠在 hitArea 上時,可觸發互動行為


滑鼠在兔子上,但不在 hitArea 範圍時,不會觸發互動行為


3. hitArea 的座標為物件座標裡的絕對位置

[ Demo3-1 ]
測試: 將兔子放在畫面中央,並設定 hitArea 大小 10x10、座標 (0,0)
結果: 感應區在兔子的相對位置上

bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

bunny.hitArea = new PIXI.Rectangle(0, 0, 10, 10);

因為沒設定兔子的中心點 (anchor 或 pivot),因此將兔子座標定在畫面中間時
兔子的位置會在畫面的中間向右下
感應區的 (0,0) 座標與兔子位置相同


[ Demo3-2 ]
測試: 使用 anchor 改變兔子素材的中心點,並設定 hitArea 大小 10x10、座標 (0,0)
結果: anchor 改變兔子素材的位置,但不影響感應區位置

bunny.anchor.set(0.5);
bunny.hitArea = new PIXI.Rectangle(0, 0, 10, 10);

anchor.set(0.5)、沒有 pivot
anchor 設定會改變兔子素材的中心點,但兔子裡的 (0,0) 座標仍在原本位置
因此兔子座標、感應區位置與沒有設定 anchor 時相同


[ Demo3-3 ]
測試: 使用 pivot 改變整個物件的中心點,hitArea 為 10x10, 座標 (0,0)
結果: pivot 改變整個物件的中心點,因此感應區的 (0,0) 位置也改變了

bunny.pivot.set(13, 18.5);
bunny.hitArea = new PIXI.Rectangle(0, 0, 10, 10);

pivot 與 anchor 屬性的討論可參考:
[Re:PixiJS - Day06] PixiJS 可視物件的微妙行為


4. 設定 hitArea 後,如與其他物件重疊時,仍依據物件深度觸發事件

[ Demo4 ]

測試: 畫面上放上兩隻兔子,並各自指定了比兔子本身還大的感應區,測試重疊感應區
結果: 僅觸發上層兔子的感應區

由於 rightBunny 在 leftBunny 的上方,
且設定了 interactive = true,阻斷了下層物件的感應
因此結果為: rightBunny pointerDown


本日心得:

使用 hitArea 不算在寬高的特性,製作超出元件大小的感應區滿方便的
但使用 hitArea 時,不容易從視覺上看出感應區的位置,不容易除錯

( 在Pixi.js devtools Debug 工具中,hitArea 屬性為 Object,無法點開 )

上一篇
[Re:PixiJS - Day13] 感應(三) interactive 與 interactiveChildren 屬性
下一篇
[Re:PixiJS - Day15] pointermove 事件與不同手機間的差異
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言