160

簡単な質問: SVG パスを使用すると、円の 99.99% を描画して表示できますが、円の 99.99999999% の場合、円は表示されません。どうすれば修正できますか？

次の SVG パスは円の 99.99% を描画できます: ( http://jsfiddle.net/DFhUF/1381/で試してみて、4 つの円弧が表示されるか、2 つの円弧のみが表示されるかを確認してください。ただし、IE の場合はSVG ではなく VML でレンダリングされますが、同様の問題があります)

M 100 100 a 50 50 0 1 0 0.00001 0

しかし、それが円の 99.99999999% の場合、何も表示されませんか?

M 100 100 a 50 50 0 1 0 0.00000001 0

そして、それは 100% の円でも同じです (これはまだ円弧ですよね、非常に完全な円弧です)。

M 100 100 a 50 50 0 1 0 0 0

どうすれば修正できますか？その理由は、関数を使用して円弧のパーセンテージを描画するためです。円関数を使用するために 99.9999% または 100% の円弧を「特別なケース」にする必要がある場合、それはばかげています。

繰り返しますが、RaphaelJS を使用した jsfiddle のテスト ケースはhttp://jsfiddle.net/DFhUF/1381/
にあります (IE 8 の VML の場合、2 番目の円でさえ表示されません... に変更する必要があります0.01)

アップデート：

これは、私たちのシステムでスコアの円弧をレンダリングしているためで、3.3 ポイントは円の 1/3 になります。0.5 で半円、9.9 ポイントで 99% の円になります。しかし、私たちのシステムに 9.99 のスコアがある場合はどうなるでしょうか? 円の 99.999% に近いかどうかを確認し、それに応じてarc関数または関数を使用する必要がありcircleますか? では、9.9987 のスコアはどうでしょうか? どちらを使用しますか？どのようなスコアが「完全すぎる円」にマップされて円関数に切り替えられるかを知る必要があり、それが円または 9.9987 スコアの「特定の 99.9%」である場合、弧関数を使用する必要があるのはばかげています。 .

4

12 に答える 12

457

ゲームが少し遅れていることはわかっていますが、この質問が初めてのときから覚えていて、同様のジレンマを抱えていたので、まだ誰かがまだ探している場合は、誤って「正しい」解決策を見つけました。

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

言い換えれば、これは：

<circle cx="100" cy="100" r="75" />

これでパスとして達成できます：

  <path 
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
  />

コツは、2 つの円弧を作成することです。2 つ目の円弧は、最初の円弧が中断したところから再開し、負の直径を使用して元の円弧の始点に戻ります。

1 つの円弧で完全な円として実行できない理由は (私が推測しているだけです)、自分自身 (150,150 としましょう) から自分自身 (150,150) に円弧を描画するように指示するためです。 「ああ、私はすでにそこにいます。アークは必要ありません！」.

私が提供するソリューションの利点は次のとおりです。

  1. 円からパスに直接変換するのは簡単です。
  2. 2 つの円弧線に重なりはありません (マーカーやパターンなどを使用している場合に問題が発生する可能性があります)。2つに分けて描かれていますが、きれいな連続線です。

テキストパスが形状を受け入れることを許可するだけであれば、これは問題になりません。しかし、円のような形状要素には技術的に「開始」点がないため、彼らはその解決策を避けていると思います。

jsfiddle デモ: http://jsfiddle.net/crazytonyi/mNt2g/

アップデート：

参照用のパスを使用していてtextPath、テキストを円弧の外縁にレンダリングする場合は、まったく同じ方法を使用しますが、sweep-flag を 0 から 1 に変更して、円弧の外側を処理するようにします。内側ではなく表面としてパスを作成します (1,0誰かが中心に座って自分の周りに円を描き、1,1誰かが半径距離で中心を歩き回り、その横にチョークをドラッグしていると考えてください)。これは上記のコードですが、変更があります。

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,1 (r * 2),0
    a r,r 0 1,1 -(r * 2),0
    "
/>
于 2012-05-07T05:58:17.833 に答える
38

XAML のアークについても同じです。99.99% の円弧を aZで閉じるだけで、円ができあがります。

于 2011-04-21T00:41:06.557 に答える
23

アンソニーのソリューションを参照して、パスを取得する関数を次に示します。

function circlePath(cx, cy, r){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}
于 2015-01-12T15:21:24.413 に答える
5

Adobe Illustrator は SVG のようなベジエ曲線を使用し、円の場合は 4 つの点を作成します。2つの楕円弧コマンドで円を作成できます...しかし、SVGの円には<circle />:)を使用します

于 2011-04-21T02:42:09.007 に答える
4

ここでそれを行うためにjsfiddleを作成しました：

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}

function describeArc(x, y, radius, startAngle, endAngle){

var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);

var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");

return d;       
}
console.log(describeArc(255,255,220,134,136))

リンク

console.log の入力を変更し、コンソールで結果を取得するだけです。

于 2017-10-04T08:04:28.327 に答える
3

関数として書くと、次のようになります。

function getPath(cx,cy,r){
  return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}
于 2016-11-01T09:00:40.890 に答える
2

2 つの円弧コマンドを使用して完全な円を描くことをお勧めします。

通常、楕円または円要素を使用して完全な円を描画します。

于 2012-09-08T08:34:13.667 に答える
1

もう 1 つの方法は、2 つの 3 次ベジエ曲線を使用することです。これは、svg arc パラメータを認識しないpocketSVGを使用している iOS の人々向けです。

C x1 y1、x2 y2、xy (または c dx1 dy1、dx2 dy2、dx dy)

3 次ベジエ曲線

ここでの座標の最後のセット (x,y) は、線を終了する場所です。残りの 2 つはコントロール ポイントです。(x1,y1) は曲線の始点の制御点であり、(x2,y2) は曲線の終点です。

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />
于 2016-03-01T19:19:18.740 に答える