Question

我对kinetic.js库很新，我需要一些帮助来更好地理解它是如何工作的。我需要绘制3个形状（矩形），分别命名为“first”，“second”和“first”（再次）：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 100,
    height: 100
});
var diceLayer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 20,
    height: 20,
    fill: 'yellow',
    name: 'first'
});
diceLayer.add(rect);
var rect = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 20,
    height: 20,
    fill: 'red',
    name: 'second'
});
diceLayer.add(rect);
var rect = new Kinetic.Rect({
    x: 20,
    y: 20,
    width: 20,
    height: 20,
    fill: 'green',
    name: 'first'
})
diceLayer.add(rect);
stage.add(diceLayer);

然后选择名为'first'的两个形状，将它们缩放@ 50％并填充另一种颜色

var selectionLayer = new Kinetic.Layer();
selectionLayer = stage.find( '.first' );
selectionLayer.stroke('1px');
selectionLayer.scaleX('0.5');
selectionLayer.scaleY('0.5');
selectionLayer.fill('silver');
selectionLayer.draw();

这样的语法，据我所知保持原始形状（这是我需要的exaclty）和复制形状修改复制对象设置笔划，缩放它们，... 但是，如何删除先前查找/选择创建的对象？

我已经尝试了.clear（）和.remove（），但它们似乎不起作用。

selectionLayer.clear();
selectionLayer.remove();

怎么了？

斯特凡诺

Answer 1

请尝试以下代码。

注意：您可以使用 stage，diceLayer，rect 等javascript变量来查找和删除形状。

您的代码： var selectionLayer = new Kinetic.Layer（）;

您的上述代码无效。因为初始化对象时 selectionLayer 子值将为空。

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body
        {
            margin: 0px;
            padding: 0px;
        }
        #buttons
        {
            position: absolute;
            left: 10px;
            top: 100px;
        }
        button
        {
            margin-top: 10px;
            display: block;
        }
    </style>
</head>
<body onload="LoadFunction()">
    <div id="container">
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
    <script defer="defer">

        function LoadFunction() {

            var stage, diceLayer, rect1, rect2, rect3;
            stage = new Kinetic.Stage({
                container: 'container',
                width: 100,
                height: 100
            });
            diceLayer = new Kinetic.Layer();
            rect1 = new Kinetic.Rect({
                x: 0,
                y: 0,
                width: 20,
                height: 20,
                fill: 'yellow',
                name: 'first'
            });
            diceLayer.add(rect1);
            rect2 = new Kinetic.Rect({
                x: 10,
                y: 10,
                width: 20,
                height: 20,
                fill: 'red',
                name: 'second'
            });
            diceLayer.add(rect2);
            rect3 = new Kinetic.Rect({
                x: 20,
                y: 20,
                width: 20,
                height: 20,
                fill: 'green',
                name: 'first'
            })
            diceLayer.add(rect3);
            stage.add(diceLayer);


            document.getElementById("change").addEventListener("click", function () {                
                for (var i = 0; i < stage.get(".first").length; i++) {
                    stage.get(".first")[i].stroke('1px');
                    stage.get(".first")[i].scaleX('0.5');
                    stage.get(".first")[i].scaleY('0.5');
                    stage.get(".first")[i].fill('silver');
                }
                diceLayer.draw();
            }, false);
            document.getElementById("remove").addEventListener("click", function () {
                var selectionLayer = new Kinetic.Layer();

                diceLayer.remove();
            }, false);
        }
    </script>
    <div id="buttons">
        <input id="change" type="button" value="Change" />
        <input id="remove" type="button" value="Remove" />
    </div>
</body>
</html>

Answer 2

解决我的问题（并突出显示可用的整个人口中的一组受限制的）我......

定义了一个新图层

var selectionLayer = new Kinetic.Layer();

获取要高位的rect列表（使用jquery ajax调用）然后创建一个新的rect对象（通过find语句返回一个相同的位置）但是不同的border，color和whatelse以便添加最后它作为舞台容器上的新图层：

$.get( "/map/get-text-probed-dice.php", function( data ) {
    selectedDice = stage.find( data );
    selectedDice.each(function(shape) {
        var rect = new Kinetic.Rect({
            x: shape.x(),
            y: shape.y(),
            width: shape.width(),
            height: shape.height(),
            stroke: 3
        });
        selectionLayer.add(rect);
    });
    stage.add(selectionLayer);
});

然后，当用户询问隐藏选择时，可以删除相同的选择层
```
selectionLayer.remove();
```

最有可能有一种更聪明的方式来接近它，但我确实是一个新手，这是我发现的最聪明的方法。

侨，斯特凡诺

kinetic.js：如何查找和删除形状

2 个答案: