'use strict';
module.exports = function (angleStart, angleEnd, center, radius) {
// assuming angleStart and angleEnd are in degrees
const angleStartRadians = angleStart * Math.PI / 180;
const angleEndRadians = angleEnd * Math.PI / 180;
// Finding the coordinates of the control points in a simplified case where the center of the circle is at [0,0]
const relControlPoints = getRelativeControlPoints(angleStartRadians, angleEndRadians, radius);
return {
pointStart: getPointAtAngle(angleStartRadians, center, radius),
pointEnd: getPointAtAngle(angleEndRadians, center, radius),
// To get the absolute control point coordinates we just translate by the center coordinates
controlPoint1: {
x: center.x + relControlPoints[0].x,
y: center.y + relControlPoints[0].y
},
controlPoint2: {
x: center.x + relControlPoints[1].x,
y: center.y + relControlPoints[1].y
}
};
};
function getRelativeControlPoints(angleStart, angleEnd, radius) {
// factor is the commonly reffered parameter K in the articles about arc to cubic bezier approximation
const factor = getApproximationFactor(angleStart, angleEnd);
// Distance from [0, 0] to each of the control points. Basically this is the hypotenuse of the triangle [0,0], a control point and the projection of the point on Ox
const distToCtrPoint = Math.sqrt(radius * radius * (1 + factor * factor));
// Angle between the hypotenuse and Ox for control point 1.
const angle1 = angleStart + Math.atan(factor);
// Angle between the hypotenuse and Ox for control point 2.
const angle2 = angleEnd - Math.atan(factor);
return [
{
x: Math.cos(angle1) * distToCtrPoint,
y: Math.sin(angle1) * distToCtrPoint
},
{
x: Math.cos(angle2) * distToCtrPoint,
y: Math.sin(angle2) * distToCtrPoint
}
];
}
function getPointAtAngle(angle, center, radius) {
return {
x: center.x + radius * Math.cos(angle),
y: center.y + radius * Math.sin(angle)
};
}
// Calculating K as done in https://pomax.github.io/bezierinfo/#circles_cubic
function getApproximationFactor(angleStart, angleEnd) {
let arc = angleEnd - angleStart;
// Always choose the smaller arc
if (Math.abs(arc) > Math.PI) {
arc -= Math.PI * 2;
arc %= Math.PI * 2;
}
return (4 / 3) * Math.tan(arc / 4);
}
8 回答
这不是一个常见的问题，并且有许多详尽的解释 . 见 here 和 here ;我非常喜欢＃2并且之前使用过它 .
这是一个8年的问题，但是我最近一直在努力解决这个问题，所以我想我会分享我想出的东西 . 我花了很多时间尝试使用来自this text的解决方案（9）并且在我做了一些谷歌搜索之前无法获得任何合理的数字并且了解到，显然，方程中存在一些拼写错误 . 根据this blog post中列出的修正，给定弧的起点和终点（分别为[x1，y1]和[x4，y4]）和圆的中心（[xc，yc]），可以推导出三次贝塞尔曲线（[x2，y2]和[x3，y3]）的控制点如下：
希望这能帮助除我之外的其他人！
在Wolfram MathWorld上有Mathematica代码：Bézier Curve Approximation of an Arc，这应该可以帮到你 .
也可以看看：
Drawing a circle with Bézier Curves
Approximation of Circle Using Cubic Bezier Curve
Raphael 2.1.0支持Arc-> Cubic（path2curve-function），修复了S和T路径规范化中的错误后，它现在似乎正常工作 . 我更新了 the Random Path Generator 以便它只生成弧，因此可以轻松测试所有可能的路径组合：
http://jsbin.com/oqojan/53/
测试，如果某条路径失败，我很乐意收到报告 .
编辑：刚才意识到这是3岁的线程......
"Approximation of a " Cubic Bezier Curve by Circular Arcs中提供了一个很好的解释 . “
长话短说：使用Bezier曲线可以实现1.96×10 ^ -4的最小误差，这对于大多数应用来说都是相当不错的 .
对于正象限弧，请使用以下几点：
其中K是所谓的“幻数”，这是一个非理性数 . 它可以近似如下：
我正在回答这个古老的问题（这应该属于数学，因此编写公式会很糟糕）并进行一些演示 .
假设P0和P3是弧的初始和最终点，P1和P2是Bézier曲线的控制点，x是角度除以2的度量 . 假设x小于pi / 2 .
设PM段P0P3和PH的中点为弧的中点 . 为了逼近弧线，我们希望Bézier曲线在P0中开始，通过PH，在P3中结束，并且与P0和P3中的弧相切 .
（点击“运行代码片段”来显示图 . 诅咒到imgur仍然不支持SVG . ）
设PE为P0和P3中与圆弧相切的线的交点 . 为了使曲线与弧相切，P1必须位于P0PE段上，P2必须位于P3PE上 . 设k为P0P1 / P0PE的比值（也等于P3P2 / P3PE）：
我们还有以下（做一些比例）：
为了简化我们的计算，我认为所有的矢量点都是基于中心的，但最终它并不重要 .
通用的4点Bézier曲线由公式给出
我们必须有C（1/2）= PH，所以
所以，这是我们的等式（乘以8）来找到k：
让我们摆脱向量（P0 P3），我们得到：
现在您知道了控制点的放置位置 . 万岁！
如果你有x = pi / 4，你将得到k = 0.552 ......你可能已经看到了这个值 .
处理椭圆弧时，您所要做的就是相应地缩放点的坐标 .
如果你必须处理更大的角度，我建议将它们分成更多的曲线 . 这实际上是一些软件在绘制弧时所做的事情，因为计算Bézier曲线有时比使用正弦和余弦更快 .
我用general solution for any elliptical arc作为立方贝塞尔曲线取得了成功 . 它甚至包括开始和结束角度配方，所以不需要额外的旋转（这对于非圆形椭圆来说是个问题） .
我最近偶然发现了这个问题 . 我以模块的形式从这里提到的文章中编译了一个解决方案 .
它接受起始角度，终止角度，中心和半径作为输入 .
它非常接近小弧（<= PI / 2） . 如果你需要近似从PI / 2到2 * PI的某些弧，你可以随时将它们分成<PI / 2部分，计算相应的曲线并在之后加入它们 .
这个解决方案是开始和结束角度顺序不可知 - 它总是选择次要弧 .
因此，您可以获得在绝对坐标中定义三次贝塞尔曲线所需的全部四个点 .
我认为这在代码和评论中得到了最好的解释：