Как повернуть фигуру Dojox GFX на новой позиции?

Question

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

Форма является подвижной и должна вращаться и масштабироваться в новой позиции. Для демонстрации я использовал демонстрацию Butterly от dojox gfx. Посмотрите этот пример на jsfiddle для подвижной бабочки.

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

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

mbecker

Answer 1

Я разветвил ваш jsFiddle ( http://jsfiddle.net/phusick/ta65D/) и добавил два экземпляра 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)
        ]);
    }
};

РЕДАКТИРОВАТЬ: Чтобы добавить поддержку мыши 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/.