前端动画渲染引擎pixi.js系列（4）如何实现⿏标交互事件版权声明：本⽂为博主原创⽂章，未经博主允许不得转载。 blog.csdn/zeping891103/article/details/70208945⼀.⿏标交互事件概念
⿏标事件交互是指⽤户通过操作⿏标所触发的事件。常⽤的交互事件主要有如点击、拖拽等。可以监听到的⽤户所触发的事件可以分为4类：左键触发，右键触发，触摸屏触发，兼容⿏标和触摸屏的共同触发。如监听点击事件，源码写法是：
<('click', onClick);
其中onClick是触发点击事件后回调的⽅法。
1.⿏标左键触发事件：
click：点击事件
mousedown：⿏标按下
mousemove：⿏标移动
mouseout：⿏标移出
mouseover：⿏标经过
mouseup：⿏标松开
mouseupoutside：⿏标按下，移出对象松开
2.⿏标右键触发事件：
rightclick：点击事件
rightdown：⿏标按下
rightup：⿏标松开
rightupoutside：⿏标按下，移出对象松开
3.触摸屏触发事件：
touchcancel：触摸系统cancels键
touchend：触摸结束
touchendoutside：触摸开始，移出对象松开
touchmove：触摸移动
touchstart：触摸开始
4.兼容⿏标和触摸屏的共同触发：
pointercancel：触发系统cancels键
pointerdown：触发按下
pointermove：触发移动
pointerout：触发移出
pointerover：触发经过
pointertap：触发点击
pointerup：触发松开
（注）⼀般在应⽤中使⽤第四种交互事件触发，即兼容触发。
⼆.参考案例
交互事件在前端常⽤于实现按钮的三种状态触发：按下、松开、经过。要实现这种效果，我们可以使⽤下⾯的代码：
var textureButton = PIXI.Texture.fromImage('../img/button.png');
var textureButtonDown = PIXI.Texture.fromImage('../img/buttonDown.png'); var textureButtonOver = PIXI.Texture.fromImage('../img/buttonOver.png');
var button = new PIXI.Sprite(textureButton);
button.buttonMode = true;mousemove是什么键
button.interactive = true;
<('pointerdown', onButtonDown)
.on('pointerup', onButtonUp)
.on('pointerupoutside', onButtonUp)
.on('pointerover', onButtonOver)
.on('pointerout', onButtonOut);
app.stage.addChild(button);
function onButtonDown() {
this.isdown = true;
this.alpha = 1;
}
function onButtonUp() {
this.isdown = false;
if(this.isOver) {
} else {
}
}
function onButtonOver() {
this.isOver = true;
if(this.isdown) {
return;
}
}
function onButtonOut() {
this.isOver = false;
if(this.isdown) {
return;
}
}
除了以上的交互事件外，还有⼀种常⽤的⿏标交互实现就是对显⽰对象的拖拽，拖拽源码实现如下：其中.dragging属性并不是sprite⾃带属性，为⾃定义属性，是为了触发onDragMove后判断所需。所以读者们不要误认为是⾃带属性。
var texture = PIXI.Texture.fromImage('../img/bunny.png');
var bunny = new PIXI.Sprite(texture);
bunny.interactive = true;
bunny.buttonMode = true;
bunny.anchor.set(0.5);
bunny.position.set(100, 100);
bunny.scale.set(2);
<('pointerdown', onDragStart)
.on('pointerup', onDragEnd)
.on('pointerupoutside', onDragEnd)
.on('pointermove', onDragMove);
app.stage.addChild(bunny);
function onDragStart(event) {
this.data = event.data;
this.alpha = 0.5;
this.dragging = true;
}
function onDragEnd(event) {
this.alpha = 1;
this.dragging = false;
this.data = null;
}
function onDragMove(event) {
if(this.dragging) {
var newPosition = LocalPosition(this.parent); //获取⿏标移动的位置
this.position.x = newPosition.x;
this.position.y = newPosition.y;
}
}
（注）要注册交互事件前，⼀定要把显⽰对象的interactive和buttonMode属性设为true。