如何將多個形狀一起移動而不使用組

我是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

如何將多個形狀一起移動而不使用組

回答

相關問題