问题描述
假设我想使用贝塞尔曲线在 SVG 中近似一条半余弦曲线.半余弦应如下所示:
Suppose I want to approximate a half-cosine curve in SVG using bezier paths. The half cosine should look like this:
并从 [x0,y0](左侧控制点)运行到 [x1,y1](右侧控制点).
and runs from [x0,y0] (the left-hand control point) to [x1,y1] (the right-hand one).
我怎样才能找到一个可接受的系数集来很好地逼近这个函数?
How can I find an acceptable set of coefficients for a good approximation of this function?
额外问题:例如,如何将公式推广到余弦的四分之一?
Bonus question: how is it possible to generalize the formula for, for example, a quarter of cosine?
请注意,我不想用一系列相互连接的线段来近似余弦,我想使用贝塞尔曲线计算一个很好的近似值.
Please note that I don't want to approximate the cosine with a series of interconnected segments, I'd like to calculate a good approximation using a Bezier curve.
我在评论中尝试了解决方案,但是,对于这些系数,曲线似乎在第二个点之后结束.
I tried the solution in comments, but, with those coefficients, the curve seems to end after the second point.
推荐答案
经过几次尝试/错误,我发现正确的比例是 K=0.37.
After few tries/errors, I found that the correct ratio is K=0.37.
"M" + x1 + "," + y1
+ "C" + (x1 + K * (x2 - x1)) + "," + y1 + ","
+ (x2 - K * (x2 - x1)) + "," + y2 + ","
+ x2 + "," + y2
查看此示例以了解贝塞尔如何与余弦匹配:http://jsfiddle.net/6165Lxu6/
Look at this samples to see how Bezier matches with cosine: http://jsfiddle.net/6165Lxu6/
绿线是实余弦,黑线是贝塞尔曲线.向下滚动以查看 5 个示例.每次刷新时点数都是随机的.
The green line is the real cosine, the black one is the Bezier. Scroll down to see 5 samples. Points are random at each refresh.
为了概括,我建议使用裁剪.
For the generalization, I suggest to use clipping.
这篇关于如何在SVG中使用贝塞尔曲线来近似半余弦曲线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!