KineticJS，移動形狀和REMOVE形狀

Question

我要完成的任務是在理論上很簡單..

我有一個階段..如果舞臺是空舞臺上的點擊放置一個層上一個圓圈對象舞臺..（我有一個工作代碼，這個..）

如果圖層和對象在舞臺上已經存在，我想將它們移動到x和y位置..

我是否還不清楚最好銷燬對象並創建一個新對象，或者我可以設置X和Y並重新繪製...

我都嘗試，但我沒有得到正確的事情..

// I have a working code here that detects mouseX and mouseY position 

// Detecting if object exists (works fine) 
    var theSpot = stage.find('.click_spot'); 

    if (theSpot[0] === undefined) {   
     //alert('Object not found, create a new one...'); 

     var layer = new Kinetic.Layer(); 
     var circle = new Kinetic.Circle({ 
      x: mouseX, 
      y: mouseY, 
      radius: 30, 
      fill: 'red', 
      stroke: 'black', 
      strokeWidth: 1, 
      draggable: true, 
      name:'click_spot' 
     }); 

     layer.add(circle); 
     stage.add(layer); 

    } else { 

// Move the object OR remove and draw a new one 
// when I try to remove,, circle.remove(); does not remove it 

     //alert('Object found, move it to new x, y location'); 

     circle.setX(mouseX); // I tried inserting values directly as well 
     circle.setY(mouseY); // circle.setX(15) and circle.setX(15) but no joy... 
     layer.draw(); 
    } 

Answer 1

您將節省資源，並通過重用現有的圈子，而不是破壞並重新創建一個新的圈子獲得性能。

您在代碼中有一個範圍問題。

由於您在if語句中創建var circle，因此if完成後該圓圈變量將丟失。

你有幾種「記住」圓的方法。

最簡單的方法是簡單地聲明var circle全局（外部和if語句之前）。

你也可以給圓一個id，後來問層取得與該ID的對象：

var circle = new Kinetic.Circle({ 
     id="myCircle", 
     x: mouseX, 
     y: mouseY, 
     radius: 30, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 1, 
     draggable: true, 
     name:'click_spot' 
    }); 

    // get the object by its id 

    var myCircle = layer.get("#myCircle"); 

    // then you can use this reference to make your changes 

    myCircle.setX(mouseX); 
    myCircle.setY(mouseY); 
    layer.draw();