html,坐标轴现实矩形旋转,HTML5 Canvas中旋转矩形内的鼠标位置

html5画布中矩形的旋转以弧度形式存储.为了找出后续鼠标是否在任何给定矩形内,我将鼠标x和y平移到矩形的旋转原点,将旋转的反转应用于鼠标坐标,然后将鼠标坐标平移回来.

这根本不起作用 - 鼠标坐标没有按预期变换(也就是说,当在旋转的矩形的可见边界内单击时,不在原始矩形的边界内),并且对矩形的边界进行测试失败.鼠标点击的检测仅在矩形的最中心区域内起作用.请参阅下面的代码段,告诉我你是否能看到这里的错误.

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

}