0

私が抱えている問題の小さな例を作成しました-以下に示すように、レイヤーに長方形を追加しています（「追加」ボタンを押したとき）。その後、削除ボタンを押して同じアイテムを削除できます...

...これまでのところすべて良い...

今、私は別のアイテムを追加しようとしています..しかし、レイヤーがまだそこにあるように見えますが、それ以上レイヤーに追加されません。

誰かが私が間違っていることを見ることができますか?

<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 の新しいバージョンは何かを壊しているのでしょうか? それとも根本的に間違ったことをしていますか？

4

2 に答える 2

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


});

};

于 2013-09-12T11:13:05.493 に答える
0

問題はid: newItemName、KineticJS 仕様に従って一意である必要があるパラメーターにあると思います

{String} config.id オプション
の一意の ID

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

しかし、jsfiddle を作成すると、さらに多くのことが言えます

于 2013-01-12T13:42:21.180 に答える