RaphaelJS Перемещение повернутых элементов

У меня есть прямоугольник, повернутый на 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();
    }

javascript raphael jquery-svg
person fluf    schedule 13.03.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны использовать метод «преобразования» вместо простого изменения атрибутов 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), чтобы сделать преобразование абсолютным, а не относительным. Дополнительную информацию см. в документации Рафаэля по преобразованию: http://raphaeljs.com/reference.html#Element.transform

person Roman    schedule 13.03.2013
comment
это работает, но все еще не на 100%, когда вы выбираете->перемещение->выбираете->двигаете, прямоугольник продолжает выскакивать из фактической позиции - person fluf; 13.03.2013
comment
ОК, проверьте еще раз JSfiddle (я обновил метод onend) › jsfiddle.net/pybBq/1 - person Roman; 13.03.2013