Let the user draw and move polygons in C#


This example lets the user draw and move polygons. It builds on the example Let the user draw polygons in C#.

The program uses MouseDown, MouseMove, and MouseUp event handlers to let the user draw and interact with the polygons. You could write three complex event handlers to handle every situation. For example, the MouseMove event handler would take different actions depending on whether the user was:

  • Drawing a new polygon
  • Moving a polygon
  • Moving a polygon’s vertex
  • Doing nothing

To make the event handlers easier to understand, this program uses separate, simpler event handlers to handle different tasks:

  • picCanvas_MouseDown – Handles all mouse down events. Depending on what is under the mouse, this event handler:
    • Adds a new point to the new polygon.
    • Finishes drawing the new polygon (right button).
    • Starts moving a polygon’s corner point.
    • Starts moving a polygon.
    • Starts drawing a new polygon.
  • picCanvas_MouseMove_Drawing – Moves the next point for a new polygon.
  • picCanvas_MouseMove_MovingCorner – Moves a polygon’s corner.
  • picCanvas_MouseUp_MovingCorner – Stops moving a polygon’s corner.
  • picCanvas_MouseMove_MovingPolygon – Moves a polygon.
  • picCanvas_MouseUp_MovingPolygon – Stops moving a polygon.
  • picCanvas_MouseMove_NotDrawing – Sees what the mouse is over and changes the cursor accordingly.
  • picCanvas_Paint – Redraws the polygons and any new polygon.

The various event handlers add and remove other event handlers as necessary. For example, the following code snippet shows how the program starts moving a polygon when you press the mouse down over it.

else if (MouseIsOverPolygon(e.Location, out hit_polygon))
    // Start moving this polygon.
    picCanvas.MouseMove -= picCanvas_MouseMove_NotDrawing;
    picCanvas.MouseMove += picCanvas_MouseMove_MovingPolygon;
    picCanvas.MouseUp += picCanvas_MouseUp_MovingPolygon;

    // Remember the polygon.
    MovingPolygon = hit_polygon;

    // Remember the offset from the mouse
    // to the segment's first point.
    OffsetX = hit_polygon[0].X - e.X;
    OffsetY = hit_polygon[0].Y - e.Y;

This code first uses the MouseIsOverPolygon method to determine whether the mouse is over a polygon. If the mouse is over a polygon, that method returns true and returns the polygon through the output parameter hit_polygon.

If the mouse is over a polygon, the code removes the picCanvas_MouseMove_NotDrawing event handler that is used while not drawing. Then it installs the MouseMove and MouseUp event handlers that is uses while moving a polygon. It saves the polygon it will move and saves the offset between the mouse and the polygon’s first corner point. The newly installed event handlers do the rest.

The following code shows how the program moves a polygon.

// Move the selected polygon.
private void picCanvas_MouseMove_MovingPolygon(
    object sender, MouseEventArgs e)
    // See how far the first point will move.
    int new_x1 = e.X + OffsetX;
    int new_y1 = e.Y + OffsetY;

    int dx = new_x1 - MovingPolygon[0].X;
    int dy = new_y1 - MovingPolygon[0].Y;

    if (dx == 0 && dy == 0) return;

    // Move the polygon.
    for (int i = 0; i < MovingPolygon.Count; i++)
        MovingPolygon[i] = new Point(
            MovingPolygon[i].X + dx,
            MovingPolygon[i].Y + dy);

    // Redraw.

This code adds the original offset to the mouse’s current position to determine where the polygon’s first point should be now. It calculates the distance it must move that point from its current position and then adds that amount to each of the polygon’s points. The code finishes by redrawing.

The following code shows how the program stops moving a polygon when you release the mouse.

// Finish moving the selected polygon.
private void picCanvas_MouseUp_MovingPolygon(
    object sender, MouseEventArgs e)
    picCanvas.MouseMove += picCanvas_MouseMove_NotDrawing;
    picCanvas.MouseMove -= picCanvas_MouseMove_MovingPolygon;
    picCanvas.MouseUp -= picCanvas_MouseUp_MovingPolygon;

This code simply restores the original event handlers that should be used while not drawing or moving anything.

Moving a polygon vertex is similar to moving a polygon, with some minor differences. See the code for more details.

Creating polygons is similar to the method used by the previous example.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in algorithms, drawing, graphics and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.

23 Responses to Let the user draw and move polygons in C#

  1. Christina Lilja says:

    Thank you very much for sharing this code. It is part of what my users want. Besides being able to move the whole polygon and the vertices one by one, they also want to add a vertex. My problem is that I am just not able to figure out between which vertices the user is clicking, and wants to add the new vertex. If you have a solution to this problem, I would be so grateful.

  2. Pingback: Let the user draw polygons, move them, and add points to them in C# -

  3. müslüm says:

    howto in the area of ​​the polygon getPixel ? please help

    • RodStephens says:

      Sorry but I don’t understand your question. Are you asking how to get a particular pixel’s value? If so, you can use a Bitmap object’s GetPixel method.

  4. Isaac says:

    Please i need to get Final Polygon ( i mean after i fished draw my polygon ) points Array
    Please help?

    • RodStephens says:

      If you look in picCanvas_MouseDown, you’ll find this code:

      // Finish this polygon.
      if (NewPolygon.Count > 2) Polygons.Add(NewPolygon);

      This is where the program finishes creating the new polygon so it’s where you can get the new polygon’s points.

      NewPolygon is a List<Point>. You can just loop through its points to see what they are.

  5. RodStephens says:

    To remove all polygons you could use:


    To remove a single polygon, you would need to know which one and then use something like:

  6. Petr Slezak says:

    Its greate, thank you

    One more code for cancelling of drawing

    // Cancel drawing of new Polygon
    private void picCanvas_MouseLeave(object sender, EventArgs e)
        // Cancel polygon
        NewPolygon = null;
        // Redraw.
        // Debug.Print("picCanvas_MouseLeave | Polygons.Count=" + Polygons.Count.ToString());
  7. Ammar says:

    How to keep the polygon intact while pan/zooming/maximizing the image in the pic canvas?

    • RodStephens says:

      That is a bit trickier. The idea is to make a transformation to scale the picture. Then use an inverse transformation to make mouse movements into the world coordinate space.

      I’m hoping to show how to do that in the following example:

      Let the user draw and move polygons in C#

      Unfortunately, I haven’t had time yet.

      • Ammar says:

        some how i managed to to do it using DevExpress PictureEdit control and PaintEx event, however now the question is i want to initiate drawing from a Form class based on some button press event, therefore i wrapped your code in a separate class and instantiate it on button press event, i do the drawing and after right click i just to finish drawing altogether, now more drawing until a new instance is created. How to stop drawing?

  8. Jagadeswaran says:


    Thanks for the nice example.

    How can i convert the same to WPF?

Comments are closed.