A Drawing Canvas in C#

Last modified: Dec 30, 2001

This project is the beginnings of a framework for experimenting with graphics techniques, and in the process learn how to create Windows applications using Windows Forms and the .NET Framework.

Download the code, GraphicsExplorer.zip , and unzip it into a temporary directory.

In Visual Studio create a C# Windows Application and call it GraphicsExplorer.

Delete Form1 from your project, by right clicking on it in Solution Explorer and selecting delete from the popup menu. From the downloaded source code, copy the files from the GraphicsExplorer dir to your new GraphicsExplorer dir. To add these to your project, right click on GraphicsExplorer project in the Solutions Explorer window and select Add then Add Existing Item from the popup menu. In the File Select popup select all the .cs files except Assembly.cs and click Open.

In Solution Explorer right click on Solution 'GraphicsExplorer', and select Add then New Project. Make this a C# Class Library called Art. Delete Class1.cs from the project. Copy the source code from the Art dir in the download into your new Art dir, then add them to the Art project.

In Solution Explorer, under the GraphicsExplorer project, right click on References and select Add References. On the Projects tab select the Art project, and click the Select button then the OK button. Add a reference to System.Drawing.dll to the Art project.

Build the Solution, then run the application.

Here is an example of the Mandelbrot Set.

The drawing code for the Fractal Trees, Snow Flakes, Hilbert Curves, Sierpinski Curves, Peano Curve, Sierpinski Gasket and Mandelbrot Set, was adapted from the VB code in the book Visual Basic Graphics Programming by Rod Stephens.

The program has a Canvas class, derived from a UserControl. An abstract DrawingObject class is used as a base for Drawing objects. Drawing Objects have a Render function, to render itself using a Graphics object. A DrawingObjectGroup Class is used to define collections of Drawing Objects.

To make the drawing code more reusable, it was placed in a Library dll.

The following ASP.NET example requires you to have IIS 5 installed and running on your development system.

To see how this code is used for generating web page graphics using ASP.NET, add an ASP.NET Web application project to the Solution. Call it WebArt. In the WebArt project add a reference to the Art project. Add a Web Form to the project and call it SnowFlake.aspx.

Add contentType="image/jpeg" to the @Page directive at the top of SnowFlake.aspx. In the code behind file change the Page_Load funtion to the following:

private void Page_Load(object sender, System.EventArgs e)
{
   Response.Clear();
   Bitmap bmp = new Bitmap( 300, 300, PixelFormat.Format24bppRgb );
   Graphics g = Graphics.FromImage( bmp );
   g.Clear( Color.White );
   DrawingObjectGroup draw = new DrawingObjectGroup();
   Art.SnowFlake snoFlake = new Art.SnowFlake( draw );
   snoFlake.Height = 290;
   snoFlake.Width = 290;
   snoFlake.Draw();
   draw.Render( g );
   bmp.Save( Response.OutputStream, ImageFormat.Jpeg );
   g.Dispose();
   bmp.Dispose();
   Response.End();
} 

Add using System.Drawing; & using Art; to the top of the code behind file.

Set the WebArt project as the Startup Project by right clicking on WebArt in the Solution explorer and select Set As Startup Project form the popup menu. Right click on SnowFlake.aspx in Solution explore and set it as the startup page. Run the project. You should get a web page with a snow flake draw on it.

To make things more interesting lets use the aspx page in an image tag on a regular web page.

Add an HTML Page to the WebArt project and call it test.html. Add the following HTML to the body of the page.

<h1>An aspx page in an image tag.</h1>
<IMG alt="" src="SnowFlake.aspx">

Set test.html as the startup page and run the application again.