移除后容器的 Easeljs 子项仍显示在画布上答案

【问题标题】：Easeljs child of container still displayed at canvas after removal移除后容器的 Easeljs 子项仍显示在画布上
【发布时间】：2014-03-03 19:59:09
【问题描述】：

我尝试创建一个小俄罗斯方块游戏来使用 JavaScript。我在使用 easeljs 时遇到了一些问题，但我能够为大多数问题找到解决方案。但是有一个问题我就是想不通。我是这样做的：

tetrisI = function(x, y, size) {
    this.childs = new Array();

    var rect1 = new createjs.Shape();
    var rect2 = new createjs.Shape();
    var rect3 = new createjs.Shape();
    var rect4 = new createjs.Shape();
    rect1.graphics.beginFill('#FF0000').drawRect(0, 0, size, size);
    rect2.graphics.beginFill('#00FF00').drawRect(0, size, size, size);
    rect3.graphics.beginFill('#0000FF').drawRect(0, size * 2, size, size);
    rect4.graphics.beginFill('#FF0000').drawRect(0, size * 3, size, size);

    this.addChild(rect1);
    this.addChild(rect2);
    this.addChild(rect3);
    this.addChild(rect4);

    this.childs.push(rect1);
    this.childs.push(rect2);
    this.childs.push(rect3);
    this.childs.push(rect4);

}
tetrisI.prototype = new createjs.Container();
tetrisI.Container_initialize = tetrisI.initialize;

var stage = new createjs.Stage("mycanvas");
var tetrisBlock = new tetrisI(120, 0, gameState.blockSize);
stage.addChild(tetrisBlock);

正如您所见，俄罗斯方块是包含多个形状的容器。在某些时候，当我检测到整行时，我会执行以下操作：

this.removeChild(this.childs[index]);

这是一个 tetrisBlock 并且 this.childs[index] 是 tetrisBlock 内部的形状之一。问题是：在我这样做之后，形状被成功删除，但即使在 stage.update() 命令之后它仍然显示在画布上。

如果我从舞台上移除整个俄罗斯方块，它就可以工作，但这不是我想要的。我只想删除俄罗斯方块的几个孩子。

【问题讨论】：

标签： javascript easeljs createjs

【解决方案1】：

将 tetrisI 函数更改为此后即可工作：

(function() {

var tetrisI = function(x, y, size) {
  this.initialize(x, y, size);
}
var p = tetrisI.prototype = new createjs.Container();

tetrisI.prototype.Container_initialize = p.initialize;
tetrisI.prototype.initialize = function(x, y, size) {
this.Container_initialize();
// add custom setup logic here.
this.childs = new Array();

var rect1 = new createjs.Shape();
var rect2 = new createjs.Shape();
var rect3 = new createjs.Shape();
var rect4 = new createjs.Shape();
rect1.graphics.beginFill('#FF0000').drawRect(0, 0, size, size);
rect2.graphics.beginFill('#00FF00').drawRect(0, size, size, size);
rect3.graphics.beginFill('#0000FF').drawRect(0, size * 2, size, size);
rect4.graphics.beginFill('#FF0000').drawRect(0, size * 3, size, size);

this.addChild(rect1);
this.addChild(rect2);
this.addChild(rect3);
this.addChild(rect4);

this.childs.push(rect1);
this.childs.push(rect2);
this.childs.push(rect3);
this.childs.push(rect4);

this.regX = size / 2;
this.regY = size * 2;
this.size = size;
this.height = size * 4;
this.width = size;
this.x = x + this.regX;
this.y = y + this.regY;
tetrisI.prototype.pos = new Array(0, 0, 0, 1, 0, 2, 0, 3);

}

window.tetrisI = tetrisI;
}());

【讨论】：