Zoom and scroll a picture drawn in C#

[example]

This program lets you zoom and scroll a picture drawn by the program. The program contains a Panel with AutoScale set to true. Inside the Panel is a PictureBox with SizeMode set to AutoSize. The PictureBox contains a Bitmap that displays the drawing.

The basic idea is simple. When the user selects a scale, the program builds a Bitmap of the correct size. It makes a Graphics object to draw on the Bitmap and uses its ScaleTransform method to make it draw suitably scaled. The code then calls a drawing method to make the drawing. The drawing method uses the same code at all scales and the ScaleTransform call makes the result scale properly.

The following code shows the SetScale method that prepares to draw the picture.

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

    // Make a Bitmap of the right size.
    Bm = new Bitmap(
        (int)(PictureScale * WorldWidth),
        (int)(PictureScale * WorldHeight));

    // Make a Graphics object for the Bitmap.
    // (If you need to use this later, you can give it
    // class scope so you don't need to make a new one.)
    using (Graphics gr = Graphics.FromImage(Bm))
    {
        // Use a white background
        // (so you can see where the picture is).
        gr.Clear(Color.White);

        // Draw smoothly.
        gr.SmoothingMode = SmoothingMode.AntiAlias;

        // Scale.
        gr.ScaleTransform(PictureScale, PictureScale);

        // Draw the image.
        DrawImage(gr);
    }

    // Display the result.
    picCanvas.Image = Bm;
}

This code creates a Bitmap of the correct scaled size and an associated Graphics object. It calls that object’s ScaleTransform method to scale any drawing that follows and then calls the DrawImage method to do the drawing. This method finishes by displaying the Bitmap in the program’s PictureBox.

The following code shows the DrawImage method.

// Draw the image in world coordinates.
private void DrawImage(Graphics gr)
{
    Rectangle rect;

    rect = new Rectangle(10, 10, 80, 80);
    gr.FillEllipse(Brushes.LightGreen, rect);
    gr.DrawEllipse(Pens.Green, rect);

    rect = new Rectangle(40, 40, 20, 30);
    gr.FillEllipse(Brushes.LightBlue, rect);
    gr.DrawEllipse(Pens.Blue, rect);

    rect = new Rectangle(25, 30, 50, 50);
    gr.DrawArc(Pens.Red, rect, 20, 140);

    rect = new Rectangle(25, 25, 15, 20);
    gr.FillEllipse(Brushes.White, rect);
    gr.DrawEllipse(Pens.Black, rect);
    rect = new Rectangle(30, 30, 10, 10);
    gr.FillEllipse(Brushes.Black, rect);

    rect = new Rectangle(60, 25, 15, 20);
    gr.FillEllipse(Brushes.White, rect);
    gr.DrawEllipse(Pens.Black, rect);
    rect = new Rectangle(65, 30, 10, 10);
    gr.FillEllipse(Brushes.Black, rect);
}

This method draws uses Graphics methods to draw a smiley face.

Notice that this code contains simple calls to drawing methods and doesn’t know anything about the scale at which it is drawing.


Download Example   Follow me on Twitter   RSS feed   Donate




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

One Response to Zoom and scroll a picture drawn in C#

  1. Aung Thu says:

    Thank you. That tutorial helped me alot at my current project.
    Thank 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *