iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Modern Web

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

[Re:PixiJS - Day12] 感應(二) alpha0 與 beginFill(color, 0) 時是否可以感應?

因為滿雷的,獨立成一篇

上一篇提到,alpha 設定為 0 時,仍可以感應的到

那如果是使用 beginFill(color, alpha) 畫的 graphics 實體
也可以填 alpha 為 0,並拿來當作透明感應區嗎?

選項1:可以
選項2:不可
選項3:其他

答案是:3,看 Pixi 版本


目前測試了幾個版本
以目前 PixiJS 5.3.1 版來說
beginFill(color, alpha) 時,第二個參數設定為 0 時,不會觸發互動行為
若要使用類似的方法時,需 beginFill 填入不為 0 的 alpha
並將整個 graphics 設定為 0,達到相同效果

Demo: 左右兩個方塊,
左邊使用 alpha 控制整個方塊,右邊僅調整填色的顏色

(兩個檔案完全相同,僅引用的 PixiJS 版本不同)

Demo1 - PixiJS v5.3.1

左邊:整個方塊 alpha0 時,可以互動
右邊:填色 beginFill(color, 0) 時,不可互動 (滑鼠為一般箭頭)

Demo2 - PixiJS v4.5.4

左邊:整個方塊 alpha0 時,可以互動
右邊:填色 beginFill(color, 0) 時,可以互動

測試了幾個版本,主要為 v4 開頭與 v5 的差異
雖然是個奇怪的特性,但目前仍會建議使用 v5 開發

本日小結
需使用透明感應區的情形時,
使用 beginFill(color) 填入純色,並指定整個 graphic 物件的 alpha 為 0 的方式
目前 v4 v5 皆可使用


本篇與先前文章因版本差異而有不同結果,
會在原本的文章裡加上註解 [PixiJS - Day-14] PIXI 與使用者互動


上一篇
[Re:PixiJS - Day11] 感應(一) 元件在 alpha:0、visible:false、rendable:false 時的互動行為
下一篇
[Re:PixiJS - Day13] 感應(三) interactive 與 interactiveChildren 屬性
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言