Desarrollo una aplicación HTML5 Canvas e implica leer un archivo xml que describe la posición de las flechas, reconexiones y otras formas que necesito dibujar en el lienzo.

Ejemplo del diseño 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"/> 

Si el objeto gira, implica calcular la posición de un punto (llamado P, la nueva posición del objeto después de la rotación) cuando gira alrededor de otro punto (izquierda, arriba). Estoy tratando de encontrar una función / fórmula general que pueda usar para calcular este punto P, pero mi matemática es un poco débil y no puedo identificar qué fórmula de arco / tangente estoy destinado a usar.

Puede ayudarme a encontrar una fórmula que pueda usar para calcular el punto P para rotaciones que pueden ser tanto positivas como negativas?

En el ejemplo anterior: el punto (14,446) es la izquierda, el punto superior y el punto (226,496) es el punto medio del objeto cuando NO se gira, por lo que el punto = (izquierda + ancho / 2, arriba + altura / 2) y el El punto azul es el punto medio cuando se gira. Sé cómo calcular la longitud de la línea entre los puntos (14,446) y (226,496) pero no cómo calcular la posición del punto azul x, y - BTW: la longitud de esta línea es la misma que la línea entre el punto azul y (14,446)

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