Вращение прямоугольника вокруг произвольной точки

Есть прямоугольник, чьи вершины заданы левой верхней точкой (x₁, y₁) и правой нижней (x₂, y₂). Необходимо произвести вращение прямоугольника вокруг произвольной точки (x₀, y₀) на угол α и найти координаты всех вершин после поворота.

Содержание скрыть

Теория

Интерактив

Немного кода

Delphi

JavaScript

Теория

Используем аффинные матрицу поворота и матрицу переноса. Формулы для нахождения координат при повороте следующие:

$\displaystyle x'=x \times \cos \alpha-y\times \sin \alpha +Dx$

$\displaystyle y'=x \times \sin \alpha+y \times \cos \alpha + Dy$

Точка вокруг которой хотим повернуть изображение имеет координаты O (x₀, y₀) . Чтобы получить значение x и y для формул выше, необходимо их нормализовать.

$\displaystyle x=x-x_0$

$\displaystyle y=y-y_0$

Смещение D(x,y) определяет, куда хотим поместить точку вращения после поворота. В подавляющем большинстве случаев оно равно точке вращения.

Окончательный вид формул:

$\displaystyle x'=\left(x-x_0\right)\times \cos \alpha-\left(y-y_0\right) \times \sin \alpha +x_0$

$\displaystyle y'=\left(x-x_0\right)\times \sin \alpha+ \left(y- y_0\right) \times \cos \alpha + y_0$

Интерактив

На интерактиве ниже работают только эти формулы. «Произвольная» точка вращения зазывно мигает. Дескать, можно таскать. За вершины «не-повернутого» серого прямоугольника также можно таскать, меняя тем самым исходные координаты. При изменении координат происходит масштабирование с таким расчетом, чтобы «влез» процесс поворота. Делать на всю ширь возможных орбит смысла не увидел, т.к. они могут быть астрономически большими.

Переключатель «Математическая координатная сетка» показывает родную для математиков систему координат с центром координат посередине и осью Y, направленной вверх. Если режим выключен, демонстрируется координатная сетка, привычная для программистов — начало координат в левом верхнем углу и ось Y направлена вниз.

Переключатель «Анимация» включает плавное изменение угла с целью медитативного эффекта познания сущего.

X₁

Y₁

X₂

Y₂

X₀

Y₀

Вращать вокруг центра прямоугольника

α°

Все координаты находятся в отрицательном секторе! При отключенном режиме математической сетки данные могут быть не видны!

Чтобы их увидеть включите режим математической сетки и сдвиньте точку вращения в положительный сектор, который находится в правом верхнем квадранте.

Математическая координатная сетка

Показать орбиты

Показать точки

Анимация

Немного кода

Delphi


//   Посчитать координаты точки повернутой на Angle радиан
function CalcAnglePoint(const ACenter, APoint: TPointF;
 const Angle: Single): TPointF;
var
  sn,cs: single;
begin
  SinCos(Angle, sn, cs);
  Result.X := (APoint.X-ACenter.X) * cs - 
    (APoint.Y-ACenter.Y) * sn + ACenter.X;
  Result.Y := (APoint.X-ACenter.X) * sn + 
    (APoint.Y-ACenter.Y) * cs + ACenter.Y;
end;

// Посчитать координаты точки повернутой на Angle радиан

function CalcAnglePoint(const ACenter, APoint: TPointF;

const Angle: Single): TPointF;

var

sn,cs: single;

begin

SinCos(Angle, sn, cs);

Result.X := (APoint.X-ACenter.X) * cs -

(APoint.Y-ACenter.Y) * sn + ACenter.X;

Result.Y := (APoint.X-ACenter.X) * sn +

(APoint.Y-ACenter.Y) * cs + ACenter.Y;

end;

JavaScript

    // расчет координат вершин по углу и центру вращения
    // angle - угол в радианах
    // center - точка, вокруг которой происходит вращение
    // points - массив с координатами вершин прямоугольника
    // vpoints - массив с повернутыми координатами вершин
    // массивы points и vpoints должны быть одной размерности
 
	ssin = Math.sin(angle);
	scos = Math.cos(angle);

	for (let i = 0; i < points.length; i++) {
		vpoints[i].x = center.x + (points[i].x - center.x) * scos - 
                (points[i].y - center.y) * ssin;
		vpoints[i].y = center.y + (points[i].x - center.x) * ssin + 
                (points[i].y - center.y) * scos;
	}

// расчет координат вершин по углу и центру вращения

// angle - угол в радианах

// center - точка, вокруг которой происходит вращение

// points - массив с координатами вершин прямоугольника

// vpoints - массив с повернутыми координатами вершин

// массивы points и vpoints должны быть одной размерности

ssin = Math.sin(angle);

scos = Math.cos(angle);

for (let i = 0; i < points.length; i++) {

vpoints[i].x = center.x + (points[i].x - center.x) * scos -

(points[i].y - center.y) * ssin;

vpoints[i].y = center.y + (points[i].x - center.x) * ssin +

(points[i].y - center.y) * scos;

}

Вращение прямоугольника вокруг произвольной точки и нахождение координат вершин производится таким незамысловатым кодом. Стоит отметить, что функции применимы к любому количеству вершин. Таким образом можно посчитать координаты любого многоугольника.