Let the user zoom on a picture in C#


Important: This example does not handle new drawings correctly if you have scaled the image. Read this one to learn how it works and then see the new post Let the user zoom on a picture and draw in C#.

The example Provide autosave in C# explains how to make a program that lets the user draw lines in different colors and styles. That program lets the user undo and redo, save and load drawings, and autosaves so it can reload a drawing if it crashes.

This example adds the ability to zoom in and out on the drawing.

The program uses a PictureBox inside a Panel control. The PictureBox has a fixed size and doesn’t resize its image. The Panel has AutoScroll = True so it displays scrollbars if the PictureBox is too big to fit.

When you select a scale from the toolbar’s ComboBox, the program calls the following SetScale method to set the selected scale.

// Set the scale and redraw.
private void SetScale(float picture_scale)
    // Set the scale.
    PictureScale = picture_scale;

    // Resize the PictureBox.
    picCanvas.ClientSize = new Size(
        (int)(WorldWidth * PictureScale),
        (int)(WorldHeight * PictureScale));

    // Redraw.

This method saves the new scale in variable PictureScale. It then resizes the PictureBox for that scale and refreshes it to make it redraw the picture. When the PictureBox resizes, the Panel control automatically displays scrollbars if needed.

The following code shows how the PictureBox redraws the picture.

// Draw the picture.
private void picCanvas_Paint(object sender, PaintEventArgs e)
    // Ready.
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;

    // Scale.
    e.Graphics.ScaleTransform(PictureScale, PictureScale);

    // Draw.
    foreach (Polyline polyline in Polylines)

This code sets the Graphics object’s SmoothingMode and clears the picture with white. Next the method uses the Graphics object’s ScaleTransform method to scale future drawing by the current scale factor. The method finishes by looping through the current Polyline objects and calling their Draw methods.

Download Example   Follow me on Twitter   RSS feed   Donate

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

1 Response to Let the user zoom on a picture in C#

  1. Pingback: Let the user zoom on a picture and draw in C# - C# HelperC# Helper

Comments are closed.