ベジェ曲線で円を作成する方法は？

始点（x、y）と円の半径があります。ベジエ曲線ポイントからパスを作成できるエンジンも存在します。

ベジェ曲線を使用して円を作成するにはどうすればよいですか？

すでに述べたように、ベジェ曲線を使用した円の正確な表現はありません。

他の回答を完了するには：nセグメントを含むベジェ曲線の場合、曲線の中央が円自体にあるという意味で、制御点までの最適な距離は(4/3)*tan(pi/(2n))です。

つまり、4ポイントの場合です(4/3)*tan(pi/8) = 4*(sqrt(2)-1)/3 = 0.552284749831。

comp.graphics.faqでカバー

抜粋：

主題4.04：ベジェ曲線を円に合わせるにはどうすればよいですか？

興味深いことに、ベジェ曲線は円に近似できますが、円に完全にフィットするわけではありません。一般的な近似は、4つのベジェを使用して円をモデル化することです。それぞれの制御点には、終点（rは円の半径）からの距離d = r * 4 *（sqrt（2）-1）/ 3があります。端点で円に接する方向。これにより、ベジエの中点が円上にあり、1次導関数が連続していることが保証されます。
この近似の半径誤差は、円の半径の約0.0273％です。

Michael Goldapp、「3次多項式による円弧の近似」コンピュータ支援の幾何学的設計（＃8 1991 pp.227-238）

Tor DokkenおよびMorten Daehlen、「曲率連続ベジェ曲線による円の適切な近似」コンピュータ支援の幾何学的設計（＃7 1990 pp。33-41）。http://www.sciencedirect.com/science/article/pii/016783969090019N（非無料の記事）

http://spencermortensen.com/articles/bezier-circle/にあるペイウォールのない記事もご覧ください。

ブラウザとCanvas要素。

一部のブラウザーはキャンバス描画アークにベジェ曲線を使用し、Chromeは（現時点では）4セクターアプローチを使用しており、Safariは8セクターアプローチを使用しています。0.0273％であるため、違いは高解像度でのみ顕著です。円弧が平行に描かれ、位相がずれている場合にのみ実際に表示され、円弧が真円から振動していることに気付くでしょう。曲線がその半径方向の中心を中心にアニメーション化している場合にも、効果はより顕著になります。通常、半径600pxは、違いが生じるサイズです。

特定の描画APIには真のアークレンダリングがないため、ベジェカーブも使用します。たとえば、Flashプラットフォームにはアーク描画APIがないため、アークを提供するフレームワークは通常、同じベジェカーブアプローチを使用しています。

ブラウザ内のSVGエンジンは別の描画方法を使用する場合があることに注意してください。

その他のプラットフォーム

使用しようとしているプラ​​ットフォームが何であれ、円弧の描画がどのように行われるかを確認することは価値があるので、このような視覚的なエラーを予測して適応することができます。

質問に対する回答は非常に良いので、追加することはほとんどありません。それに触発されて、ソリューションを視覚的に確認するための実験を開始しました。4つのベジェ曲線から始めて、曲線の数を1つに減らしました。驚くべきことに、3つのベジェ曲線を使用すると、円は十分によく見えましたが、構造は少しトリッキーです。実際、私はInkscapeを使用して、黒い1ピクセル幅のベジエ近似を（Inkscapeによって生成された）赤い3ピクセル幅の円の上に配置しました。明確にするために、ベジエ曲線の境界ボックスを示す青い線と表面を追加しました。

自分自身を確認するために、私の結果を提示します。

1カーブグラフ（完全を期すために、角を絞ったドロップのように見えます）：

2曲線グラフ：

3曲線グラフ：

4曲線グラフ：

（ここにSVGまたはPDFを配置したかったのですが、サポートされていません）

すでに多くの回答がありますが、非常に優れた円の3次ベジェ近似を使用した小さなオンライン記事を見つけました。単位円に関してc = 0.55191502449ここで、cは接線に沿った軸切片から制御点までの距離です。

中央の2つの座標が制御点である単位円の単一の象限として。 (0,1),(c,1),(1,c),(1,0)

ラジアルエラーは0.019608％なので、この回答のリストに追加する必要がありました。

記事はここにあります。3次ベジェ曲線で円を近似します

