Monthly Archives: July 2012

Simple interactivity with Raphael.js and Paper.js

Posted on by
Reply
Demo Screenshot

Demo Screenshot

As a prototype for some features we have planned at picnic software I wanted to prototype some very simple interactivity using either canvas or svg.

The prototype is simple resizable moveable circles on a page.
The Web-Drawing Throwdown from smashing magazine gave me a head start but didn’t really address the kind of interactivity I was looking for. Based on the discussion there I elected to use paper.js for canvas and raphael.js for svg (vml in older versions of IE).

You can see the demos here: Rapael.js and Paper.js

Both libraries gave me high level abstractions for working with the shapes and capturing mouse events. Paper.js seemed to be lacking really rich support for high level objects. You can create a circle like this:

new Path.Circle(new Point(x, y), radius);

But once created the circle is just a geometric path. You cannot alter the radius of the circle - you have to work with each of the four segments individually.

My code to change the size of the circle:
circle.segments[0].point.x = centre.x + radius;
circle.segments[1].point.y = centre.y - radius;
circle.segments[2].point.x = centre.x - radius;
circle.segments[3].point.y = centre.y + radius;
In contrast Raphael knows that my shape is a circle and lets me modify the radius directly:
circle.attr("r", newSize);
Both libraries offer an API to react to mouse click and drag events. Raphael allows you attach event handler directly to objects:
circle.drag(onMove,null,onEnd);
Where as Paper.js monitor for clicks anywhere on the canvas and then relies on hit testing to help you interpret what the user clicked on:
var hitResult = paper.project.hitTest(event.point, hitOptions);
Over all the motion in Raphael feel more responsive. I need to look into any simple optimisations I can make in the Paper.js code. The Raphael circle is also drawn more nicely. I need to revisit my Paper.js smoothing code to see why my circle there is wonky.
You can see my code as it evolves on github.