如何用 Bézier 曲线创建圆？

Question

我们有一个起点 (x, y) 和一个圆半径。还有一个引擎可以从贝塞尔曲线点创建路径。

如何使用贝塞尔曲线创建圆？

Answer 1

如前所述：没有使用贝塞尔曲线精确表示圆的方法。

要完成其他答案：对于具有 n 段的贝塞尔曲线，到控制点的最佳距离（从曲线中间位于圆本身的意义上来说）是(4/3)*tan(pi/(2n))。

因此，对于 4 个点，它是 (4/3)*tan(pi/8) = 4*(sqrt(2)-1)/3 = 0.552284749831。

Answer 2

comp.graphics.faq

摘录中有介绍：

主题 4.04：如何将贝塞尔曲线拟合到圆上？

有趣的是，贝塞尔曲线可以逼近一个圆，但是
不完全适合一个圆。
常见的近似是使用四个贝塞尔曲线来模拟一个圆，每个贝塞尔曲线
控制点距终点的距离为 d=r*4*(sqrt(2)-1)/3
（其中 r 是圆半径），并且在与
在端点处画圆。这将确保
贝塞尔曲线在圆上，并且一阶导数是连续的。
该近似值的径向误差约为 0.0273%
圆的半径。

Michael Goldapp，“用三次方近似圆弧
多项式”计算机辅助几何设计 (#8 1991 pp.227-238)

Tor Dokken 和 Morten Daehlen，“圆的良好近似
曲率连续贝塞尔曲线”计算机辅助几何
设计（#7 1990，第 33-41 页）。 http://www.sciencedirect.com/science/article/pii/016783969090019N （非免费文章）

另请参阅非付费文章 http://spencermortensen.com/articles/bezier -circle/

浏览器和 Canvas 元素。

请注意，某些浏览器使用贝塞尔曲线在画布上绘制弧线，Chrome 使用（目前）4 扇区方法，而 Safari 使用 8 扇区方法，差异仅在高分辨率下才明显，因为 0.0273%，而且仅当平行且异相绘制圆弧时才真正可见，您会注意到圆弧从真正的圆振荡。当曲线围绕其径向中心进行动画处理时，效果也更加明显，600 像素半径通常是产生影响的大小。

某些绘图API没有真正的弧线渲染，因此它们也使用贝塞尔曲线，例如Flash平台没有弧线绘图API，因此任何提供弧线的框架通常都使用相同的贝塞尔曲线方法。

请注意，浏览器中的 SVG 引擎可能使用不同的绘图方法。

其他平台

无论您尝试使用什么平台，都值得检查一下圆弧绘制是如何完成的，以便您可以预测此类视觉错误并进行调整。

Answer 3

问题的答案已经很好了，所以没有什么可补充的。受此启发，我开始进行一项实验，以视觉方式确认解决方案，从四条贝塞尔曲线开始，将曲线数量减少到一条。令人惊讶的是，我发现使用三个贝塞尔曲线，圆对我来说看起来足够好，但构造有点棘手。实际上，我使用 Inkscape 将黑色 1 像素宽的贝塞尔曲线近似放置在红色 3 像素宽的圆圈上（由 Inkscape 生成）。为了清楚起见，我添加了显示贝塞尔曲线边界框的蓝色线条和曲面。

为了了解您自己，我将展示我的结果：

1 曲线图（看起来像挤在角落里的水滴，只是为了完整性）：

2 条曲线图：

3 曲线图：

4 条曲线图：

（我想将 SVG 或 PDF 放在这里，但不支持）

Answer 4

致那些只是寻找代码的人：
4 件解决方案

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 编写，但可以轻松翻译为任何其他语言

注意

如果需要使用 SVG 路径绘制圆，请不要使用贝塞尔曲线，除非需要这样做。在路径中，您可以使用 Arc 创建 2 个半圆。

使用 SVG 的圆弧路径绘制圆形

Answer 5

已经有很多答案，但我发现了一篇在线小文章，其中有一个非常好的圆的三次贝塞尔近似值。就单位圆而言，c = 0.55191502449，其中 c 是沿切线从轴截点到控制点的距离。

作为单位圆的单象限，以两个中间坐标为控制点。 (0,1),(c,1),(1,c),(1,0)

径向误差仅为 0.019608%，因此我只需将其添加到此答案列表中即可。

这篇文章可以在这里找到用三次贝塞尔曲线逼近圆

Answer 6

这是不可能的。贝塞尔曲线是三次方（至少......最常用的是）。圆不能用三次方精确表示，因为圆的方程中包含平方根。因此，你必须进行近似。

为此，您必须将圆划分为 n 个正切（例如象限、八分圆）。对于每个 n-tant，您使用第一个点和最后一个点作为贝塞尔曲线的第一个点和最后一个点。贝塞尔多边形需要两个附加点。为了快速起见，我会为 n 切线的每个极值点取圆的切线，并选择这两个点作为两条切线的交点（这样基本上你的贝塞尔多边形就是一个三角形）。增加 n-tants 的数量以适合您的精度。

Answer 7

其他答案已经涵盖了一个事实：真正的圆是不可能的。此 SVG 文件是使用二次贝塞尔曲线的近似值，是您可以获得的最接近的文件：http ://en.wikipedia.org/wiki/File:Circle_and_quadratic_bezier.svg

这是三次贝塞尔曲线：http://en.wikipedia.org/wiki/File:Circle_and_cubic_bezier.svg

Answer 8

如果您需要 @NoOorZ24 答案的纯 JS 版本。这将返回一个 SVG 路径：

function drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY) {
  return `
  M ${centerX - sizeX} ${centerY}
  C ${centerX - sizeX} ${centerY - 0.552 * sizeY},
    ${centerX - 0.552 * sizeX} ${centerY - sizeY},
    ${centerX} ${centerY - sizeY}
  `;
}

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

Answer 9

很抱歉让这个死而复生，但我发现这篇文章与

基本上，您可以使用一个非常简单的公式创建一个近圆，该公式允许您使用超过 4 条任意数量的贝塞尔曲线：距离 = radius * stepAngle / 3

其中 距离 是贝塞尔曲线控制点与圆弧最近端点之间的距离，半径是圆的半径，步长角度是圆弧两端之间的角度，如下所示用 2π /（曲线数）表示。

因此，要一击命中：距离 = 半径 * 2π /（曲线数）/ 3

Answer 10

这是一个很大的近似值，根据分辨率和精度，看起来合理或糟糕，但我使用 sqrt(2)/2 x radius 作为我的控制点。我读了一篇相当长的文章，介绍了这个数字是如何得出的，它值得一读，但上面的公式既快速又肮脏。