Shane O'Sullivan's technical blog… really ties the room together

Archive for the ‘vml’ Category

Musings on Browser based graphics with dojox.gfx

Posted by Shane O'Sullivan on November 24, 2008

I’m messing around with dojox.gfx at the moment, the Dojo Ajax Toolkit‘s very cool but difficult to use cross browser graphics package. I’m finding out, slowly, its little quirks, annoyances and more.  As I do I will be posting short blog posts so as to both document them for my own sake, and for the enlightenment of you, the good reader.

FYI: The official docs are here –

#1 – Adding mouseenter and mouseleave events

When drawing a shape, if it does not have a fill color it is considered to be one dimensional, that is, just a line.  Therefore if you want know when the mouse enters and leaves the shape using code such as:
shape.connect("mouseenter", function() { console.log("entry");});
shape.connect("mouseleave", function() { console.log("exit");});

moving the mouse into the shape (e.g. a rectangle or circle) will fire both event almost simultaneously.  To prevent this, you have to set a fill on the object, using the setFill function, and it will then be treated a two dimensional and the mouse events will work as you would expect with HTML DOM elements.

#2 – Which shape is in front of which is decided by the order they are added to the graphics surface

Graphics work differently to HTML and do not have a z-index property to determine which is displayed in front of which.  However a simple function is available on each shape that will bring it to the front, called strangely enough, moveToFront(), e.g.
var surface = dojox.gfx.createSurface(someDomNode, 100, 100);
var text = surface.createText({x: 10, y: 20, text:"Hello World!!"});
var rect = surface.createRect({x: 1, y: 1, width: 50, height: 50});
// At this point the text is not visible as the rectangle is in front of it.
// The text is now in front of the rectangle and looks to be surrounded by it

#3 – A mouseenter event on one element causes a mouseleave on the previous element

In the previous example, we had a rectangle surrounding some text.  If we wanted to do something to the rectangle when the mouse entered it, and when it left, such as change the fill color,  the text would mess this up.  This is because when the mouse moves over the text, a mouseleave event would fire for the rectangle, even though the mouse is still inside it.  To fix this, I used a simple delay on executing the code for the mouseleave event, and cancelled it if the mouse entered the text e.g.
var timer;
rect.connect("mouseenter", function(){rect.setFill('blue');});
rect.connect("mouseleave", function() {
timer = setTimeout(function(){rect.setFill('white');}, 50)
text.connect("mouseenter", function(){
if (timer) {
timer = null;

Posted in Ajax, Dojo, dojox, dojox.gfx, svg, Technical, vml | 2 Comments »

%d bloggers like this: