KineticJs - 當動態創建矩形時，其背後的矩形自身拖動

在kineticjs中，我創建了可拖動的動態矩形。但是，當我創建一個新的矩形時，它後面的矩形會自動拖動。我不希望發生這種情況。KineticJs - 當動態創建矩形時，其背後的矩形自身拖動

您可以在http://jsfiddle.net/sandeepy02/8kGVD/12/

第1步看到演示的行爲：選擇「創建矩形」，並創建矩形。步驟2：選擇「移動矩形」並移動矩形。第3步：選擇「創建矩形」並創建矩形。這導致先前創建的矩形也移動。這是不需要的。

<html> 
    <head> 
     <script> 
function valButton(radios) { 
    var btn = document.getElementsByName(radios); 
    var cnt = -1; 
    for (var i = btn.length - 1; i > -1; i--) { 
     if (btn[i].checked) { 
      cnt = i; 
      i = -1; 
     } 
    } 
    if (cnt > -1) return btn[cnt].value; 
    else return null; 
} 

window.onload = function() { 
    layer = new Kinetic.Layer(); 
    stage = new Kinetic.Stage({ 
     container: "container", 
     width: 320, 
     height: 320 
    }); 
    background = new Kinetic.Rect({ 
     x: 0, 
     y: 0, 
     width: stage.getWidth(), 
     height: stage.getHeight(), 
     fill: "white" 
    }); 


    layer.add(background); 
    stage.add(layer); 

    moving = false; 

    stage.on("mousedown touchstart", function() { 
     var btnName = valButton("group2"); 
     if (btnName == "1") { 
      if (moving) { 
       moving = false; 
       layer.draw(); 
      } else { 
       var mousePos = stage.getMousePosition(); 
       rect = new Kinetic.Rect({ 
        x: 22, 
        y: 7, 
        width: 0, 
        height: 0, 
        fill: 'red', 
        stroke: 'black', 
        strokeWidth: 4, 
        draggable: true 
       }); 
       layer.add(rect); 
       //start point and end point are the same 
       rect.setX(mousePos.x); 
       rect.setY(mousePos.y); 
       rect.setWidth(0); 
       rect.setHeight(0); 
       moving = true; 
       layer.drawScene(); 
      } 
     } 
     document.all.text.innerText = btnName +" "+moving; 

    }); //end of mousedown 
    stage.on("mousemove touchmove", function() { 
     var btnName = valButton("group2"); 
     if (btnName == "1") { 
      if (moving) { 
       var mousePos = stage.getMousePosition(); 
       var x = mousePos.x; 
       var y = mousePos.y; 
       rect.setWidth(mousePos.x - rect.getX()); 
       rect.setHeight(mousePos.y - rect.getY()); 
       moving = true; 
       layer.drawScene(); 
      } 
     } 
     else if (btnName == "3") { 
      layer.draw(); 
     } 
     document.all.text.innerText = btnName +" "+moving; 
    }); //end of mousemove 
    stage.on("mouseup touchend", function() { 
     var btnName = valButton("group2"); 
     if (btnName == "1") { 
      moving = false; 
     } 
     document.all.text.innerText = btnName +" "+moving; 
    }); //end of mouseup 
}; 
     </script> 
    </head> 
    <body> 

     <h2>Toggle buttons</h2> 
<div class="toggle-btn-grp"> 
    <label onclick="" class="toggle-btn"><input type="radio" value="1" name="group2"/> Create Rectangle</label> 
    <label onclick="" class="toggle-btn"><input type="radio" value="3" name="group2"/>Move Rectangle</label> 
</div> 

     <div id="container" ></div> 
       <div id="text" >abc</div> 

    </body> 
</html>

來源

2012-12-07 user1517108

撥弄我的作品。即使拖動重疊，也只能移動一個矩形。 –

設計說明：嘗試將拖動的矩形放到前景中（並在拖動停止時將其保持在那裏）？ –

請注意，它在Firefox中不完全是高性能的（但在Chrome中可用）。無法在任何一箇中重現。 –

這是你更新的功能來解決這個問題 -

stage.on("mousedown touchstart", function() { 
    var btnName = valButton("group2"); 
    if (btnName == "Create") { 
     if (moving) { 
      moving = false; 
      layer.draw(); 
     } else { 
      var mousePos = stage.getMousePosition(); 
      rect = new Kinetic.Rect({ 
       x: 0, 
       y: 0, 
       width: 0, 
       height: 0, 
       fill: 'red', 
       stroke: 'black', 
       strokeWidth: 4, 
       draggable: true 
      }); 
      layer.add(rect); 
      //start point and end point are the same 
      rect.setX(mousePos.x); 
      rect.setY(mousePos.y); 
      rect.setWidth(0); 
      rect.setHeight(0); 
      moving = true; 
      rect.on("mousemove touchmove", function() { 
       var btnName = valButton("group2"); 
       if (btnName == "Create") { 
        this.setDraggable(false); 
       } 
       else if (btnName == "Move") { 
        this.setDraggable(true); 
       } 
       document.all.text.innerText = btnName +" rect move MovingFlag: "+moving; 
      }); //end of rect mousemove 
      layer.drawScene(); 
     } 
    } 
    document.all.text.innerText = btnName +" MovingFlag: "+moving; 

}); //end of mousedown

來源

2012-12-08 20:13:09 Ani

KineticJs - 當動態創建矩形時，其背後的矩形自身拖動

回答

相關問題