畫布放大到旋轉的鼠標點

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