如何以正确的方式旋转画布

Posted 2023-02-25

【中文标题】如何以正确的方式旋转画布

【英文标题】：How to rotate canvas in the right way

【发布时间】：2018-03-02 09:25:56

【问题描述】：

我有一张想要裁剪的图片。

因此，我创建了具有较暗背景的canvas as overlay，然后在鼠标移动时，我在该画布上绘制了一个rect，并在该矩形中清除了深色背景。如下所示：

因此，没有背景的区域将被裁剪。

我的代码如下：

var canvas = document.getElementById('canvas');
var img = document.getElementById('photo');
var ctx = canvas.getContext('2d');
var rect = ;
var drag = false;
var update = true; // when true updates canvas
var original_source = img.src;
img.src = original_source;
var deg = 0;
var image_rotate_angle = 90;

document.getElementById('right').addEventListener("click", rotateRight, false);
document.getElementById('left').addEventListener("click", rotateLeft, false);

function rotateRight()
	deg = deg + image_rotate_angle;
	img.style.transform = "rotate(" + deg + "deg)";
  canvas.style.transform = "rotate(" + deg + "deg)";


function rotateLeft()
	deg = deg - image_rotate_angle;
	img.style.transform = "rotate(" + deg + "deg)";
  canvas.style.transform = "rotate(" + deg + "deg)";


function init() 
    img.addEventListener('load', function()
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mousemove', mouseMove, false);
    );
    
    // start the rendering loop
    requestAnimationFrame(updateCanvas);


// main render loop only updates if update is true
function updateCanvas()
  if(update)
      drawCanvas();
      update = false;
  

  requestAnimationFrame(updateCanvas);


// draws a rectangle with rotation 
function drawRect()
		ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);


// clears canvas sets filters and draws rectangles
function drawCanvas()    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'rgba(32, 32, 32, 0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawRect()


// create new rect add to array 
function mouseDown(e) 
    rect = 
      startX : e.offsetX,
      startY : e.offsetY,
      w : 1,
      h : 1
    ;
    drag = true;


function mouseUp()  drag = false; update = true; 

function mouseMove(e) 
    if (drag) 
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        update = true;
    


init();

canvas
  position: absolute;
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  display:inline-block;
  background:rgba(0,0,0,0.3);

<div style="margin-bottom: 15px;">
  <button id="left">Rotate Reft</button>
  <button id="right">Rotate Right</button>
</div>
<div style="position: relative; overflow: hidden;display:inline-block;">
    <img id="photo" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"/>
    <canvas id="canvas"></canvas>
</div>

我还有两个用于旋转图像的按钮。我有问题。解决方案可能很明显，但我没有看到。

如果我画一个矩形然后旋转图像，我也会旋转图像和画布，然后矩形在旋转后保持在同一位置。这就是我想要的，而且效果很好。

问题是如果我先旋转图像然后尝试绘制一个矩形。然后矩形没有按应有的方式绘制，它朝相反的方向移动。

Here is the fiddle.

知道怎么解决吗？

【问题讨论】：

所以，你想旋转图像而不是画布。不是吗？

@LuisGar 否。如果我不将画布与图像一起旋转，则矩形将保持在与旋转前相同的位置。

所以你可以破例。如果绘制了矩形，则全部旋转，如果没有，则仅旋转图像。如果我在函数 rotateLeft 和 rotateRight 中评论 line canvas.... 它运行良好。但是如果要保持矩形如果是绘制那么你应该例外

如果这是你的目标，你可能必须在切割后重新旋转作品

@LuisGar 那怎么做？如果您用画布注释掉线条，则在旋转之前未绘制画布时它可以正常工作。如果这些行被注释掉并且您先绘制矩形然后旋转图像，则矩形将保持在与旋转前相同的位置。这就是我不想要的。

【参考方案1】：

您可能只是根据图像的大小计算出新的 x 和 y 的位置，但我想在画布上实际绘制所有内容并旋转其变换矩阵会更易于管理。

但这意味着您的代码会发生一些变化：

您必须使用合成（或使用“奇偶”填充规则，like I already shown you）来绘制图像。 您还必须使您的 drawCanvas 函数更复杂一些，以便仅在需要时（当用户单击“旋转”按钮时）旋转您的 hole。

var canvas = document.getElementById('canvas');
var img = new Image();
var ctx = canvas.getContext('2d');
var rect = ;
var drag = false;
var update = true; // when true updates canvas
var angle = 0;

document.getElementById('right').addEventListener("click", rotateRight, false);
document.getElementById('left').addEventListener("click", rotateLeft, false);

function rotateRight() 
  angle += Math.PI / 2;
  drawCanvas(true); // let know we're from rotate function


function rotateLeft() 
  angle -= Math.PI / 2;
  drawCanvas(true);


function init() 
  img.addEventListener('load', function() 
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
  );

  // start the rendering loop
  requestAnimationFrame(updateCanvas);


// main render loop only updates if update is true
function updateCanvas() 
  if (update) 
    drawCanvas(false); // don't rotate the rectangle here
    update = false;
  

  requestAnimationFrame(updateCanvas);


// draws a rectangle with rotation 
function drawRect() 
  ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);


// clears canvas sets filters and draws rectangles
function drawCanvas(fromRotate) 
  // reset the transformation matrix to its defaults
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'rgba(32, 32, 32, 0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // for the rectangle, rotate only if we are using previously set rect
  if (fromRotate) 
    // Move to center
    ctx.setTransform(1, 0, 0, 1, canvas.width / 2, canvas.height / 2);
    // rotate by the current angle
    ctx.rotate(angle);
    // move back to what is now top right corner
    ctx.translate(-canvas.width / 2, -canvas.height / 2);
  
  drawRect();
  // draw the image behind the overlay
  ctx.globalCompositeOperation = 'destination-over';
  // rotate the whole context every time for the image
  ctx.setTransform(1, 0, 0, 1, canvas.width / 2, canvas.height / 2);
  // rotate by the current angle
  ctx.rotate(angle);
  // draw the image, from center
  ctx.drawImage(img, -img.width / 2, -img.height / 2);



// create new rect add to array 
function mouseDown(e) 
  rect = 
    startX: e.offsetX,
    startY: e.offsetY,
    w: 1,
    h: 1
  ;
  drag = true;


function mouseUp() 
  drag = false;
  update = true;


function mouseMove(e) 
  if (drag) 
    rect.w = (e.offsetX - this.offsetLeft) - rect.startX;
    rect.h = (e.offsetY - this.offsetTop) - rect.startY;
    update = true;
  


init();
img.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

<div style="margin-bottom: 15px;">
  <button id="left">Rotate Reft</button>
  <button id="right">Rotate Right</button>
</div>
<div style="position: relative; overflow: hidden;display:inline-block;">

  <canvas id="canvas"></canvas>
</div>