画布通过旋转放大到鼠标点

Question

I'm using EaselJS to work on an HTML5 canvas for some pretty easy stuff. All I want to do is pan, zoom and rotate an image... I want to zoom the image around my mouse pointer and I know there's lots of answers for that question but I've got that sorted. It's when I rotate the container it goes horribly wrong. Here's my zoom function:

function zoom(delta){
    var p = container.globalToLocal(stage.mouseX, stage.mouseY);

    var scale = Math.max(0.1, Math.min(container.scaleX + delta, 3));

    container.scaleX = container.scaleY = scale;

    var p2 = container.globalToLocal(stage.mouseX, stage.mouseY);
    container.x += (p2.x - p.x) * scale;
    container.y += (p2.y - p.y) * scale;
}

Here's my JSFiddle to see it working well but not when the container has been rotated around its centre. I just can't seem to work out how I could use my transforms on the container to account for any rotation, any help and explanation would be greatly appreciated.

Answer 1

Solution, you can see it in JS Fiddle :

function zoom(delta){
        var p = container.globalToLocal(stage.mouseX, stage.mouseY);

        var scale = Math.max(0.5, Math.min(container.scaleX + delta, 3));

        container.scaleX = container.scaleY = scale;

        var p2 = container.globalToLocal(stage.mouseX, stage.mouseY);
        if(container.rotation == 0){
            container.x += (p2.x - p.x) * scale;
            container.y += (p2.y - p.y) * scale;
        }else if (container.rotation == 90){
            container.x -= (p2.y - p.y) * (scale);
            container.y += (p2.x - p.x) * (scale);
        }else if(container.rotation == 180){
            container.x -= (p2.x - p.x) * scale;
            container.y -= (p2.y - p.y) * scale;
        }else{
            container.x += (p2.y - p.y) * (scale);
            container.y -= (p2.x - p.x) * (scale);
        }

    }

    function rotate(r){

        if((container.rotation+r)  > 270){
            container.rotation = 0;
        }else{
            container.rotation += r;
        }
    }