Title: Draw, move, and delete line segments in C#

This example shows how to make a drawing program that lets you draw, move, and delete line segments. It's based on the example Draw and move line segments in C#. See that example for information about how the program lets you draw and move line segments.

This example adds the ability to delete a line segment by dragging it into the trash can. To do that, the program must draw the trash can and detect when you move a segment onto it.

At design time, I added the trash can image (a PNG file with a transparent background) to the program's resources. (Open the Project menu and select Properties. On the Resources tab, open the Add Resource dropdown and select Add Existing File.) When the program starts, the following code gets the trash can's dimensions.

// Calculate the trash can dimensions. private int TrashWidth, TrashHeight; private void Form1_Load(object sender, EventArgs e) { const float TrashScale = 0.25f; TrashWidth = (int)(TrashScale * Properties.Resources.trash_empty.Width); TrashHeight = (int)(TrashScale * Properties.Resources.trash_empty.Height); }

This code defines the TrashWidth and TrashHeight variables. The form's Load event handler sets those values to the trash can image's dimensions multiplied by a scale factor.

The PictureBox object's Paint event handler draws the current line segments as in the previous example. It then uses the following code to draw the trash can in the upper left corner.

// Draw the trash can. Rectangle trash_rect = new Rectangle(0, 0, TrashWidth, TrashHeight); e.Graphics.DrawImage( Properties.Resources.trash_empty, trash_rect);

This code simply creates a rectangle in the upper left corner of the PictureBox that has the desired trash can dimensions. It then calls e.DrawImage to draw the trash can there.

The last and most interesting piece of new code deletes a segment when the user drops it in the trash can.

When you drag a segment to a new location and then release the mouse, the following event handler executes. The new code is shown in blue.

// Stop moving the segment. private void picCanvas_MouseUp_MovingSegment( object sender, MouseEventArgs e) { // Reset the event handlers. picCanvas.MouseMove += picCanvas_MouseMove_NotDown; picCanvas.MouseMove -= picCanvas_MouseMove_MovingSegment; picCanvas.MouseUp -= picCanvas_MouseUp_MovingSegment; // See if the mouse is over the trash can. if ((e.X >= 0) && (e.X < TrashWidth) && (e.Y >= 0) && (e.Y < TrashHeight)) { if (MessageBox.Show("Delete this segment?", "Delete Segment?", MessageBoxButtons.YesNo) == DialogResult.Yes) { // Delete the segment. Pt1.RemoveAt(MovingSegment); Pt2.RemoveAt(MovingSegment); } } // Redraw. picCanvas.Refresh(); }

This code resets the PictureBox event handlers for the situation when the user isn't dragging anything. The new code then determines whether the mouse is over the trash can. If it is, the program asks the user whether it should delete the line segment. If the user clicks Yes, the program removes the points that define the segment that was dragged.

The method finishes by refreshing the PictureBox to make it redraw the remaining line segments.

Download the example to experiment with it and to see additional details.