前言
前一篇介紹了使用鍵盤來移動圖片,那麼接下來就要來介紹使用滑鼠移動。
滑鼠
接下來就要來滑鼠監聽啦~
在 PIXI 中若要讓圖片跟著滑鼠移動的話,是使用 PIXI 內建的方法,在鐵人賽中有一位大神就有介紹到是使用了 app.renderer.plugins.interaction.mouse.global.x
& app.renderer.plugins.interaction.mouse.global.y
但是這邊要注意一件事情,如果你是這樣寫
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| const loader = new PIXI.Loader(); loader .add('fakeimg','https://i.imgur.com/j5QyG2t.png') .load((loader, resource)=> { console.log('Done'); init(resource); }) function init(item) { console.log(item); const sprite = new PIXI.Sprite(item.fakeimg.texture); container.addChild(sprite); container.x = app.renderer.plugins.interaction.mouse.global.x; container.y = app.renderer.plugins.interaction.mouse.global.y; }
|
你會發現圖片完全沒有出現,這個原因是滑鼠初始的 x
與 y
位置是在 -999999
,當你滑鼠進入到畫布內,你也會發現沒有出現圖片,這個原因是我們並沒有持續更新畫面所導致,但是 app.renderer.plugins.interaction.mouse.global.x
其實是有獲取到我們滑鼠的座標,只是我們必須持續更新,所以這邊就必須使用到前面所講的 app.ticker.add(()=> {...})
來持續更新我們的滑鼠座標進而改變圖片位子,所以我們要這樣子撰寫才正確
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| const loader = new PIXI.Loader(); loader .add('fakeimg','https://i.imgur.com/j5QyG2t.png') .load((loader, resource)=> { console.log('Done'); init(resource); }) function init(item) { console.log(item); const sprite = new PIXI.Sprite(item.fakeimg.texture); container.addChild(sprite); }
app.ticker.add(() => { container.x = app.renderer.plugins.interaction.mouse.global.x; container.y = app.renderer.plugins.interaction.mouse.global.y; });
|
此時你滑鼠在滑入畫面後,你會發現圖片會跟著你的滑鼠跑啦~
題外話,你可能會好奇,那如果我想使用原生的 JS 監聽可以嗎?答案是可以
1 2 3 4 5 6 7
| const el = document.getElementById('main'); el.addEventListener('mousemove', (event) => { app.ticker.add(() => { container.x = event.clientX; container.y = event.clientY; }); });
|
補充
最後額外補充一下關於 clientX、clientY 之外還有哪些。
其實在 JavaScript 中獲取滑鼠座標的方法還有以下常見的幾種方法,但是上述每一個獲取座標的位置都會有些取不同,這部分就參考 MDN 文件說明就可以囉~
參考文獻