Drawing Graphics In ASP

A common issue with developing web sites for customers is sometimes the unfortunate inability to install server side components for performing specific tasks. A common question asked by beginners to ASP is how to draw graphics and send them to the browser. Normally, this task requires either client-side Java or server side COM objects to get the job done, and it has generally been accepted that this will always be the case in pre-.NET environments.

The following class can change your attitude towards creating images

This class provides a simple canvas with which you draw things on, it is written in ASP and is initialised simply by:


<!--#include file="canvas.asp"-->
<%
Set objCanvas = New Canvas ' Create the object
objCanvas.GlobalColourTable(0) = RGB(255,255,255) ' First colour index to white
objCanvas.GlobalColourTable(1) = RGB(0,0,0) ' Second colour index to black
objCanvas.Resize 160,120,false ' Resize the canvas to 160x120, don't preserve the existing image
objCanvas.ForegroundColourIndex = 1 ' Set the drawing pen colour index to 1 (black)
objCanvas.Ellipse 100,100,30,20 ' Draw an ellipse in black, with two radii, 30 and 20 pixels
objCanvas.Circle 50,50,10 ' Draw a circle in black, radii of 10 pixels
objCanvas.Write ' Send the image to the browser
%>



Further instructions on using the class are included with the source files. This class supports the following drawing methods:

Copy X1,Y1,X2,Y2,X3,Y3 - Copy a region from X1,Y1,X2,Y2 to X3,Y3
Flood X,Y - Floodfill a region with the drawing pen colour, starting at X,Y
Line X1,Y1,X2,Y2 - Draw a line with the pen colour, from X1,Y1 to X2,Y2
Circle X,Y,Radius - Draw a circle at X,Y with a radius in pixels
Ellipse X,Y,Radius1,Radius2 - Draw an ellipse at X,Y with the two radii of Radius1 and Radius2
DrawTextWE X,Y,Text - Draw text from west to east at X,Y. Text is a string
DrawTextNS X,Y,Text - Draw text from north to south at X,Y. Text is a string
Clear - Clear the canvas to the current background colour index
Resize Width,Height,Preserve - Resize the canvas to Width and Height, set preserve to keep the current canvas image
Write - Send the image to the browser

And also the following properties:

Pixel(X,Y) - Sets or retrieves the current pixel colour index value
GlobalColourTable(Index) - Sets or retrieves the current global colour table RGB value
ForegroundColourIndex - Sets or retrieves the current drawing pen colour index
BackgroundColourIndex - Sets or retrieves the current background colour index
Version - Retrieves the current version of the class

The fonts definitions are included in font.asp, and can be redefined by editing this file. Instructions are also included in the accompanying documentation.

blog comments powered by Disqus