旋转和缩放图像

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

Fiddle

- Max William Vitorino

Answer 1

请参考以下更改以允许缩放并保持旋转：

修改后的fiddle

您不需要为此使用save/restore，因为您不断地更改缩放和旋转。让它们累积。好的，我错过了您想要翻译画布。在这种情况下，累积会很复杂，因此请使用save和restore :)

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

将translate移到全局（或者像这里一样，移到通常位于全局的图像加载中），以便您有一个中心起点。

进行了以下修改（请参见上面更新的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();
}

- user1693593

---

@MaxWilliamVitorino 嗯，是的，只需将 degreesInAngle += 90 更改为 degreesInAngle = 90，因为它们是通过旋转累积的。当然，对于 -= 也是一样。 - user1693593

@MaxWilliamVitorino 我不确定你所说的“错误”是什么意思.. 它可以旋转（+/- 90度）- 应该采取什么适当的行动？ - user1693593

你好 Ken - Abdias 软件 我做了你要求的事情，它起作用了，非常感谢！ - Max William Vitorino

你能帮我解决当图片被缩放时移动部分的问题吗？我尝试过，但没有成功。我使用mousemove获取X和Y位置，减去鼠标点击时始终为0的偏移量，并通过重写图像来添加缩放。但在这种情况下，我没有使用HTML5比例标签，所以现在不知道该怎么做了。你的代码只需要70行就可以完美运行，而我的旧代码需要230行才能实现。 - Max William Vitorino

@MaxWilliamVitorino 回答和 fiddle 已更新，支持移动。请注意，现在由于翻译（移动），我们“需要”（这样更容易）使用保存/恢复。记得点赞.. ;) - user1693593

Answer 2

看一下Canvas 2D API的参考文献。有可用于缩放（比例）, 平移（移动原点）和旋转的方法。你所要做的就是将这些方法应用到你的画布的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);

- Eric

Answer 3

试试这个 你可以使用缩放功能来实现缩放功能。

- Amol