在KonvaJS补间结束时销毁多个形状

Question

所以我有一个for循环生成，放置和补间20个矩形。但是代码只会破坏最后生成的矩形。是否有一种（理想上简单的）方法来确保.destroy（）适用于每个矩形而不是最后一个矩形？

$("#combat").click(function() {

    for (var i = 0; i < 20; i++){

        var rect = new Konva.Rect({
            x: -500,
            y: stage.height()*Math.random(),
            width: 480,
            height: 20,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 3
        });

        layer.add(rect);

        tween = new Konva.Tween({
            node: rect,
            duration: 1,
            x: 500,
            onFinish: function() {
                rect.destroy()
            }
        }).play();

    }

});

Answer 1

        var tween = new Konva.Tween({
            node: pentagon,
            duration: 1,
            x: 500,
            onFinish: function() {
                // this will be tween instance
                // this.node will be rectangle
                console.log(this.node);
            }
        }).play();

Answer 2

您可以使用Group对象：

修改

$("#combat").click(function() {

    var rectGroup = new Konva.Group();

    for (var i = 0; i < 20; i++){               

        var rect = new Konva.Rect({
            x: -500,
            y: stage.height()*Math.random(),
            width: 480,
            height: 20,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 3
        });

        rectGroup.add(rect);        
        layer.add(rectGroup);

        tween = new Konva.Tween({
            node: rect,
            duration: 1,
            x: 500,
            onFinish: function() {
                rectGroup.destroy()
            }
        }).play();

    }

});