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 * …