绘制贝塞尔曲线的截面

发布于 2024-11-13 13:02:15 字数 484 浏览 4 评论 0原文

我正在编写代码以将四分之一椭圆近似为 贝塞尔曲线

现在完成此操作后,我在绘制该曲线的各部分时遇到了麻烦。 我需要一些帮助来选择控制点。

最初,我将控制点距离与曲线起点距离的比率设为0.51。

编辑:

pseudo code
import cairo [...]
ctx.moveto(0,y1)
ctx.curveto(0,y1/2,x1/2,0,x1,0)

这将产生从 (0,y1) 到 (x1,0) 的近似椭圆曲线,椭圆中心位于 (x1,y1)。

请注意,参数扫描角度为 pi/2。 如果假设我希望将其分成更像虚线图案的部分,那么我该怎么做呢?例如,从 t = pi/6t = pi/3?如何选择控制点?

I was writing code to approximate a quarter ellipse to a Bézier curve.

Now having done that, I am encountering trouble drawing sections of this curve.
I need some help choosing the control points.

Initially, I had taken the ratio of distance of control point to distance of start of curve as 0.51.

Edited:

pseudo code
import cairo [...]
ctx.moveto(0,y1)
ctx.curveto(0,y1/2,x1/2,0,x1,0)

This will result in an approximately elliptical curve from (0,y1) to (x1,0) with the ellipse center at (x1,y1).

Notice the parametric angle swept is pi/2.
If suppose I wish to draw it in sections more like a dashed pattern, then how do I do it? For example, from t = pi/6 to t = pi/3? How do I choose the control points?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(3

梦萦几度 2024-11-20 13:02:15

要使用单个立方弧来近似四分之一圆,通常所做的是将中点精确地放在圆上并使用切线的起始和结束方向。

这并不是任何合理指标中形式上的“最佳”近似值,但很容易计算......例如四分之一圆的幻数是0.5522847498。有关详细信息,请参阅此页面...

要绘制椭圆弧,您可以只需拉伸圆弧的控制点(这又不是数学上“最佳近似”的东西)。

一般角度情况

可以使用以下方法计算此定义下一般角度的最佳弧(即贝塞尔曲线的中点位于弧的中间)...

1. 对称立方体的最大高度贝塞尔曲线是 3/4 H,其中 H 是控制点的高度

考虑到如何使用 De Casteljau 算法或 我关于贝塞尔曲线显式计算的回答;另请参见下图:

对称贝塞尔立方弧中点的高度

y_mid = ((0+H) /2 + (H+H)/2) / 2 = 3/4 H


2. 圆绳中心的角度是底边角度的两倍

请参阅任何基本几何文本以获取证明。


Finally naming L the distance between the extremes, S the (unknown) control arm of the symmetric Bezier, 2*alpha the angle of circle to approximate we can compute that

3. S = L (2/3) (1-cos(alpha)) / (sin(alpha)**2)

这是根据上述方程和一些计算得出的;请参见下图的说明。

控制点距离计算

To approximate a circle quarter using a single cubic arc what is normally done is making the middle point being exactly on the circle and using tangent starting and ending directions.

This is not formally the "best" approximation in any reasonable metric but is very easy to compute... for example the magic number for a circle quarter is 0.5522847498. See this page for some detail...

To draw an ellipse arc instead you can just stretch the control points of the circular arc (once again not something that would qualify mathematically as "best approximation").

The generic angle case

The best arc for a generic angle under this definition (i.e. having the middle point of the bezier being on the middle of the arc) can be computed using the following method...

1. The maximum height of a symmetrical cubic bezier arc is 3/4 H where H is the height of the control point

This should be clear considering how the middle point of a bezier cubic is computed with the De Casteljau's algorithm or my answer about explicit computation of a bezier curve; see also the following picture:

Height of midpoint of a symmetric Bezier cubic arc

y_mid = ((0+H)/2 + (H+H)/2) / 2 = 3/4 H


2. The angle at the center for a circle cord is twice the angle at the base

See any elementary geometry text for a proof.


Finally naming L the distance between the extremes, S the (unknown) control arm of the symmetric Bezier, 2*alpha the angle of circle to approximate we can compute that

3. S = L (2/3) (1-cos(alpha)) / (sin(alpha)**2)

This follows from the above equations and from some computation; see the following picture for a description.

Control point distance computation

柠檬心 2024-11-20 13:02:15

我认为你应该使用整条曲线的控制点。一种方法是确定贝塞尔曲线的参数方程版本 - 请参阅 如何找到定义贝塞尔曲线的数学函数

接下来,找出参数方程中 0 <= t <= 1 的哪一部分是由角度 p1/6 <= ש <= pi/3< 定义的部分/code> 表示然后通过它运行该范围的值。

有一些方法可以沿着某些参数定义的曲线计算每个点,这些方法适用于此处,并且应该使虚线图案的绘制变得相当直接和快速。

I think you should use the control points of the whole curve. One way to do this would be to determine a parametric equation version of bezier -- see How to find the mathematical function defining a bezier curve.

Next, figure out what part of 0 <= t <= 1 in the parametric equation the section defined by the angle p1/6 <= ө <= pi/3 represents and then run that range of values through it.

There are ways of computing each point along some kinds of parametrically-defined curves which is applicable here and ought to make the drawing of a dashed pattern fairly straight forward and fast.

梦回梦里 2024-11-20 13:02:15

此链接对贝塞尔曲线有很好的解释。它介绍了基本的数学原理,并提供了示例代码。

由于贝塞尔曲线通常使用参数方程来实现,因此您只需在每个采样点之间绘制线段即可。如果您以这种方式绘制曲线,您的步长将影响曲线的平滑度。

This Link has a good explanation of Bezier Curves. It goes over the basic math principles, and also provides sample code.

Because Bezier Curves are typically implemented using a parametric equation, you can just draw line segments between each sample point. Your step size will affect the smoothness of your curve if you draw them in this way.

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