绘制拉斐尔形状的线连接器答案

【问题标题】：Draw line connector for Raphael shapes绘制拉斐尔形状的线连接器
【发布时间】：2013-05-04 16:25:52
【问题描述】：

我正在绘制类似于 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"));
    };
};

当前结果：

预期结果

【问题讨论】：

标签： jquery raphael graphael

【解决方案1】：

在你的 Raphael 连接方法中使用改变你的路径变量

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

到这里

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 = 直线

谢谢

【讨论】：