好的,这变得复杂了……

鉴于情况：
我有一个尺寸为800×600的画布.
我的鼠标位于画布位置100×200(例如).

我保存了画布状态.
现在我旋转并翻译画布,我画了一个正方形.
我恢复我的画布状态.

有没有办法确定我的鼠标是否在广场上？
我想我也必须翻译/旋转我的鼠标位置 – 反方向,但我该怎么做呢？

解决方法:

您可以通过递归应用此公式来获取对象世界位置/旋转：

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 lib 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 );
};

哦,我忘了,现在最后注册一个点击你只需获得鼠标的屏幕坐标,并将它们与画布视口偏移的对象位置进行比较.