PixiJS V5 教學 (11) - mousemove

前言

前一篇介紹了使用鍵盤來移動圖片,那麼接下來就要來介紹使用滑鼠移動。

滑鼠

接下來就要來滑鼠監聽啦~

在 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;
}

你會發現圖片完全沒有出現,這個原因是滑鼠初始的 xy 位置是在 -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 文件說明就可以囉~

參考文獻

0%