0
$\begingroup$

I am developing a HTML5 Canvas Web App & I am having difficulty finding a formula/algorithm that will allow me to find the mid-point of a shape when it is rotated around a certain point.

I am given information about an arrow & I need to draw that arrow on the canvas - it gets tricky when the shape is rotated.

Can you suggest an algorithm I can use to calculate the mid-point of a shape.

The information I am know:
- x,y pos(which is the red dot) - width, height
- Arrow width, Arrow height
- Rotation in degrees

enter image description here

http://i.stack.imgur.com/Pv4iF.png

1 Answers 1

1

Let's assume you know or can find the coordinates of the midpoint when there is no rotation, let's call those coordinates $(m_x,m_y)$, and let's assume that the position point you said you know, which I'll call $(p_x,p_y)$, is fixed and is the center of the rotation. If the rotation has magnitude $\theta$ (positive being counterclockwise), then the new position of the midpoint is given by $(p_x+(m_x-p_x)\cos\theta+(p_y-m_y)\sin\theta,\;\;p_y+(m_y-p_y)\cos\theta+(m_x-p_x)\sin\theta).$

(I computed this using Mathematica, applying a rotational transformation of magnitude $\theta$ centered at $(p_x,p_y)$ to $(m_x,m_y)$.)