removeAllChildren在createjs中不起作用

时间:2013-09-05 06:27:00

标签: html5-canvas createjs

我正在尝试更改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();
} 

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

1 个答案:

答案 0 :(得分:0)

确保&#34; snapImg&#34;是一个加载的图像。

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