畫布旋轉+縮放

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>