Bezier curve control with control handle - history, principle, implementation

© 2013-2023 Conmajia
Updated on 9th March, 2023
Initiated on 22nd February, 2015

Abstract This article introduces the history and basic principles of Bezier curves, and takes .NET Frameworks GDI+ as an example to simply implement a curve control with control handles and extensible styles.

1 Introduction

Curves with control handles are often used in drawing software to precisely adjust continuously changing values. Bezier curves are derived from a family of curve parameter equations widely used in engineering CAD and computer graphics. Pierre Étienne Bézier (Pierre Étienne Bézier, 1910-1999) proposed in 1962, and developed the UNISURF modeling system based on it (1968). For details about Bessel functions, please refer to Bessel My book "The Mathematical Foundations of the UNISURF CAD System" (Butterworths, 1986, p. 56).

1.1 Bessel function

Bessel functions are a family of the form

$$x^2{y}^{\prime \prime }+x{y}^{\prime }+\left(x^2-n^2\right)y=0$$

function, where $n$ is the order. The solution of this family of functions is

$$y(x)=A{J}_n(x)+B{Y}_n(x),$$

Among them $J_n\left(x\right)$ is calledBessel function of the first kind,$Y_n\left(x\right)$ is calleda Bessel function of the second kind.

The Bessel function can be regarded as a family of decaying sine functions, as shown in Figure 1, where $J_0(0)=1$，$Y_n\left(0\right)=\infty$.

Figure 1. Graphs of Bessel functions of the first and second kind

Using the Frobenius method to solve, we can get,

$$\begin{gathered} J_n(x)=\sum _{k=0}^{\infty }\frac{(-1{)}^k}{k!(n+k)!}{\left(\frac{x}{2}\right)}^{n+2k\_} \\ \begin{array}{rl}{Y}_n(x)=& \frac{2}{Pi}{J}_n\left(x\right)\left[\ln \frac{x}{2}+c\right]-\frac{1}{Pi}\sum _{k=0}^{n-1}\frac{(n-k-1)!}{k!}{\left(\frac{x}{2}\right)}^{2k-n}\\ & -\frac{1}{Pi}\sum _{k=0}^{\infty }(-1{)}^k\left[\Phi \left(k\right)+F(n+k)\right]\frac{1}{k!(n+k)!}{\left(\frac{x}{2}\right)}^{2k+n},\end{array} \end{gathered}$$

where $c\stackrel{.}{=}0.577216$，$\Phi \left(p\right)=1+\frac{1}{2}+\frac{1}{3}+\cdots +\frac{1}{p}$，$p>0$，$\Phi \left(0\right)=0$.

So it can be regarded as $x\to$The asymptote equation of the Bessel function at$\infty \; is\; approximated\; as$

$$\begin{array}{rl}{J}_n(x)& \sim \sqrt{\frac{2}{x\_}}\cos \left(x-\frac{n\pi }{2}-\frac{}{4}\right)\\ Y_n(x)& \sim \sqrt{\frac{2}{x\_}}\sin \left(x-\frac{n\pi }{2}-\frac{}{4}\right).\end{array}$$

In addition, the Hankel function (Hankel), which is commonly used in engineering, is also called the Bessel function of the third kind .

$$\begin{array}{rl}{H}_n^{(1)}\left(x\right)& \equiv J_n\left(x\right)+j{Y}_n\left(x\right)\\ H_n^{(2)}\left(x\right)& \equiv J_n\left(x\right)-j{Y}_n(x),\end{array}$$

where superscript ${}^{(1)}$、${}^{\left(2\right)}$ for the first and second types of Bessel functions respectively. When$x\to \infty$ ,

$$\begin{array}{rl}{H}_n^{(1)}(x)& \sim \sqrt{\frac{2}{x\_}}{e}^{+j\left(x-\frac{n\pi }{2}-\frac{}{4}\right)}\\ H_n^{(2)}(x)& \sim \sqrt{\frac{2}{x\_}}{e}^{-j\left(x-\frac{n\pi }{2}-\frac{}{4}\right)}.\end{array}$$

