关于pixi拖拽事件与传参等常见问题

pixi常用事件类型

首先汇总下pixi中的所有事件:

• pointer事件(鼠标和touch)
• mouse事件(鼠标)
• tap事件(touch)

pixi拖拽demo

最近写了个pixi简单的拖拽demo：

pixi事件中注意点：

1. 关于事件调用与传参问题：

// 没有参数
.on("pointerdown", _this.onDragStart) // 正确
.on("pointerdown", _this.onDragStart()) //错误：会 直接执行函数
// 需要传参
.on("pointerup", _this.buttonSubmit.bind(_this, { params: "aaa" }));
.on("pointerup", (event) => {
    _this.buttonSubmit("aaa",event)
});
// 需要传递回调函数
.on("pointerup",_this.buttonSubmit.bind(_this, {
            params: "aaa",
            callback: target => {
                doSomethis(target);  // 接受当前事件绑定对象，方便doSomethis中使用
            }
        })
    );
// 在事件中可以通过下面方式拿到data
buttonSubmit(data, event) {
    if (data.callback) data.callback(event.currentTarget)
}

2. 区别vue的this和pixi的this

如果把绑定的事件写到mounted中，那么这个事件中的this就是pixi的对象（sprite），但是把事件写到methods中，这个时候的this就是vue本身，一定要区别开。

3. 通过event.currentTarget得到pixi对象

在methods中的事件中直接拿this，打印出的是VueComponent，而不是我们想要的pixi对象，这个时候，你设置this的透明度、大小之类的肯定都会报错。解决办法是我们可以通过event.currentTarget拿到事件的绑定对象，打印currentTarget会发现他就是我们需要的pixi对象Sprite，通过它来实现事件触发后的一些效果就可以了。要留意的是，直接在控制台打印event，会看见它的currentTarget是null，但是打印event。currentTarget是有东西的，查了资料发现原来是因为：currentTarget 在你控制台展开查看的时候，已经不存在了。你要是想拿到它，需要将它赋值给一个值，然后再进行操作。可以参考：https://stackoverflow.com/que...

可交互对象属性设置

交互之前，一定要把设置对象的interactive和buttonMode属性为true。