HTML5 Canvas: calcul d'un point x, y lors d'une rotation

Je l'élaboration d'un Canevas HTML5 App et il s'agit de lire un fichier xml qui décrit la position des flèches, rectanges et d'autres formes j'ai besoin de dessiner sur le canevas.

Exemple de la mise en page 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 l'objet est en rotation, il consiste à calculer la position d'un point P de la nouvelle position de l'objet après rotation) lors de la rotation autour d'un autre point(à gauche,en haut). J'essaie de trouver une fonction générale/formule que je peux utiliser pour calculer ce point P, mais mon calcul est un peu faible & je ne peux pas identifier ce que l'arc tangente de la formule je suis censé utiliser.

Pouvez-vous m'aider à trouver une formule que je peux utiliser pour calculer le point P pour les rotations qui peuvent être à la fois positif & négatif?

HTML5 Canvas: calcul d'un point x, y lors d'une rotation

Dans l'exemple ci-dessus: point(14,446) est à gauche,en haut point & point(226,496) est le point milieu de l'objet lorsqu'il n'est PAS tourné de sorte que le point=(gauche+largeur/2,haut+hauteur/2) et le point bleu est le point milieu lors de la rotation. Je sais comment calculez la longueur de la ligne entre les points (14,446) & (226,496), mais pas la façon de calculer le point bleu position x,y - BTW: la longueur de cette ligne est la même que la ligne entre le point bleu & (14,446)

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

source d'informationauteur Jake M

  1. 18

    Il est assez simple. En rotation autour de l'origine du système de coordonnées de l'angle Thêta coordonnées (x,y) sont en train de changer comme 

    x' = x * cos(Theta) - y * sin(Theta);
y' = x * sin(Theta) + y * cos(Theta);

    Donc, tout ce que vous avez besoin est de traduire le point de rotation de l'un des points que vous avez. Permet d'écrire dans une manière plus simple: (x1,y1) = (14,446) et (x2,y2) = (226,496). Vous essayez de "faire tourner" (x2,y2) autour de (x1,y1). Calculer (dx2,dy2) dans un nouveau système de coordonnées dont l'origine est à (x1,y1).

    (dx2,dy2) = (x2-x1,y2-y1);

    Maintenant tourner (les angles positifs sont dans le sens antihoraire):

    dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees);
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees);

    La dernière étape consiste à traduire les coordonnées du point à partir de l'origine à (x1,y1) retour à l'origine (0,0);

    x2' = dx2' + x1;
y2' = dy2' + y1;

    ps: lire aussi 🙂 http://en.wikipedia.org/wiki/Rotation_matrix et n'oubliez pas que la plupart des fonctions trigonométriques dans différents langages de programmation, la plupart du temps avec des radians..

    pps: et j'espère que je n'ai pas peur de vous - demandez si vous avez des questions.

  2. 3

    Je pense que dans votre cas, vous devriez être en mesure de calculer cette rotation en position avec le système suivant d'équations:

    x = R * Math.cos(angle - angle0);
y = R * Math.sin(angle - angle0);
angle  = deg * Math.PI / 180;
angle0 = Math.atan(y0/x0);

    R la longueur de votre rayon vecteur (len dans votre exemple).

    deg angle en degrés, vous êtes à un système d'alternance, j'.g 120°

    x et y les coordonnées de la position finale que vous cherchez.

    angle est l'angle de rotation (rad, pas diplômés).

    angle0 est le premier point d'angle a été tourné en à l'axe des abscisses. Nous avons besoin de précalculer à l'aide de Math.atan.

    Ne l'ai pas testé. Afin de lui donner un essai. Mais l'idée, c'est comme même des fonctions trigonométriques.

  3. -1

    Un exemple de calcul des coordonnées : Lancer de dés