Canvas Image editor

Question

I'm trying to make an image editor with canvas, but I ran into some problems with re-sizing an rotated image. My re-size anchors and the image do not seem to line up as they should.

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

(The image will rotate when you click on it, its just for testing the re-sizing)

any clues how to fix this?

I found out that the angle needed to be divided by pi but i fail to get the bl to work and the anchors still do not match up perfectly =/

Answer 1

I found that the group is already rotated, including the corner handles, so you don't need any trigonometry at all:

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;