Нахождение всех новых координат повернутого SVG-прямоугольника с помощью JavaScript

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 + ширина, у)

Точка-3 => (350, 130) то есть (x + ширина, y + высота)

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