Bessel functions of the third kind are often used to deal with engineering or graphics problems with multiple coordinate systems.

1.2 Bezier curve

The mathematical basis of Bezier curves actually comes from the Bernstein polynomials published in 1912, a family named by the former Soviet mathematician Sergei Natanovich Bernstein (Серге́й Ната́нович Бернште́йн, 1880-1968) Basis polynomials and their linear combinations. The earliest numerical method for computing Bernstein polynomials was proposed by French Citroen engineer Paul de Casteljau (Paul de Casteljau, 1930-2022) in 1959. Because this method was adopted by Citroen Registered as a patent, its main content was not disclosed until the 1980s, so now it looks like $B(t)={\sum }_{i=0}^n{b}_i{b}_{i,n}The\; Bernstein\; form\; curve\; of\; (t)$ is named after the first public Bezier, calledBezier curve. Where$b_i$for $i$ control points,

$$b_{i,n}(t)=\left(\genfrac{}{}{0ex}{}{n}{i}\right)(1-t{)}^{n-i}{t}^i,$$

is the Bernstein basis polynomial.

1.2.1 De Castrio's Algorithm

De Castrio's algorithm actually decomposes a single Bernstein function into two Bezier curves, $t_0$The curve at can be obtained by the following recurrence relation,

$$\begin{array}{rl}{b}_i^{(0)}& \equiv b_i,i=0,1,\cdots ,n\\ b_i^{(j)}& \equiv b_i^{(j-1)}(1-t_0)+b_{i+1}^{(j-1)}{t}_0,\end{array}$$

Among them, for $b_i^{(j)}$，有 $i=0,1,\cdots ,n-j$，$j=1,2,\cdots ,n$ . At this time$t_0$The Bezier curve at $B(t_0)=b_0^{(n)}$, and can be decomposed into

$$\begin{array}{rl}& b_0^{(0)},b_0^{(1)},b_0^{(2)},\cdots ,b_0^{(n)}\\ & b_0^{\left(n\right)},b_1^{(n-1)},b_2^{(n-2)},\cdots ,b_n^{\left(0\right)}.\end{array}$$

The advantage of de castrio's algorithm is that it has the characteristics of numerical stability, and the disadvantage is that it is less efficient than direct calculation. The following is a simple implementation of de castrio's algorithm in Python language, for readers' reference ¹ .

def de_casteljau(t, coefs):
    beta = [c for c in coefs] # 此列表中的数据将于后续计算中覆盖
    n = len(beta)
    for j in range(1, n):
        for k in range(n - j):
            beta[k] = beta[k] * (1 - t) + beta[k + 1] * t
    return beta[0]

1.2.2 Bezier curve ²

As mentioned earlier, $The\; general\; formula\; of\; n-$ order Bezier curve is

$$B(t)=\sum _{i=0}^n{b}_i{b}_{i,n}(t),$$

where $t\in [0,1]$ . Obviously, when$n=1$ , a Bezier curve can be obtained

$$\begin{array}{rl}B\left(t\right)& =b_0+(b_1-b_0)t\\ & =(1-t)b_0+t{\beta }_1,\end{array}$$

Its graph is endpoint from $b_0$Motion to $b_1$The straight line, as shown in Figure 2, is also called linear Bezier curve. Note that $b_i$Use $P_i$means, the same below.

Figure 2. A Bezier curve

$n=2$ 时，$B(t)=(1-t{)}^2{b}_0+2t(1\_-t)b_1+t^2{b}_2$is a moving point $Q_0$、$Q_1$- also known as intermediate point - since $b_1$Movement to $b_2$form, as shown in Figure 3.

Figure 3. Quadratic Bezier curve

The TrueType fonts commonly used in computer systems are implemented using quadratic Bezier curves.

when $n=3$ or higher, for build$n$ times Bezier curve, need to introduce$\left(\genfrac{}{}{0ex}{}{n}{n-1}\right)$ intermediate points. Figure 4 demonstrates the construction process of cubic and quartic Bezier curves.

