使用 JavaScript 查找旋转 SVG 矩形的所有新坐标

Question

我试图找到旋转的 svg 矩形坐标。

例如，

 <svg width="500" height="500"> <rect width="100" height="80" x="250" y="50"/> </svg>

轮换前

在这个 SVG 矩形中，我可以计算所有 4 个角，如下所述。

点 1 => (250,50)

point-2 => (350,50) 即 (x+width, y)

Point-3 => (350, 130) 即 (x+width, y+height)

点 4 => (250, 130)

但是，当我使用旋转时，我找不到新的 4 个坐标，

 <svg width="500" height="500"> <rect width="100" height="80" x="250" y="50" transform="rotate(10 250,50)"/> </svg>

旋转后

Answer 1

我找到了解决方案。 下面的方法工作正常。

 function degreeToRadian(degree) { return degree * (Math.PI / 180); } function getRotatedRectangleCoordinates(actualPoints, centerX, centerY, angle) { var coordinatesAfterRotation = []; for (var i = 0; i < 4; i++) { var point = actualPoints[i]; var tempX = point.x - centerX; var tempY = point.y - centerY; var rotatedX = tempX * Math.cos(degreeToRadian(angle)) - tempY * Math.sin(degreeToRadian(angle)); var rotatedY = tempX * Math.sin(degreeToRadian(angle)) + tempY * Math.cos(degreeToRadian(angle)); point.x = rotatedX + centerX; point.y = rotatedY + centerY; coordinatesAfterRotation.push({ 'x': point.x, 'y': point.y }); } return coordinatesAfterRotation; }