Click here to Skip to main content
Click here to Skip to main content
Go to top

Symmetry Drawing Tool

, 31 May 2004
Rate this:
Please Sign up or sign in to vote.
An article describing the development and use of the Symmetry Drawing Tool.

Example Drawing

Introduction

This program is an entry into the .NET Compact Framework competition.

Play with it and please remember to vote for my article.

Application User Interface

This application is a fun way to create some unique drawings. This section describe the application and how it can be used.

The SymmetricDrawCE.exe application runs on both a .NET capable PDA and on the desktop. The width and height of the application are 240x320 in both cases.

The SymmetricDraw.exe application runs only on Windows.NET.

The two applications are identical, except for the fact that you can rotate bitmaps and text on and Windows.NET version.

Menu Icons

Sample Image - maximum width is 600 pixels Open - Select the bitmap file to load as the background
Sample Image - maximum width is 600 pixels Save - Save the drawing.
Sample Image - maximum width is 600 pixels Axes - Brings up a edit box so you can change the number of symmetry Axes
Sample Image - maximum width is 600 pixels Shapes - Select the drawing shape from the popup menu. The available shapes are Line, Arc, Curve, Text and Bitmap.
Sample Image - maximum width is 600 pixels Mirror - Toggles mirroring around each axis.
Sample Image - maximum width is 600 pixels Filled - Draw the curves filled in.
Sample Image - maximum width is 600 pixels Colors - Lets you change the color of the lines or texts.
Sample Image - maximum width is 600 pixels Stamp - Copies the current lines or text to the background. Note that on the Windows.NET version, you can use the ALT can as a shortcut for this button.
Sample Image - maximum width is 600 pixels Clear - Erases the background.

Line and Arc Shape Controls

The next two pictures show sample of Lines and Arcs in the application. The user has placed one filled blue curve and is working with an 4 point non-closed green curve.

The picture next to it shows the controls used to manipulate the curve. There are four red circles which define the control points for the Bezier curve.

The red square in the middle of the shape is used to move the shape around. The circle that is connected to the center square is used to rotate all of the control points.

There are also control points for the axes. The gray square at the center of all the axes allows you to translate the entire axes and control points. The circle control on the end of one of the axes allows you to rotate everything around the center square.

Example Drawing Inset

Bitmaps and Text Shape Controls

These samples below show how text and bitmaps can be used. You can use the controls to position the text. NOTE: That on the Windows.NET version you can also rotate the text and bitmaps.

Example Drawing Example Drawing

Source Code Considerations

Two Projects - This article contains two projects SymmetricDraw and SymmetricDrawCE. I started with only one project, but the resource files are different between regular .NET and .NET CF, so I had to split them up.

So, remember to load the correct project for the correct platform.

Double buffering - both projects use double buffering, but they are implemented differently. In Windows.NET I used the built in double buffering.

On .NET CF, I had to take over the painting in order to perform double buffering. This is the routine that does it.The .NET compact framework doesn't support bezier curves. So I found a Java implementation and converted it to C#. To create the controls for rotating shapes, I use an array of points inside the control. These points are then rotated around a defined center point as the user moves the mouse.

private void ReDraw()
{
    Graphics g = CreateGraphics();

    // Define Graphics object for buffer
    Graphics bufferedGraphics = Graphics.FromImage(bufferBitmap);

    bufferedGraphics.DrawImage(bmpBack, 0, 0);
    symTool.DrawSymShapes(bufferedGraphics);
    symTool.DrawGuides(bufferedGraphics);
    g.DrawImage(bufferBitmap,0,0);

    g.Dispose();
    bufferedGraphics.Dispose();
}

Bezier Curves -

class curve
{
    public addCurve(ref Point[] pnts, Point p0, Point p1, Point p2, Point p3)
      //Adds a Bezier curve to the given array of points 
      //using the given control points.
    public draw(ref Graphics drawingSurface, ref Pen pen, 
                ref SolidBrush brush, ref Point[] pnts, bool bFilled)
     //Draws the curve on the surface. Can be filled or open curve.
}

Rotating shapes -

class SymmetryTool
{
    SetPos()
        //Sets the X,Y position of a single point.
    SetCenter()
        //Sets the rotational center for this point.
    CalcAngle()
        //Calculates the angle of this point for its center point.
    CalcRad()
        //Calculates the radius from this point to the center point.
    ClickOn()
        //Finds the point that is Clicked on.  
        //Or return -1 for none selected.
    DrawGuides()
        //Draw the control guides on the Graphics surface.
    DrawSymShapes()
        //Draw the shapes on the Graphics surface.
}

Saving Bitmaps - Both version can load and save bitmaps. But the .NET CF doesn't have saving bitmaps built into it, so I had to use custom code. The only code I found to save bitmaps is extremely slow. The way it works is to cycle through each pixel of the bitmap. Any routine that has to touch each pixel individually is going to be slow. I've read that the next version of .NET CF will contain a bitmap save routine.

History

  • 5/28/2004 - Initial version.

License

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

Share

About the Author

Doug Mair
Software Developer Corpria LLC
United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey22-Feb-12 0:14 
QuestionWhat license is provided with this sample? Pinmemberjpigott9-Jan-10 3:23 
Generalappreciate Pinmembermdrizwan_118-Jul-09 2:12 
QuestionHow to select a line ? Pinmemberdharmendersharma25-Aug-08 20:36 
AnswerRe: How to select a line ? PinmemberGandalf731-Aug-08 7:21 
GeneralI cant believe - It works great PinmemberNasenbaaer19-Oct-06 23:43 
GeneralVery cool program, but ... PinmemberJohn Cardinal1-Jun-04 9:07 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 1 Jun 2004
Article Copyright 2004 by Doug Mair
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid