画布Rotation+Scaling

Question

我需要在画布中旋转一个图像，并同时调整它的大小，以确保画布的角不保持为空。解决方案应该类似于养禽场在“裁剪、调整和旋转”示例中所做的操作。

我认为解决方法是将画布的旋转和调整大小的功能结合起来，但是我没有找到任何具体的解决方案，我也没有在网上找到任何的例子。

任何建议都会有帮助。

谢谢

Answer 1

我没有看过你给出的例子，但我给出了一个详细的答案，关于在画布上安装旋转图像的问题，这样就没有空白。

有一些数学(围棋图)，但这只是基本的三角学，我提供了一个解释，如何做到这一切。有两种解决方案，一种是找到适用于任意旋转的画布的最小比例尺，另一种是找到适合特定旋转的最小比例尺。

假设图像是居中的，如果不是的话，可以通过提供抽象画布大小来调整代码，这样旋转的图像就集中在抽象画布上。

因此，如果您的图像中心在x = 100，y = 100，而画布是canvasWidth = 300，那么canvasHeight = 300只需使用absCanvasWidth = (canvasWidth - x) * 2;的抽象大小，然后x = absCanvasWidth/2的图像在高度上也是如此。这将适合旋转，翻译的图像填充画布。

使用代码可以找到问题旋转后，在正确的位置绘制图像的答案。

Answer 2

以下是一些可能对你有帮助的代码。这显示了如何顺时针旋转图像90度，然后缩放，以适应原来的帆布空间。

​

window.onload = function() {
  var img = document.getElementById("myImage");
  var rotatedCanvas = document.getElementById("myRotatedCanvas");
  var width = rotatedCanvas.offsetWidth;
  var height = rotatedCanvas.offsetHeight;

  // draw the original image 
  var ctx = document.getElementById("myCanvas").getContext("2d");
  ctx.drawImage(img, 0, 0);

  // draw the rotated image
  ctx = rotatedCanvas.getContext("2d");
  ctx.rotate(90 * Math.PI / 180);
  // the last two parameters scale the image
  ctx.drawImage(img, 0, -width, height, width);
};

img {
  display: none;
}
canvas {
  border: 1px black solid;
}

<img src="http://imgur.com/UeMOrix.gif" id="myImage"/>
<canvas id="myCanvas" width="400" height="150"></canvas>
<br>
<canvas id="myRotatedCanvas" width="400" height="150"></canvas>

​