鼠标事件
事件 | 描述 |
---|---|
Laya.Event.MOUSE_DOWN | 鼠标按下时触发 |
Laya.Event.MOUSE_MOVE | 鼠标移动时触发 |
Laya.Event.MOUSE_OUT | 鼠标离开对象范围时触发 |
Laya.Event.MOUSE_OVER | 鼠标移动到对象范围上方时触发 |
Laya.Event.MOUSE_UP | 鼠标按下松开时触发 |
Laya.Event.MOUSE_WHEEL | 鼠标滚轮事件 |
鼠标按住
例如:点击按住精灵维持一秒钟松开鼠标后精灵放大一倍
class Test {
constructor() {
//初始化引擎
Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//初始化舞台
this.initStage();
//运行
this.run();
}
/**初始化舞台*/
initStage(){
//设置舞台对齐方式
this.setStageAlign("center", "middle");
//设置舞台屏幕模式
this.setStageScreen("horizontal");
//设置舞台缩放模式
this.setStageScale("showall");
//设置舞台背景
Laya.stage.bgColor = "#000000";
}
/**设置舞台缩放模式 */
setStageScale(mode){
mode = mode.toLowerCase();
if(mode == "noscale"){
//不缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_NOSCALE;
}else if(mode == "showall"){
//显示所有 最小比例缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
}else if(mode == "exactfit"){
//全屏不等比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
}else if(mode == "noborder"){
//无框缩放 最大比例缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;
}else if(mode == "full"){
//全屏缩放 舞台宽高等于屏幕宽高
Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
}else if(mode == "fixedwidth"){
//宽度固定 宽度不变 高度根据屏幕比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_WIDTH;
}else if(mode == "fixedheight"){
//高度固定 高度不变 宽度根据屏幕比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_HEIGHT;
}else if(mode == "fixedauto"){
//自动选择 根据宽高比自动选择使用fixedwidth或fixedheight
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_AUTO;
}
}
/**设置舞台屏幕模式 */
setStageScreen(mode = "horizontal"){
mode = mode.toLowerCase();
if(mode == "horizontal"){
Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;
}else if(mode == "vertical"){
Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
}
}
/**设置舞台对齐方式 */
setStageAlign(h, v){
h = h.toLowerCase();
if(h == "left"){
Laya.stage.alignH = Laya.Stage.ALIGN_LEFT;
}else if(h == "center"){
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
}else if(h == "right"){
Laya.stage.alignH = Laya.Stage.ALIGN_RIGHT;
}
v = v.toLowerCase();
if(v == "top"){
Laya.stage.alignV = Laya.Stage.ALIGN_TOP;
}else if(v == "middle"){
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
}else if(v == "bottom"){
Laya.stage.alignV = Laya.Stage.ALIGN_BOTTOM;
}
}
run(){
let url = "res/image/npc.png";
Laya.loader.load(url, Laya.Handler.create(this, function(url){
//创建精灵
let sprite = new Laya.Sprite();
//使用精灵加载图片
sprite.loadImage(url);
//获取纹理尺寸
let texture = Laya.loader.getRes(url);
//设置精灵的轴心点
sprite.pivot(texture.width>>1, texture.height>>1);
//设置精灵的坐标位置
sprite.pos(Laya.stage.width>>1, Laya.stage.height>>1);
//设置精灵的缩放比例
sprite.scale(0.5, 0.5);
//添加到舞台
Laya.stage.addChild(sprite);
//添加事件
sprite.on(Laya.Event.MOUSE_DOWN, this, this.onSpritePress);
sprite.on(Laya.Event.MOUSE_UP, this, this.onSpriteRelease);
}, [url]));
}
onSpriteRelease(evt){
Laya.Tween.to(evt.target, {"scaleX":0.5, "scaleY":0.5}, 300, Laya.Ease.bounceOut);
Laya.stage.off(Laya.Event.MOUSE_UP, this, this.onSpriteRelease);
}
onSpritePress(evt){
//延迟1秒后执行缓动
Laya.timer.once(1000, this, function(){
Laya.Tween.to(evt.target, {"scaleX":1, "scaleY":1}, 500, Laya.Ease.bounceOut);
});
}
}
//启动
new Test();
鼠标拖动
例如:拖动显示对象再超出边界后可以看到回弹效果
class Test {
constructor() {
//初始化引擎
Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//初始化舞台
this.initStage();
//运行
this.run();
}
/**初始化舞台*/
initStage(){
//设置舞台对齐方式
this.setStageAlign("center", "middle");
//设置舞台屏幕模式
this.setStageScreen("horizontal");
//设置舞台缩放模式
this.setStageScale("showall");
//设置舞台背景
Laya.stage.bgColor = "#000000";
}
/**设置舞台缩放模式 */
setStageScale(mode){
mode = mode.toLowerCase();
if(mode == "noscale"){
//不缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_NOSCALE;
}else if(mode == "showall"){
//显示所有 最小比例缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
}else if(mode == "exactfit"){
//全屏不等比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
}else if(mode == "noborder"){
//无框缩放 最大比例缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;
}else if(mode == "full"){
//全屏缩放 舞台宽高等于屏幕宽高
Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
}else if(mode == "fixedwidth"){
//宽度固定 宽度不变 高度根据屏幕比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_WIDTH;
}else if(mode == "fixedheight"){
//高度固定 高度不变 宽度根据屏幕比缩放
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_HEIGHT;
}else if(mode == "fixedauto"){
//自动选择 根据宽高比自动选择使用fixedwidth或fixedheight
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_AUTO;
}
}
/**设置舞台屏幕模式 */
setStageScreen(mode = "horizontal"){
mode = mode.toLowerCase();
if(mode == "horizontal"){
Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;
}else if(mode == "vertical"){
Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL;
}
}
/**设置舞台对齐方式 */
setStageAlign(h, v){
h = h.toLowerCase();
if(h == "left"){
Laya.stage.alignH = Laya.Stage.ALIGN_LEFT;
}else if(h == "center"){
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
}else if(h == "right"){
Laya.stage.alignH = Laya.Stage.ALIGN_RIGHT;
}
v = v.toLowerCase();
if(v == "top"){
Laya.stage.alignV = Laya.Stage.ALIGN_TOP;
}else if(v == "middle"){
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
}else if(v == "bottom"){
Laya.stage.alignV = Laya.Stage.ALIGN_BOTTOM;
}
}
run(){
//绘制矩形
this.drawRect(400, 300);
//载入图片
this.loadImage("res/image/npc.png");
}
//加载图片
loadImage(url){
Laya.loader.load(url, Laya.Handler.create(this, function(url){
//创建精灵
let sprite = new Laya.Sprite();
//使用精灵加载图片
sprite.loadImage(url);
//获取纹理尺寸
let texture = Laya.loader.getRes(url);
//设置精灵的轴心点
sprite.pivot(texture.width>>1, texture.height>>1);
//设置精灵的坐标位置
sprite.pos(Laya.stage.width>>1, Laya.stage.height>>1);
//设置精灵的缩放比例
sprite.scale(0.5, 0.5);
//添加到舞台
Laya.stage.addChild(sprite);
//添加事件
sprite.on(Laya.Event.MOUSE_DOWN, this, this.onDrag);
}, [url]));
}
//绘制矩形
drawRect(width = 400, height = 300){
this.rectangle = new Laya.Rectangle(
Laya.stage.width-width>>1,
Laya.stage.height-height>>1,
width, height
);
Laya.stage.graphics.drawRect(
this.rectangle.x,
this.rectangle.y,
this.rectangle.width,
this.rectangle.height,
null, "#FFFFFF", 2
);
return this.rectangle;
}
//鼠标按下开始拖拽
onDrag(evt){
//设置了拖动区域和超界弹回的滑动效果
evt.target.startDrag(this.rectangle, true, 100);
}
}
//启动
new Test();
Sprite精灵的startDrag方法用于开始拖动当前对象
public function startDrag(
area:Rectangle = null,
hasInertia:Boolean = false,
elasticDistance:Number = 0,
elasticBackTime:int = 300,
data:* = null,
disableMouseEvent:Boolean = false,
ratio:Number = 0.92
):void
参数 | 默认值 | 可选 | 描述 |
---|---|---|---|
area:Rectangle | null | 可选 | 拖动区域,为当前对象注册点活动区域 |
hasIneritia:Boolean | false | 可选 | 鼠标松开后是否惯性滑动 |
elasticDistance:Number | 0 | 可选 | 橡皮筋效果的距离值,0为无橡皮筋效果。 |
elasticBackTime:int | 300 | 可选 | 橡皮筋回弹毫秒时间,默认为300毫秒。 |
data:* | null | 可选 | 拖动事件携带的数据 |
disableMouseEvent:Boolean | false | 可选 | 禁用其他对象的鼠标检测,启动可提高性能。 |
ratio:Number | 0.92 | 可选 | 惯性阻尼系数,影响惯性力度和时长。 |