javascript - Mouse position within rotated rectangle in HTML5 Canvas - Stack Overflow

admin管理员组

文章数量:1304152

Rotation of rectangles within an html5 canvas is being stored in radians. In order to find whether subsequent mouse clicks are within any given rectangle, I am translating the mouse x and y to the origin of rotation for the rectangle, applying the reverse of the rotation to the mouse coordinates, and then translating the mouse coordinates back.

This simply isn't working - mouse coordinates are not being transformed as expected (that is, not within the bounds of the original rectangle when clicking within the visible bounds of the rotated rectangle), and testing against the rectangle's bounds is failing. Detection of mouse clicks works only within the centre-most area of the rectangle. Please see the code snippet below and tell me if you can see what's wrong here.

 // Our origin of rotation is the center of the rectangle
 // Our rectangle has its upper-left corner defined by x,y, its width
 // defined in w, height in h, and rotation(in radians) in r.  
var originX = this.x + this.w/2, originY = this.y + this.h/2, r = -this.r;

 // Perform origin translation
mouseX -= originX, mouseY -= originY;
// Rotate mouse coordinates by opposite of rectangle rotation
mouseX = mouseX * Math.cos(r) - mouseY * Math.sin(r);
mouseY = mouseY * Math.cos(r) + mouseX * Math.sin(r);
// Reverse translation
mouseX += originX, mouseY += originY;

// Bounds Check
if ((this.x <= mouseX) && (this.x + this.w >= mouseX) && (this.y <= mouseY) && (this.y + this.h >= mouseY)){
    return true;
}

Rotation of rectangles within an html5 canvas is being stored in radians. In order to find whether subsequent mouse clicks are within any given rectangle, I am translating the mouse x and y to the origin of rotation for the rectangle, applying the reverse of the rotation to the mouse coordinates, and then translating the mouse coordinates back.

This simply isn't working - mouse coordinates are not being transformed as expected (that is, not within the bounds of the original rectangle when clicking within the visible bounds of the rotated rectangle), and testing against the rectangle's bounds is failing. Detection of mouse clicks works only within the centre-most area of the rectangle. Please see the code snippet below and tell me if you can see what's wrong here.

 // Our origin of rotation is the center of the rectangle
 // Our rectangle has its upper-left corner defined by x,y, its width
 // defined in w, height in h, and rotation(in radians) in r.  
var originX = this.x + this.w/2, originY = this.y + this.h/2, r = -this.r;

 // Perform origin translation
mouseX -= originX, mouseY -= originY;
// Rotate mouse coordinates by opposite of rectangle rotation
mouseX = mouseX * Math.cos(r) - mouseY * Math.sin(r);
mouseY = mouseY * Math.cos(r) + mouseX * Math.sin(r);
// Reverse translation
mouseX += originX, mouseY += originY;

// Bounds Check
if ((this.x <= mouseX) && (this.x + this.w >= mouseX) && (this.y <= mouseY) && (this.y + this.h >= mouseY)){
    return true;
}

• javascript
• html
• canvas
• rotation

Share Improve this question Follow edited Mar 26, 2012 at 15:59 Sane asked Feb 8, 2012 at 21:47 SaneSane 15311 silver badge88 bronze badges 1

• This problem is same as: stackoverflow./questions/28706989/… – Mahipal Commented May 19, 2019 at 7:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

After some further work, came to the following solution, which I thought I'd transcribe here for anyone who might need it in the future:

// translate mouse point values to origin
    var dx = mouseX - originX, dy = mouseY - originY;
    // distance between the point and the center of the rectangle
    var h1 = Math.sqrt(dx*dx + dy*dy);
    var currA = Math.atan2(dy,dx);
    // Angle of point rotated around origin of rectangle in opposition
    var newA = currA - this.r;
    // New position of mouse point when rotated
    var x2 = Math.cos(newA) * h1;
    var y2 = Math.sin(newA) * h1;
    // Check relative to center of rectangle
    if (x2 > -0.5 * this.w && x2 < 0.5 * this.w && y2 > -0.5 * this.h && y2 < 0.5 * this.h){
        return true;
    }

本文标签： javascriptMouse position within rotated rectangle in HTML5 CanvasStack Overflow