Symmetry Drawing Tool

• Download source and executable - 361 KB

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

Open - Select the bitmap file to load as the background
Save - Save the drawing.
Axes - Brings up a edit box so you can change the number of symmetry Axes
Shapes - Select the drawing shape from the popup menu. The available shapes are Line, Arc, Curve, Text and Bitmap.
Mirror - Toggles mirroring around each axis.
Filled - Draw the curves filled in.
Colors - Lets you change the color of the lines or texts.
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.
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.

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.

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.