Free transform tool for Raphaël elements.
Pull request Compare This branch is 67 commits behind AliasIO:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Free transform tool for Raphaël 2.0 elements and sets with many options. Supports snap-to-grid dragging, scaling and rotating with a specified interval and range.


Licensed under the MIT license.



<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="raphael.free_transform.js"></script>

<div id="holder" style="height: 100%;"></div>

<script type="text/javascript">
    var paper = Raphael(0, 0, 500, 500);

    var rect = paper
        .rect(200, 200, 100, 100)
        .attr('fill', '#f00')

    // Add freeTransform
    var ft = paper.freeTransform(rect);

    // Hide freeTransform handles

    // Show hidden freeTransform handles

    // Apply transformations programmatically
    ft.attrs.rotate = 45;


    // Remove freeTransform completely

    // Add freeTransform with options and callback
    ft = paper.freeTransform(rect, { keepRatio: true }, function(ft, events) {

    // Change options on the fly
    ft.setOpts({ keepRatio: false });


Note: options have changed and this README has not yet been updated.

attrs: { fill: hex, stroke: hex }

Sets the attributes of the handles (default: { fill: '#000', stroke: '#000' }).

bboxScale: true|false|"rect"

Enables resizing by dragging handles at the corners of the object's bounding box (if showBBox is set to true) (default: false).

boundary: { x: int, y: int, width: int, height: int }|false

Limits the drag area of the handles (default: dimensions of the paper).

distance: num

Sets the distance of the handles from the center of the element (num times radius, default: 1.2).

drag: true|false

Enables/disables dragging (default: true).

dragRotate: true|false

Rotate the subject by dragging (default: false).

dragScale: true|false

Scale the subject by dragging (default: false).

dragSnap: num|false

Set grid size for aligning elements (default: false).

dragSnapDist: num

Snap edges to grid when num pixels away from grid (default: value of dragSnap).

keepRatio: true|false

Scale axes together or individually (default: false)

rotate: true|false

Enables/disables rotating (default: true).

rotateRange: [ int, int ]

Limit the range of rotation (default: [ -180, 180 ])

rotateSnap: num|false

Rotate with n degree increments (default: false).

rotateSnapDist: num

Snap rotation when num degrees away from snap angle (default: value of rotateSnap).

scale: true|false

Enables/disables scaling (default: true).

scaleSnap: num|false

Scale with n pixel increments (default: false).

scaleRange: [ int, int ]|false

Limit the minimum and maximum size of the object in pixels (default: false)

showBBox: true|false

Show the bounding box (default: false)

showAxisHandles: true|false

Show the two scale/rotate handles if rotate or scale are true (default: true).

showCenterHandle: true|false

Show the center drag handle if drag is also true (default: true).

size: num

Sets the radius of the handles in pixels (default: 5).


A callback function can be specified to capture changes and events.



Programmatically apply transformations.


Removes handles but keeps values set by the plugin in memory.


Shows handles hidden with hideHandles().

setOpts( object, function )

Update options and callback.


Removes handles and deletes all values set by the plugin.


Updates handles to reflect the element's transformations.


To use animation you have to set animate to true, and optionally configure the following options:

delay: [ int ] (default: 700)

Duration of the animation in microseconds.

easing: [ string ]: (default: linear)


The previous example can be updated to:

// Add freeTransform
var ft = paper.freeTransform(rect, { animate: true }, function(ft, events) {
    console.log(events); // animate start, animate end

// Hide freeTransform handles

// Apply transformations programmatically
ft.attrs.rotate = 45;