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

Demo

elbertf.com/raphael/free_transform/

See also…

These are a couple of other plugins I created recently.

Raphaël.JSON

Serialize Raphaël elements and back.

Raphaël.Export

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

Fork me on GitHub