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。