鏈接動態添加的組與行

我正在尋找一種解決方案，用一條線鏈接動態添加的形狀（或組）。當鏈接的形狀被拖動時，該行必須更新。我已經可以選擇將圖形動態添加到圖層（按鈕），但是如何將它們與一條線鏈接並在形狀的dragmove事件中更新此線？鏈接動態添加的組與行

我希望有選擇，有可能在每個形狀的傳入的一個出線，所以每一個形狀可以鏈接到另一個

THX！

來源

2013-10-30 jmcclane

演示：http://jsfiddle.net/m1erickson/9am6M/

enter image description here

可以使用Kinetic.Line連接2種形狀。

要連續連接多個形狀，請爲每個形狀提供對其先前形狀和其下一個形狀的依次引用。

var circle = new Kinetic.Circle({ 
    x: x, 
    y: y, 
    radius: r, 
    fill: fill, 
    stroke: 'black', 
    strokeWidth: 3, 
    draggable: true 
}); 

circle.beforeShape=beforeShape; 
circle.beforeConnector=beforeConnector; 
circle.afterShape=afterShape; 
circle.afterConnector=afterConnector;

然後當拖動任何形狀時，使用此形狀的當前位置重置先前連接線和下一個連接線的點。

circle.on("dragmove",function(){ 
    if(this.beforeShape){ 
     this.beforeConnector.setPoints([ 
      {x:this.beforeShape.getX(),y:this.beforeShape.getY()}, 
      {x:this.getX(),y:this.getY()}]); 
    } 
    if(this.afterShape){ 
     this.afterConnector.setPoints([ 
      {x:this.getX(),y:this.getY()}, 
      {x:this.afterShape.getX(),y:this.afterShape.getY()}]); 
    }

這裏是全碼：

<!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://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 

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

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


    // create some test shapes 
    var c1=newCircle(30,30,10,"red",null); 
    var c2=newCircle(180,60,25,"green",c1); 
    var c3=newCircle(80,180,20,"blue",c2); 


    function newCircle(x,y,r,fill,beforeShape){ 

     var circle = new Kinetic.Circle({ 
      x: x, 
      y: y, 
      radius: r, 
      fill: fill, 
      stroke: 'black', 
      strokeWidth: 3, 
      draggable: true 
     }); 
     layer.add(circle); 

     if(beforeShape){ 
      var connector=new Kinetic.Line({ 
       points:[ 
        {x:beforeShape.getX(),y:beforeShape.getY()}, 
        {x:x,y:y}], 
       stroke:"blue", 
       strokeWidth:3 
      }); 
      layer.add(connector); 
      connector.moveToBottom(); 
      beforeShape.afterShape=circle; 
      beforeShape.afterConnector=connector; 
     } 
     circle.beforeShape=beforeShape; 
     circle.beforeConnector=connector; 
     circle.afterShape=null; 
     circle.afterConnector=null; 
     circle.on("dragmove",function(){ 
      if(this.beforeShape){ 
       this.beforeConnector.setPoints([ 
        {x:this.beforeShape.getX(),y:this.beforeShape.getY()}, 
        {x:this.getX(),y:this.getY()}]); 
      } 
      if(this.afterShape){ 
       this.afterConnector.setPoints([ 
        {x:this.getX(),y:this.getY()}, 
        {x:this.afterShape.getX(),y:this.afterShape.getY()}]); 
      } 
     }); 

     layer.draw(); 
     return(circle); 
    } 

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

</script>  
</head> 

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

來源

2013-10-30 18:41:19 markE

太好了！它的工作，感謝一百萬！ – jmcclane

鏈接動態添加的組與行

回答

相關問題