How to add polygon and polyline in the .NET MAUI Image Editor (SfImageEditor)?

The Syncfusion® .NET MAUI Image Editor (SfImageEditor) programmatically supports adding polygons and polylines. This article demonstrates how to add these shapes.

XAML:

Initialize the SfImageEditor and create two buttons to draw a polygon and a polyline, respectively.

<Grid RowDefinitions="0.9*, 0.1*" ColumnDefinitions="0.5*, 0.5*">
  <imageEditor:SfImageEditor x:Name="imageEditor" Source="image.png" Grid.ColumnSpan="2"/>
  <Button Grid.Row="1"
          Text="Polygon"
          Clicked="OnPolygonClicked" />
  <Button Grid.Row="1" Grid.Column="1"
          Text="Polyline"
          Clicked="OnPolylineClicked" />
</Grid>

C#:

Create a polygon using the AddShape method by setting AnnotationShape as Polygon where the first and last point of a series of lines connect.

private void OnPolygonClicked(object sender, EventArgs e)
{
   this.imageEditor.AddShape(AnnotationShape.Polygon,
       new ImageEditorShapeSettings()
       {
           StrokeThickness = 5,

           Points = new PointCollection
           {
               new Point(100, 100),
               new Point(200, 100),
               new Point(250, 175),
               new Point(200, 250),
               new Point(100, 250),
               new Point(50, 175)
           },
       });
}

Create a polyline using the AddShape method by setting AnnotationShape as Polyline where there is no connection between the first and the last point of a series of lines.

private void OnPolylineClicked(object sender, EventArgs e)
{
   this.imageEditor.AddShape(AnnotationShape.Polyline,
       new ImageEditorShapeSettings()
       {
           Points = new PointCollection
           {
               new Point(500, 100),
               new Point(550, 250),
               new Point(575, 100),
               new Point(590, 400),
               new Point(615, 250),
               new Point(675, 250),
               new Point(700, 100),
               new Point(715, 400),
               new Point(740, 250),
               new Point(800, 250)
           },
       });
}

Download the complete sample from GitHub.

Output:

Conclusion:

I hope you enjoyed learning how to add polygons and polylines in the .NET MAUI Image Editor (SfImageEditor).

Refer to our .NET MAUI Image Editor feature tour page for other groundbreaking feature representations. You can also explore our .NET MAUI Image Editor documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Image Editor and other .NET MAUI components.

Please let us know in the following comment section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!