JavaScript vector-draw library
How
many times you wished if you could only draw an arrow on your web page?
Or few lines here and there? Unfortunately, HTML offers nothing in this
department, and using images takes bandwidth and slows down the loading
of your pages.
Courtesy of Walter Zorn, you can now use JavaScript to draw objects on your web pages. Fire up your JavaScript Editor, follow the instructions below and you will be drawing shapes on your web pages in no time.
 Click here to download the JavaScript vector-draw library (6KB) under LGPL license
Use the library to draw:
 Lines
Circles and ellipses / ovals
Rectangles
Poly-lines and polygons
Text
Images
Note:
The library is cross-browser and fast. However, due to the limitations
of HTML, drawing on your web pages using JavaScript is slower compared
to drawing in stand-alone applications. If you want to see more
detailed explanations on the workings of the library, visit Walter
Zorn's website at www.walterzorn.com.
How to use the library in 3 quick steps
Copy the library in the same folder with the web pages using it and add the following in the <head> section:
<script type="text/javascript" src="wz_jsgraphics.js"></script>
In the body of the document, specify one or more <div> tags for drawing, for example:
<div id="Canvas" style="position:relative;height:5px;width:5px;"></div>
Draw!
// Call jsGraphics() with no parameters if drawing within the entire document
var jg = new jsGraphics("Canvas"); // Use the "Canvas" div for drawing
jg.setColor("maroon");
jg.fillEllipse(450, -5, 40, 70);
jg.setStroke(1);
jg.setColor("#ff6666");
jg.drawPolyline(new Array(90, 640, 90), new Array(0, 25, 90));
jg.setColor("green");
jg.drawRect(100,40,200,18);
jg.setColor("blue");
jg.setStroke(Stroke.DOTTED);
jg.drawRect(-20,0,32,50);
jg.drawEllipse(250,10,100,100);
jg.paint();
Functions
clear();
Purpose: Clears the content between the <div>..</div> tags used for drawing.
Example:
jg.clear();
drawEllipse(x, y, width, height);
Purpose: Draws an ellipse.
Example:
jg.drawEllipseEllipse(0, 0, 100, 200);
drawImage("URL", x, y, width, height, eventHandler);
Purpose: Displays an image at the given location, with the optional event handler.
Examples:
drawImage("MyImage.gif", 10, 10, 100, 200);
drawImage("MyImage.gif", 10, 10, 100, 200, 'onmouseover="DoSomething()"');
drawLine(x1, y1, x2, y2);
Purpose: Draws the line from the point x1, y1 to x2, y2.
Example:
jg.drawLine(0, 0, 100, 200);
drawPolyline(Xpoints, Ypoints);
Purpose: Given an array of points, draws multiple connected lines.
Example:
jg.drawPolyline(new Array(0,10,200), new Array(0,10,100));
drawRect(x, y, width, height);
Purpose: Draws a rectangle.
Example:
jg.drawRect(0,0, 100,200);
drawPolygon(xPoints, yPoints);
Purpose: Given an array of points, draws a polygon.
Example:
jg.drawPolygon(new Array(0,10,200), new Array(0,10,100));
drawString("text", x, y);
Purpose: Displays text at the given location.
Example:
jg.drawString("Hello World!", 10, 10);
drawStringRect("text", x, y, width, "justification");
Purpose: Displays justified text of the specified width. The text justification can be:
"left"
"center"
"right"
"justify"
Example:
jg.drawString("Hello World!", 10, 10, 500, "center");
fillEllipse(x, y, width, height);
Purpose: Draws a filled ellipse.
Example:
jg.fillEllipse(0,0, 100, 200);
fillPolygon(Xpoints, Ypoints);
Purpose: Draws a filled polygon.
Example:
jg.fillPolygon(new Array(0,10,200), new Array(0,10,100));
fillRect(x, y, width, height);
Purpose: Draws a filled rectangle.
Example:
jg.fillRect(0,0, 100, 200);
paint();
Purpose:
To optimize performance, library functions generate the drawing code
internally. The paint() function must be called to do the actual
drawing.
Example:
... A set of calls to drawing functions here ...
jg.paint();
setColor("#HexColor");
Purpose: Specifies the color to be used by subsequent drawing functions.
Examples:
jg.setColor("#ff6666");
jg.setColor("blue");
setFont("font-family", "size+unit", fontStyle);
Purpose: Specifies the font properties to be used by the drawString(); function. Available font styles are:
Font.PLAIN
Font.BOLD
Font.ITALIC
Font.ITALIC_BOLD
Example:
jg.setFont("Times New Roman", "10px", Font.PLAIN);
setPrintable(boolEnable);
Purpose: Enables printing of JavaScript-generated drawings. Note that there is a performance cost: the rendering slows down.
Example:
jg.setPrintable(true);
setStroke(thickness);
Purpose: Specifies the pen thickness to be used by subsequent drawing functions.
Example:
jg.setStroke(3);
...
Click here to find out more about JavaScript Editor and instantly spice up your web pages
|
