Home

GDI+ Shapes: A Bézier Curve

 

Description

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 Sub DrawBezier ( _
	pen As Pen, _
	pt1 As Point, _
	pt2 As Point, _
	pt3 As Point, _
	pt4 As Point _
)
Public Sub DrawBezier ( _
	pen As Pen, _
	pt1 As PointF, _
	pt2 As PointF, _
	pt3 As PointF, _
	pt4 As PointF _
)
Public Sub DrawBezier ( _
	pen As Pen, _
	x1 As Single, _
	y1 As Single, _
	x2 As Single, _
	y2 As Single, _
	x3 As Single, _
	y3 As Single, _
	x4 As Single, _
	y4 As Single _
)

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:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()

        End Sub

        Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim penCurrent As Pen = New Pen(Color.Blue)
            Dim pt1 As Point = New Point(20, 12)
            Dim pt2 As Point = New Point(88, 246)
            Dim pt3 As Point = New Point(364, 192)
            Dim pt4 As Point = New Point(250, 48)

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

        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

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 Sub DrawBeziers(pen As Pen, points As Point())
Public Sub DrawBeziers(pen As Pen, points As PointF())

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 Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim penCurrent As Pen = New Pen(Color.Blue)
            Dim pt As Point() = {	New Point(20, 12), New Point(88, 246), _
                            		New Point(364, 192), New Point(250, 48)}

            e.Graphics.DrawBeziers(penCurrent, pt)

End Sub

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 Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim penCurrent As Pen = New Pen(Color.Blue)
            Dim pt As Point() = {	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)

End Sub

This would produce:

Beziers

 

 

Home Copyright © 2008-2016, FunctionX, Inc. Home