iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
Modern Web

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

[Re:PixiJS - Day04] 元件被遮罩裁切後的寬高

這篇不長,倒是挺雷的

一個空容器,裡面放了一個 100x150 的色塊,並用遮罩遮成 100x100
Q:這時容器高度是多少?

選項1:100
選項2:150
選項3:都是

選項1 跟選項2 互斥,答案怎麼可能是3.
除非...條件不同...?

有點微妙的,答案是 3
差異是:看遮罩遮在哪

[ Demo ]

結構:


實現這個奇妙的結果

準備:繪製容器、繪製方塊、繪製遮罩的方法

function createContainer(name){
	const container = new PIXI.Graphics();
	container.name = name;
	return container;
};

function createBox(name){
	const box = new PIXI.Graphics();
	box.name = name;
	box.beginFill(0xff0000);
	box.drawRect(0, 0, 100, 150); // 方塊大小為 100 x 150
	box.endFill();
	return box;
};

function createMask(name){
	const mask = new PIXI.Graphics();
	mask.name = name;
	mask.beginFill(0x0);
	mask.drawRect(0, 0, 100, 100); // 遮罩大小為 100 x 100
	mask.endFill();
	return mask;
};

左邊容器、方塊與遮罩的寫法:

const container1 = createContainer("container1");
const box1 = createBox("box1");
const mask1 = createMask("mask1");

app.stage.addChild(container1);
container1.addChild(box1);
container1.addChild(mask1);

box1.mask = mask1;

container1.x = 50;
container1.y = 100;

左邊的層級為:

box1 的遮罩為 mask1
結果:container1 的高度為 100


右邊容器、方塊與遮罩的寫法:

const container2 = createContainer("container2");
const box2 = createBox("box2");
const mask2 = createMask("mask2");

app.stage.addChild(container2);
container2.addChild(box2);
app.stage.addChild(mask2);

container2.mask = mask2;

container2.x = 200;
container2.y = 100;
mask2.x = 200; // 由於右邊的遮罩與容器同層級,需再指定位置

mask2.y = 100;

右邊的層級為:

container2 的遮罩為 mask2
結果:container2 的高度為 150

container1 裝了被 高度100 的遮罩遮了的內容物,結果為 100
container2 裝了高度150 的內容物,所以 container2 的高度 是150

物件被遮罩遮時,看起來似乎是遮罩的大小,但實際上並不一定


延伸題:

此時的 app.stage 的高度為何?

答案:100
理由與 container1 相同,container2 跟遮罩運算的結果為 100。


另一個常有的疑惑:遮罩要放在哪個層級?
是否可以跟被遮物不同層級?

以剛剛右邊的情形來說,結構是:

如果直接設定 box2.mask = mask2;
結果會是?

選項1:什麼都沒有
選項2:可以遮,高度為150(方塊高度)
選項3:可以遮,高度為100(遮罩高度)

答案:3
可以跨層級遮,但我自己不常這麼做。

[ Demo ]


層級相同

微妙


本篇小結:將遮罩與被遮物放同層就好
不同層時可能可以顯示,但可能會有奇妙的問題


上一篇
[Re:PixiJS - Day03] 可視物件的深度 - childIndex / zIndex
下一篇
[Re:PixiJS - Day05] 可視物件的繼承關係
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言