在画布中倾斜时计算新宽度

Question

我正在使用canvas进行项目，我有许多元素，我正在倾斜。我只是倾斜y值，只是想知道在倾斜后图像的新宽度是什么（所以我可以将它与另一个canvas元素对齐）。看看下面的代码，看看我的意思

ctx.save();
//skew the context
ctx.transform(1,0,1.3,0,0,0);
//draw two images with different heights/widths
ctx.drawImage(image,0,0,42,60);
ctx.drawImage(image,0,0,32,25);

目标是知道42乘60的图像现在是X乘60的图像，所以我可以在将其绘制到0,0之前进行一些翻译。单独测量每个图像很容易，但我在整个项目中有不同的偏斜值和高度/宽度需要对齐。目前我使用此代码（适用于25到42宽度之间的图像）：

var skewModifier = imageWidth*(8/6)+(19/3);
var skewAmount = 1.3; //this is dynamic in my app
var width = (skewModifier*skewAmount)+imageWidth;

随着图像越来越宽，虽然这个公式很快就会崩溃（我认为这是一个倾斜的公式而不是像这样的直接值）。关于画布对偏斜做什么的任何想法？

Answer 1

您应该能够以数学方式推导出它。我相信：

Math.atan(skewAmount)是以弧度表示某个角度相对于原点倾斜的角度。

因此，1.3会使对象倾斜0.915弧度或52度。

所以这是一个红色的未被歪曲的物体，旁边是同一个物体倾斜（涂成绿色）。所以你有一个正确的三角形：

我们知道原点角度（0.915拉德），我们知道相邻边长，对于两幅图像，它们分别为60和25。 （红色的高度）。

斜边是偏斜的长边。

另一边是三角形的底部 - 它被扭曲了多少！

如果我记得的话，Tangent让我们对面/邻近，所以对于第一个：

tan(0.915) = opposite / 60，在我们的JavaScript代码中解决相反的问题：

opposite = Math.tan(0.915)*60

因此，倾斜物体的底部开始距离原点约77个像素。让我们在画布上检查我们的工作：

http://jsfiddle.net/LBzUt/

对我好看！

当然，问题的三角形是画布原点，我画的黑点和红色矩形的左下角，这是我们在倾斜之前寻找的原始位置。

这是一个随意的解释。有问题吗？

Answer 2

将西蒙的小提琴示例更进一步，所以你只需输入学位：

这是小提琴 http://jsfiddle.net/LBzUt/33/