单击时克隆项目 (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;
}

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

Clone items when clicked (Html5-canvas)

javascript

addchild

html5-canvas