javascript - 使用 CreateJS 单击删除形状

Question

如何仅删除 CreateJS 中的形状？对于我的示例，我使用名为 createSquare 的函数创建了几个正方形。我的目标是拥有一个函数或单击事件，仅删除被单击的方 block 。

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

Here is a link to a working fiddle.

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 。鼠标事件接收 MouseEvent .

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

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

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

或者，您也可以听一次舞台表演。

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