画布旋转和缩放

Question

我需要在画布上旋转一张图片，并同时调整大小，以确保画布的角落不会留空。解决方案应该类似于aviary在“裁剪、调整大小和旋转”示例中所做的操作。

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

任何建议都会有所帮助。

谢谢。

- Andrea_86

Answer 1

我还没有看过你提供的示例，但是我已经详细回答了如何将旋转的图像适配到画布上，以便不留空白。

这涉及到一些数学知识（可想而知），但它只是基本的三角学，我提供了一个解释。有两个解决方案，一个是找到适用于任何旋转的最小缩放比例来适配画布，另一个是找到适用于特定旋转的最小缩放比例来适配画布。

假设图像居中，如果不是，则可以通过提供一个抽象画布大小来使代码适应，以便旋转后的图像居中于该抽象画布。

因此，如果您的图像中心在x = 100，y = 100，画布为canvasWidth = 300，canvasHeight = 300，那么只需使用一个抽象尺寸absCanvasWidth = (canvasWidth-x) * 2;，然后在x = absCanvasWidth/2处的图像进行相同的操作。对于高度也要做相同的操作。这将使旋转和平移后的图像填充整个画布。

有关代码的答案可以在问题After rotate, draw Image at correct position中找到。

- Blindman67

---

这似乎是一个非常好的解决方案，我要试一试。角度是弧度吗？如果我传递一个负角度，它也能工作吗？（我认为是的，如果我正确理解了脚本，但需要确认）因为我的旋转必须是图像的调整，所以我给用户提供了从原始图片-45°到45°的范围。 - Andrea_86

这些函数将接受任何弧度角度，行a1 = ((angle % (Math.PI *2))+ Math.PI*2) % (Math.PI * 2);将把角度移动到范围(0 - PI*2)，即(0-360)，其中Math.PI * (7/4)与-45度相同。在函数中进行数学计算之前，您需要在某个时候转换为弧度。要进行转换，可以使用radian = deg * (Math.PI / 180)或radian = deg * 0.01745329，对于画布来说，后者的精度已经足够了。 - Blindman67

好的。很抱歉我暂时不接受这个答案，因为我已经停止了那个项目的工作。当我将它放入我的代码中并且它能够正常工作（我对此毫不怀疑）时，我会接受这个答案。只是为了公平起见。 - Andrea_86

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>

- rphv