Я разрабатываю приложение HTML5 Canvas, и оно включает чтение XML-файла, в котором описывается положение стрелок, прямоугольников и других фигур, которые мне нужно нарисовать на холсте.

Пример макета XML:

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

Если объект вращается, он включает вычисление положения точки (называемой P новой позицией объекта после вращения) при вращении вокруг другой точки (слева, сверху). Я пытаюсь придумать общую функцию / формулу, которую я могу использовать для вычисления этой точки P, но моя математика немного слабая, и я не могу определить, какую формулу дуги / тангенса я собираюсь использовать.

Можете ли вы помочь мне придумать формулу, которую я могу использовать для вычисления точки P для поворотов, которые могут быть как положительными, так и отрицательными?

В приведенном выше примере: точка (14,446) - это левая, верхняя точка и точка (226,496) - это средняя точка объекта, когда НЕ вращается, поэтому точка = (влево + ширина / 2, верх + высота / 2) и синий цвет точка - это средняя точка при повороте. Я знаю, как рассчитать длину линии между точками (14,446) и (226,496), но не знаю, как рассчитать синюю точку x, y position - Кстати: длина этой линии такая же, как и линия между синей точкой & (14446)

len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;