How to rotate dojox gfx shape at new position?

Question

How to rotate a dojox gfx at a new position?

The shape is moveable and has to be rotated and scaled at the new position. For demonstration i have used the Butterly Demo from dojox gfx . See this example at jsfiddle for the moveable butterfly .

How is it possible to rotate and scale the shape at the new position and the new center?

Thanks in advance,

mbecker

Answer 1

I forked your jsFiddle ( http://jsfiddle.net/phusick/ta65D/ ) and added two instances of dijit/form/NumberSpinner (translateX & translateY) to move the butterfly thanks to modified updateMatrix function:

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: To add mouse DnD support add the following code to the aforementioned:

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

Of course, you do not have to use NumberSpinner , but since I put it there before it gives you a nice feedback what is going on behind the scenes. See it at jsFiddle: http://jsfiddle.net/phusick/ta65D/ .