如何通過drawImage（）轉換為畫布來獲取要繪制的圖像的預期邊界？

Question

我正在嘗試使用drawImage（）繪制圖像，但對其應用了矩陣變換，例如旋轉或傾斜。 是否有某種方法可以獲取此變換圖像的預期邊界？

Answer 1

給定矩形的x，y，width，height，rAngle，skewX，skewY：

旋轉矩形的邊界框：

// rAngle is in radians
var absCos=Math.abs(Math.cos(rAngle));
var absSin=Math.abs(Math.sin(rAngle));
var centerX=x+width/2*Math.cos(rAngle)-height/2*Math.sin(rAngle);
var centerY=y+width/2*Math.sin(rAngle)+height/2*Math.cos(rAngle); 
var newWidth=width*absCos+height*absSin;
var newHeight=width*absSin+height*absCos;

傾斜矩形的邊界框：

// skewX & skewY are in the range 0.00 to 1.00
var left = x * (1+skewX);
var top = y * (1+skewY);
var newWidth = width * (1+skewX);
var newHeight = height * (1+skewY);