SOS

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

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 – http://docs.dojocampus.org/dojox/gfx

#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});
rect.setFill("white");
// At this point the text is not visible as the rectangle is in front of it.
text.moveToFront();
// 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) {
clearTimeout(timer);
timer = null;
}
});

About these ads

2 Responses to “Musings on Browser based graphics with dojox.gfx”

  1. David said

    Nice post. I think there is a typo in the last example. The timer delay set codes should be for the event “mouseleave”, where “mouseenter” is repeated there.

  2. Hi David,

    Thanks for that, it’s been fixed now

    Shane

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: