我是 html5-canvas 的新手,我遇到了一些问题。下面的代码将在单击对象时克隆该对象,并且也可以拖动该对象。但它只能工作一次,当我再次单击该对象时,克隆将移回其原始原点。如何每次点击都克隆多次?并使克隆在拖动时保持在原来的位置。
这是一个preview
item = new lib.item104();
this.addChild(item);
item.x = 250;
item.y = 350;
item.scaleX = item.scaleY = 1;
var Clone;
Clone = new lib.anim104();
item.addEventListener("click", itemPressed.bind(this));
function itemPressed(evt) {
this.addChild(Clone);
Clone.x = 250;
Clone.y = 200;
Clone.scaleX = Clone.scaleY = 1.5;
}
Clone.addEventListener("pressmove", dragClone.bind(this));
function dragClone(evt) {
var p = this.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = p.x;
evt.currentTarget.y = p.y;
}
最佳答案
我无法对此进行测试,因为我没有您的上下文,但我认为您需要做的就是将处理克隆的所有代码放入事件监听器中,就像我在下面所做的那样。
这样,每个事件都会创建一个新的克隆副本,并且您遇到的冲突应该会消失。
item = new lib.item104();
this.addChild(item);
item.x = 250;
item.y = 350;
item.scaleX = item.scaleY = 1;
item.addEventListener("click", itemPressed.bind(this));
function itemPressed(evt) {
var Clone;
Clone = new lib.anim104();
this.addChild(Clone);
Clone.x = 250;
Clone.y = 200;
Clone.scaleX = Clone.scaleY = 1.5;
Clone.addEventListener("pressmove", dragClone.bind(this));
}
function dragClone(evt) {
var p = this.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = p.x;
evt.currentTarget.y = p.y;
}
关于javascript - 单击时克隆项目(Html5-canvas),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57564841/