在JavaScript中从圆弧创建贝塞尔曲线 [英] create a bezier curve from arc in javascript

问题描述

我想从圆弧上的两个端点(x1，y1，x2，y2)和中心点(cx，cy)或半径创建二次贝塞尔曲线.

I want to create a quadratic bezier curve from the two end points on a arc (x1, y1, x2, y2) and either the center point (cx,cy) or radius.

有一次，我以为可以将两个控制点设置为切线的交点，但这似乎不起作用.

At one point, I thought that I could set the two control points to the intersection of the tangents, but that does not seem to work.

尽管确切的答案会很不错，但如果需要，我可以以合理的近似值生活.我的数学技能有限，但会喜欢简单的伪代码.我已经完成了Google搜索，其中一些建议太复杂了，我无法遵循.

While an exact answer would be nice, I can live with a reasonable approximation if required. I have limited math skills but would appreciate simple pseudo code. I have done a google search and some of the suggestions are too complex for me to follow.

问题似乎很简单，但我知道并非如此.

The problem seems simple but I know it is not.

推荐答案

由于圆具有参数功能，因此在弧和贝塞尔曲线之间没有完美的映射:

There is no perfect mapping between arcs and Bezier curves due to the fact that a circle has parametric function:

fx(t) = cos(t)
fy(t) = sin(t)

只能以多项式形式表示为无限序列:

which can only be represented in polynomial form as infinite sequences:

fx(t) = ∑(k=0,inf) x^(2k)   * (-1)^k / (2k)!
fy(t) = ∑(k=0,inf) x^(2k+1) * (-1)^k / (2k+1)!

很显然，任何有限度的贝塞尔曲线都将始终处于关闭"状态，尽管阶数越高，我们将获得的关闭"越少.对于三次曲线，我们可以相当合理地近似四分之一圆弧，尽管不止如此，而且看起来很明显是错误的:对于 http://pomax.github.io/bezierinfo/#circles_cubic ，这部分值得阅读，然后实施其解释(或从github借用"代码，这是公共领域代码)，并尝试使用图形查看当您尝试建模四分之一圆以上时出现的错误情况.

Obviously, any finite degree Bezier curve will always be "off", although the higher the order, the less "off" we'll be. For a cubic curve we can approximate a quarter circle arc quite reasonably, although anything more than that and it'll look pretty obviously wrong: there's a detailed writeup on what a curve looks like given an arc of angle φ over on http://pomax.github.io/bezierinfo/#circles_cubic, and it's worth reading over that section and then implementing its explanation (or "borrowing" the code from github, it's public domain code), as well as playing with the graphic to see exactly how wrong things get once you try to model more than a quarter circle.

这篇关于在JavaScript中从圆弧创建贝塞尔曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！