關於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。