First

Second

Figure 4. (A) Cubic Bezier curve; (B) Quartic Bezier curve

The above graphics and animations are realized by De Castrio algorithm.

2 Design controls based on Bezier curves

All common graphics operating systems currently on the market have built-in functions for drawing Bezier curves in their graphics systems. Taking Windows as an example, its graphics system GDI/GDI+ implements a four-point Bezier curve as shown in Figure 5. That is, in the cubic Bezier curve, $b_1$and $b_2$respectively used as $b_0$and $b_3$The control hand of . In the curve expression, $b_0$、$b_1$、$b_2$、$b_3$Corresponding to the points "First", "Second", "Third" and "Fourth" on the graph respectively.

Figure 5. Bezier curves in computer graphics

2.1 Drawing a Bezier curve ³

By calling the functions wrapped in GDI+ for drawing cubic Bezier curves DrawBezier,

public void DrawBezier(Pen pen,
                       Point pt1,
                       Point pt2,
                       Point pt3,
                       Point pt4);
public void DrawBezier(Pen pen,
                       PointF pt1,
                       PointF pt2,
                       PointF pt3,
                       PointF pt4);
public void DrawBezier(Pen pen,
                       float x1,
                       float y1,
                       float x2,
                       float y2,
                       float x3,
                       float y3,
                       float x4,
                       float y4);

Users can easily draw the desired Bezier curve on the form. Figure 6 is drawn with the following code.

private void Exercise_Paint(object sender, PaintEventArgs e)
{
    
    
        Pen penCurrent = new Pen(Color.Blue);
        Point pt1 = new Point(20, 12),
                    pt2 = new Point(88, 246),
                    pt3 = new Point(364, 192),
                    pt4 = new Point(250, 48);

        e.Graphics.DrawBezier(penCurrent, pt1, pt2, pt3, pt4);
}

Figure 6. Bezier curve drawn by GDI+

2.2 Define the Bezier curve in the graphical control

In order to realize the graphical interaction function between the user and the control, first manage the control points of the cubic Bezier curve. If expressed in the concept of "Model-View-Control" (MVC), the Bezier curve graphic control here It can be designed according to the following chapters.

2.2.1 Model

It can be seen from the previous chapters that the cubic Bezier curve has 2 endpoints and 2 intermediary points, as shown in Figure 7, which are named anchor points (anchor) and handle points (handler) respectively.

Figure 7. The endpoints on the Bezier curve control, the control points in the figure are the handle points described in the text

Bezier curve endpoints are defined as follows:

// 贝塞尔曲线点
public class BezierPoint {
    
    
	public Point Anchor {
    
     get; set; }
	public Point Handler {
    
     get; set; }
}

The endpoint of each Bezier curve contains an anchor point and the corresponding handle point, that is, $(b_0,b_1)$ or$(b_2,b_3)$ . Then a cubic Bezier curve segment can be defined as:

// 贝塞尔曲线段
public class BezierSegment {
    
    
    public BezierPoint Begin;
    public BezierPoint End;
}

By changing the position of the anchor point and the position of the handle point, a Bezier curve of any shape can be realized, and its use effect should be as shown in the animation in Figure 8.

Figure 8. Controllable Bezier curve control appearance and interactive demonstration

2.2.2 Views

The appearance of the curve is independent of the endpoints of the curve, and it can be drawn using an independent scalable renderer, such as the following simple renderer:

