views:

164

answers:

2

Matrix transformations has got my head spinning. I've got a dojox.gfx.group which I want to be draggable with Mover and then be able to rotate it around a certain point on the surface. My basic code looks like this:

this.m = dojox.gfx.matrix,
.
.
.

updateMatrix: function(){
  var mtx = this.group._getRealMatrix();
  var trans_m = this.m.translate(mtx.dx, mtx.dy);
  this.group.setTransform([this.m.rotateAt(this.rotation, 0, 0), trans_m]); 
}

The rotation point is at (0,0) just to keep things simple. I don't seem to understand how the group is being rotated.

Any reference to simplistic tutorial on matrix transformations would also help. The ones I've checked out haven't help too much.

A: 

Try the official dojox.gfx matrix tutorial. See if the official documentation helps.

Eugene Lazutkin
A: 

The official documentation is where my head started spinning. Been staring at that for quite a long time because I couldn't make out how to feed the new coordinates into upcoming matrix transformations.

I've finally managed to figure out the problem though. It was a matter of connecting a listener to when the Mover triggers onMoveStop:

dojo.connect(movable, "onMoveStop", map, "reposition");

I then get the new moved distances and feed them into any rotation or scaling matrix translations in my graphic class:

updateMatrix: function(){
    //So far it is the group which is being rotated

    if (this.group) {

        if(!this.curr_matrix){
            this.curr_matrix = this.initial_matrix;
        }
        this.group.setTransform([this.m.rotateAt(this.rotation, this.stage_w_2, this.stage_h_2), this.m.scaleAt(this.scaling, this.stage_w_2, this.stage_h_2), this.curr_matrix]);

        //this.group.setTransform([this.m.rotateAt(this.rotation, mid_x, mid_y), this.m.scaleAt(this.scaling, mid_x, mid_y), this.initial_matrix]);
    }
},
reposition:function(){
    mtx = this.group._getRealMatrix();
    this.curr_matrix = this.m.translate(mtx.dx, mtx.dy);
},

Life's dandy again. Thanks Eugene for the suggestions.

Linus