画布放大到旋转的鼠标点

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