Программно вращать фигуры, используя координаты

Question

Если у меня есть некоторые формы, определенные с использованием массивов координат, например

[[-30, -30], [-30, 30], [30, 30], [30, -30]]

и ребра определены с помощью:

[[0,1],[0,3],[1,2],[2,3]]

сделать квадрат.

Как мне программно сказать, чтобы форма вращалась * в центре на угол 0->359 в javascript?

* Или еще лучше, есть ли функция, которая позволяет мне выбрать центр вращения?

** В настоящее время мне удалось получить форму, чтобы обвести холст, используя:

var x_rotate = Math.sin(angle * Math.PI /180);
var y_rotate = Math.cos(angle * Math.PI /180);

// for each coordinate
//add x_rotate and y_rotate if coordinate > 0 or subtract if coordinate < 0 

Answer 1

Здесь вы идете, вращается точка x, y вокруг точки centerx, centery от degrees градусов. Возвращает плавающие значения, округлые, если вам нужно.

Чтобы повернуть фигуру, поверните все точки. Рассчитать центр, если вам нужно, это не делает этого.

Десмос связать с x как a , y как b , centerx как p , centery как q , а также degrees как s

function rotatePoint(x, y, centerx, centery, degrees) {
    var newx = (x - centerx) * Math.cos(degrees * Math.PI / 180) - (y - centery) * Math.sin(degrees * math.PI / 180) + centerx;
    var newy = (x - centerx) * Math.sin(degrees * Math.PI / 180) + (y - centery) * Math.cos(degrees * math.PI / 180) + centery;
    return [newx, newy];
}

Answer 2

Вы можете использовать формуляр для вращения точки вокруг начала координат.

function rotate(array, angle) {
    return array.map(function (p) {
        function r2d(a) { return a * Math.PI / 180; }
        return [
            Math.cos(r2d(angle)) * p[0] - Math.sin(r2d(angle)) * p[1],
            Math.sin(r2d(angle)) * p[0] - Math.cos(r2d(angle)) * p[1],
        ];
    });
}
console.log(rotate([[-30, -30], [-30, 30], [30, 30], [30, -30]], 45));
console.log(rotate([[-30, -30], [-30, 30], [30, 30], [30, -30]], 90));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Использовать переход CSS и изменить преобразование с помощью JavaScript

https://www.w3schools.com/cssref/css3_pr_transform.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions