PixiJS V5 教學 (12) - mousemoveEvent(2)

前言

接下來講講關於 PIXI 其他的滑鼠操作吧~

滑鼠互動

前一篇介紹透過滑鼠來移動圖片,接下來就是其他的互動,例如在 JavaScript 的 blur、click 等等效果,在 PIXI 裡面也當然會有,所以這一篇就會來介紹 PIXI 中的 blur、click 效果。

click

PIXI 中的 click 其實非常簡單,你只需要對 container 增加互動事件就可以了

1
2
3
container.click = () => {
alert('you click me!');
};

但是若你單純只這樣寫你會發現沒有任何效果,因為你還必須跟 PIXI 說「我要開啟互動效果」

1
2
3
4
container.interactive = true;
container.click = () => {
alert('you click me!');
};

此外如果沒有設定 buttonMode 滑鼠移入圖片時是不會變成手指的唷~

1
2
3
4
5
container.interactive = true;
container.buttonMode = true;
container.click = () => {
alert('you click me!');
};

接下來當你點擊哭臉之後就會跳出視窗

彈跳視窗

所以我們也可以利用這個特點做一點不一樣的改變,例如每點一下就縮小圖片(PIXI 中調整圖片大小是使用 scale)

1
2
3
4
container.click = () => {
container.scale.x -= 0.1;
container.scale.y -= 0.1;
};

參考資料

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