查找画布中贝塞尔曲线的高度

发布于 2024-10-06 17:10:58 字数 258 浏览 2 评论 0原文

我正在尝试创建一个简单的圆顶到矩形。我能够使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

暖心男生 2024-10-13 17:10:58

是的,对于这个受约束的贝塞尔曲线版本有一个简单的答案。从维基百科此处获取三次贝塞尔曲线的定义,并求解中间值沿曲线(t=0.5)的点,y的最小值将为:

1/4 Ymax + 3/4 Ymin

(Ymax为起点和终点的y值,Ymin为两个控制点的y值)。
或者,对于中点为 0,

Ymin = -1/3 Ymax.

因此,由于 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:

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文