计算二维平面上的旋转相对位置答案

【问题标题】：Calculating rotated relative positions on 2D plane计算二维平面上的旋转相对位置
【发布时间】：2014-10-04 08:07:37
【问题描述】：

对于一个游戏项目，我需要计算物品在 2D 平面上相对于相机的位置。

相机可以旋转，坐标以中心为中心。

在附图中，a 和 b 是要显示的项目，c 是相机。第一张图片是世界上物品的绝对位置。第二张图片是我想要得到的结果。

请注意，旋转不一定是 90 度，它可以是任何有效的角度。我只是使用 90 度来保持这个例子的简单。

通常这是一项简单的任务，但由于相机可以旋转，所以平移到中心或从中心平移并不是那么容易，而且它使这个问题变得复杂。

这不是使用画布元素，因此不能使用画布平移或旋转。

以下是本示例中使用的数据，以及一些用于尝试解决方案的样板代码：

var items = {
    a: {x: 3, y: 3},
    b: {x: 2, y: 4}
};

var camera = {
    x: 4, y: 4,
    width: 4, height: 4,
    rotation: 90
}

任何帮助将不胜感激。

【问题讨论】：

请把你的图片换成大一点的，内容很难看
相机的宽高是什么意思？是透视吗？我无法理解你的问题！
图片替换为放大的。
相机的宽度和高度对于最终位置很重要。在最终图像中，A 为 (1,3)。但是（1,3）从哪里来？视图的左上角，计算方法是从相机中心减去宽度/2 和高度/2（当它不旋转时）。听起来很简单，但是当相机可以旋转 37 度时，就很难了。
在Math site on Stack Exchange network上提问不是更好吗？

【解决方案1】：

你应该按照这些步骤来实现你的结果

此时，您的项目和相机已经旋转，唯一剩下的工作就是相机矩形的裁剪。

据我所知，这样的剪辑并不难，很容易做到。

希望对你有帮助

【讨论】：

你是对的，这些是步骤，我对前2个没有问题。但是，对于第三个，你需要到相机矩形的左上角。但是，因为我们已经旋转了它，它并不像减去宽度/2 和高度/2 那样简单。这些距离向量也应该旋转。这就是我失败的地方。
@jsnoob 当我看到你的图片时，你的相对原点没有旋转并且仍然保持在左上角，在另一边你转换的项目相对于原点定位（在左上角） , 所以剪裁可以通过一些加减来完成，不是吗？
请检查：jsfiddle.net/vyLtqwg2/1 我已经添加了所有 3 个步骤。（它可以在同一个for 中很快完成，但这更容易调试）。你能看看这个第三阶段吗？（请记住，它也需要适用于其他角度，因此不能使用 90 度旋转快捷方式。）