Muokkaa

Jaa

How to: Create a Cubic Bezier Curve

  • Artikkeli

This example shows how to create a cubic Bezier curve. To create a cubic Bezier curve, use the PathGeometry, PathFigure, and BezierSegment classes. To display the resulting geometry, use a Path element, or use it with a GeometryDrawing or a DrawingContext. In the following examples, a cubic Bezier curve is drawn from (10, 100) to (300, 100). The curve has control points of (100, 0) and (200, 200).

Example

In Extensible Application Markup Language (XAML), you may use abbreviated markup syntax to describe a path.

<Path Stroke="Black" StrokeThickness="1"  
  Data="M 10,100 C 100,0 200,200 300,100" />

In XAML, you can also draw a cubic Bezier curve using object tags. The following is equivalent to the previous XAML example.

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <BezierSegment Point1="100,0" Point2="200,200" Point3="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

This example is part of larger sample; for the complete sample, see the Geometries Sample.

See also