我如何通过drawImage()将图像转换为画布来绘制图像的预期边界

How do I get the expected bounds of an image to be drawn with transforms to canvas via drawImage()?

本文关键字：图像 绘制 边界 转换 drawImage 何通过      更新时间：2023-09-26

我试图使用drawImage()绘制图像，但应用于它的矩阵变换，如旋转或倾斜。有没有办法得到这个变换后的像的期望边界?

给定一个矩形的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);
相关文章：