javascript - 在 RaphaelJS 2 中连接圆对的方法可用吗？

Question

普通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 是否已经提供了某些方法？ ，因为这似乎是一个非常常见的功能。

Answer 1

没有。虽然这对您来说似乎是常见功能，但这实际上是 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 之间的距离)的线上的点