Geek asks and answers

Returning non-positioned mouse coordinates after rotating an object to html5 canvas

I rotate the object in the html5 canvas around a variable point of origin.

If the user clicks on a given point in a newly rotated rectangle, I need the returned mouse coordinates to be rotated back around the same starting point.

I made a very quick drawing to hopefully illustrate better:

enter image description here

What I really need is a function that takes the actual coordinates of the mouse with the x and y coordinates and converts them to the position of the objects before it is rotated.

var origin = {
        x: 100,
        y: 100
};

var angle = 45;

function transformCoordinates(x,y){

         //Perform calculation to transform coordinates

         return {
                 x : newx,
                 y : newy
         };
}

Available variables will be the origin of the rotation and angle transform. As well as the coordinate of the mouse click on the canvas (relative to the canvas itself, with 0,0 - top left point, etc.)

, . , - .

+5
2

, , , .

context.currentTransform . , scale-translate- rotate, . .

, :

screen_X = internal_X * a + internal_Y * c + e;    
screen_Y = internal_X * b + internal_Y * d + f;
+5

.

- , :

getTransformedCoords : function(coords){
    var self = this;
    var obj = self.activeObj;
    var angle = (obj.angle*-1) * Math.PI / 180;   
    var x2 = coords.x - obj.left;
    var y2 = coords.y - obj.top;
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = x2*cos - y2*sin + obj.left; 
    var newy = x2*sin + y2*cos + obj.top;

    return {
        x : newx,
        y : newy
    };
},
+1

More articles:


All Articles