javascript - 单击时克隆项目(Html5-canvas)

Question

我是 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;
}

Answer 1

我无法对此进行测试，因为我没有您的上下文，但我认为您需要做的就是将处理克隆的所有代码放入事件监听器中，就像我在下面所做的那样。

这样，每个事件都会创建一个新的克隆副本，并且您遇到的冲突应该会消失。

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;
}