查找画布中贝塞尔曲线的高度
我正在尝试创建一个简单的圆顶到矩形。我能够使用 bezierCurveTo
方法来创建上限,但我必须使用控制点的 y 值来获取曲线的正确高度。如果我有宽度并且我知道我希望曲线通过的高度是他们找到控制点的 y 值的公式吗?我现在拥有的函数是
c.moveTo(130,55);
c.bezierCurveTo(130,-18,0,-18,0,55);
-18,我必须将 y 值设置为使曲线大致通过 y = 0。
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 pass through y = 0.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
是的,对于这个受约束的贝塞尔曲线版本有一个简单的答案。从维基百科此处获取三次贝塞尔曲线的定义,并求解中间值沿曲线(t=0.5)的点,y的最小值将为:
(Ymax为起点和终点的y值,Ymin为两个控制点的y值)。
或者,对于中点为 0,
因此,由于 Ymax = 55,Ymin 必须为 -1/3*55 = -18.333.. - 这就是 18 在您的示例中起作用的原因。
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:
(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,
So, since you have Ymax = 55, Ymin has to be -1/3*55 = -18.333.. -- which is why 18 worked in your example.