PixiJS学习（10）事件机制

简介

        事件机制是人机交互的前提，用户在进行操作（点击）之后，页面对于事件的反馈和相应。针对 Pixi 的事件机制，主要还是比较常规的一些事件：鼠标事件、触摸事件。

        例如：点击事件（tap：移动端，click：pc端）、触摸事件（touchstart：开始触摸，touchmove：触摸移动，touchend：结束触摸）

事件绑定/解除

        在 PixiJs 中对于事件的绑定比较简单，首先将对象的 interactive 设置为 true ，然后是 on 进行绑定，使用 off 进行解绑操作。

let texture = PIXI.Texture.fromImage('../images/2/1_01.png');
let myImg = new PIXI.Sprite(texture);
myImg.scale.set(0.5);
myImg.alpha = 0.5;
// 设置是否可以交互
myImg.interactive = true;
// 绑定点击事件以及回调方法
myImg.on('tap', e => {
  console.log(e.type);
  console.log(e.currentTarget);
});

// 事件函数
function imgTap(e){
  console.log('这是一个函数');
  console.log(e.type);
}

// 增加绑定事件
// myImg.on('tap', imgTap);
// 解除绑定事件
// myImg.off('tap', imgTap);

        关于事件回调方法的参数，主要有 type （类型：上述代码的类型就是 tap）、currentTarget （当前对象）。

        在 PixiJs 中，事件机制相对比较简单，就是设置对应交互的回调方法即可，特别要注意的就是需要设置操作对象的属性 interactive = true。

        但是在实际生产过程中，页面的人机交互没有这么简单，不会只是简单的点击。可能会有拖拽、旋转、缩放……在这个过程中，我需要使用第三方拖拽库去实现复杂的效果，推荐一个库（Hammer.JS - Hammer.js）。

        PixiJs 中的事件绑定就可以做选中状态。

注意事项：

• 必须设置操作对象的属性
• 灵活使用第三方的库