dcsimg
 

The GraphicsPath Class

Friday Oct 25th 2019 by Hannes DuPreez
The GraphicsPath Class

Since the implementation of the GraphicsPath class in .NET, life has become so much easier. Become a graphics guru with this article's assistance.

Introduction

Since the implementation of the GraphicsPath class in .NET, life has become so much easier. The GraphicsPath class forms part of the System.Drawing.Drawing2D namespace. The definition on MSDN states that the GraphicsPath class represents a series of connected lines and curves. That doesn't say much, unfortunately.

I will define the GraphicsPath class as follows: The name says it all. It is a path to be used with graphics. Graphics, in this case, mean any drawings, whether it be oddly shaped or a standard shape such as a Rectangle or Ellipse. The GraphicsPath class will enable you to follow a certain drawing's path and manipulate it. A manipulation can be to fill the drawing with colors, to outline a shape with a darker borderline, or to be able to select a drawing (or part thereof) and move it, or delete it, or replace it.

A path can be composed of any number of sub paths (or figures). Each sub path can be a sequence of lines and curves that are connected or a geometric primitive. Common primitives in 2D and 3D drawing include points, line segments, planes, circles and ellipses, triangles, arbitrary polygons, spline curves, spheres, cubes or boxes, toroids, cylinders, pyramids, triangle meshes, or polygon meshes.

The GraphicsPath class has plenty of methods, but I will only demonstrate a few.

The AddArc Method

This method adds an elliptical arc to the figure to be used upon. Code like the following produces a drawing such as shown in Figure 1.

   private void Form1_Paint(object sender, PaintEventArgs e)
   {

      GraphicsPath myPath = new GraphicsPath();

      Rectangle rect = new Rectangle(100, 150, 70, 100);
      myPath.StartFigure();
      myPath.AddArc(rect, 0, 150);
      myPath.CloseFigure();

      e.Graphics.DrawPath(new Pen(Color.Blue, 2), myPath);
   }

AddArc
Figure 1: AddArc

The AddBezier Method

This method adds a Bezier curve to the path. This is shown with the code segment below as well in Figure 2.

   private void Form1_Paint(object sender, PaintEventArgs e)
   {

      GraphicsPath myPath = new GraphicsPath();
      myPath.StartFigure();
      myPath.AddBezier(100, 100, 140, 0, 200, 240, 300, 100);

      myPath.CloseFigure();

      e.Graphics.DrawPath(new Pen(Color.Green, 2), myPath);
   }

AddBezier
Figure 2: AddBezier

The AddClosedCurve Method

Adds a closed curve.

   private void Form1_Paint(object sender, PaintEventArgs e)
   {
      Point[] myArray =
         {
            new Point(20,100),
            new Point(40,150),
            new Point(60,125),
            new Point(40,100),
            new Point(60,75),
            new Point(40,50)
         };

         GraphicsPath myPath = new GraphicsPath();
         myPath.AddClosedCurve(myArray, .3f);
         Pen myPen = new Pen(Color.Orange, 2);

         e.Graphics.DrawPath(myPen, myPath);
   }

AddClosedCurve
Figure 3: AddClosedCurve

The AddLines Method

Connects a sequence of lines, such as a triangle.

   private void Form1_Paint(object sender, PaintEventArgs e)
   {

      Point[] myArray =
         {
            new Point(60,60),
            new Point(120,120),
            new Point(0,120),
            new Point(60,60)
         };
      GraphicsPath myPath = new GraphicsPath();
      myPath.AddLines(myArray);

      Pen myPen = new Pen(Color.Pink, 3);
      e.Graphics.DrawPath(myPen, myPath);
   }

AddLines
Figure 4: AddLines

The AddPie Method

Adds an outline pie shape to the path.

   private void Form1_Paint(object sender, PaintEventArgs e)
   {

      GraphicsPath myPath = new GraphicsPath();
      myPath.AddPie(40, 40, 140, 140, -45, 90);

      Pen myPen = new Pen(Color.Black, 2);
      e.Graphics.DrawPath(myPen, myPath);
   }

AddPie
Figure 5: AddPie

The Warp Method

Applies a warp transform to the path.

   private void Form1_Paint(object sender, PaintEventArgs e)
   {

      GraphicsPath gPath = new GraphicsPath();
      RectangleF srcRect = new RectangleF(0, 0, 200, 350);
      gPath.AddRectangle(srcRect);

      e.Graphics.DrawPath(Pens.Green, gPath);

      PointF p1 = new PointF(200, 200);
      PointF p2 = new PointF(400, 250);
      PointF p3 = new PointF(240, 400);
      PointF[] destPoints = { p1, p2, p3 };

      Matrix tMatrix = new Matrix();
      tMatrix.Translate(100, 0);

      gPath.Warp(destPoints, srcRect, tMatrix,
         WarpMode.Perspective, 0.5f);

      e.Graphics.DrawPath(new Pen(Color.Red, 2), gPath);
   }

Warp
Figure 6: Warp

The Widen Method

Replaces graphics path with curves which enclose filled areas.

   private void Form1_Paint(object sender, PaintEventArgs e)
   {

      GraphicsPath myPath = new GraphicsPath();
      myPath.AddEllipse(50, 50, 200, 200);
      myPath.AddEllipse(200, 0, 200, 200);

      e.Graphics.DrawPath(Pens.Purple, myPath);

      Pen widenPen = new Pen(Color.Green, 10);
      Matrix widenMatrix = new Matrix();
      widenMatrix.Translate(100, 100);
      myPath.Widen(widenPen, widenMatrix, 1.0f);

      e.Graphics.FillPath(new SolidBrush(Color.Orange), myPath);

   }

Widen
Figure 7: Widen

The Flatten Method

Converts all curves into a sequence of connected lines.

   private void Form1_Paint(object sender, PaintEventArgs e)
   {

      GraphicsPath myPath = new GraphicsPath();
      Matrix translateMatrix = new Matrix();
      translateMatrix.Translate(0, 20);
      Point point1 = new Point(40, 200);
      Point point2 = new Point(140, 20);
      Point point3 = new Point(260, 400);
      Point point4 = new Point(360, 200);
      Point[] points = { point1, point2, point3, point4 };
      myPath.AddCurve(points);
      e.Graphics.DrawPath(new Pen(Color.Yellow, 3), myPath);
      myPath.Flatten(translateMatrix, 10f);
      e.Graphics.DrawPath(new Pen(Color.Blue, 2), myPath);


   }

Flatten
Figure 8: Flatten

Conclusion

The GraphicsPath class is probably one of my favourite classes in the System.Drawing.Drawing2D namespace. As you can see, it is quite versatile and easy to work with. Keep playing with it, and you will discover even more nifty tricks.

Home
Mobile Site | Full Site