Click here to Skip to main content
15,867,704 members
Articles / Multimedia / GDI+

Extensions to DrawTools

Rate me:
Please Sign up or sign in to vote.
4.83/5 (52 votes)
7 Oct 2011CPOL5 min read 588K   17.4K   199   157
DrawTools library extended to include Layers, Zoom, Pan, Rotation

Updated 10/4/2011

Draw Tools Redux Image

Introduction

Alex Fr provided an excellent set of drawing tools in his DrawTools article and these tools serve as a basis for this article, which expands on the original toolset in the following ways:

  1. In addition to the basic Rectangle, Ellipse, Line and Scribble tools, this version adds PolyLine, Filled Ellipse, Filled Rectangle, Text and Image tools
  2. Multiple drawing Layers
  3. Zooming
  4. Panning
  5. Rotation

In this article, I will describe how Layers were implemented, as well as the Text and Image tools.

Background

See the original DrawTools article for details on how the basic application is built, class structure, etc.

It is also assumed that the reader has a working understanding of GDI+ fundamentals, including Matrices. For an excellent introduction to GDI+, see www.bobpowell.net.

Implementing Layers

Adding Layers to the application involved adding two classes, Layer and Layers, where Layer defines a single Layer and Layers defines the collection of Layers in an ArrayList.

Each Layer exposes the following properties:

C#
private string _name;
private bool _isDirty;
private bool _visible;
private bool _active;
private GraphicsList _graphicsList;

Note that the Layer contains the GraphicsList - this is the key to the whole thing - each Layer contains its own list of drawing objects instead of DrawArea. DrawArea is modified to declare a Layers collection instead of a GraphicsList collection:

C#
// Define the Layers collection
private Layers _layers;

When DrawArea is initialized, the Layers are initialized by creating the first Layer and setting it Active and Visible:

C#
public DrawArea()
{
// create list of Layers, with one default active visible layer
_layers = new Layers();
_layers.CreateNewLayer("Default");
_panning = false;
_panX = 0;
_panY = 0;
// This call is required by the Windows.Forms Form Designer.
InitializeComponent();
}

In the Layers class, the CreateNewLayer() method actually creates the new Layer:

C#
/// <summary>
/// Create a new layer at the head of the layers list and set it
/// to Active and Visible.
/// </summary>
/// <param name="theName">The name to assign to the new layer</param>
public void CreateNewLayer(string theName)
{
// Deactivate the currently active Layer
if(layerList.Count > 0)
((Layer)layerList[ActiveLayerIndex]).IsActive = false;
// Create new Layer, set it visible and active
Layer l = new Layer();
l.IsVisible = true;
l.IsActive = true;
l.LayerName = theName;
// Initialize empty GraphicsList for future objects
l.Graphics = new GraphicsList();
// Add to Layers collection
this.Add(l);
}

Note that any one or all Layers can be visible at the same time, but only one Layer may be active at any time.

You can control the Layers in the sample application by clicking on the Current Layer: name at the bottom of the application window - Click on the name ("Default") to open the Layers dialog:

Image 2

From this dialog, you can Add new Layers, change the names of the Layer(s), and change the Layer(s) visibility and which Layer is Active. The "New Layer" column is checked whenever you click the "Add Layer" button. To delete Layer(s), simply check the "Deleted" column and close the dialog with the "Close" button. Remember only one Layer may be active at any one time. You will be reminded of this if you attempt to have more than one Layer active. Also note the Active Layer must be Visible.

When the application runs, each object that is drawn is added to the GraphicsList maintained by the active Layer. Note this relationship is preserved through saving and re-opening a drawing file.

Layers come in very handy when you want to draw "on top of" another image. For example, the image at the top of this article contains two layers. The following image shows the same picture with the Background Layer turned off:

Image 3

Here is the same drawing with the Drawing Layer invisible and the Background Layer visible:

Image 4

Objects on Layers which are visible but not active cannot be selected, moved, deleted, etc.

Each drawing object is added to the correct Layer by the AddNewObject() method in the ToolObject class:

C#
protected void AddNewObject(DrawArea drawArea, DrawObject o)
{
     int al = drawArea.TheLayers.ActiveLayerIndex;
     drawArea.TheLayers[al].Graphics.UnselectAll();
     o.Selected = true;
   o.Dirty = true;
   drawArea.TheLayers[al].Graphics.Add(o);
     drawArea.Capture = true;
   drawArea.Refresh();
} 

Implementing Zooming, Panning, and Rotation

Zooming, Panning, and Rotation are implemented by adding a few variables and some code to the MainForm and DrawArea classes.

Zooming is controlled by buttons on the form, and also by the mouse wheel when Ctrl is held down.

