Library for simple drawing with jQuery
jeudi 8 novembre 2007
Simple but cross-browser library.
Applies SVG (using Keith Wood plugin for jQuery) or canvas method if supported on the client browser (includes explorercanvas patch for ie). If not, applies methods derivated from the work of Walter Zorn for compatibility.
example 1, a simple line :
example 2 : an ellipse
example 3 : a pie
example 4 : an artwork ?
Note : container’s position is important. In these examples, each container is ’position : relative ; width : 500px ; height : 120px ;’
Call
Insert call in your head section (requires jquery.svg.js and blank*.svg) :
in your body section, add the canvas class to containers :
set in you CSS container’s size, for example :
Functions
each function can receive an extra parameter : settings
settings can contain :
color : a string in a CSS format example : ’red’ or ’#00ff00’. Default : ’black’
stroke : an integer for the thickness of each line. default : 1
Example :
var settings = {color: '#00ff00', stroke: 3};
| function | description | example |
|---|---|---|
| drawLine(X1, Y1, X2, Y2) ; | Line from the first to the second pair of coordinates. | $("#mydiv").drawLine(20,50,453,40) ; |
| drawPolyline(Xpoints, Ypoints) ; | A polyline is a series of connected line segments. Xpoints and Ypoints are arrays which specify the x and y coordinates of each point as follows : var Xpoints = new Array(x1,x2,x3,x4,x5) ; var Ypoints = new Array(y1,y2,y3,y4,y5) ; | var Xpoints = new Array(10,85,93,60) ; var Ypoints = new Array(50,10,105,87) ; $("#mydiv").drawPolyline(Xpoints,Ypoints) ; |
| drawRect(X, Y, width, height) ; | Outline of a rectangle. X and Y give the co-ordinates of the left top corner. | $("#mydiv").drawRect(20,50,70,140) ; |
| fillRect(X, Y, width, height) ; | Filled rectangle. X and Y give the co-ordinates to the left top corner. | $("#mydiv").fillRect(20,50,453,40) ; |
| drawPolygon(Xpoints, Ypoints) ; | Polygon. Xpoints and Ypoints are arrays which specify the x and y coordinates of the polygon’s corners as follows : var Xpoints = new Array(x1,x2,x3,x4,x5) ; var Ypoints = new Array(y1,y2,y3,y4,y5) ; The polygon will be automatically closed if the first and last points are not identical. | var Xpoints = new Array(10,85,93,60) ; var Ypoints = new Array(50,10,105,87) ; $("mydiv").drawPolygon(Xpoints, Ypoints) ; |
| fillPolygon(Xpoints, Ypoints) ; | Filled Polygon. Parameters as for drawPolygon() | $("#this").fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87)) ; |
| drawEllipse(X, Y, width, height) ; | Outline of an ellipse. Values refer to the bounding rectangle of the ellipse, X and Y give the co-ordinates of the left top corner of that rectangle rather than of its center. | $("#mydiv").drawEllipse(20,50,70,140) ; |
| fillEllipse(X, Y, width, height) ; | Filled ellipse. Values refer to the bounding rectangle of the ellipse, X and Y give the co-ordinates of the left-top corner of that rectangle rather than of its center. | $("#mydiv").fillEllipse(20,50,71,141) ; |
| fillArc(X, Y, width, start-angle, end-angle) ; | Fills a pie section of an ellipse. Start-angle and end-angle may be integer numbers or decimalpoint values. Like with the other …Ellipse() functions, X and Y specify the left-top corner of the bounding rectangle. | $("#mydiv").fillArc(20,20,41,270.0,220.0) ; |
Download
This program is free software ; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation ; either version 2 of the License, or any later version.
