Как повернуть форму dojox gfx в новом положении?

Как повернуть dojox gfx на новую позицию?

Фигура подвижна и должна быть повернута и масштабирована в новом положении. Для демонстрации я использовал Butterly Demo от dojox gfx. См. этот пример на jsfiddle для подвижной бабочки.

Как можно вращать и масштабировать фигуру в новом положении и в новом центре?

Заранее спасибо,

мбеккер


javascript svg dojo gfx
person mbecker    schedule 28.09.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я разветвил ваш jsFiddle (http://jsfiddle.net/phusick/ta65D/) и добавил два экземпляра of dijit/form/NumberSpinner (translateX и translateY) для перемещения бабочки благодаря модифицированной функции updateMatrix:

var updateMatrix = function() {
    var translateX = xSpinner.get("value");
    var translateY = ySpinner.get("value");

    var centerX = 210 + translateX;
    var centerY = 170 + translateY;

    if(g) {
        g.setTransform([
            m.rotategAt(rotation, centerX, centerY), 
            m.scaleAt(scaling, centerX, centerY), 
            m.translate(translateX, translateY)
        ]);
    }
};

EDIT: чтобы добавить поддержку мыши DnD, добавьте следующий код к вышеупомянутому:

var moveable = new Moveable(g);   // require("dojox/gfx/Moveable")
moveable.onMoved = function(mover, shift) {
    xSpinner.set("value", xSpinner.get("value") + shift.dx);
    ySpinner.set("value", ySpinner.get("value") + shift.dy);
}

Конечно, вам не обязательно использовать NumberSpinner, но поскольку я поместил его туда до того, как он даст вам хорошую обратную связь о том, что происходит за кулисами. См. на jsFiddle: http://jsfiddle.net/phusick/ta65D/.

person phusick    schedule 28.09.2012
comment
Спасибо четыре ваш ответ. Форма бабочки перемещается с помощью мыши (нажмите и удерживайте бабочку, чтобы переместить ее). Мое намерение состоит в том, чтобы переместить фигуру, а затем повернуть ее. - person mbecker; 29.09.2012
comment
Вот, проверьте ответ выше и jsFiddle. - person phusick; 29.09.2012