1

简而言之svg，<line>标签似乎做得很好，例如

<g>
    <line class="link" x1="180" y1="280" x2="560" y2="280"></line>
</g>
<g>
    <circle class="node" cx="180" cy="280" id="n1" r="18"></circle>
    <circle class="node" cx="560" cy="280" id="n2" r="18"></circle>
</g>

在这里，line元素绘制一条连接两个已定义节点的线。

在RaphaelJS 2，有没有办法做到这一点？似乎最有可能的是path，但是当我尝试时：

var paper = Raphael(document.getElementById("raphael-test"), 600, 600);
var c1 = paper.circle(180, 280, 18);
var c2 = paper.circle(560, 280, 18);
var edge = paper.path("M180,280L560,280");

这条线延伸到两个圆圈中，到达圆圈的中心。从视觉上看，我希望这条线刚好接触到圆线。当然，我可以计算出几何形状并在给定对坐标的情况下减去每一端的圆的半径。但我想知道某些方法是否已经可用RaphaelJS 2，因为这似乎是一个非常常见的功能。

4

1 回答 1

4

不。虽然这对您来说似乎是常见的功能，但这实际上是 SVG 抽象的一种非常定制的用法。如果 Raphael 支持这样的事情，那么您可以想象功能请求将扩展到诸如在不重叠的任意形状之间进行绘制之类的事情。

但是，Raphael 可以帮助您进行计算，因为它能够计算路径交叉点。当您有一个路径字符串来表示您的几何图形时，这将起作用。

http://raphaeljs.com/reference.html#Raphael.pathIntersection

见：http: //jsfiddle.net/sDNMv/

// Computes a path string for a circle
Raphael.fn.circlePath = function(x , y, r) {      
  return "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x - 0.1)+","+(y-r)+" z";
} 

// Computes a path string for a line
Raphael.fn.linePath = function(x1, y1, x2, y2) {
    return "M" + x1 + "," + y1 + "L" + x2 + "," + y2;
}

var x1 = 180,
    y1 = 280,
    r1 = 18,

    x2 = 400,
    y2 = 280,
    r2 = 18,

    paper = Raphael(document.getElementById("raphael-test"), 600, 600),
    c1 = paper.circle(x1, y1, r1),
    c2 = paper.circle(x2, y2, r2),

    // Compute the path strings
    c1path = paper.circlePath(x1, y1, r1),
    c2path = paper.circlePath(x2, y2, r2),
    linePath = paper.linePath(x1, y1, x2, y2),

    // Get the path intersections
    // In this case we are guaranteed 1 intersection, but you could find any intersection of interest
    c1i = Raphael.pathIntersection(linePath, c1path)[0],
    c2i = Raphael.pathIntersection(linePath, c2path)[0],


    line = paper.path(paper.linePath(c1i.x, c1i.y, c2i.x, c2i.y));​

您也可以考虑使用 getPointAtLength

http://raphaeljs.com/reference.html#Raphael.getPointAtLength

因为对于圆，交点是它们之间的直线上的点，长度为 r 和（之间的距离 - r）

于 2012-11-25T15:53:47.047 回答