KineticJS從一個圖層中刪除一個項目

我已經創建了一個我遇到的問題的小例子 - 我將一個矩形添加到圖層，如下所示（當按下「添加」按鈕時）。那麼我可以通過按下刪除按鈕刪除同一項目...KineticJS從一個圖層中刪除一個項目

...所有好爲止......

現在我嘗試添加其他項目。但是，它不會增加儘管該層看起來仍然存在，但該層仍然存在。

任何人都可以看到我做錯了什麼？

<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任何幫助！

保羅

編輯了：

說完看着成多一點，似乎有在我的腳本中的一些錯誤（如下圖所示） - 他這樣說，我只能通過解決問題改變劇本，而我用的是動力學的版本：

所以 - 與動力版本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(); 
}

這個問題仍然存在 - 是動力學破壞的新版本？或者我在做一些根本性錯誤？

來源

2012-12-23 user1236373

你可以讓一個jsfiddle讓我們看看發生了什麼？ – SoluableNonagon

我相信問題是與參數id: newItemName其作爲每KineticJS specifications需求是唯一的

{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-12 13:42:21 Ani

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-12 11:13:05 mirosz

KineticJS從一個圖層中刪除一個項目

回答

相關問題