The example Use XML serialization to save and restore pictures drawn by the user in C# explains how to make a scribble application that lets the user draw free-form curves with different colors, line widths, and line styles. See that example for information on how the program lets the user draw, how the program stores the drawing information in Polyline objects, and how the program saves and restores drawings in XML serializations.

This example shows how to let the user zoom in and out on the drawing. The basic technique it uses is described in the example Let the user zoom and scroll a picture drawn by the program in C#. The program displays a Bitmap inside a PictureBox with SizeMode = AutoSize. The PictureBox is inside a Panel with AutoScroll = true, so the Panel displays scroll bars as needed. See the previous scrolling example for more details on the basic technique.

Whenever this example needs to redraw its picture, for example when the user loads a file or uses the mouse to draw a new curve, the DrawPicture method shown in the following code draws the image at the correct scale.

// Draw the scaled picture on a Bitmap of the correct size.
private void DrawPicture()
{
    // Make a Bitmap of the right size.
    Bitmap 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 = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

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

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

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

The code creates a bitmap at the appropriate size. The WorldWidth and WorldHeight constants determine how big the image is at full scale. The variable PictureScale gives the current scale as set by the ComboBox in the program's toolbar.

Next the code creates a Graphics object to draw on the Bitmap. It clears the Bitmap, sets the SmoothingMode to give smooth drawing, uses the ScaleTransform method to scale the drawing, and then calls the following DrawImage method to draw the picture.

// Draw the Polylines on a Graphics object.
private void DrawImage(Graphics gr)
{
    // Draw the polylines.
    foreach (Polyline polyline in Polylines)
    {
        polyline.Draw(gr);
    }
}

The DrawImage method simply draws each of the program's Polylines on the Graphics object.

This technique is simple and works well for up to several hundred points. With more complicated drawings, there is a noticeable delay when the user draws new curves. To solve this problem, the program needs a more efficient method for creating new curves. For example, it could save a copy of the current drawing and then display a new copy that also includes the curve the user is currently drawing. (I'll try to make such an example when I have time.)

Download example