Home

Drawing Bézier Curves

 

A Bézier Curve

A bézier curve is a continuous line that is drawn using four points that are not necessarily aligned. It can be illustrated as follows:

Bezier

To draw this line (with four points), the compiler would draw a curve from the first point to the fourth point. Then it would bend the curve by bringing each middle (half-center) side close to the second and the third points respectively, without touching those second and third points. For example, the above bézier curve could have been drawn using the following four points:

Bezier Illustration

To draw a bézier curve, the Graphics class provides the DrawBezier() method that is overloaded in three versions whose syntaxes are:

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);

Based on this, to draw a bézier line, you can use either four Point or PointF values or the coordinates of the four points. Here is an example:

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);
}

This would produce:

Bezier Curve

A Series of Bézier Curves

The Graphics.DrawBezier() method is used to draw one bézier curve. If you want to draw many bézier curves, you can call the Graphics.DrawBeziers() method that is overloaded in two versions as follows:

public void DrawBeziers(Pen pen, Point[] points);
public void DrawBeziers(Pen pen, PointF[] points);

The DrawBeziers() method requires an array of Point of PointF values. When working with only four coordinates, the DrawBeziers() method works exactly like DrawBezier(), the different is that, while DrawBezier() expects four Point or four PointF values, DrawBeziers() expects an array of Point or PointF values. Using, DrawBeziers(), the above bézier curve can be drawn as follows and produce the same result:

private void Exercise_Paint(object sender, PaintEventArgs e)
{
        Pen penCurrent = new Pen(Color.Blue);
        Point[] pt = { new Point(20,  12), new Point(88, 246),
		          new Point(364, 192), new Point(250,  48) };

        e.Graphics.DrawBeziers(penCurrent, pt);
}

This would produce:

Curve

A characteristic of using DrawBeziers() is that it allows you to draw a bézier curve using 7 Point or PointF values. Here is an example:

private void Exercise_Paint(object sender, PaintEventArgs e)
{
        Pen penCurrent = new Pen(Color.Blue);
        Point[] pt = { new Point( 10,  5), new Point(340, 60),
                          new Point(320, 148), new Point(150, 120),
	                  new Point(24, 220), new Point(250, 150),
	                  new Point(304, 240) };

        e.Graphics.DrawBeziers(penCurrent, pt);
}

This would produce:

Beziers
 
 

Home Copyright © 2007 FunctionX, Inc.