使用 CreateJS 单击删除形状

Question

如何只删除 CreateJS 中的形状？在我的示例中，我创建了一些带有函数 createSquare 的方块。我的目标是拥有一个函数或点击事件，它只删除被点击的方块。

我试过事件侦听器和点击，但没有成功。我已经注释掉了我尝试使用的代码。

JS如下：

var canvas;
var stage;
var square;

function init() {   
    canvas = document.getElementById("canvas");
    stage = new createjs.Stage(canvas);
}

function createSquare(){
    square = new createjs.Shape();
    square.graphics.beginFill("red").drawRect(0, 0, 50, 50)
    square.x = Math.random() * canvas.width;
        square.y = Math.random() * canvas.height;
    stage.addChild(square);
    stage.update();
}

// This code should remove the squares
/*
square.on("click", function(evt) {
    stage.removeChild(this);
});
*/

window.onload = init();

createSquare();
createSquare();
createSquare();
createSquare();
createSquare();
createSquare();

Answer 1

CreateJS 中的事件处理程序通过 event object. Mouse events receive a MouseEvent.

事件的目标将是点击的内容。

square.on("click", function(evt) {
    stage.removeChild(evt.target);
    stage.update();
});

您需要在创建每个方块时为其添加监听器。

或者，您也可以听一遍舞台。

stage.on("click", function(evt) {
    stage.removeChild(evt.target);
    stage.update();
});

使用 CreateJS 单击删除形状

Remove a shape on click with CreateJS

javascript

createjs

easeljs