跳到主要内容

鼠标支持库

通过使用鼠标支持库可以监听 PC 上的鼠标事件。

1.引入鼠标库

引入鼠标支持库与引入其他第三方库过程相同,首先下载该库,在 egretProperties.json 中引入该库并编译引擎。需要注意库的位置应放在项目外。

{

"name": "mouse",

"path": "../libsrc"

}

引入到项目中之后编译引擎即可使用鼠标库。

2.支持事件

在鼠标支持库中支持以下事件。

名称说明
MOUSE_MOVE当用户鼠标移动时被调用。
MOUSE_OVER当鼠标正在对象所在区域内(没有被其他对象覆盖)时调用。
MOUSE_OUT当鼠标移出对象所在区域内(没有被其他对象覆盖)时调用。
ROLL_OVER当鼠标进入对象所在区域内调用。
ROLL_OUT当鼠标移出对象所在区域内时调用。

3.使用方法

使用鼠标支持库时需要开启鼠标支持。

//启用舞台的鼠标支持
mouse.enable(this.stage);

调用 enable 方法开启舞台对鼠标事件的支持。开启支持之后即可监听鼠标事件。使用鼠标事件的方法与其他触摸事件是相同的,下面是基本的调用方法:

mouse.enable(this.stage);
//绘制外层容器
this.outContainer = new egret.Sprite();
this.outContainer.name = "outContainer";
this.outContainer.graphics.beginFill(0x00ff00);
this.outContainer.graphics.drawRect(0, 0, 300, 300);
this.outContainer.graphics.endFill();
this.addChild(this.outContainer);
this.outContainer.x = (this.stage.stageWidth - this.outContainer.width) / 2;
this.outContainer.y = (this.stage.stageHeight - this.outContainer.height) / 2;
//绘制里层显示对象
this.inShape = new egret.Sprite();
this.inShape.name = "inShape";
this.inShape.graphics.beginFill(0xff0000);
this.inShape.graphics.drawCircle(0, 0, 50);
this.inShape.graphics.endFill();
this.inShape.x = this.outContainer.width / 2;
this.inShape.y = this.outContainer.height / 2;
this.outContainer.addChild(this.inShape);
//开启显示对象的触摸
this.outContainer.touchEnabled = true;
this.inShape.touchEnabled = true;
//分别监听外层容器的 MouseEvent
this.outContainer.addEventListener(mouse.MouseEvent.ROLL_OVER, this.onRollOver, this);
this.outContainer.addEventListener(mouse.MouseEvent.ROLL_OUT, this.onRollOut, this);
this.outContainer.addEventListener(mouse.MouseEvent.MOUSE_OVER, this.onMouseOver, this);
this.outContainer.addEventListener(mouse.MouseEvent.MOUSE_OUT, this.onMouseOut, this);
//分监听内层显示对象的 MouseEvent
this.inShape.addEventListener(mouse.MouseEvent.ROLL_OVER, this.onRollOver2, this);
this.inShape.addEventListener(mouse.MouseEvent.ROLL_OUT, this.onRollOut2, this);
this.inShape.addEventListener(mouse.MouseEvent.MOUSE_OVER, this.onMouseOver2, this);
this.inShape.addEventListener(mouse.MouseEvent.MOUSE_OUT, this.onMouseOut2, this);

其中回调函数如下:

onRollOver(e, egret.TouchEvent);
void {
console, : .log("roll over " + e.target.name + " " + e.bubbles)
};
onRollOut(e, egret.TouchEvent);
void {
console, : .log("roll out " + e.target.name + " " + e.bubbles)
};
onMouseOver(e, egret.TouchEvent);
void {
console, : .log("mouse over " + e.target.name + " " + e.bubbles)
};
onMouseOut(e, egret.TouchEvent);
void {
console, : .log("mouse out " + e.target.name + " " + e.bubbles)
};
onRollOver2(e, egret.TouchEvent);
void {
console, : .log("roll over2 " + e.target.name + " " + e.bubbles)
};
onRollOut2(e, egret.TouchEvent);
void {
console, : .log("roll out2 " + e.target.name + " " + e.bubbles)
};
onMouseOver2(e, egret.TouchEvent);
void {
console, : .log("mouse over2 " + e.target.name + " " + e.bubbles)
};
onMouseOut2(e, egret.TouchEvent);
void {
console, : .log("mouse out2 " + e.target.name + " " + e.bubbles)
};

上面代码中绘制了两个 Sprite ,一个当做外层的容器,一个当做内部的显示对象。编译运行观察输出的结果:

  • 鼠标移入容器和内层显示对象时都会抛出 MOUSE_OVER 和 ROLL_OVER。
  • 鼠标在容器移动到内层显示对象时容器会抛出 MOUSE_OUT 但不会抛出 ROLL_OUT。
  • 鼠标从内层显示对象移动到容器时容器会抛出 MOUSE_OVER ,内层会抛出 ROLL_OUT 和 MOUSE_OUT。
  • 鼠标完全移动到容器外面时容器才会抛出 ROLL_OUT。

简单比较可以看出 MOUSE 和 ROLL 的区别,MOUSE_OVER 和 MOUSE_OUT 在显示对象的可见区域上触发,而 ROLL_OUT 和 ROLL_OUT 在显示对象的整体上触发。

设置鼠标手型

若希望鼠标移动到可点击区域上时改变鼠标的形状为手型,可以通过 setButtonMode 来设置。

//设置内层显示对象为鼠标手型
mouse.setButtonMode(this.inShape, true);

setButtonMode 接收两个参数,分别是显示对象和是否开启手型显示。开启之后当鼠标移动到该显示对象上时即可显示为手的形状。

监听鼠标移动事件

监听鼠标的移动事件需要单独开启,调用 setMouseMoveEnabled() 方法即可。

//设置开启鼠标移动事件
mouse.setMouseMoveEnabled(true);

开启鼠标移动事件的监听接口之后,监听该事件:

this.outContainer.addEventListener(mouse.MouseEvent.MOUSE_MOVE,  function  ()  {
console.log("mouse move");
}, this);

需要注意的是监听鼠标移动事件会消耗更多的性能。