旋转后获取div角像素位置答案

【问题标题】：get div corners pixel positions after rotation旋转后获取div角像素位置
【发布时间】：2014-07-18 10:47:54
【问题描述】：

设置旋转弧度/度数后，如何计算 div 的左上角、左下角、右上角、右下角像素位置？

举个例子会很有帮助。

【问题讨论】：

除非您知道旋转中心是什么，否则您无法计算角。
您能否构建一个用例（在 jsfiddle 或其他中），以便我们确定您的确切目标
你接受的答案是完全错误的。
您仍然确定您接受的答案是正确的吗？它对你有用吗？
我已将我接受的答案更新为我自己制定的解决方案。这对我有用并返回正确的结果。

【解决方案1】：

我对这里的答案感到困惑。被否决的答案绝对是错误的，但我也为另一个答案而苦苦挣扎，因为这是一个非常好的但非常纯粹的提示。对于普通的 Web 开发人员来说，那里的示例仍然非常理论化。所以我结合了这两个答案，并制作了一个被否决的例子的工作版本。所以对于那些也在寻找有效的 javascript 解决方案的人来说。这里是：

function getPixelsByAngle(x, y, width, height, angle) {
   var radians = angle * Math.PI / 180;
   return [
      //upper left
      [x + width/2 + width/-2 * Math.cos(radians) - height/-2 * Math.sin(radians), y + height/2 + width/-2 * Math.sin(radians) + height/-2 * Math.cos(radians)],
      //upper right
      [x + width/2 + width/2 * Math.cos(radians) - height/-2 * Math.sin(radians), y + height/2 + width/2 * Math.sin(radians) + height/-2 * Math.cos(radians)],
      //bottom right
      [x + width/2 + width/2 * Math.cos(radians) - height/2 * Math.sin(radians), y + height/2 + width/2 * Math.sin(radians) + height/2 * Math.cos(radians)],
      //bottom left
      [x + width/2 + width/-2 * Math.cos(radians) - height/2 * Math.sin(radians), y + height/2 + width/-2 * Math.sin(radians) + height/2 * Math.cos(radians)],
   ];
}

【讨论】：

x/y 参数是给定元素中心的坐标吗？
顶一下，x/y 是中心吗？
不，x/y是元素左上角的位置。所以它表示元素在坐标系上的位置。所以结果还包含该坐标系上的位置。但是，计算实际上不需要 x 和 y。您可以简单地从整个函数中删除 x 和 y 变量，您只会得到角随旋转移动的距离。旋转点始终是元素的中心。
感谢您的回答。这个为我节省了很多时间 - 并且有效！
功能很好，效果很好

【解决方案2】：

这解决了我在旋转后计算新像素位置的问题。我创建了一个要使用的函数，传入 x/y 位置、div 的半宽度/高度和新的旋转角度。

function getPixelsByAngle(x,y,halfWidth,halfHeight,angle){
   var bounds = [
      //upper left
      [x + (halfWidth) * Math.cos(angle) - (halfHeight) * Math.sin(angle) + halfWidth, y + (halfHeight) * Math.cos(angle) + (halfWidth) * Math.sin(angle) + halfHeight],
      //upper right
      [x - (halfWidth) * Math.cos(angle) - (halfHeight) * Math.sin(angle) + halfWidth, y + (halfHeight) * Math.cos(angle) - (halfWidth) * Math.sin(angle) + halfHeight],
      //bottom right
      [x - (halfWidth) * Math.cos(angle) + (halfHeight) * Math.sin(angle) + halfWidth, y - (halfHeight) * Math.cos(angle) - (halfWidth) * Math.sin(angle) + halfHeight],
      //bottom left
      [x + (halfWidth) * Math.cos(angle) + (halfHeight) * Math.sin(angle) + halfWidth, y - (halfHeight) * Math.cos(angle) + (halfWidth) * Math.sin(angle) + halfHeight]
   ];
   return bounds;
}

【讨论】：

我认为您不适合使用我提供的信息，然后将其转化为（写得不好）的答案，然后接受它

【解决方案3】：

假设旋转相对于中心并且四个角的坐标也相对于同一原点，每个点(±a, ±b) 其中a 和b 是半宽和半- div的高度需要乘以变换矩阵：

|  cos(theta)   -sin(theta) |
|  sin(theta)    cos(theta) |

例如：

x' = a * cos(theta) - b * sin(theta)
y' = a * sin(theta) + b * cos(theta)

注意：以上适用于笛卡尔坐标 - 在 y 轴向下运行的 DOM 坐标中，根据需要反转 theta 术语。

【讨论】：