Question

我需要在画布中旋转图像并同时调整其大小以确保画布的角不会保持为空。解决方案应该类似于＆＃34;裁剪，调整大小和解决方案中的aviary。旋转＆＃34;示例

我认为解决方案是结合画布的旋转和调整大小的功能，但我找不到任何具体的问题解决方案，我在网上找不到任何有用的例子。

任何建议都会有所帮助

由于

Answer 1

我没有看过你给出的例子，但我详细解答了将旋转图像拟合到画布上的问题，以便没有空格。

有一些数学参与（去图），但它只是基本的三角学，我提供了解释它是如何完成的。有两种解决方案，一种是找到适合任何旋转画布的最小刻度，另一种是找到最小刻度以适合特定旋转的画布。

假设图像居中，如果没有，则通过提供抽象画布大小来调整所提供的代码，以便旋转的图像以该抽象画布为中心，这是一种简单的方法。

因此，如果您的图片中心位于x = 100，y = 100且画布为canvasWidth = 300，canvasHeight = 300，则只需使用absCanvasWidth = (canvasWidth - x) * 2;的抽象尺寸，然后x = absCanvasWidth/2处的图像对高度做同样的事情。这将适合旋转的翻译图像以填充画布。

可以在问题After rotate, draw Image at correct position

中找到代码的答案

Answer 2

这里有一些可能对您有帮助的代码。这显示了如何将图像顺时针旋转90度，然后缩放以适合原始画布空间。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

画布旋转+缩放

2 个答案: