PixiJS V5 教學 (11) - mousemove

前言

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

滑鼠

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

在 PIXI 中若要讓圖片跟著滑鼠移動的話，是使用 PIXI 內建的方法，在鐵人賽中有一位大神就有介紹到是使用了 app.renderer.plugins.interaction.mouse.global.x & app.renderer.plugins.interaction.mouse.global.y

但是這邊要注意一件事情，如果你是這樣寫

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(()=> {...}) 來持續更新我們的滑鼠座標進而改變圖片位子，所以我們要這樣子撰寫才正確

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 監聽可以嗎?答案是可以

const el = document.getElementById('main');
el.addEventListener('mousemove', (event) => {
  app.ticker.add(() => {
    container.x = event.clientX;
    container.y = event.clientY;
  });
});

補充

最後額外補充一下關於 clientX、clientY 之外還有哪些。

其實在 JavaScript 中獲取滑鼠座標的方法還有以下常見的幾種方法，但是上述每一個獲取座標的位置都會有些取不同，這部分就參考 MDN 文件說明就可以囉~

• clientX/Y
• pageX/Y
• offsetX/Y
• screenX/Y

參考文獻

• [PixiJS - Day-10] Ticker 與 動態製作