removeAllChildren 在 createjs 中不起作用答案

【问题标题】：removeAllChildren is not working in createjsremoveAllChildren 在 createjs 中不起作用
【发布时间】：2013-09-08 20:47:06
【问题描述】：

我正在尝试更改 createjs 中的位图图像，并希望在单击重置按钮时删除容器中的所有子项。但是 removeAllChildren 在我身上不起作用。

function drawPhoneImage() {
  stage = new createjs.Stage('canvas');
  container = new createjs.Container();

  phone = new createjs.Bitmap(phoneImg);
  phone.x = 268;
  phone.y = 64;

  stage.addChild(container);
  container.addChild(phone);
  stage.update();

  phone.addEventListener("click", function() {
    console.log('phone clicked');
    createjs.Ticker.addEventListener("tick", movePhoneImage);
  });
}

function movePhoneImage(event) {
  phone.x -=10;

  if(phone.x <  156) { 
    phone.x =156;
    showPhoneSnap();
  }
  stage.update(event);
}

然后点击电话对象后，我需要用另一个位图替换它（有效）：

function showPhoneSnap() {
  snap = new createjs.Bitmap(snapImg);
  snap.x = 156;
  snap.y = 64;

  container.removeAllChildren();
  container.addChild(snap);
  stage.update();
}

起初，removeAllChildren 在容器的第一个孩子中工作，但是当我在容器中添加另一个位图后尝试重置舞台时..removeAllChildren() 不起作用。

function resetStage() {
  container.removeAllChildren();
  stage.update();
}

我很难解决这个问题，感谢任何可以提供帮助的人。

【问题讨论】：

resetStage() 是如何被调用的？通话过程中是否记录了任何错误？
$('#reset').click(function() { resetStage(); });没有显示错误。
一个假设是，范围可能是错误的，但在这种情况下，它会引发错误 stage 和 container 是 undefined。

标签： html5-canvas createjs

【解决方案1】：

确保“snapImg”是已加载的图像。

snap = new createjs.Bitmap(snapImg);

问题是加载图像时您没有更新舞台。

var image = new Image();
image.src = "path";
image.onload = showPhoneSnap;
function showPhoneSnap() {
    //This will ensure that the image is ready.
    var bmp = new createjs.Bitmap(this);
    ...
    stage.update();
}

【讨论】：