1

Raphael Free Transform プラグインを使用して、スケーリング、ドラッグ、回転を有効にしています。この特定のシナリオでは、1 つのハンドルをサイズ変更用に、別のハンドルを回転用に使用したいので、スケール オプションは軸 x にのみ設定されます。「画像」の歪みを避けるために、関数コールバックでそれを修正することにより、y 軸のスケーリングを補正したいと考えています。ユーザーが 1 つのハンドルを使用してラファエル セットのサイズを変更し、別のハンドルを使用してラファエル セットを回転できるようにしたいと考えています。また、ユーザーがオブジェクトをドラッグしようとすると失われないように、スケーリングによって引き起こされたすべての変換を保持したいと思います。

    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);
            }

        }
    }

ここにフィドルがあります：jsFiddle

どんな助けでも大歓迎です。

4

1 に答える 1

2

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();
    }
}
于 2013-04-30T13:53:59.310 に答える