单击时克隆项目（Html5-canvas）

Question

我是 html5-canvas 的新手，我遇到了一些问题。下面的代码将在单击对象时克隆一个对象，也可以拖动它。但它只能工作一次，当我再次单击该对象时，克隆将移回其原始原点。每次单击它时如何多次克隆？并使克隆在拖动时保持原位。

这是预览

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;

}

Answer 1

我无法对此进行测试，因为我没有您的上下文，但我认为您需要做的就是将所有处理 Clone 的代码放在事件侦听器中，就像我在下面所做的那样。这样，每个事件都会创建一个新的克隆副本，您遇到的冲突应该会消失。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;}