[]怎么对graphics画出来的图片进行鼠标点击拖动???
我把示例的内容进行了修改,我不想加载个图片然后移动图片,我只是想画个圆圈然后鼠标可以拖动它移动!!!!但是我改了一下官网上的例子,还是无法移动。。。。。官网例子的地址:https://layaair.ldc.layabox.com/demo/?2d&Interaction&Drag
不得不吐槽一下,你们layabox的官方教程简直太简略,而且社区里的很多回答也是简略至极,这一点layabox远远不如白鹭。。。。
我改的代码如下:
module laya {
import Sprite = Laya.Sprite;
import Stage = Laya.Stage;
import Event = Laya.Event;
import Rectangle = Laya.Rectangle;
import Texture = Laya.Texture;
import Browser = Laya.Browser;
import Handler = Laya.Handler;
import WebGL = Laya.WebGL;
export class Interaction_Drag {
private ApePath: string = "../laya/monkey2.png";
private ape: Sprite;
private dragRegion: Rectangle;
constructor() {
// 不支持WebGL时自动切换至Canvas
Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.scaleMode = "showall";
Laya.stage.bgColor = "#232628";
//这里是我注释掉的代码
//Laya.loader.load(this.ApePath, Handler.create(this, this.setup));
this.setup();
}
private setup(): void {
this.createApe();
this.showDragRegion();
}
private createApe(): void {
this.ape = new Sprite();
//this.ape.loadImage(this.ApePath);
Laya.stage.addChild(this.ape);
//这里是我注释掉的代码
//var texture: Texture = Laya.loader.getRes(this.ApePath);
//this.ape.pivot(texture.width / 2, texture.height / 2);
this.ape.x = Laya.stage.width / 2;
this.ape.y = Laya.stage.height / 2;
//这里是我加的代码
this.ape.graphics.drawCircle(50, 50, 30, "#ff0000");
this.ape.on(Event.MOUSE_DOWN, this, this.onStartDrag);
}
private showDragRegion(): void {
//拖动限制区域
var dragWidthLimit: number = 350;
var dragHeightLimit: number = 200;
this.dragRegion = new Rectangle(Laya.stage.width - dragWidthLimit >> 1, Laya.stage.height - dragHeightLimit >> 1, dragWidthLimit, dragHeightLimit);
//画出拖动限制区域
Laya.stage.graphics.drawRect(
this.dragRegion.x, this.dragRegion.y, this.dragRegion.width, this.dragRegion.height,
null, "#FFFFFF", 2);
}
private onStartDrag(e: Event): void {
//鼠标按下开始拖拽(设置了拖动区域和超界弹回的滑动效果)
this.ape.startDrag(this.dragRegion, true, 100);
}
}
}
new laya.Interaction_Drag();
不得不吐槽一下,你们layabox的官方教程简直太简略,而且社区里的很多回答也是简略至极,这一点layabox远远不如白鹭。。。。
我改的代码如下:
module laya {
import Sprite = Laya.Sprite;
import Stage = Laya.Stage;
import Event = Laya.Event;
import Rectangle = Laya.Rectangle;
import Texture = Laya.Texture;
import Browser = Laya.Browser;
import Handler = Laya.Handler;
import WebGL = Laya.WebGL;
export class Interaction_Drag {
private ApePath: string = "../laya/monkey2.png";
private ape: Sprite;
private dragRegion: Rectangle;
constructor() {
// 不支持WebGL时自动切换至Canvas
Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.scaleMode = "showall";
Laya.stage.bgColor = "#232628";
//这里是我注释掉的代码
//Laya.loader.load(this.ApePath, Handler.create(this, this.setup));
this.setup();
}
private setup(): void {
this.createApe();
this.showDragRegion();
}
private createApe(): void {
this.ape = new Sprite();
//this.ape.loadImage(this.ApePath);
Laya.stage.addChild(this.ape);
//这里是我注释掉的代码
//var texture: Texture = Laya.loader.getRes(this.ApePath);
//this.ape.pivot(texture.width / 2, texture.height / 2);
this.ape.x = Laya.stage.width / 2;
this.ape.y = Laya.stage.height / 2;
//这里是我加的代码
this.ape.graphics.drawCircle(50, 50, 30, "#ff0000");
this.ape.on(Event.MOUSE_DOWN, this, this.onStartDrag);
}
private showDragRegion(): void {
//拖动限制区域
var dragWidthLimit: number = 350;
var dragHeightLimit: number = 200;
this.dragRegion = new Rectangle(Laya.stage.width - dragWidthLimit >> 1, Laya.stage.height - dragHeightLimit >> 1, dragWidthLimit, dragHeightLimit);
//画出拖动限制区域
Laya.stage.graphics.drawRect(
this.dragRegion.x, this.dragRegion.y, this.dragRegion.width, this.dragRegion.height,
null, "#FFFFFF", 2);
}
private onStartDrag(e: Event): void {
//鼠标按下开始拖拽(设置了拖动区域和超界弹回的滑动效果)
this.ape.startDrag(this.dragRegion, true, 100);
}
}
}
new laya.Interaction_Drag();
没有找到相关结果
已邀请:
3 个回复
ymsdandan
赞同来自: aidimiebear
ymsdandan
赞同来自:
kezhiyu
赞同来自: