KineticJS在兩個形狀之間畫線

我有兩個KineticJs矩形可以在畫布上拖動。我希望能夠使用一些修飾符（例如單擊一個描述繪製線的按鈕或像cntrl這樣的鍵盤修飾符），然後單擊其中一個矩形，拖動到其他矩形並繪製連接兩個矩形的簡單線條）。該行然後需要鏈接到每個矩形，所以如果任何矩形移動，該行保持連接。KineticJS在兩個形狀之間畫線

問題的第二部分似乎是從這個帖子得到解決：KineticJS drag a box with line connected

，但我無法找到任何資源，幫助我與我的第一個問題。

來源

2013-05-13 user2379124

你有什麼你試過的代碼？ – 2013-05-13 20:10:18

這裏是如何讓用戶通過點擊選擇2個矩形

你甚至都不需要[開始連接]按鈕，只是讓用戶點擊2個矩形和做連接。

用戶可以通過點擊選擇一個矩形。矩形將用黑色和紅色邊框突出顯示。用戶可以再次單擊同一個矩形以取消選擇它（突出顯示被刪除）。

突出顯示是一個單獨的矩形，用於在黑色和紅色邊框中「勾勒」所選矩形。突出顯示是在單獨的圖層上完成的。

enter image description here

首先，添加一對夫婦自定義屬性的每一個矩形。

// isHighlighted is just an on/off flag 
// to mark this rectangle as highlighted by the user. 

     rect.isHighlighted=false; 

// highlight is a second rectangle that 「highlights」 this rectangle 

     rect.highlight=null; 

// Add a click event that toggles highlighting on/off 
// whenever the user clicks on this rectangle 

     rect.on("click",function(){ 
      highlight(this); 
      target.draw(); 
     });

此功能在用戶單擊時切換矩形的突出顯示/關閉。

該功能還測試是否突出顯示2個矩形，以便連接它們。

是...你發現瞭如何做一個好職位的連接：

KineticJS drag a box with line connected

// create a counter of highlighted rectangles 
var highlightCount=0; 

// when any rectangle is clicked, toggle its highlight on/off 
function highlight(rect){ 
    if(rect.highlighted){ 
     rect.isHighlighted=false; 
     rect.highlight.remove(); 
     highlightCount--; 
    }else{ 
     var x=rect.getX()-8; 
     var y=rect.getY()-8; 
     var width=rect.getWidth()+16; 
     var height=rect.getHeight()+16; 
     var highlight=kRect(x,y,width,height,"red","black",3,target); 
     rect.isHighlighted=true; 
     rect.highlight=highlight; 
     highlightCount++; 

     // if 2 rectangles are highlighted, connect them 
     if(highlightCount==2){ 
      var results="Connect these rectangles: "; 
      var children=layer.getChildren(); 
      for(var i=0;i<children.length;i++){ 
       if(children[i].isHighlighted){ 
        results+="["+i+"]"; 
       } 
      } 
      alert(results); 
     } 
    } 
}

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/MBPkn/

<!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(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 400, 
     height: 400 
    }); 
    // create a target layer where highlights are drawn 
    var target = new Kinetic.Layer({name:"target"}); 
    stage.add(target); 
    // create the regular layer 
    var layer = new Kinetic.Layer({name:"layer"}); 
    stage.add(layer); 

    // create 4 rectangles 
    var rect1=kRect(50,50,40,40,"lightgray","skyblue",6,layer); 
    var rect2=kRect(125,125,40,40,"lightgray","skyblue",6,layer); 
    var rect3=kRect(200,50,40,40,"lightgray","skyblue",6,layer); 
    var rect5=kRect(275,125,40,40,"lightgray","skyblue",6,layer); 

    // create a counter of highlighted rectangles 
    var highlightCount=0; 

    // when any rectangle is clicked, toggle its highlight on/off 
    function highlight(rect){ 
     if(rect.highlighted){ 
      rect.isHighlighted=false; 
      rect.highlight.remove(); 
      highlightCount--; 
     }else{ 
      var x=rect.getX()-8; 
      var y=rect.getY()-8; 
      var width=rect.getWidth()+16; 
      var height=rect.getHeight()+16; 
      var highlight=kRect(x,y,width,height,"red","black",3,target); 
      rect.isHighlighted=true; 
      rect.highlight=highlight; 
      highlightCount++; 
      if(highlightCount==2){ 
       var results="Connect these rectangles: "; 
       var children=layer.getChildren(); 
       for(var i=0;i<children.length;i++){ 
        if(children[i].isHighlighted){ 
         results+="["+i+"]"; 
        } 
       } 
       alert(results); 
      } 
     } 
    } 


    // build the specified KineticJS Rectangle and add it to the stage 
    function kRect(x,y,width,height,fill,stroke,strokewidth,layer){ 
     var rect = new Kinetic.Rect({ 
     x: x, 
     y: y, 
     width: width, 
     height: height, 
     fill: fill, 
     stroke: stroke, 
     strokeWidth: strokewidth 
     }); 
     // if this is not a highlight, make it highlight-able 
     if(layer.getName()!="target"){ 
      rect.isHighlighted=false; 
      rect.highlight=null; 
      rect.on("click",function(){ 
       highlight(this); 
       target.draw(); 
      }); 
     } 
     layer.add(rect); 
     stage.draw(); 
     return(rect); 
    } 

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

</script>  
</head> 

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

來源

2013-05-14 05:43:30 markE

非常感謝！我只是想弄清楚如何使用我自己創建的kineticjs形狀組來代替你創建的矩形。我有一個創建組（rect +文本）的按鈕。我試圖將高亮和連接功能變成一個按鈕，所以當我按下它時，我可以點擊我自己的組。任何想法如何做到這一點？我是否需要在高亮功能中將我的組作爲參數？ – user2379124 2013-05-14 17:32:14

我*認爲*我明白你在問什麼。所以你想突出顯示一個組而不是一個矩形。應該很容易。亮點實際上只是一個矩形，比任何突出顯示的對象稍大。只要要突出顯示的對象具有有效的getX，getY，getWidth和getHeight，則應該可以將組對象饋入高亮功能。請務必爲每個組添加.isHighlighted，.highlight和點擊事件。查看alert（）在hightlight函數中的位置？你需要把你的代碼連接到你的2組。 – markE 2013-05-14 18:10:37

是的，你明白我在找什麼。你介意看看我的代碼嗎？當我將點擊高亮功能放到我的組中時，它不會再畫出來。 http://jsfiddle.net/MBPkn/2/ – user2379124 2013-05-14 20:12:46

KineticJS在兩個形狀之間畫線

回答

相關問題