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

Question

我正在尝试找到旋转的 svg 矩形坐标。

例如，

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

旋转前

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

点 1 => (250,50)

点-2 => (350,50) 即 (x+宽度, y)

Point-3 => (350, 130) 即 (x+宽度, y+高度)

点 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;
    }