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

Question

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

我发现similar question所以我从那里拍摄了图像，但这个问题是针对一些WPF而我的要求是JS。如何在旋转后找到矩形各个角的坐标？

Answer 1

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

使用它可以通过改变你的方式来转换任意点。

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

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

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

以下是一个示例：http://jsfiddle.net/b2fEX/