Pan is controlled by the Hand button on the form, and can be cancelled by a right-click.

Rotation is controlled by buttons on the form - note Rotation affects the entire drawing.

Here is an example of all three in use:

Screenshot - DrawToolsRedux-3.png

The heart of this code is the BackTrackMouse() method, which takes the "apparent" mouse position and converts it to a valid point based on the current Zoom level, Pan position, and Rotation:

C#
/// <summary>
 /// Back Track the Mouse to return accurate coordinates regardless of 
 /// zoom or pan effects.
 /// Courtesy of BobPowell.net <seealso cref="http://www.bobpowell.net/backtrack.htm"/>
 /// </summary>
 /// <param name="p">Point to backtrack</param>
 /// <returns>Backtracked point</returns>
 public Point BackTrackMouse(Point p)
 {
     // Backtrack the mouse...
     Point[] pts = new Point[] { p };
     Matrix mx = new Matrix();
     mx.Translate(-this.ClientSize.Width / 2, -this.ClientSize.Height / 2, 
			MatrixOrder.Append);
     mx.Rotate(_rotation, MatrixOrder.Append);
     mx.Translate(this.ClientSize.Width / 2 + _panX, this.ClientSize.Height / 2 + 
			_panY, MatrixOrder.Append);
     mx.Scale(_zoom, _zoom, MatrixOrder.Append);
     mx.Invert();
     mx.TransformPoints(pts);
     return pts[0];
 }

This routine comes from Bob Powell's excellent website. Through the use of the GDI+ Matrix class, the mouse point passed to this method is moved (Translate), Rotated, and Scaled based on the current PanX, PanY, Zoom, and Rotation values. The important thing to remember is that anytime you need to determine where the mouse pointer actually is in your drawing, you must call this method. You will see this method used throughout the program in the DrawArea class as well as others. An example of its usage is shown here:

C#
private void DrawArea_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
{
     lastPoint = BackTrackMouse(e.Location);
     if (e.Button == MouseButtons.Left)
         tools[(int)activeTool].OnMouseDown(this, e);
     else if (e.Button == MouseButtons.Right)
     {
         if (_panning == true)
             _panning = false;
         ActiveTool = DrawArea.DrawToolType.Pointer;
     }
     //OnContextMenu(e);
}

The current zoom level is controlled by the following simple routine:

C#
private void AdjustZoom(float _amount)
{
    drawArea.Zoom += _amount;
    if (drawArea.Zoom < .1f)
        drawArea.Zoom = .1f;
    if (drawArea.Zoom > 10)
        drawArea.Zoom = 10f;
    drawArea.Invalidate();
    SetStateOfControls();
}

Then in the DrawArea.Paint() method, the zoom, pan, and rotation values are used to alter the way the canvas is painted:

C#
private void DrawArea_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
    Matrix mx = new Matrix();
    mx.Translate(-this.ClientSize.Width / 2, -this.ClientSize.Height / 2, 
			MatrixOrder.Append);
    mx.Rotate(_rotation, MatrixOrder.Append);
    mx.Translate(this.ClientSize.Width / 2 + _panX, this.ClientSize.Height / 2 + 
			_panY, MatrixOrder.Append);
    mx.Scale(_zoom, _zoom, MatrixOrder.Append);
    e.Graphics.Transform = mx;

    SolidBrush brush = new SolidBrush(Color.FromArgb(255, 255, 255));
    e.Graphics.FillRectangle(brush,
        this.ClientRectangle);
    // Draw objects on each layer, in succession so we get the correct layering.
    // Only draw layers that are visible
    if (_layers != null)
    {
        int lc = _layers.Count;
        for (int i = 0; i < lc; i++)
        {
            if(_layers[i].IsVisible == true)
                if(_layers[i].Graphics != null)
                    _layers[i].Graphics.Draw(e.Graphics);
        }
    }
    DrawNetSelection(e.Graphics);
    brush.Dispose();
}

Update - 8/25/2007 - Individual Object Rotation & Bug Fixes

The primary advancement in this update is the ability to rotate individual objects - when one or more objects are selected, clicking the Rotate tools will rotate those objects instead of the entire drawing surface.

There is one caveat, however - the selection rectangle for the rotated object is not rotated - if someone can help with this, I would greatly appreciate it!

This update also includes several small bug fixes reported by users - thanks to all for reporting!

