0

45度の回転で移動する通常の移動ドラッグ機能を使用して、長方形を直線で移動しようとすると、長方形が45度回転します。これに関する投稿をたくさん見てきましたが、これはこのように機能することを目的としていますが、これを修正する簡単な方法は見つかりませんでした。

raphael.free_transform.jsプラグインについては知っていますが、スクリプトの90％は必要ありません。

他の投稿から、私はMath.atan2を使用することになっていることを知っていますが、残念ながら私の数学のスキルはそれほど優れていません。

私の現在の移動関数は次のようになります。

function (dx, dy) {
        var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy}; 
        this.attr(att);
        for (var i = connections.length; i--;) {
            r.connection(connections[i]);
        }
        r.safari();
    }
4

1 に答える 1

1

単にxy属性を変更するのではなく、「変換」メソッドを使用する必要があります。

var data = {};
var R = Raphael('raphael', 500, 500);
var rect = R.rect(100, 100, 100, 50).attr({fill: "#aa5555"}).transform('r45');
var default_transform = rect.transform();

var onmove = function (dx, dy) {
    rect.transform(default_transform + 'T' + dx + ',' + dy);
};
var onstart = function () {};
var onend = function () {
    default_transform = rect.transform();
};

rect.drag(onmove, onstart, onend);

JSfiddleでライブデモを作成しました：http： //jsfiddle.net/pybBq/

変換を相対的ではなく絶対的にするには、変換文字列で大きなT文字（小さなtではない）を使用する必要があることに注意してください。詳細については、変換に関するRaphaelのドキュメントをお読みください：http：//raphaeljs.com/reference.html#Element.transform

于 2013-03-13T10:22:26.453 に答える