旋转+缩放图像

Question

我需要三个基本功能来处理图像：

1. 旋转图像；
2. 放大图像；
3. 移动图像。

我现在试图放大图片，但如果我已经旋转了，它必须保持旋转的图像。

我需要移动图像与鼠标，同时保持缩放和旋转的特点，如果它是旋转的。

jQuery('#zoom').click(function(){
  element.clearRect(0, 0, canvas.width, canvas.height);
  larguraNova = ( canvasWidth + (escalaPixel * valorZoom) );
  if(larguraNova > canvasWidth){
    /* passo a nova largura que é igual a altura */
    novosDadosWH = larguraNova;
    novosDadosTRBL = ( ( larguraNova - canvasWidth ) / 2 ) ;
  } else {
    /* passo o valor original */
    novosDadosH = novosDadosW = canvasWidth;
  }
});

小提琴

Answer 1

看看Canvas2DAPI的参考文献。有一些方法可以用于缩放(比例)，、翻译(移动的猎户座)和旋转。您所要做的就是将这些方法应用到画布的2D上下文中：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Rotate the image 45 degrees
ctx.rotate(45 * (Math.PI/180));
// Move it 20 px to the left
ctx.translate(-20, 0);
// Then zoom in by 50%
ctz.scale(1.5, 1.5);

Answer 2

尝尝这个您可以使用缩放功能来实现缩放功能。