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

pixi常用事件类型

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

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

pixi拖拽demo

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

<!--
 * @Descripttion:
 * @Author: 
 * @Date: 2019-04-04 11:47:42
 -->
<template>
    <div></div>
</template>
<script>
export default {
    name: "testline",
    data() {
        return {}
    },
    mounted() {
        let PIXI = this.PIXI;
        const _this = this;
        // 创建应用
        let app = new PIXI.Application();
        app.renderer.view.style.position = "absolute";
        app.renderer.view.style.display = "block";
        app.renderer.autoResize = true;
        app.renderer.resize(window.innerWidth, window.innerHeight);
        document.body.appendChild(app.view)
        // 加载图片
        let textureUrl = "/testTexture/textures.json", 
        heartId = "heart.png";
        PIXI.loader
            .add(textureUrl)
            .load(setup);
        function setup() {
            // 相当于把这个加载拆分出一个方法
            // new PIXI.Sprite(PIXI.loader.resources[textureUrl].textures[backgroundId])
            let id = PIXI.loader.resources[textureUrl].textures
            let heart = new PIXI.Sprite(id[heartId])
            heart.anchor.set(0.5);
            heart.position.set(
                window.innerWidth / 2,
                window.innerHeight / 2
            );
            // 加入舞台中
            app.stage.addChild(heart);
            // 开启交互
            heart.interactive = true;
            heart.buttonMode = true;
            console.log(this)
            // 拖拽事件
            heart
                .on('pointerdown', _this.onDragStart)
                .on('pointerup', _this.onDragEnd)
                .on('pointerupoutside', _this.onDragEnd)
                .on('pointermove', _this.onDragMove)

        }
    },
    created() {},
    methods: {
        onDragStart(event) {
            let currentTarget = event.currentTarget;
            currentTarget.data = event.data
            currentTarget.alpha = 0.5;
            currentTarget.dragging = true;
        },
        onDragEnd(event) {
            let currentTarget = event.currentTarget;
            currentTarget.alpha = 1;
            currentTarget.dragging = false;
        },
        onDragMove(event) {
            let currentTarget = event.currentTarget;
            if (currentTarget.dragging) {
                var newPosition = currentTarget.data.getLocalPosition(currentTarget.parent); //获取鼠标移动的位置
                currentTarget.position.x = newPosition.x;
                currentTarget.position.y = newPosition.y;
            }
        }
    }
}
</script>
<style>

</style>

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。