Editor de imagens em tela

Question

Estou tentando fazer um editor de imagens com canvas, mas tive alguns problemas ao redimensionar uma imagem girada.Minhas âncoras de redimensionamento e a imagem não parecem estar alinhadas como deveriam.

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

(A imagem irá girar quando você clicar nela, é apenas para testar o redimensionamento)

alguma pista de como consertar isso?

Descobri que o ângulo precisava ser dividido por pi, mas não consegui fazer o bl funcionar e as âncoras ainda não combinam perfeitamente =/

Answer 1

Descobri que o grupo já está girado, incluindo as alças dos cantos, então você não precisa de nenhuma trigonometria:

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;