Formel zum Übersetzen xy Bewegung mit Rotation

Question

Ich habe ein Canvas-Element, das ich mit context.rotate() drehen;

, wenn ich um das Bild in der Leinwand ziehen, wenn ich kann 90 Grad sagen gedreht, und ich nach links zu bewegen, bewegt sich das Bild nach unten,

ist es eine Formel, in denen ich eine Bewegung von anwenden kann zum Beispiel x + 5 y + 2 * Grad

und ich bekomme die echte Bewegung, die ich tun muss, um die gedrehte Leinwand in die Richtung zu bewegen, die ich will? Ich mag es für diese Funktion anzuwenden, die von linken als auch das Bild, aber mit dem unerwünschten EFFEKT arbeitet nach unten bewegen `

vm.canvasMouseMove = function (event) { 
     vm.delta = Date.now(); 
     if (vm.mouseisdown && vm.delta - vm.now > (1000/60) && (event.clientX > 0 && event.clientY > 0)) { 
      vm.now = vm.delta 
      vm.snapshot.mouse.x -= event.clientX; 
      vm.snapshot.offsetSlider.value -= vm.snapshot.mouse.x; 
      if (vm.snapshot.offsetSlider.value < -160) { 
       vm.snapshot.offsetSlider.value = -160 
      } 
      else if (vm.snapshot.offsetSlider.value > 160) { 
       vm.snapshot.offsetSlider.value = 160 
      } 

      vm.snapshot.mouse.y -= event.clientY; 
      vm.snapshot.verticalOffsetSlider.value += vm.snapshot.mouse.y; 
      if (vm.snapshot.verticalOffsetSlider.value < -120) { 
       vm.snapshot.verticalOffsetSlider.value = -120 
      } 
      else if (vm.snapshot.verticalOffsetSlider.value > 120) { 
       vm.snapshot.verticalOffsetSlider.value = 120 
      } 
      vm.snapshot.mouse.x = event.clientX; 
      vm.snapshot.mouse.y = event.clientY; 
     } 
    };` 

Diese

ctx.translate(canvas.width/2, canvas.height/2); 
ctx.rotate(vm.snapshot.rotationSlider.value * Math.PI/180); 
ctx.drawImage(image, vm.snapshot.offsetSlider.value - (canvas.width/2), (vm.snapshot.verticalOffsetSlider.value * -1) - (canvas.height/2), vm.scaledImageW * vm.snapshot.zoomSlider.value/100, vm.scaledImageH * vm.snapshot.zoomSlider.value/100); 
ctx.rotate(-1 * vm.snapshot.rotationSlider.value * Math.PI/180); 
ctx.translate(-canvas.width/2, -canvas.height/2); 
vm.donePicture = canvas.toDataURL(); 

Answer 1

zieht dieser den Trick gemacht, die Offset vorbei an die Übersetzungsmethode, dann zeichne das Bild nur unter Berücksichtigung der Leinwandhälfte Übersetzung

ctx.fillRect(0, 0, canvas.width, canvas.height); 
    ctx.save(); 
    ctx.translate((canvas.width/2) + (vm.snapshot.offsetSlider.value), (canvas.height/2) - vm.snapshot.verticalOffsetSlider.value); 
    ctx.rotate(vm.snapshot.rotationSlider.value * Math.PI/180); 
    ctx.drawImage(vm.canvasImage, 0 - (canvas.width/2), 0 - (canvas.height/2), vm.scaledImageW * vm.snapshot.zoomSlider.value/100, vm.scaledImageH * vm.snapshot.zoomSlider.value/100); 
    ctx.restore();