繪製線連接器形狀

我繪製類似於graffle圖表（http://raphaeljs.com/graffle.html）。但是我不想要彎曲的連接線，而是想要直線（在交點處有一些曲線），如下圖所示（從另一個帖子獲得，但無法在那裏獲得解決方案）。由於我的圖表可能會有複雜的關係，所以線路連接器可以切斷很多線路，因此線路應該足以區分以顯示整潔的連接。這裏是我的示例代碼。有人可以建議我完成它的方法。繪製線連接器形狀

connections = []; 
    var shapes = new Array(); 
    var texts = new Array(); 
    var moreinfo=new Array(); 
    var kx=20,ky=50; 
    var RecWidth=80; 
    var RecHeight=40; 
    var RecRadius=5; 

for (var i=0; i<= 5; i++) { 
    shapes[i]=r.rect(kx, ky, RecWidth, RecHeight,RecRadius); 
    texts[i]=r.text(kx + 35, ky + 10, "SlsMktGst"+i); 
    moreinfo[i]=r.text(kx + 35, ky + 30, "More"); 
    moreinfo[i].id="more"+i; 
    shapes[i].id="keylist"+i ; 
    shapes[i].attr({fill: '#000080', stroke: '#000080', "fill-opacity": 0, "stroke-width": 2, cursor: "move"}); 
    texts[i].attr({fill: '#0000A0', stroke: "none", "font-size": 12,"font-weight":"bold", cursor: "move"}); 
    moreinfo[i].attr({fill: '#0000A0', stroke: "none", "font-weight":"bold", cursor: "move"}); 

    kx=kx+125; 
    ky=ky+50; 
};

箭頭//繪製連接線用於http://raphaeljs.com/graffle.html

for (var jj=0; jj<=shapes.length-1; jj++) { 

    if(jj != shapes.length-1){ 
     connections.push(r.connection(shapes[jj], shapes[jj+1], "#000", "#fff","Y")); 
    }; 
};

當前結果： Current result from above code

預期結果 enter image description here

來源

2012-04-12 JDev

在你拉斐爾連接方法使用從

var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");

更改PATH變量此

var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");

不同的是，「C」已經在路徑被更改爲「L」。

根據raphael documentation

C =曲線線路
L =直線

由於

來源

2013-05-04 08:25:52

繪製線連接器形狀

回答

相關問題