前端动画渲染引擎pixi.js系列（4）如何实现鼠标交互事件

一.鼠标交互事件概念

鼠标事件交互是指用户通过操作鼠标所触发的事件。常用的交互事件主要有如点击、拖拽等。可以监听到的用户所触发的事件可以分为4类：左键触发，右键触发，触摸屏触发，兼容鼠标和触摸屏的共同触发。如监听点击事件，源码写法是：

sprite.on('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;
button.interactive = true;

button.on('pointerdown', onButtonDown)
	.on('pointerup', onButtonUp)
	.on('pointerupoutside', onButtonUp)
	.on('pointerover', onButtonOver)
	.on('pointerout', onButtonOut);
app.stage.addChild(button);

function onButtonDown() {
	this.isdown = true;
	this.texture = textureButtonDown;
	this.alpha = 1;
}

function onButtonUp() {
	this.isdown = false;
	if(this.isOver) {
		this.texture = textureButtonOver;
	} else {
		this.texture = textureButton;
	}
}

function onButtonOver() {
	this.isOver = true;
	if(this.isdown) {
		return;
	}
	this.texture = textureButtonOver;
}

function onButtonOut() {
	this.isOver = false;
	if(this.isdown) {
		return;
	}
	this.texture = textureButton;
}

除了以上的交互事件外，还有一种常用的鼠标交互实现就是对显示对象的拖拽，拖拽源码实现如下：其中.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);
bunny.on('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 = this.data.getLocalPosition(this.parent); //获取鼠标移动的位置
		this.position.x = newPosition.x;
		this.position.y = newPosition.y;
	}
}

（注）要注册交互事件前，一定要把显示对象的interactive和buttonMode属性设为true。