Tuesday, May 4th, 2010

Raphael++

Category: Examples, UI

<>p>Raphael is pure goodness. Dmitry gave a fantastic talk at JSConf, and his library never fails to impress.

There have been a few interesting posts recently. Trotter Cashion kicks things into gear as he declares his love and then goes on to show how you can unit test Raphael with some mocks.

Then we learn how easy it is to write a “plugin” a la jQuery, such as adding an arrow abstraction:

javascript
< view plain text >
  1. Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
  2.     var angle = Math.atan2(x1-x2,y2-y1);
  3.     angle = (angle / (2 * Math.PI)) * 360;
  4.     var arrowPath = this.path(“M” + x2 + ” ” + y2 + ” L” + (x2 - size) + ” ” + (y2 - size) + ” L” + (x2 - size) + ” ” + (y2 + size) + ” L” + x2 + ” ” + y2 ).attr(“fill”,”black”).rotate((90+angle),x2,y2);
  5.     var linePath = this.path(“M” + x1 + ” ” + y1 + ” L” + x2 + ” ” + y2);
  6.     return [linePath,arrowPath];
  7. }

And finally, play with a great example usage thanks to Thomas Fuchs.

Related Content:

Posted by Dion Almaer at 7:06 am
3 Comments

+++--
3.7 rating from 3 votes

3 Comments »

Comments feed TrackBack URI

Did U see my jaw??? Should be somewhere on the floor… People like Dimitry send flash to trash! Congratulations!

Comment by panzeronline — May 4, 2010

I love RaphaelJS. This guy deserves his own island full of scantily-clad hula-dancers.

Comment by sixtyseconds — May 4, 2010

Raphael is a really nice library. But the examples with the balls lagged a lot on my FF 3.6 on a 64 bit dual core machine. So I don’t think this is a Flash killer yet due to the performance. However for more simple tasks without lots of animations it seems very powerful.

Comment by Spocke — May 4, 2010

Leave a comment

You must be logged in to post a comment.