前言
前一篇介紹了使用鍵盤來移動圖片，那麼接下來就要來介紹使用滑鼠移動。
滑鼠
接下來就要來滑鼠監聽啦~
在 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 文件說明就可以囉~
參考文獻