.NET 4.0+

WPF Shapes - Path - Bézier Segments

by Richard Carr, published at http://www.blackwasp.co.uk/WPFBezierSegments.aspx

The one hundred and twenty-ninth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at path geometry segment types. This article describes two types of Bézier curve segment.

Bézier Curves

There are two types of path segment that you can use to draw Bézier curves. These are a special type of smooth curve, calculated mathematically using fixed start and end points, and one or more control points, known as tangent points.

The tangent points determine the path of the curve. If you draw a line with a single tangent point, the direction of travel at the start and end of the curve will point directly towards that point. With more control points, the curve becomes more complex.

The image below shows a sample Bézier curve, plotted in grey. The blue dot shows the position of the single tangent point. The red lines join the start and end points to the tangent point. They show that the angle of the curve at the two ends points directly at the control point.

WPF can render Bézier curves with one or two control points. The image below shows an example curve with two. Again, the start and end of the lines are directed towards a control point. The ends are joined by a smooth curve. The position of tangent point on each side of the imaginary straight line between the ends causes the change in direction of sweep in the middle of the line.

Quadratic Bezier Segment

To create a Bézier curve with a single tangent point, you can add a QuadraticBezierSegment to a PathGeometry. As with other segments, the curve starts from the end point of the previous segment, or from the Path's start point if the curve is the first segment. The co-ordinates of the start point are set in the Point1 property and the end point of the curve is held in Point2.

To demonstrate, create a new WPF application in Visual Studio. Name the project, "BezierSegmentDemo". Once loaded, replace the XAML in the main window with the code below:

<Window x:Class="BezierSegmentDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Path Demo"
        Height="200" Width="250">
    <Canvas>
        <Path Stroke="#C0000000" StrokeThickness="3">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="20,100" IsClosed="False">
                            <QuadraticBezierSegment Point1="80,150" Point2="200,20"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Ellipse Canvas.Left="75" Canvas.Top="145" Fill="Blue" Height="10" Width="10" />
    </Canvas>
</Window>

The QuadraticBezierSegment in the Path object means that the line travels from (20,100) to (200,20). The tangent point at (80,150) creates a curve matching that of the first example image above. The XAML also includes an Ellipse to show the position of the tangent point. The resultant window appears as shown below:

Bézier Segment

To create a curve with two tangent points, you can include a BezierSegment element. These require three properties. Point1 and Point2 define the control points. Point3 determines the co-ordinates of the end of the line.

Replace the Canvas element and its contents with the XAML below:

<Canvas>
    <Path Stroke="#C0000000" StrokeThickness="3">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="20,20" IsClosed="False">
                        <BezierSegment Point1="70,130" Point2="220,20" Point3="180,160"/>
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Ellipse Canvas.Left="65" Canvas.Top="125" Fill="Blue" Height="10" Width="10" />
    <Ellipse Canvas.Left="215" Canvas.Top="15" Fill="Blue" Height="10" Width="10" />
</Canvas>

The output includes the Bézier curve and two ellipses showing the positions of the tangent points.