Javascript 计算旋转中的x，y坐标因子
我正在开发一个视频编辑设计工具。我最近添加了一个旋转功能，我的X，Y坐标现在关闭了 在1080x1080艺术板中，我有一个对象，比如说690px乘以891px。当该对象与左侧齐平时，其X值应为0 现在如果我顺时针旋转30度。当左边缘现在低于0时，将变换长方体。如果我把它拖过来，我希望能够计算它，这样当它的旋转形式中的左边缘接触到画板的左平面时，它的值为0 我正在开发的应用程序的屏幕截图演示 我尝试过其他公式，但我不是100%理解它们，甚至不确定它们是否适用于我试图解决的问题 概述：查看旋转对象时计算对象的x、y坐标。在下面的屏幕截图中，x坐标应为0 尺寸在屏幕截图中。反正我会把它们列出来的 x=195 y=117 w=690 h=891 旋转=30 artboardW=1080 artboardH=1080 基于这些尺寸，如何在1080 x 1080盒子内旋转30度，使x变为0Javascript 计算旋转中的x，y坐标因子,javascript,math,Javascript,Math,我正在开发一个视频编辑设计工具。我最近添加了一个旋转功能，我的X，Y坐标现在关闭了 在1080x1080艺术板中，我有一个对象，比如说690px乘以891px。当该对象与左侧齐平时，其X值应为0 现在如果我顺时针旋转30度。当左边缘现在低于0时，将变换长方体。如果我把它拖过来，我希望能够计算它，这样当它的旋转形式中的左边缘接触到画板的左平面时，它的值为0 我正在开发的应用程序的屏幕截图演示 我尝试过其他公式，但我不是100%理解它们，甚至不确定它们是否适用于我试图解决的问题 概述：查看旋转对象
干杯 这似乎是一个简单的三角问题
const rads = (Math.PI * 2) / bars;
const x = centerX + Math.cos(rads * i) * fooRadius
const y = centerY + Math.sin(rads * i) * fooRadius
在对您的问题的描述中，我没有看到的是轴心点，
这是这个问题的关键，你得到了旋转=30，但是从哪里来的 如果旋转后在一个角点上旋转轴心点，则该角点不会改变位置…
你所需要做的就是计算旋转前到枢轴的距离，这就是我们的半径。
重复使用等式，冲洗并重复每次旋转 也许这幅图能更好地说明枢轴的作用：
这似乎是一个简单的三角问题
const rads = (Math.PI * 2) / bars;
const x = centerX + Math.cos(rads * i) * fooRadius
const y = centerY + Math.sin(rads * i) * fooRadius
在对您的问题的描述中，我没有看到的是轴心点，
这是这个问题的关键，你得到了旋转=30，但是从哪里来的 如果旋转后在一个角点上旋转轴心点，则该角点不会改变位置…
你所需要做的就是计算旋转前到枢轴的距离，这就是我们的半径。
重复使用等式，冲洗并重复每次旋转 也许这幅图能更好地说明枢轴的作用：
你所说的对象的x，y坐标是什么意思？某个角落？居中旋转发生在某个中心周围-在您的情况下，旋转中心是什么？图像就是一个很好的例子。对象是一个HTML div，可以是任何东西，SVG、图像、视频等。它们都有宽度、高度和变换。变换将跟踪其x和y坐标。然后，当应用旋转时，它将添加到变换中<代码>平移（179.198px，-100.802px）旋转（90度）当90度时。基本上，当底部（90度）撞击左边缘时，我应检测到X坐标为0；看看公式：
X\u new=Rot\u center\u X+（X\u old-Rot\u center\u X）*Cos（Fi）-（Y\u old-Rot\u center\u Y）*Sin（Fi）X\u new=Rot\u center\u X+（X\u old-Rot\u center\u X）*Cos（Fi）-（Y\u old-Rot\u center\u Y）*Sin（Fi）