如何将多个形状一起移动而不使用组

我是KineticJS的新手，并且有一个非常基本的问题。如何将多个形状一起移动而不使用组

我想创建一个使用KineticJS的图形（父子层次结构）。因此，在任何节点我将有3件事情：

1）的圆作为节点本身

2）附着到圆“+”符号的小图像。点击此“+”将允许创建子节点。

3）连接此节点与子节点的线。

我试图将它们中的所有3个捆绑在一个“组”中，但问题是当我拖动该组时，它们全部一起移动 - 这显然是预期的 - 但是当我拖动子节点时， “连接到父节点的线。

基本上只有连接到子节点的线的一端应该移动，并且连接到父节点的端应该被固定。

我该如何实现这个目标？快速代码片段将帮助我处理这个问题，我试图在过去2天内徒劳地解决这个问题。

非常感谢！

-S

来源

2013-04-20 Suresh Kumar

你可以继续通过创建一个自定义drawFunc线连接你的父母和孩子节点。

该行的自定义drawFunc只是获取父级&子位置并在它们之间绘制自己。

drawFunc: function(canvas){ 
    var ctx=canvas.getContext(); 
    var x1=parentNode.getPosition().x; 
    var y1=parentNode.getPosition().y; 
    var x2=childNode.getPosition().x; 
    var y2=childNode.getPosition().y; 
    ctx.save(); 
    ctx.strokeStyle="red"; 
    ctx.lineWidth=3; 
    ctx.beginPath(); 
    ctx.moveTo(x1,y1); 
    ctx.lineTo(x2,y2); 
    ctx.stroke(); 
    ctx.restore(); 
},

您可能还希望将线绘制在节点之后而不是顶部。

你可以通过设置stage.getDragLayer.afterDraw功能移动连接线到z-index的

stage.getDragLayer().afterDraw(function() { 
    connector.moveToBottom(); 
    layer.draw(); 
});

这里的底部做到这一点的代码和一个小提琴：http://jsfiddle.net/m1erickson/tt2KG/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
} 
</style>   
<script> 
$(function(){ 


    function init(){ 

     var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 400, 
      height: 400 
     }); 
     var layer = new Kinetic.Layer(); 
     stage.add(layer); 

     var parentNode = new Kinetic.Circle({ 
      x: 50, 
      y: 80, 
      radius: 40, 
      fill: "blue", 
      stroke: "red", 
      strokeWidth: 3, 
      draggable: true 
     });  

     var childNode = new Kinetic.Circle({ 
      x: 150, 
      y: 80, 
      radius:25, 
      fill: "green", 
      stroke: "red", 
      strokeWidth: 3, 
      draggable: true 
     });  

     var connector = new Kinetic.Line({ 
      drawFunc: function(canvas){ 
       var ctx=canvas.getContext(); 
       var x1=parentNode.getPosition().x; 
       var y1=parentNode.getPosition().y; 
       var x2=childNode.getPosition().x; 
       var y2=childNode.getPosition().y; 
       ctx.save(); 
       ctx.strokeStyle="red"; 
       ctx.lineWidth=3; 
       ctx.beginPath(); 
       ctx.moveTo(x1,y1); 
       ctx.lineTo(x2,y2); 
       ctx.stroke(); 
       ctx.restore(); 
      }, 
      points: [1,1,1,3], 
      stroke: "red", 
      strokeWidth: 2, 
      lineCap: 'round', 
      lineJoin: 'round', 
      opacity: 1, 
      draggable:false 
     }); 
     layer.add(connector); 
     layer.add(parentNode); 
     layer.add(childNode); 

     // keep connector on rect1+rect2 
     stage.getDragLayer().afterDraw(function() { 
      connector.moveToBottom(); 
      layer.draw(); 
     }); 

     layer.draw(); 
    } 

init(); 

}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

来源

2013-04-20 23:10:00 markE

如何将多个形状一起移动而不使用组

回答

相关问题