是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2020-04-20 JavaScript

PixiJS V5 教學 (11) - mousemove

#JavaScript #PixiJS V5 教學 #PixiJS #Canvas #w3HexSchool

前言

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

滑鼠

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

在 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 文件說明就可以囉~

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

2020-11-11

PixiJS V5 教學 (39) - 音樂

2020-11-02

PixiJS V5 教學 (38) - TexturePacker

2020-10-31

PixiJS V5 教學 (37) - 加入 stats.js

2020-10-21

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme