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

Question

我正在为一个项目使用画布，并且我有一些我正在倾斜的元素。我只是在 y 值上倾斜，只是想知道倾斜后图像的新宽度是多少（所以我可以将它与另一个画布元素对齐）。查看下面的代码以了解我的意思

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 x 60 的图像现在是 X 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

将 Simon 的小提琴示例更进一步，因此您可以简单地输入度数：

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

Answer 2

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

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/

我觉得不错！

有问题的三角形当然是画布原点，我画的那个黑点，以及红色矩形的左下角，这是我们在倾斜之前搜索的原始位置。

这有点随意的解释。有什么问题吗？