History

  • 3/6/2007
    • Original article uploaded to The Code Project
  • 3/6/2007
    • Updated to include more information on zoom/pan/rotation
  • 8/25/2007
    • Updated Individual Object Rotation
  • 9/27/2007
    • Added the missing links to the new source code
  • 12/23/2009
    • Added Tooltip control which appears when mouse is over an object. Tooltip displays the Center coordinates of the object for Rectangle, Ellipse and Image objects. For other objects, Tooltip displays starting and ending coordinates. Text objects do not display Tooltip.
      This was implemented adding the Tooltip control to the ToolPointer class. Each Draw Object fills the TipText property and the MouseMove event in ToolPointer controls when the Tooltip is displayed and removed from the canvas. This implementation is not perfect, as the Tooltip flashes when displayed so is meant as an example of one way information about the object can be displayed.
      Perhaps a better way to do this would be to display information about the object in a separate "Information Window" and then only when the object is selected.
    • See the new source code for details.
  • 6/23/2010
    • Updated project to include object ordering fix that corrects the way objects are stacked when a file is opened
    • Updated project to Visual Studio 2010
    • See the new source code for details
  • 10/4/2011
    • Corrected several issues with Layers and layering

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
I develop software for a leading healthcare system in Northern Illinois.

Comments and Discussions

 
Praiseexcellent Pin
Southmountain11-Aug-22 16:19
Southmountain11-Aug-22 16:19 
QuestionWhat format should I convert to read a DWG file? Pin
Member 137749412-May-18 23:05
Member 137749412-May-18 23:05 
GeneralAdd "Show Grid" & "Snap function" Pin
hamduc112-Feb-16 7:32
hamduc112-Feb-16 7:32 
Hi Mark Miller,
Your codes are very nice. Could you please add functions allow:
1. turn on/off the grid. Same as the Visual Studio Design screen.
2. Ability to "snap" an object to grid line or "snap to object"

You can contact me at hamduc6@gmail.com


Thank you very much.
Questionthanks Pin
Jerry.he.china16-Jun-15 17:08
Jerry.he.china16-Jun-15 17:08 
SuggestionDouble buffering Pin
nba10-Apr-15 21:42
nba10-Apr-15 21:42 
QuestionGreat Job!!! Impressive!!!! Thank You.All the best!!! Pin
elim.projects1-Oct-14 0:01
elim.projects1-Oct-14 0:01 
Generalexcellent Pin
Member 107827952-May-14 16:50
Member 107827952-May-14 16:50 
QuestionImpressive ! Pin
Lurebu31-Mar-14 21:37
Lurebu31-Mar-14 21:37 
QuestionSpecifies a user-defined custom dash style Pin
tmp198620-Mar-14 9:14
tmp198620-Mar-14 9:14 
QuestionProblem for Layer Export Pin
michaelzhu30-Sep-13 13:58
michaelzhu30-Sep-13 13:58 
QuestionAdd drawarea to panel Pin
noinhotnn14-Aug-13 17:37
noinhotnn14-Aug-13 17:37 
QuestionSave background image with visuals to a file Pin
Todd Cherry25-Mar-13 4:15
Todd Cherry25-Mar-13 4:15 
AnswerRe: Save background image with visuals to a file Pin
meaningoflights4-May-13 18:12
meaningoflights4-May-13 18:12 
GeneralMy vote of 5 Pin
Joezer BH27-Jan-13 20:04
professionalJoezer BH27-Jan-13 20:04 
QuestionIs there any WPF version for Drawtools /extensions to Drawtools Pin
bmanikandan8610-Oct-12 21:53
bmanikandan8610-Oct-12 21:53 
AnswerRe: Is there any WPF version for Drawtools /extensions to Drawtools Pin
carazuza31-Oct-12 5:20
carazuza31-Oct-12 5:20 
QuestionGroup and ungroup objects Pin
bommc200327-Aug-12 16:25
bommc200327-Aug-12 16:25 
AnswerRe: Group and ungroup objects Pin
Member 99979233-May-13 22:24
Member 99979233-May-13 22:24 
QuestionBackground Color and Background Image Pin
alexandre.dutra30-May-12 9:57
alexandre.dutra30-May-12 9:57 
AnswerRe: Background Color and Background Image Pin
Mark Miller5-Jun-12 3:58
Mark Miller5-Jun-12 3:58 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey20-Feb-12 20:30
professionalManoj Kumar Choubey20-Feb-12 20:30 
GeneralMy vote of 5 Pin
alexandre.dutra9-Jan-12 13:10
alexandre.dutra9-Jan-12 13:10 
QuestionCan not add DrawTool.dll in toolbox Pin
sanang4-Jan-12 3:43
sanang4-Jan-12 3:43 
AnswerRe: Can not add DrawTool.dll in toolbox Pin
Mark Miller4-Jan-12 4:29
Mark Miller4-Jan-12 4:29 
GeneralMy vote of 5 Pin
alexandre.dutra27-Dec-11 3:33
alexandre.dutra27-Dec-11 3:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.