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

问题描述

假设我想用贝塞尔路径逼近SVG中的半余弦曲线。半个余弦看起来应该是这样的：

，并从[x0，y0]（左侧控制点）运行到[x1，y1]（右侧）。

如何找到一个可接受的系数集，以便很好地近似此函数？

奖金问题 strong>：如何将公式推广为例如余弦的四分之一？

请注意，我不我想用一系列相互连接的线段来近似余弦，我想用Bezier曲线来计算一个很好的近似值。

我在评论中尝试了解决方案，但是，用这些系数，曲线似乎在第二点之后结束。

解决方案

经过几次尝试/错误，我发现正确的比例是 K = 0.37 / p>

 M+ x1 +，+ y1 
 +C+（x1 + K *（x2 （x2-x1））+，+ y1 +，
 +（x2 -K * + y2 
  

查看这些示例以了解Bezier如何与余弦匹配： http://jsfiddle.net/6165Lxu6/

绿线是真实的余弦，黑色是Bezier。向下滚动以查看5个样本。每次刷新时点数都是随机的。

为了推广，我建议使用剪切。

Suppose I want to approximate a half-cosine curve in SVG using bezier paths. The half cosine should look like this:

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.

解决方案

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

Look at this samples to see how Bezier matches with cosine: http://jsfiddle.net/6165Lxu6/

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屋！