2012-12-23 8 views
0

나는 내가 가지고있는 문제에 대한 약간의 예를 만들었습니다. 아래 그림과 같이 ("추가"버튼을 누르면) 레이어에 사각형이 추가됩니다. 나는 그때가 추가하지 않습니다, 그러나 .. 지금까지 ...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 어떤 도움이 필요하십니까?

EDITED IN : - 밝혔다되고 있음을, 나는 단지로 문제를 해결할 수

은 조금 더가 (아래 그림 참조) 내 스크립트에 몇 가지 오류가 있다고 보인다 그것으로보고 데 스크립트와 내가 사용 된 운동의 버전 변경 :

을 그래서를 - 운동 버전 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 깨는 것들의 새로운 버전입니까? 아니면 근본적으로 잘못된 것을하고 있습니까?

+0

jsfiddle을 만들어서 무슨 일인지보실 수 있습니까? – SoluableNonagon

답변

0

나는 문제가 KineticJS specifications 요구에 따라

{문자열} 고유해야하는 매개 변수 id: newItemName 함께 생각   옵션
고유 ID

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

그러나 더 config.id 당신이 jsfiddle를 만들면 말할 수있다.

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


}); 

};