Canvas увеличить в точку мыши с поворотом

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

Solution, вы можете увидеть его в 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; 
     } 
    }