Leinwand zoom in Maus Punkt mit einer Drehung

Question

Ich benutze EaselJS, um auf einem HTML5-Canvas für einige ziemlich einfache Sachen zu arbeiten. Alles, was ich tun will, ist zu schwenken, zu zoomen und ein Bild zu drehen ... Ich möchte das Bild um meinen Mauszeiger herum zoomen und ich weiß, dass es viele Antworten auf diese Frage gibt, aber ich habe das sortiert. Wenn ich den Container rotiere, geht es furchtbar schief. Hier ist meine Zoom-Funktion:

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

Hier ist mein JSFiddle zu sehen, es funktioniert gut, aber nicht, wenn der Behälter um seine Mitte gedreht wurde. Ich kann einfach nicht herausfinden, wie ich meine Transformationen auf dem Container verwenden könnte, um jede Rotation zu erklären, jede Hilfe und jede Erklärung wäre sehr willkommen.

Answer 1

Lösung, können Sie es in JS Fiddle sehen:

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