Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Free transform tool for Raphaël elements.
branch: master

This branch is 64 commits behind AliasIO:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
raphael.free_transform.js
screenshot.png

README.md

Raphaël.FreeTransform

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.

Screenshot

Licensed under the MIT license.

Demo

http://elbertf.com/raphael/free_transform/

Examples

<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
    ft.hideHandles();

    // Show hidden freeTransform handles
    ft.showHandles();

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

    ft.apply();

    // Remove freeTransform completely
    ft.unplug();

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

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

Options

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).

Callback

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

Functions

apply()

Programmatically apply transformations.

hideHandles()

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

showHandles()

Shows handles hidden with hideHandles().

setOpts( object, function )

Update options and callback.

unplug()

Removes handles and deletes all values set by the plugin.

updateHandles()

Updates handles to reflect the element's transformations.

Animation

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)

Easing.

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
ft.hideHandles();

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

ft.apply();
Something went wrong with that request. Please try again.