旋转+缩放图像

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

请参阅此处了解一些允许缩放和保持旋转的更改:

修改小提琴

由于您不断更改缩放和旋转,因此无需使用保存/恢复.让他们积累.好的,我错过了你想要翻译画布.在这种情况下,累积将是复杂的,所以在这种情况下DO使用保存和恢复:)

但是,您可以重构代码,以便在一个位置旋转和缩放并移动鼠标移动事件.

将转换移动到全局(或者在此处,移动到通常处于全局的图像加载),这样您就有了一个中心起点.

进行了以下修改(请参阅上面的更新小提琴):

// set delta for zoom and keep track of current zoom
var zoomDelta = 0.1;
var currentScale = 1;

// set delta for rotation and keep of current rotation
var currentAngle = 0;
var startX, startY, isDown = false;

简化加载(我建议window.onload改为使用):

jQuery('#carregar').click(function () {
    element.translate(canvas.width / 2, canvas.height / 2);

    // the new refactored function common to all steps
    drawImage();

    jQuery('#canvas').attr('data-girar', 0);
    this.disabled = true;
});

旋转功能现在减少为:

jQuery('#giraresq').click(function () {
    angleInDegrees = 90;
    currentAngle += angleInDegrees;
    drawImage()
});

jQuery('#girardir').click(function () {
    angleInDegrees = -90;
    currentAngle += angleInDegrees;
    drawImage()
});

缩放功能:

jQuery('#zoomIn').click(function () {
    currentScale += zoomDelta;
    drawImage()
});
jQuery('#zoomOut').click(function () {
    currentScale -= zoomDelta;
    drawImage();
});

要移动画布,我们需要跟踪鼠标向下,向上和移动:

canvas.onmousedown = function (e) {
    var pos = getMousePos(canvas, e);
    startX = pos.x;  // store current position
    startY = pos.y;

    isDown = true;   // mark that we are in move operation
}

canvas.onmousemove = function (e) {
    if (isDown === true) {
        var pos = getMousePos(canvas, e);
        var x = pos.x;
        var y = pos.y;

        // translate difference from now and start
        element.translate(x - startX, y - startY);
        drawImage();

        // update start positions for next loop
        startX = x;
        startY = y;
    }
}

// reset move operation status
canvas.onmouseup = function (e) {
    isDown = false;
}

重构函数现在执行所有清除,旋转和缩放:

function drawImage() {
    clear();

    element.save(); // as we now keep track ourselves of angle/zoom due to
                    // translation, we can use save/restore

    element.scale(currentScale, currentScale);
    element.rotate(currentAngle * Math.PI / 180);
    element.drawImage(image, -image.width * 0.5, -image.width * 0.5);

    element.restore();
}