如何完全清除CreateJS代码和画布？

Question

我正在向DOM添加一个画布，然后使用CreateJS构建游戏。我正在初始化CreateJS ticker，并添加动画和图形。一切都很好，但只有一次。如果我删除画布和游戏代码，以后就无法再次添加它 - 画布就不再显示任何内容了。

我的问题是：如何正确清除所有CreateJS函数的内存，并使用新的画布重新开始？似乎CreateJS仍然保留着旧的侦听器和元素，即使我删除了所有内容。

这是我的代码：

// remove canvas and then restart - this causes buggy behavior
this.removeAndRestart = function() {
    document.getElementById("gamecontainer").innerHTML = '';
    createjs.Ticker.removeAllEventListeners();
    setTimeout(this.showGame, 1000);
}

// simply start the game - this works only the first time
this.showGame = function() {
        document.getElementById("gamecontainer").innerHTML = '<canvas id="gamecanvas" width="900" height="400"></canvas>';
        this.stage = new createjs.Stage("gamecanvas");

        // create the ticker and update the stage
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick", tickHandler);
}

- Kokodoko

---

当您重新启动游戏时，控制台中是否出现任何错误？您能否在http://jsfiddle.net上提供一个示例？ - net.uk.sweet

这听起来可能是EaselJS中的一个bug。这个问题已经在社区论坛上发布了：http://community.createjs.com/discussions/easeljs/5306-tick-function-still-called-after-calling-removealleventlisteners -- 我们会调查一下，并在那里回答它。 - Lanny

我在这里创建了一个fiddle，它并没有展示我所有的问题，但你可以看到在重启整个canvas游戏应用程序后补间动画未触发。 http://jsfiddle.net/BUyyv/ - Kokodoko

Answer 1

如果您要更换画布或重置舞台，请确保从舞台中删除DOM事件。根据文档：

---

enableDomEvents(Boolean enable)

启用或禁用舞台添加到DOM元素（窗口、文档和画布）的事件监听器。当处理Stage实例时，禁用事件是一种良好的做法，否则舞台将继续从页面接收事件。

更改canvas属性时，您必须在旧canvas上禁用事件，并在新canvas上启用事件，否则鼠标事件将无法按预期工作。例如：

myStage.enableDOMEvents(false);
myStage.canvas = anotherCanvas;
myStage.enableDOMEvents(true);

---

http://www.createjs.com/Docs/EaselJS/classes/Stage.html#method_enableDOMEvents

我不确定这是否能解决你的问题，但它可能会有所帮助。

- Lanny

---

谢谢！我不知道这个。我把这个添加到我的fiddle中，但当画布第二次创建时，它仍然没有触发tween。http://jsfiddle.net/BUyyv/1/ - Kokodoko

我在其他地方回答过这个问题。Tween的问题在于，当你移除所有监听器时，它也会清除TweenJS的tick监听器。你可以使用以下代码重新添加它：createjs.Ticker.addEventListener("tick", createjs.Tween); - Lanny

谢谢！这解决了我的一个问题。我仍然没有找到如何在删除画布元素并添加新元素后完全重置easeljs的方法。这很可能是我的代码错误。在我找出问题所在之前，我会将我的easeljs游戏加载到iframe中。这样我就可以确保在卸载iframe时它已经完全消失了。 - Kokodoko

Answer 2

我建议你使用这个

//create listener tick
createjs.Ticker.addEventListener('tick',tick);
//remove listener tick
createjs.Ticker.removeEventListener('tick',tick);
//exemple stopped object moves in Y axe if it exceeds heigth of canvas 
createjs.Ticker.addEventListener('tick',tick);
function tick(){
    console.log( myBitmap.x +" "+myCanvas.width);
    if (myBitmap.y < myCanvas.height){
        myBitmap.y=myBitmap.y+10;
    }else{
        createjs.Ticker.removeEventListener('tick',tick);
    }
    scene.update();
}

- bellaaj