corrective scaling using Raphael free transform plugin

Question

I'm using Raphael Free Transform plugin to enable scaling, dragging and rotating. In this particular scenario I want to devote one handle for resizing and another one for rotating, hence scale option is set only on axis x. I want to compensate scaling on y axis by correcting it on function callback to avoid 'image' distortions. I would like to enable user to re-size raphael set using one handle and rotate raphael set using another one. Also, I would like to persist all transformation caused by scaling so it is not lost once user attempt o drag the objects.

    var ft = paper.freeTransform(tmp, { scale: ['axisX'], rotate: ['axisY'] }, cbFreeTransform);

    function cbFreeTransform(s, e) {
        if (e.toString() == 'scale end') {

            for (var i = 0, l = tmp.length; i < l; i++) {
                var itm = tmp[i];
                itm.scale(1, s.attrs.scale.x);
            }

        }
    }

Here is fiddle: jsFiddle

Any help appreciated .

score 2 · Accepted Answer · answered Apr 30 '13 at 13:53

Found the solution in doing following: On 'Scale End' event I've assigned x scale factor to y scale factor and call free transform apply method. That seems to work.

var ft = paper.freeTransform(tmp, { scale: ['axisX'], rotate: ['axisY'] }, cbFreeTransform);

function cbFreeTransform(s, e) {
    if (e.toString() == 'scale end') {    
       ft.attrs.scale.y = s.attrs.scale.x;
       ft.apply();
    }
}

corrective scaling using Raphael free transform plugin

1 Answers1