Question

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

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

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

谁能看到我做错了什么？

<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破坏事物的新版本吗？或者我做了一些根本错误的事情？

Answer 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，可以说更多。

Answer 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();


});

};

KineticJS从图层中删除项目

2 个答案: