KineticJS 从层中删除一个项目答案

【问题标题】：KineticJS Remove an item from a layerKineticJS 从层中删除一个项目
【发布时间】：2013-09-12 19:13:05
【问题描述】：

我创建了一个小例子来说明我遇到的问题 - 我正在向图层添加一个矩形，如下所示（按下“添加”按钮时）。然后我可以通过按删除按钮来删除相同的项目...

...到目前为止一切都很好...

现在我尝试添加另一个项目。但是，它不会再添加到图层中，尽管图层似乎仍然存在。

谁能看出我做错了什么？

<html>
    <head>
        <title>Add / Remove Blocks</title>

        <style>
          body {
            margin: 0px;
            padding: 0px;
          }
          #buttons > input {
            padding: 10px;
            display: block;
            margin-top: 5px;
          }
        </style>

        <!-- Include script files -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="scripts/kinetic-v4.2.0.min.js"></script>
        <script type="text/javascript">
            var layer;
            var stage;

            $(document).ready(function() {
                // Create the stage
                stage = new Kinetic.Stage({
                    container: 'container',
                    width: 578,
                    height: 200
                });

                // Now add a new layer
                layer = new Kinetic.Layer();

                // add the layer to the stage
                stage.add(layer);
            });

            // Add a block to the screen
            function AddBlock()
            {
                // Create the name item
                var newItemName = "Block1";

                // Create the first block
                var rect = new Kinetic.Rect({
                    x: 100,
                    y: 100,
                    width: 10,
                    height: 10,
                    fill: 'black',
                    strokeWidth: 4,
                    id: newItemName,
                    name: newItemName
                  });

                // Add the block and draw it as well.
                layer.add(rect);
                layer.draw();
            }

            // Remove a block
            function RemoveBlock()
            {
                // Get the name
                var itemName = "Block1";

                // Get the shape
                var shape = stage.get(itemName)[0];

                // Now remove it
                layer.remove(shape);
            }
        </script>
    </head>
    <body>
        <div id="buttons">
            <input type="button" value="Add" id="Add" onclick="AddBlock();">
            <input type="button" value="Remove" id="Remove" onclick="RemoveBlock();">
        </div>
        <div id="container">&nbsp;</div>
    </body>
</html>

TIA 寻求帮助！

保罗

编辑于：

仔细研究后，似乎我的脚本中存在一些错误（如下所示） - 话虽如此，我只能通过更改脚本和我使用的 Kinetic 版本来解决问题：

所以 - 使用动力学版本 4.0.1...

我已将代码更改为：

// Remove a block
function RemoveBlock()
{
// Get the name
var itemName = ".Block1";

// Get the shape
var shape = layer.get(itemName)[0];

// Now remove it
layer.remove(shape);
layer.draw();
}

问题仍然存在 - 新版本的 Kinetic 会破坏事物吗？还是我做错了什么？

【问题讨论】：

你能做一个 jsfiddle 让我们看看发生了什么吗？

标签： kineticjs removechild

【解决方案1】：

我认为问题出在参数 id: newItemName 上，根据 KineticJS specifications 需要是唯一的

{String} config.id 可选
唯一标识

var rect = new Kinetic.Rect({
                    x: 100,
                    y: 100,
                    width: 10,
                    height: 10,
                    fill: 'black',
                    strokeWidth: 4,
                    id: newItemName,
                    name: newItemName
                  });

但是如果你做一个 jsfiddle 可以说更多

【讨论】：

【解决方案2】：

function UniqueId() {
       return Math.floor((1 + Math.random()) * 0x10000);

};

function DoTriangle() {
var id = UniqueId();
var triangle = new Kinetic.RegularPolygon({
    x: 20,
    y: 55,
    sides: 3,
    radius: 20,
    fill: 'black',
    draggable: true,
    stroke: 'black',
    strokeWidth: 1.5,
    lineJoin: 'bevel',
    id: id    

});

stage.add(layer.add(triangle));  

triangle.on('click', function(e){ 
   var shape = this.attrs.id;
    triangle.destroy(shape);
   layer.draw();


});

};

【讨论】：