旋转后如何找到矩形的新坐标

Question

在画布上旋转后矩形的 Y 坐标。如图所示，矩形将在其中心点轴上旋转。旋转和画布恢复后，我想找到新的 X、Y 坐标，如第二张图像中所示，旋转点之前为 50,50，旋转后它们可能为 62,40。

我发现了类似的问题，所以我从那里拍摄了图像，但该问题适用于某些 WPF，而我的要求是 JS。旋转后如何找到矩形所有角的坐标？

在此处输入图片说明

Answer 1

为此，我制作了一个简单的 JavaScript 转换类。

使用它，您可以通过您制作的变换来变换任意点。

变换画布时，Transform以相同的方式变换对象，然后调用transformPoint(x, y)以取回适当的坐标。

因此，在您的情况下，调用transformPoint(50, 50)将返回 about[62, 40]等。