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要素は2つの定義されたノードを結ぶ線を描画します。

で、これ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 に答える