You may want to check out: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
The JavaScript Vector Graphics library allows functions such as: Draw Line, Circle, Ellipse (Oval), Polyline, Polygon, Rectangle using a syntax very similar to Java Swing. Quoting form the Web site: "This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you don't have JavaScript experience. Documentation. Another goal during development of this JavaScript Draw Shapes Vector Graphics Library was to achieve optimized performance and cleanly arranged pixel stair-step patterns (pixel-optimization)." This library is licenced under the LGPL .... -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jörn Zaefferer Sent: October 27, 2006 11:41 AM To: jQuery Discussion. Subject: Re: [jQuery] Oooh! These are pretty! Stephen Woodbridge schrieb: > Sam, > > Yes, some thing like that would be great. It would also be nice to > handle arrays of locations without the 'px' so it is easy to do math on > them. > > // place a circle at the center of some container > $("#container").drawShape("circle", { origin: "centre", radius: 30}) > > // draw a circle > $("#container").drawShape("circle", { origin: [5,8], radius: 30}) > > // draw multiple circles and style them all the same > $("#container").drawShape("circle", { origin: [[5,8],[30,45],...], > radius: 30, style: {color: "red", opacity: .5, border-color: #900, > border-style: "solid"}}) > > // draw a polyline > $("#container").drawShape("line" { path: [[5,8],[30,45],...], style: > {color: "red", line-style: "dashed", lineWidth: 2}}).bind("mouseover", > function(e){alert("I'm a line");}); > > I also think there is something to be said for creating shape objects like: > > var redcircle = { > id: "circle01", > type: "circle", > x: 5, > y: 8, > radius: 30, > style: {color: #f00;}, > }; > var bluecircle = { > id: "circle02", > type: "circle", > x: 5, > y: 8, > radius: 10, > style: {color: #00f;}, > }; > var shapes = []; > shapes.push(redcircle); > shapes.push(bluecircle); > > // add to circles, then hide the larger > $("#container").addShape(shapes); > $("#circle01").hide(); > > or > > // add two circles (nested), then hide both of them > $("#container").addShape(redcircle); > $("#circle01").addShape(bluecircle); > $("#circle01").hide(); > I like the idea. Whoever tries to implement it, should have a deep look at GUI frameworks like Swing or SWT (for Java) and check how their drawing APIs look like. -- Jörn Zaefferer http://bassistance.de _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/ _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
