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 - 当动态创建矩形时，其背后的矩形自身拖动

回答

相关问题