公式翻譯xy運動與旋轉

Question

我有一個畫布元素，我與context.rotate（）旋轉;

當我在畫布圖像周圍拖動如果我旋轉可以說90度，以及i移動到左側時，圖像向下移動，

是有其中我能將的 一個移動式例如 x + 5 y + 2 *度

我得到真正的運動我需要做的移動旋轉的畫布在我想要的方向嗎？我想將它應用到這個函數與向左移動不需要的效應和形象工程，但向下移動`

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

這吸引

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

這使的伎倆，通過偏移量翻譯方法，然後畫出圖像只考慮帆布半翻譯

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();