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/.