Как найти новые координаты точки при повороте изображения PHP-функцией imagerotate()

15.04.2022

2295

К примеру есть исходное изображение map.jpg с наложенной через HTML подсказкой в точке с координатами 414;239:

<div class="map">
	<img src="https://snipp.ru/demo/784/map.jpg" alt="">
	<div class="tooltip" style="position: absolute; left: 414px; top: 239px;">
		x=414<br>y=239
	</div>
</div>

HTML

Далее изображение поворачивается с помощью PHP-функции imagerotate() на 15 градусов против часовой стрелки и нужно определить новые координаты точки чтобы переместить подсказку.

Итак, у функции imagerotate() осью вращения является центр изображения. После поворота размеры холста изображения могут увеличится в зависимости от угла поворота и формы изображения (квадратное или прямоугольное) и это нужно учесть.

Для нахождения новых координат можно применить формулу:

x₁ = (x - x_o) * cos(α) - (y - y_o) * sin(α) + x_o
y₁ = (x - x_o) * sin(α) + (y - y_o) * cos(α) + y_o

Где:
x, y – начальная точка,
x_o, y_o – точка оси вращения,
α – угол поворота по часовой стрелки в радианах.

Повернём изображение и рассчитаем новые координаты:

$deg = 15;			
$img = imageCreateFromJpeg(__DIR__ . '/map.jpg');
$bg = imagecolorallocate($img, 255, 255, 255);
$new = imagerotate($img, $deg, $bg);
imageJpeg($new, __DIR__ . '/rotate.jpg');

// Вычисление новых координат точки
$x = 414;
$y = 239;

$width = imagesx($img);
$height = imagesy($img);

$xo = $width / 2;
$yo = $height / 2;

$deg_rad = deg2rad(-$deg);

$x_new = ($x - $xo) * cos($deg_rad) - ($y - $yo) * sin($deg_rad) + $xo;
$y_new = ($x - $xo) * sin($deg_rad) + ($y - $yo) * cos($deg_rad) + $yo;			

// Поправка координат на новые размеры изображения
$width_new = imagesx($new);
$height_new = imagesy($new);

$x_new += ($width_new - $width) / 2;
$y_new += ($height_new - $height) / 2;

// Округление
$x_new = round($x_new);
$y_new = round($y_new);

PHP

Теперь можно вывести изображение и подсказку в новых координатах:

<div class="map">
	<img src="https://snipp.ru/demo/784/rotate.jpg" alt="">
	<div class="tooltip" style="left: <?php echo $x_new; ?>px; top: <?php echo $y_new; ?>px;">
		x=<?php echo $x_new; ?><br>y=<?php echo $y_new; ?>
	</div>
</div>

HTML