开发者

Find the height of a bezier curve in canvas

I am trying to create a simple rounded top to a rectangle. I was able to use the bezierCurveTo method to create the cap, but I had to play around with the control point's y values to get the correct height of the curve. If I have the width and I know the height that I want the curve to pass through is their a formula to find the control point's y values? the function I have right now is

c.moveTo(130,55);
c.bezierCurveTo(130,-18,0,-18,0,55);

-18 is what I had to set the y values to to get the curve to approximately 开发者_如何学Gopass through y = 0.


Yes, there is a simple answer for this constrained version of Bezier curves. Taking the definition of a cubic Bezier curve from wikipedia here, and solving for the mid point along the curve (t=0.5), the minimum value of y will be:

1/4 Ymax + 3/4 Ymin

(Ymax being the y value of the start and end points and Ymin being the y value of the two control points). Or, for the midpoint to be 0,

Ymin = -1/3 Ymax.

So, since you have Ymax = 55, Ymin has to be -1/3*55 = -18.333.. -- which is why 18 worked in your example.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