好吧，事情变得复杂了……
给定情况：
我有一个尺寸为 800x600 的画布。
我的鼠标位于画布位置 100x200（例如）。
我保存画布状态。
现在我旋转和平移画布，画一个正方形。
我恢复我的画布状态。
有什么方法可以确定我的鼠标是否在方块上？
我想我也必须平移/旋转我的鼠标位置 - 朝相反的方向，但我该怎么做呢？
【问题讨论】：
标签： javascript html math canvas mouse
是的，您必须转换鼠标坐标或为您的形状保留第二组坐标。我建议保留第二组坐标，因为您移动鼠标的次数要比变换对象的次数多。尝试使用这样的对象
盒子
function Box(x, y, w, h){
this.x = x;
this.y = y;
this.tx = x; //transformed x
this.ty = y; //transformed y
this.w = w;
this.h = h;
this.mouseover = function(x, y){
if (this.tx < x && this.tx + this.w > x && this.ty < y && this.ty + this.h > y){
return true;
}
return false;
}
this.applyTransformation = function(transformation){
switch(transformation){
case 'rotation':
//update tx/ty to match rotation
break;
case 'translation':
//update tx/ty to match translation
break;
default:
//do nothing or raise exception
}
}
【讨论】：
您可以通过递归应用以下公式来获取对象的世界位置/旋转：
worldX = parentX + x * Math.cos( parentR ) - y * Math.sin( parentR );
worldY = parentY + x * Math.sin( parentR ) + y * Math.cos( parentR );
worldR = parentR + r;
JavaScript 实现将是：
var deg2rad, rad2deg, getXYR;
deg2rad = function ( d ) { return d * Math.PI / 180 };
rad2deg = function ( r ) { return r / Math.PI * 180 };
getXYR = function ( node ) {
var x, y, r,
parentXYR, pX, pY, pR,
nX, nY;
x = y = r = 0;
if ( node ) {
parentXYR = getXYR( node.parent );
pX = parentXYR.x;
pY = parentXYR.y;
pR = deg2rad( parentXYR.r );
nX = node.x;
nY = node.y;
x = pX + nX * Math.cos( pR ) - nY * Math.sin( pR );
y = pY + nX * Math.sin( pR ) + nY * Math.cos( pR );
r = rad2deg( pR + deg2rad( node.r ) );
}
return { x:x, y:y, r:r };
};
用这些对象试试吧：
el1 = {x:3,y:0,r:45};
el2 = {x:0,y:0,r:45};
el1.parent = el2;
getXYR(el1);
很快你就会想计算两个物体之间的最短角度，如果你得到两个物体之间的 deltaX (x2-x1) 和 deltaY (y2-y1) 你可以用这个函数得到角度：
var getAngle = function ( dx, dy ) {
var r = Math.atan2( dy, dx ) * 180 / Math.PI;
return ( r > 180 ) ? r-360 :
( r < -180 ) ? r+360 :
r;
}
从长远来看，最好使用矩阵来学习。获得世界 pos/rot 的等价物是世界矩阵。这里有一些关于矩阵的好信息（在 SVG 文档中，但不相关）：http://www.w3.org/TR/SVG/coords.html#NestedTransformations
这是使用矩阵（和 gl-matrix 库 https://github.com/toji/gl-matrix）的方式：
var getWorldMatrix = function ( node ) {
var parentMatrix;
if ( !node )
return mat4.identity();
parentMatrix = getWorldMatrix( node.parent );
return mat4.multiply( parentMatrix, node.matrix );
};
哦，我忘了，现在要最终注册一次点击，您只需获取鼠标的屏幕坐标并将它们与对象位置 + 画布视口偏移量进行比较。
【讨论】：