PixiJS V5 教學 (12) - mousemoveEvent(2)
前言
接下來講講關於 PIXI 其他的滑鼠操作吧~
滑鼠互動
前一篇介紹透過滑鼠來移動圖片,接下來就是其他的互動,例如在 JavaScript 的 blur、click 等等效果,在 PIXI 裡面也當然會有,所以這一篇就會來介紹 PIXI 中的 blur、click 效果。
click
PIXI 中的 click 其實非常簡單,你只需要對 container 增加互動事件就可以了
1 | container.click = () => { |
但是若你單純只這樣寫你會發現沒有任何效果,因為你還必須跟 PIXI 說「我要開啟互動效果」
1 | container.interactive = true; |
此外如果沒有設定 buttonMode
滑鼠移入圖片時是不會變成手指的唷~
1 | container.interactive = true; |
接下來當你點擊哭臉之後就會跳出視窗
所以我們也可以利用這個特點做一點不一樣的改變,例如每點一下就縮小圖片(PIXI 中調整圖片大小是使用 scale
)
1 | container.click = () => { |