Drawing Bézier Splines

A Bézier spline is defined by four points: a start point, two control points, and an end point. The following example draws a Bézier spline with start point (10, 100) and end point (200, 100). The control points are (100, 10) and (150, 150).

Dim p1 As New Point(10, 100) ' Start point
Dim c1 As New Point(100, 10) ' First control point
Dim c2 As New Point(150, 150) ' Second control point
Dim p2 As New Point(200, 100) ' End point

Dim pen As New Pen(Color.FromArgb(255, 0, 0, 255))
e.Graphics.DrawBezier(pen, p1, c1, c2, p2)
[C#]
Point p1 = new Point(10, 100);   // Start point
Point c1 = new Point(100, 10);   // First control point
Point c2 = new Point(150, 150);  // Second control point
Point p2 = new Point(200, 100);  // End point

Pen pen = new Pen(Color.FromArgb(255, 0, 0, 255));
e.Graphics.DrawBezier(pen, p1, c1, c2, p2);

The following illustration shows the resulting Bézier spline along with its start point, control points, and end point. The illustration also shows the spline's convex hull, which is a polygon formed by connecting the four points with straight lines.

88ehxdxb.bezierspline1(en-us,VS.71).gif

You can use the DrawBeziers method of the Graphics class to draw a sequence of connected Bézier splines. The following example draws a curve that consists of two connected Bézier splines. The end point of the first Bézier spline is the start point of the second Bézier spline.

' Point(10, 100) = start point of first spline
' Point(75, 10) = first control point of first spline
' Point(80, 50) = second control point of first spline

' Point(100, 150) = end point of first spline and start point of second spline

' Point(125, 80) = first control point of second spline
' Point(175, 200) = second control point of second spline
' Point(200, 80)} = end point of second spline
Dim p As Point() =  { _
   New Point(10, 100), _
   New Point(75, 10), _
   New Point(80, 50), _

   New Point(100, 150), _

   New Point(125, 80), _
   New Point(175, 200), _
   New Point(200, 80)}

Dim pen As New Pen(Color.Blue)
e.Graphics.DrawBeziers(pen, p)
[C#]
Point[] p = {
   new Point(10, 100),   // start point of first spline
   new Point(75, 10),    // first control point of first spline
   new Point(80, 50),    // second control point of first spline

   new Point(100, 150),  // end point of first spline and 
                         // start point of second spline

   new Point(125, 80),   // first control point of second spline
   new Point(175, 200),  // second control point of second spline
   new Point(200, 80)};  // end point of second spline

Pen pen = new Pen(Color.Blue);
e.Graphics.DrawBeziers(pen, p);

The following illustration shows the connected splines along with the seven points.

88ehxdxb.bezierspline2(en-us,VS.71).gif