Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Magic Graphics

0.00/5 (No votes)
29 Oct 2008 3  
A library that lets you easily manipulate your drawings
Screenshot - MG.gif

Introduction

Have you ever wanted to move a specific part of your drawing in GDI+ and had to redraw the whole scene again?
With this library, you'll be manipulating your drawings as if they were alive!

Background

To be able to use this class, you only have to know a little bit about GDI+ in VB .NET or C#.

About Magic Graphics Project

This project was designed and developed by Abd Allah Diab; the project is designed to make drawing in .NET applications easier.

Moving shapes in a scene was very hard because you had to redraw the whole scene again with the shape in its new location, redrawing is a huge problem when you have to remember each shape's position and colors and so, rotating and scaling was also very hard.

Using this class, you can now easily move, rotate or scale your shapes by writing a single line, assume that r is a rectangle:

r.Move(New X, New Y)

The Structure of Magic Graphics

The namespace consists of:

  1. IShape (any shape Interface)
  2. Shape (base class for any shape)
  3. ShapeContainer (a class that holds the shapes in it so you can draw, move, rotate and scale without redrawing the whole scene)
  4. Ellipse, Rectangle and Lines (predefined shapes that you can use in your application)

IShape Structure

a. Methods

Name

Parameters

Description

Move

X,Y: Integer

Moves the shape to the given X,Y.

Rotate

Angle: Single Float

Rotates the shape with the given angle in degrees.

Adds the given angle to the previous angle.

Scale

Dx, Dy: Single Float

Scales the shape with the given dx, dy.

Multiplies its height by dy, and its width by dx.

ResetRotation

-

Resets the rotation of the shape to 0.

ResetScale

-

Resets the scale of the shape to its original scale.

Render

-

Draws the shape in its location and its rotation and scale in its container.

ToString

-

Returns a string that describes the shape.

SetContainer

Container:ShapeContainer

Sets the container of the shape so the shape will be drawin in it.

b. Properties

Name

Read Only

Type

Description

Center

No

System.Drawing.Point

Gets or sets the center point of the shape that it will rotate at.

Location

Yes

System.Drawing.Point

Gets the current location of the shape, and can be changed using Move method.

Height

No

Integer

Gets or sets the height of the shape without scaling it.

Width

No

Integer

Gets or sets the width of the shape without scaling it.

Rotation

Yes

Single Float

Gets the current rotation of the shape according to its original state in degrees.

ScaleX

Yes

Single Float

Gets the current scale on X of the shape according to its original state.

ScaleY

Yes

Single Float

Gets the current scale on Y of the shape according to its original state.

Container

Yes

ShapeContainer

Gets the shape container of the shape.

Shape Structure

The Shape class implements the IShape interface, but it has a Dispose method that accepts a Boolean value as a parameter that indicates whether to remove the shape from the container or not.

ShapeContainer Structure

a. Methods

Name

Parameters

Description

New

Graphics: System.Drawing.Graphics

Width, Height: Integer

BackgroundColor: System.Drawing.Color

vBMP(Optional): System.Drawing.Bitmap

Constructor that builds a new instance of ShapeContainer that will draw in Graphics using the Width, Height and BackgroundColor to draw, then will put the whole drawing in vBMP if was passed, if vBMP is nothing then the class will draw in its own Bitmap.

AddShape

Shp: Shape

Adds the passed shape to the container.

Clear

-

Clears the ShapeContainer from shapes.

Flush

-

Draws the result in the Graphics object that was passed in the constructor.

RemoveShape

Shp: Shape

OR

Index: Integer

Removes the shape at the passed Index or removes the shape passed to it if it was found in it.

Render

Flush(Optional): Boolean

Redraws the whole scene again and saves it in the bitmap, if Flush is True then the bitmap will be drawn in the Graphics object.

b. Properties

Name

Type

Description

AutoFlush

Boolean

If true then the Render method will always have Flush set to True.

Graphics

System.Drawing.Graphics (ReadOnly)

Gets the graphics object that was passed to the constructor.

Shape

Shape(ReadOnly, Default)

Gets the shape at a specified index.

c. Fields

Name

Type

Description

BMP

System.Drawing.Bitmap

Gets the Bitmap object that the scene will be rendered in.

ShapesL

List(Of Shape)

Gets the shapes list in this container.

Implementing Magic Graphics in your Application

Here's an example that shows how to draw an Ellipse and a Rectangle using Magic Graphics class:

    Imports System.Drawing
    Imports System.Drawing.Drawing2D
    ' Create a Form and put a PictureBox on it, 
    ' and put a Button to draw an ellipse and another to draw a rectangle.
    ' Now let's add a Timer to move and rotate, Timer1 (Interval = 100; Enabled = True).
    Public Class FormMain
        Dim SC As MagicGraphics.ShapeContainer
        Private Sub FormMain_Load(ByVal sender As System.Object, _
			ByVal e As System.EventArgs) Handles MyBase.Load
            SC = New MagicGraphics.ShapeContainer(PictureBox1.CreateGraphics, _
			PictureBox1.Width, PictureBox1.Height, Color.Black)
            PictureBox1.Image = SC.BMP
            SC.AutoFlush = False
        End Sub
    
        Private Sub ButtonRectangle_Click(ByVal sender As System.Object, _
			ByVal e As System.EventArgs) Handles Button1.Click
            Dim Sq As New MagicGraphics.Rectangle(New Pen(Color.Black, 3), _
					Brushes.Aqua, 60, 20, 50, 50)
            Sq.FillingBrush = New Drawing2D.LinearGradientBrush(New Point(0, 0), _
				New Point(60, 0), Color.Yellow, Color.Red)
            SC.AddShape(Sq)
            'From here you can easily manipulate this Rectangle by refering to Sq.
        End Sub
    
        Private Sub ButtonEllipse_Click(ByVal sender As System.Object, _
			ByVal e As System.EventArgs) Handles Button1.Click
            Dim El As New MagicGraphics.Ellipse(New Pen(Color.Black, 3), _
					Brushes.Olive, 60, 88, 50, 71)
            El.FillingBrush = New Drawing2D.LinearGradientBrush(New Point(0, 0), _
				New Point(30, 0), Color.Red , Color.SteelBlue)
            SC.AddShape(El)
            'From here you can easily manipulate this Ellipse by refering to El.
        End Sub
    
        Private Sub Timer1_Tick(ByVal sender As System.Object, _
			ByVal e As System.EventArgs) Handles Timer1.Tick
            If SC.ShapesL.Count = 0 Then Exit Sub
            For Each shp As MagicGraphics.Shape In SC.ShapesL
                shp.Rotate(10) 'Rotates every shape in this container by 10 degrees.
                shp.Move(shp.Location.X + 1, shp.Location.Y + 1) 'Offsets every shape 
		' in this container by 1 pixel on X axis, and 1 pixel on Y axis.
            Next    
        End Sub
    End Class   

The result must be something that looks like the picture above.

Custom Shapes

This class lets you design your own shapes by inheriting the base class Shape. You must write the Render sub (void) and the ToString function. You can add properties, events and other things to your shapes and have a great library of your own shapes.

Summary

This class, as you've seen, is very easy to implement and use, and it really saves a lot of time in redrawing.

Have fun and happy drawing.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here