それは不可能。ベジエは立方体です（少なくとも...最も一般的に使用されます）。円は方程式に平方根を含むので、円は3次関数で正確に表すことができません。結果として、概算する必要があります。

これを行うには、円をn個の定数（たとえば、象限、八分円）に分割する必要があります。各n定数について、最初と最後の点をベジェ曲線の最初と最後として使用します。ベジェポリゴンには、さらに2つのポイントが必要です。速くするために、私はnタンスの各極点の円の接線を取り、2つの接線の交点として2つの点を選択します（そのため、基本的にベジェポリゴンは三角形になります）。精度に合わせてn個の定数の数を増やします。

他の答えは、真の輪は不可能であるという事実をカバーしています。このSVGファイルは、二次ベジェ曲線を使用した近似であり、取得できる最も近いものです。http：//en.wikipedia.org/wiki/File：Circle_and_quadratic_bezier.svg

キュービックベジエ曲線を使用したものを次に示します。http：//en.wikipedia.org/wiki/File：Circle_and_cubic_bezier.svg

コードを探しているだけの人へ：

https://jsfiddle.net/nooorz24/2u9forep/12/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY) {
    ctx.beginPath();
    ctx.moveTo(
    	centerX - (sizeX),
        centerY - (0)
    );
    ctx.bezierCurveTo(
    	centerX - (sizeX),
        centerY - (0.552 * sizeY),
        centerX - (0.552 * sizeX),
        centerY - (sizeY),
        centerX - (0),
        centerY - (sizeY)
    );
	ctx.stroke();
}

function drawBezierOval(centerX, centerY, sizeX, sizeY) {
    drawBezierOvalQuarter(centerX, centerY, -sizeX, sizeY);
    drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY);
    drawBezierOvalQuarter(centerX, centerY, sizeX, -sizeY);
    drawBezierOvalQuarter(centerX, centerY, -sizeX, -sizeY);
}

function drawBezierCircle(centerX, centerY, size) {
    drawBezierOval(centerX, centerY, size, size)
}

drawBezierCircle(200, 200, 64)

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

これにより、4つのベジェ曲線から構成される円を描くことができます。JSで書かれていますが、他の言語に簡単に翻訳できます

これは近似に関するものなので、新しい質問を開くべきかどうかはわかりませんが、ベジエの制御点を取得するための一般的な公式に興味があり、この質問に当てはまると思います。私がウェブで見つけたすべての解決策は、3次曲線に対してのみであるか、または支払われているか、または理解さえしていません（私は数学があまり得意ではありません）。だから私は自分でこれを解決しようとすることを決めました。私は与えられた角度に依存する円の中心からの制御点の距離を研究していました、そして今のところ私はそれを発見しました：

ここで、N単一の曲線の制御点の数であり、α円弧角です。

二次曲線の場合は、次のように簡略化できますl ≈ r + r * PI*0.1 * pow(α/90, 2) 。これPI*0.1は推測です。完全な値を計算していませんが、かなり近いです。これは、3次曲線の半径誤差が約0.2％になる1〜2個の制御点を持つ曲線に適度に機能します。次数の高い曲線では、精度の低下が顕著です。3つの制御点を使用すると、曲線は2次曲線のように見えるので、明らかに何かを逃していますが、それを理解することはできません。この方法は、通常、今のところ私のニーズに合います。こちらがデモです。

これを死から復活させて申し訳ありませんが、私はこの投稿がこのページと一緒に拡張可能な式を考案するのに非常に役立つことを発見しました。

基本的に、信じられないほど単純な数式を使用してニアサークルを作成し、4を超える任意の数のベジェ曲線を使用できます。 Distance = radius * stepAngle / 3

ここで、Distanceベジェ制御点と円弧の最も近い端部との間の距離であり、半径はradius円の、及びstepAngle2π/（曲線の数）によって表される円弧の2つの端部との間の角度です。

だから、一発でそれを打つ： Distance = radius * 2π / (the number of curves) / 3

これは、解像度と精度に応じて合理的または恐ろしく見える重い近似ですが、私は制御点としてsqrt（2）/ 2 x半径を使用しています。私はその数がどのように導出されるかというかなり長いテキストを読みましたが、読む価値はありますが、上記の式はすばやくて汚いです。