Éditeur d'image en toile

Question

J'essaie de faire un éditeur d'image avec Canvas, mais j'ai rencontré quelques problèmes avec la ré-dimensionnement d'une image tournée. Mes ancres de taille et l'image ne semblent pas s'aligner comme elles le devraient.

http://jsbin.com/isexig/9/edit#source

(L'image tourne lorsque vous cliquez dessus, c'est juste pour tester la ré-dimensionnement)

Des indices comment résoudre ce problème?

J'ai découvert que l'angle devait être divisé par Pi mais je ne parviens pas à faire fonctionner le BL et que les ancres ne correspondent toujours pas parfaitement = / /

Answer 1

J'ai trouvé que le groupe est déjà tourné, y compris les poignées du coin, vous n'avez donc pas besoin de trigonométrie:

http://jsbin.com/abejab/5/edit

switch (activeAnchor.name) {
case "tl":
case "br":
    bl.x = tl.x;
    bl.y = br.y;
    tr.x = br.x;
    tr.y = tl.y;
    break;
case "tr":
case "bl":
    br.x = tr.x;
    br.y = bl.y;
    tl.x = bl.x;
    tl.y = tr.y;
    break;
}
image.x = tl.x;
image.y = tl.y;
image.width = tr.x - tl.x;
image.height = bl.y - tl.y;