As someone that has used Flash for most of his professional career, a certain company's decision to not support Flash in its smaller devices has left me quite annoyed. A program and a language I enjoy using are now far less desirable to clients.
Luckily, improvements in browser JavaScript engine's efficiency has meant that most of the standard effects clients want are easily creatable with a few simple lines of my beloved jQuery. However, that doesn’t replace Flash completely, what about more complex graphics? Sure, people are always finding new and exciting ways to use general JavaScript to great effect, look at the animated Google logos. For example, their use of png background images as FlipBook videos is ingenious; but there are things that JavaScript really struggles to do by itself: drawing for example. For this it needs the HTML 5 Canvas Tag.
Now, I’ve used Canvas sparingly before, I’ve created an analogue clock in the past using it (though CSS transformations would also have worked for this one). Of course, Flash and Canvas versions had to be made so it would work both in the old IEs (Flash will always be needed as long as they are still being used; ExplorerCanvas does very well at compensating for their shortcomings, though, if you don’t mind the legal requirements) and the Flash-less gadgets. I decided to make something that would have been near impossible without either Flash or Canvas, a full feature image map generator.
I would usually use a program like Fireworks to do this as its image map tools are really user friendly; but not everyone has Fireworks and this is an experiment. After all, what would the world be like if people didn’t try to be different? We’d all be using the same phone, driving the same car, eating the same food, wearing the same clothes. It would be, in a word, boring, so away I went.
To create this, I decided to expand my Canvas horizons, so took a look around and soon came across a great object model called Fabric made by Kangax (https://github.com/kangax/fabric.js/). It works very efficiently and made otherwise complex actions simple. I couldn’t resist having a play so got to work.
Now for image maps, there are three types: Rectangle, Circle and Polygon. I’d have to make them all to really get this right. Rectangle was pretty simple really; the default Rect object of Fabric could be used for that one. Circle was a little trickier, for that I couldn’t allow the circle to be scaled in such a way it lost its aspect ratio. Fabric caters for this too, though, by allowing you to lock scaling in one direction alone. Polygon is where it got trickier, being able to add polygon points to the shape meant having to re-centre the polygon so the bounding box worked correctly - a quick function to do the maths sorted that.
I couldn’t allow the polygon to be selected either, as that would get in the way of the point addition. To sort this, I added a Finish Polygon button so it’s only finished when the user says so, so then you can select the object. Once this is done, I’d want to be able to edit the polygon so I added controls to the points on selection of the polygon, so it can be adjusted. Along with blur events to update fields for title, and the link, a button to delete and a button to render the details as image map code, it feels quite complete.
I thought the experiment went well, it’s easy to use and looks cool. You’ll need to use a Canvas compatible browser to use it though. You can try the demo here
Tags: Fabric, Image, Map, Canvas