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可以帮助您进行计算，因为它能够计算路径交叉点。当您有一个表示几何体的路径字符串时，这种方法很有效。

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之间的距离）

可用于连接RaphaelJS 2中的圆圈对的方法？

1 个答案: