搭建
- 下载
../libsrc/bin/mouse 文件夹 - URL:
https://github.com/egret-labs/egret-game-library/tree/master/mouse/libsrc/bin/mouse - 编辑
egretProperties.json 文件：
-
{ "name": "mouse", "path": "./libs/mouse" }
- 命令编译：
egret build -e - 运行项目：
egret run -a
事件
- 需要注意的是监听鼠标移动事件会消耗更多的性能。
-
MOUSE_MOVE 当用户鼠标移动时被调用。 -
MOUSE_OVER 当鼠标正在对象所在区域内（没有被其他对象覆盖）时调用。 -
MOUSE_OUT 当鼠标移出对象所在区域内（没有被其他对象覆盖）时调用。 -
ROLL_OVER 当鼠标进入对象所在区域内调用。 -
ROLL_OUT 当鼠标移出对象所在区域内时调用。
示例
- 展示：
let outContainer: egret.Sprite;
let inShape: egret.Sprite;
//启用舞台的鼠标支持
mouse.enable(this.stage);
//绘制外层容器
outContainer = new egret.Sprite();
outContainer.name = "outContainer";
outContainer.graphics.beginFill(0x00ff00);
outContainer.graphics.drawRect(0, 0, 300, 300);
outContainer.graphics.endFill();
this.addChild(outContainer);
outContainer.x = (this.stage.stageWidth - outContainer.width) / 2;
outContainer.y = (this.stage.stageHeight - outContainer.height) / 2;
//绘制里层显示对象
inShape = new egret.Sprite();
inShape.name = "inShape";
inShape.graphics.beginFill(0xff0000);
inShape.graphics.drawCircle(0, 0, 50);
inShape.graphics.endFill();
inShape.x = outContainer.width / 2;
inShape.y = outContainer.height / 2;
outContainer.addChild(inShape);
//开启显示对象的触摸
outContainer.touchEnabled = true;
inShape.touchEnabled = true;
//分别监听外层容器的 MouseEvent
outContainer.addEventListener(mouse.MouseEvent.ROLL_OVER, onRollOver, this);
outContainer.addEventListener(mouse.MouseEvent.ROLL_OUT, onRollOut, this);
outContainer.addEventListener(mouse.MouseEvent.MOUSE_OVER, onMouseOver, this);
outContainer.addEventListener(mouse.MouseEvent.MOUSE_OUT, onMouseOut, this);
//分监听内层显示对象的 MouseEvent
inShape.addEventListener(mouse.MouseEvent.ROLL_OVER, onRollOver2, this);
inShape.addEventListener(mouse.MouseEvent.ROLL_OUT, onRollOut2, this);
inShape.addEventListener(mouse.MouseEvent.MOUSE_OVER, onMouseOver2, this);
inShape.addEventListener(mouse.MouseEvent.MOUSE_OUT, onMouseOut2, this);
//设置内层显示对象为鼠标手型
mouse.setButtonMode(inShape, true);
//设置开启鼠标移动事件
mouse.setMouseMoveEnabled(true);
outContainer.addEventListener(mouse.MouseEvent.MOUSE_MOVE, function () {
console.log("mouse move");
}, this);
function onRollOver(e: egret.TouchEvent): void {
console.log("roll over " + e.target.name + " " + e.bubbles)
};
function onRollOut(e: egret.TouchEvent): void {
console.log("roll out " + e.target.name + " " + e.bubbles)
};
function onMouseOver(e: egret.TouchEvent): void {
console.log("mouse over " + e.target.name + " " + e.bubbles)
};
function onMouseOut(e: egret.TouchEvent): void {
console.log("mouse out " + e.target.name + " " + e.bubbles)
};
function onRollOver2(e: egret.TouchEvent): void {
console.log("roll over2 " + e.target.name + " " + e.bubbles)
};
function onRollOut2(e: egret.TouchEvent): void {
console.log("roll out2 " + e.target.name + " " + e.bubbles)
};
function onMouseOver2(e: egret.TouchEvent): void {
console.log("mouse over2 " + e.target.name + " " + e.bubbles)
};
function onMouseOut2(e: egret.TouchEvent): void {
console.log("mouse out2 " + e.target.name + " " + e.bubbles)
};
