在画布中旋转图像并使其可拖动

Question

I have an image that I draw on a canvas. When the mouse clicks and drags I get the mouse coordinates and use them to set the positionX and Y of the image. After that's been done I redraw the canvas. That works like a charm and I can move the image over the canvas.

But now I make 2 buttons so I can rotate the image left and right. When I rotate the image it now moves relative to the angle I have rotated. So when I rotate the image 180deg and drag the image up it goes down! I don't know why this happens or how I can compensate for it. :(

Well I understand I may be a bit vague so here is a demo of the problem.

Answer 1

I cannot access the demo url you provided, but this should be universal.

You need to move your object to the base of your coordinate space o:(0,0) , do your rotation, and then move your object back to where it was before you moved it, and since all your transformations are joined into a single transformation matrix, the order of transformations is very important, and you basically just need to do them inversely, ie move your object back to its initial position, then rotate it, and then move it to the coordinate space base:

ctx.translate(objects_x_position, objects_y_position);
ctx.rotate(angle);
ctx.translate(-objects_x_position, -objects_y_position);

And voila. Here's the demo: http://jsfiddle.net/ArtBIT/CdbWx/1

Answer 2

try to swap this two lines

oContext.translate(oImage.size.x /2 ,oImage.size.y / 2);
oContext.rotate(oImage.rotate * Math.PI/180);

first rotate and then translate.

Answer 3

Similar to ArtBIT's answer, but taking into consideration you wanting to rotate from the center, I would use the code:

ctx.translate(width/2, height/2);
ctx.translate(objects_x_position, objects_y_position);
ctx.rotate(angle);
ctx.translate(-objects_x_position, -objects_y_position);
ctx.translate((width/-2), height/-2);