Thursday, December 21st, 2006
Create cross browser vector graphics with Dojo
Dylan Schiemann, co-creator of the Dojo toolkit, has written a broad piece on creating cross browser vector graphics with Dojo.
The article delves into the new dojo.gfx library that abstracts the slight mess of SVG vs. Canvas vs. VML.
One of the examples in the article discusses drawing a clock with this snippet that shows drawing the clock hands, along with their shadows:
JAVASCRIPT:
-
-
this.shadows.hour.shadow = this._initPoly(this.surface, hP)
-
.setFill([0, 0, 0, 0.1]);
-
this.hands.hour = this._initPoly(this.surface, hP)
-
.setStroke({color: this.handStroke, width:1 })
-
.setFill({
-
type:"linear",
-
x1:0, y1:0, x2:0, y2:-27,
-
colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]
-
});
-
this.shadows.minute.shadow = this._initPoly(this.surface, mP)
-
.setFill([0, 0, 0, 0.1]);
-
this.hands.minute = this._initPoly(this.surface, mP)
-
.setStroke({color: this.handStroke, width:1 })
-
.setFill({
-
type:"linear",
-
x1:0, y1:0, x2:0, y2:-38,
-
colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]
-
});
-
What features are supported
- Strokes (borders)
- Fills
- Shapes and Paths
- Opacity
- Linear Transformations
- Rounded Corners
If you have wanted "the ability to draw and modify non-rectangular, browser-native shapes" then check out the article and dig deeper:
- Dojo: documentation, book, and download
- Clock: demo and source
- Circles: demo and source
- Charts: demo
- Canvas: mozilla tutorial
- Comet: Cometd, Lightstreamer, KnowNow, and DWR
4.2 rating from 23 votes
fantastic tool for friendly interfaces
-> walter zorn
All obvious reasons why I should be supportive of this aside - this is really genuinely super cool stuff. Great work guys. :)
love dojo
I would love to see some performance metrics of this across browsers to get a sense for how fast this is.
Doesn’t work here. It first froze firefox for a few seconds then threw a bunch of exceptions.
Alexei: we’re working on a profiling testcase. From a qualitative perspective, Firefox 2 is much better than 1.5, and 3 alpha is better than 2. IE’s VML is the slowest, and for many operations, Safari’s WebKit is the fastest.
Andy: what specifically doesn’t work. If you want to contact me with more information, it would be helpful to track things down. Everything in the article was tested across browsers and platforms, but versions of Firefox prior to 1.5 did not support native vector graphics.
Dojo is great!
There is one more demo, which predates a clock widget and 100 circles: an interactive analog clock. It demonstrate an interactive aspect of dojo.gfx — you can set your own time by rotating hands. Try it.
@Dylan: It was throwing a bunch of exceptions in the Clock example while the rest were working. I am using FF2. Anyway, I tried it once more now and it seemed to work.
The charting engine was (essentially) profiled by Ryan Breen, see this entry:
http://ajaxian.com/archives/measuring-the-aggregate-performance-of-ajax-applications
: I am using FF2 too. No exceptions in the Clock example.
another nice vector drawing javascript lib (no plugin required)
http://www.openjacob.org/draw2d/ for the vertor component
- or -
http://www.openjacob.org for the complete AJAX RAD toolkit.
greetings
Andreas
Dago best tool! may be create web screensaver?
oh yes, i also think like that, u will see in the future that micro soft will show a new software which will cover all the facilities and all the programmes by the brower but right now firefox is going on the top and most of the people taking a lot of benefits from the firefox, and i and i am also giving the first priority to the firefox because it giving me all those actions or facilities which the every person wants.
My experience tells me that we should keep senior roles close to the heart of the company and push output responsibility to the overseas studios management.