Free transform plugin for Raphaël JS

Posted on December 04, 2011

After doing some research for work involving client-side image manipulation I decided to dive into Raphaël, a JavaScript library that simplifies working with vector graphics on the web.

One thing I struggled with was applying multiple transformations to an element. When rotating an object the coordinate plane rotates with it which means dragging no longer works as one might expect (e.g. right becomes up). Raphaël’s creator Dmitri Baranovskiy indicated this is the correct behavior.

I worked out a solution and released it as a plugin. It supports snap-to-grid dragging, scaling and rotating and handles sets. Like Raphaël itself, the plugin is licensed under the MIT license.

Source code

Raphaël.FreeTransform on GitHub


See also…

These are a couple of other plugins I created recently.


Serialize Raphaël elements and back.


Cross-browser solution to export Raphaël elements to SVG, works in Internet Explorer 6, 7 and 8. Can be used to convert Raphaël drawings to PNG or PDF server-side using ImageMagick or Batik.

Scroll to top

Comments (2)

  • Nice plugin! Is it possible to change it so user can select anywhere inside bbox area to start dragging?

    Posted by John on January 27, 2012 Reply

  • AWESOME! This is timely for a project I am working on.

    I noticed one little quirk in the demo, when using IE 8/9, that in some JS errors on line 26 (var bbox = subject.getBBox(true);).

    I did some debugging and found that in the demo, the following line is the culprit. Actually, the culprit is the array, as it is passing a fourth element, causing things to puke.

    This line is the problem:
    paper.freeTransform(elements[i]).setOpts(options, callback);

    I changed it to this, and it works great:
    if (!isNaN(i)) paper.freeTransform(elements[i]).setOpts(options, callback);

    Anyway, great job on this!

    Posted by Ben on January 31, 2012 Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Fork me on GitHub