因為滿雷的,獨立成一篇
上一篇提到,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 控制整個方塊,右邊僅調整填色的顏色
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 與使用者互動