问如何通过drawImage()获得使用转换到画布绘制的图像的预期边界？
EN

Stack Overflow用户

提问于 2014-08-21 22:16:53

回答 1查看 69关注 0票数 0

我正在尝试使用drawImage()绘制图像，但使用的是矩阵变换，比如旋转或倾斜。有什么方法可以得到这个转换图像的预期界限吗？

javascript

canvas

drawimage

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-22 10:00:24

给定矩形的x，y，宽度，高度，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);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25440681

复制

相似问题

画布: drawImage不将图像绘制到画布上

带有图像的画布drawImage()不会绘制任何内容

121

画布转图像可用，但不能与canvas.drawImage配合使用

用drawImage()在画布上绘制多幅图像

使用drawImage()画布裁剪图像多次？

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问如何通过drawImage()获得使用转换到画布绘制的图像的预期边界？
EN