Raphael free transform w/callback

by John Clark

HTML

<script src="http://alias.io/raphael/free_transform/raphael.free_transform/raphael.free_transform.js"></script>
<div id="paper"></div>

JavaScript

// this is a test to embed an image into a raphael rectangle object

var paper = Raphael('paper', 0, 0, 500, 500);

var rect = paper.rect(100, 100, 100, 100);

rect.attr({
    fill: "gray",
    opacity: "0.3"
});

rect.transform("t100,100");

var img = paper.image(
    "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
0, 0, 80, 80);
img.attr({
    "clip-rect": "10,10,50,50"
});
var img2 = paper.image(
    "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg");

var event_callback = function (ft, events) {
    switch (events[0]) {
        case "drag": case "scale" : case "rotate" :
            var bbox = rect.getBBox();
            img2.attr({
                x: bbox.x,
                y: bbox.y,
                width: bbox.width,
                height: bbox.height
            });
            rect.toFront();
            break;
    }
}

// Add freeTransform
var ft = paper.freeTransform(rect, {}, event_callback );

var bbox = rect.getBBox();
img2.attr({
    x: bbox.x,
    y: bbox.y,
    width: bbox.width,
    height: bbox.height
});
rect.toFront();
// the events need to be captured and the image redrawn on drag/resize