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内置的交互方法还是比较简单的，只能满足一些简单使用场景，更多使用样例，可以到 进行预览。
更复杂的使用场景可以引入第三方库Tink来实现。
下面列举一些好用的pixi第三方插件
Bump: 一个为了游戏准备的完整的2D碰撞函数集.
Tink: 拖放, 按钮, 一个通用的指针和其他有用的交互工具集。
Charm: 给Pixi精灵准备的简单易用的缓动动画效果。
Dust: 创建像爆炸，火焰和魔法等粒子效果。
Sprite Utilities: 创建和使用Pixi精灵的一个更容易和更直观的做法，包括添加状态机和动画播放器。让Pixi的工作变得更有趣。
Sound.js:一个加载，控制和生成声音和音乐效果的微型库。包含了一切你需要添加到游戏的声音。
Smoothie: 使用真正的时间增量插值实现的超平滑精灵动画。它也允许为你的运行的游戏和应用指定 fps (帧率) ，并且把你的精灵图循环渲染完全从你的应用逻辑循环中分离出去。