キャンバスを回転させてマウスポイントをズームする

Question

私はEaselJSを使用してHTML5キャンバスを使って簡単に作業します。私がしたいのは、画像をパン、ズーム、回転させることです。私はマウスポインタの周りの画像をズームしたいのですが、その質問に対する回答がたくさんあることを知っていますが、それをソートしています。それは私がひどく間違って行く容器を回転させるときです。ここに私のズーム機能があります：

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; 
} 

ここで、コンテナがその中心の周りを回転したとき、それがうまく働いていないが、見て、私のJSFiddleです。私はどのように私の変換をコンテナにどのような回転について説明するために使用することができないように思えない、任意のヘルプと説明は非常に高く評価されるだろう。

Answer 1

ソリューション、あなたは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; 
     } 
    }