iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

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

[Re:PixiJS - Day11] 感應(一) 元件在 alpha:0、visible:false、rendable:false 時的互動行為

本篇會來討論 是否看得到是否可互動 的關係


做了一個 Demo,右上角的 GUI 裡表示了整個方塊幾個屬性的開關

  • visible
  • renderable
  • alpha

[ demo ]

截圖中看到指標變成手勢時,表示可互動


visible: 元件是否可以顯示,關掉時 無法互動

renderable: 元件是否會被運算,關掉時 可以互動

alpha: 元件的 alpha,設定為0 時 可以互動

就我自己而言,會搞混的是 renderable
會覺得無法被運算時就無法互動,實際上是關掉時 仍可互動


PixiJS 裡實作上的差異:

從原始檔看來,覺得差異並不太大
visiblerenderablealpha 都是底層 DisplayObject 可視物件就有的屬性。
實作時由 PIXI.Container#render 覆寫掉 PIXI.DisplayObject#render 的 render() 抽象方法

    render(renderer: Renderer): void
    {
        // if the object is not visible or the alpha is 0 then no need to render this element
        if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
        {
            return;
        }
        // ...
    }

由於運算時三個屬性之一讓結果不顯示就會不顯示
覺得效能上會有太大差異

所有的可視物件因為繼承,都會是相同的行為


實作上會用到的情形:

比按鈕還要大的感應區
類似於全站 popup,點畫面上任何一角都可以關掉 popup
可做全螢幕感應區蓋住畫面

[ Demo ]:
層級: bunnypopup 同層

  1. 由於只有兔子開啟感應,點了會打開 popup

  1. popup 本身也有感應,點了會關閉 popup
    透過感應區無法穿透的特性,蓋住畫面下方兔子的互動行為

  1. 回復為原本狀態

bunny.on('pointerup', ()=>{
	console.log("hit: bunny, openPopup");
	hitArea.visible = true;
});

hitArea.on('pointerup', ()=>{
	console.log("hit: hitArea, closePopup");
	hitArea.visible = false;
});

今日小結:
利用 visible = false 時,無視 interactivebuttonMode 的特性
將上層元件使用 visible 控制是否看得到與是否可互動
就不需另外設定 interactivebuttonMode


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

尚未有邦友留言

立即登入留言