如何在SVG中使用贝塞尔曲线来近似半余弦曲线? [英] How to approximate a half-cosine curve with bezier paths in SVG?

问题描述

假设我想使用贝塞尔曲线在 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中使用贝塞尔曲线来近似半余弦曲线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！