pixi.js 簡單互動事件(點選、縮放、平移)
阿新 • • 發佈：2020-12-24
**注意**：本文程式碼使用的Pixi.js版本為`PixiJS 5.3.3`
pixi中常用的滑鼠互動事件：
```
//相容滑鼠和觸控式螢幕的共同觸發
type InteractionPointerEvents = "pointerdown" | "pointercancel" | "pointerup" | "pointertap" | "pointerupoutside" | "pointermove" | "pointerover" | "pointerout";
//觸控式螢幕觸發事件
type InteractionTouchEvents = "touchstart" | "touchcancel" | "touchend" | "touchendoutside" | "touchmove" | "tap";
//滑鼠觸發事件
type InteractionMouseEvents = "rightdown" | "mousedown" | "rightup" | "mouseup" | "rightclick" | "click" | "rightupoutside" | "mouseupoutside" | "mousemove" | "mouseover" | "mouseout";
```
#### 點選事件
首先，我們再Stage中新增一個圓形按鈕，將其interactive屬性設定為true，並給它繫結一個點選事件。
> interactive 預設為false，不會響應互動事件。同樣的還有buttonMode屬性，預設為false，表示無法互動。設定為true時，滑鼠懸浮會變成手型。
```
const point = new Graphics();
point.beginFill(0x0bef47)
point.drawCircle(300, 300, 50)
point.endFill()
point.interactive = true;//響應互動
point.buttonMode = true;//滑鼠變手型
point.on("pointerdown", (event: PIXI.InteractionEvent) => {
console.log("graphics")
})
app.stage.addChild(point)
```
同樣的還可以給舞臺`stage`也新增一個點選事件，因為`stage`其實就是一個特殊的`Container`
```
app.stage.interactive = true;//這個不能忘記
app.stage.on("pointerdown", (event: PIXI.InteractionEvent) => {
console.log("stage")
})
```
先測試下，上面的點選事件。
- 點選`point`按鈕，控制檯輸出`graphics -> stage`。由於點選事件傳遞，觸發了按鈕和舞臺的點選事件。
- 點選`stage`空白處，控制檯無輸出。 這個原因其實是因為`Container`本身是無法被點選的，需要有一個`hitArea`。`graphics`繼承於`Container`，在設定了圖形範圍後，其實就是確定了`hitArea`。或者可以直接設定點選區域`app.stage.hitArea = new PIXI.Rectangle(0, 0, 300, 300);`
還可以在`renderer`上新增點選事件,這個就可以直接響應在`stage`空白處的點選事件。
```
app.renderer.plugins.interaction.on("pointerdown", (event: PIXI.InteractionEvent) => {
console.log("renderer", event)
})
```
當然最外面還可以用`window`的點選事件。
```
window.addEventListener("pointerdown", (event: any) => {
console.log("window")
})
```
最後，點選`point`按鈕就可以看到控制檯依次輸出的`graphics -> stage -> renderer -> window`。
#### 平移事件（拖拽）
知道了全屏的點選事件後，拖拽平移就簡單了。通過`dragFlag`判斷當前是否處於拖拽狀態，繫結`mousemove`事件，移動後修改`stage`的`position`即可。
```
let dragFlag = false;
let startPoint: any;
app.renderer.plugins.interaction.on("mousedown", (event: PIXI.InteractionEvent) => {
dragFlag = true
startPoint = { x: event.data.global.x, y: event.data.global.y }
})
app.renderer.plugins.interaction.on("mousemove", (event: PIXI.InteractionEvent) => {
if (dragFlag) {
const dx = event.data.global.x - startPoint.x;
const dy = event.data.global.y - startPoint.y;
app.stage.position.x += dx;
app.stage.position.y += dy;
startPoint = { x: event.data.global.x, y: event.data.global.y }
}
})
app.renderer.plugins.interaction.on("mouseup", (event: PIXI.InteractionEvent) => {
dragFlag = false
})
```
#### 縮放事件
縮放就直接繫結到`window`上，每次滑鼠滾動修改`stage`的`scale`即可。
```
window.addEventListener("mousewheel", (event: any) => {
const step = event.wheelDelta > 0 ? 0.1 : -0.1
if (app.stage.scale.x + step >= 0.1) {
app.stage.scale.x += step
app.stage.scale.y += step
}
})
```
#### 總結
總的來說pixi內建的互動方法還是比較簡單的，只能滿足一些簡單使用場景，更多使用樣例，可以到 https://pixijs.io/examples/#/interaction/dragging.js 進行預覽。
更復雜的使用場景可以引入第三方庫[**Tink**](https://github.com/kittykatattack/tink)來實現。
下面列舉一些好用的pixi第三方外掛
- [Bump](https://github.com/kittykatattack/bump): 一個為了遊戲準備的完整的2D碰撞函式集.
- [Tink](https://github.com/kittykatattack/tink): 拖放, 按鈕, 一個通用的指標和其他有用的互動工具集。
- [Charm](https://github.com/kittykatattack/charm): 給Pixi精靈準備的簡單易用的緩動動畫效果。
- [Dust](https://github.com/kittykatattack/dust): 建立像爆炸，火焰和魔法等粒子效果。
- [Sprite Utilities](https://github.com/kittykatattack/spriteUtilities): 建立和使用Pixi精靈的一個更容易和更直觀的做法，包括新增狀態機和動畫播放器。讓Pixi的工作變得更有趣。
- [Sound.js](https://github.com/kittykatattack/sound.js):一個載入，控制和生成聲音和音樂效果的微型庫。包含了一切你需要新增到遊戲的聲音。
- [Smoothie](https://github.com/kittykatattack/Smoothie): 使用真正的時間增量插值實現的超平滑精靈動畫。它也允許為你的執行的遊戲和應用指定 fps (幀率) ，並且把你的精靈圖迴圈渲染完全從你的應用邏輯迴圈中分離