public class BezierRenderer {
    
    
    public void DrawSegment(Graphics g, BezierSegment s, Color color) {
    
    
    using (Pen p = new Pen(color)) {
    
    
        g.DrawBezier(
            p,
            s.Begin.Anchor,
            s.Begin.Handler,
            s.End.Anchor,
            s.End.Handler);
    }
    public void DrawHandle(Graphics g, Point pt, bool solid, Color color) {
    
    
        if (solid)
            using (SolidBrush b = new SolidBrush(color))
                g.FillRectangle(b, pt.X - 2, pt.Y - 2, 4, 4);
        else
            using (Pen p = new Pen(color))
                g.DrawRectangle(b, pt.X - 2, pt.Y - 2, 4, 4);
    }
    public void DrawBar(Graphics g, Point pt1, Point pt2, Color color) {
    
    
        using (Pen p = new Pen(color))
            g.DrawLine(p, pt1, pt2);
    }
}

This renderer only provides the ability to customize the color of each point and the color of the connection line from the handle point to the anchor point. Here is an example of using it:

// 画曲线
renderer.DrawSegment(g, s, Color.DimGray);

// 画锚点，灰色
renderer.DrawHandle(g, s.Begin.Anchor, false, Color.DimGray);
renderer.DrawHandle(g, s.End.Anchor, false, Color.DimGray);

// 画手柄点，黑色
renderer.DrawBar(g, s.Begin.Anchor, s.Begin.Handler, Color.Black);
renderer.DrawHandle(g, s.Begin.Handler, false, Color.Black);
renderer.DrawBar(g, s.End.Anchor, s.End.Handler, Color.Black);
renderer.DrawHandle(g, s.End.Handler, false, Color.Black);

// 被选中的手柄点为实心
if (target != null)
    renderer.DrawHandle(g, target.Handler, true, Color.Black);

In this way, a Bezier curve can be drawn, as shown in Figure 9. Note that the anchor point and the handle point coincide at this time, which looks similar to a Bezier curve.

Figure 9. The Bezier curve drawn in the graphics control, the anchor point coincides with the handle point

2.2.3 Control

The above has realized the data storage and appearance expression of the Bezier curve segment. Now add control functions to it, that is, the ability to modify data. Here, the mouse cursor is used to interact. The simple interaction logic can be considered as follows:

1. Press the mouse button, if the point falls on an endpoint (or within its neighborhood), the point should be marked as selected
2. Move the mouse cursor, if an endpoint is selected, modify the coordinates of the endpoint according to the cursor position
3. Lift the mouse button to cancel all endpoint selections

In this way, the control needs to be processed in the MouseDown, MouseMove, and MouseUpevents of the control. A simple implementation is demonstrated below. Note that the part about moving here only considers the handle point, and in fact, the anchor point should be considered in the complete implementation.

First, use the hotspot monitoring area (that is, the neighborhood mentioned in 1) to slightly expand the selection to reduce the difficulty of cursor selection. In addition, define a pointer to point to the selected endpoint.

Rectangle rectBegin, rectEnd;
BezierPoint target = null;

Now start handling mouse interaction events.

// MouseDown，若落点位于某端点邻域内，则将其标记为已选中
if (rectBegin.Contains(e.Location))
    target = s.Begin;
else if (rectEnd.Contains(e.Location))
    target = s.End;

// MouseMove，若有选中状态的端点，则用光标位置更新其坐标
if (target != null) 
	target.ControlPoint = e.Location;

// MouseUp，取消选择
target = null;

In this way, the Bezier curve control shown in Figure 8 can be realized.

2.4 Additional Effects

If you modify the renderer, you can get more image effects, such as the colored curve shown in Figure 10.

Figure 10. Demonstration of the running effect of the control after changing the renderer

Summarize

Bezier curve is a powerful graphical tool. In modern computer operating systems, it is easy to implement interactive and extensible Bezier curve controls by calling system drawing functions. This paper introduces Bezier functions, curves and Related computing and design methods provide a simple implementation based on Windows GDI+, and demonstrate how to change the appearance of controls through the renderer. Users can connect multiple anchor points to achieve complex curve effects of any scale. In addition, they can also use A more efficient drawing method optimizes the control, and adds a custom event handling mechanism to the control so that it can be used in commercial practice.

(over)

© 2013-2023 Conmajia

---

1. See De Castrio's Algorithm . ↩︎

2. See Bézier curves . ↩︎

3. See GDI+ Shapes: Bezier Curves ↩︎