旋转 + 缩放图像答案

【问题标题】：Rotate + Zoom Image旋转 + 缩放图像
【发布时间】：2016-04-19 17:02:56
【问题描述】：

我需要三个基本函数来处理图像：

旋转图像；
缩放图像；
移动图片。

我现在正在尝试缩放图片，但如果我已旋转它，它必须保留旋转后的图像。

而且我需要用鼠标移动图像，同时保持缩放和旋转的功能，如果它被旋转。

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

Fiddle

【问题讨论】：

标签： jquery canvas rotation html5-canvas zooming

【解决方案1】：

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

Modified fiddle

~~您不需要为此使用保存/恢复，因为您会不断更改缩放和旋转。让它们积累。~~ 好的，我错过了你也想翻译画布。在那种情况下，积累起来会很复杂，所以在这种情况下，一定要使用保存和恢复:)

但是，您可以重构代码，以便在一个位置进行旋转和缩放，并在鼠标移动事件中移动。

将翻译移动到全局（或在这里，移动到通常在全局中的图像加载），这样你就有了一个中心起点。

进行了以下修改（参见上面更新的小提琴）：

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

【讨论】：

你好 Ken - Abdias Software 测试你修改的代码很好，更短，更实用，已经谢谢了。但我意识到它没有正确旋转，因为代码 drawRotated 为你改变了。这个问题只在这里发生，那里也会发生？
@MaxWilliamVitorino 啊，是的，只需将degreesInAngle += 90 更改为degreesInAngle = 90，因为它们是通过旋转累积的。 -= 当然也一样。
@MaxWilliamVitorino 我不知道你说的错是什么意思。它会旋转（+/- 90 度） - 正确的操作应该是什么？
你好 Ken - Abdias Software 我按照你的要求做了，它成功了，非常感谢！
@MaxWilliamVitorino 答案和小提琴更新支持移动。请注意，由于翻译（移动），现在我们“需要”（这种方式更容易）使用保存/恢复。记得投票.. ;)

【解决方案2】：

查看 Canvas 2D API 的 reference。 zooming (scale), translateing (moving origo) 和 rotating 有可用的方法。您所要做的就是将这些方法应用于画布的 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);

【讨论】：

【解决方案3】：

Try this可以使用缩放功能实现缩放功能。

【讨论】：