javascript - 在 Canvas 中倾斜时计算新宽度

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 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;

随着图像变宽，尽管这个公式很快就会分崩离析(我认为这是一个倾斜的公式，而不是像这个那样的直线值)。关于 Canvas 对偏斜的作用有什么想法吗？

Answer 1

您应该能够从数学上推导出它。我相信:

Math.atan(skewAmount) 是某物相对于原点倾斜的 Angular (以弧度为单位)。

所以 1.3 会使对象倾斜 0.915 弧度或 52 度。

所以这是一个红色未倾斜的对象，旁边是同一个倾斜的对象(涂成绿色)。所以你有一个直 Angular 三 Angular 形:

我们知道原点 Angular (0.915 弧度) 并且我们知道相邻边的长度，对于您的两个图像，相邻边长分别为 60 和 25。 (红色的高度)。

斜边是倾斜的长边。

对面是三 Angular 形底部 - 它倾斜了多少!

如果我记得的话，切线让我们相对/相邻，所以对于第一个:

tan(0.915) = opposite/60，求解 JavaScript 代码中的相反数:

相反 = Math.tan(0.915)*60

因此，倾斜对象的底部开始距离原点约 77 像素。让我们在 Canvas 上检查我们的工作:

http://jsfiddle.net/LBzUt/

我觉得不错!

所讨论的三 Angular 形当然是 Canvas 原点，我画的那个黑点，以及红色矩形的左下角，这是我们在倾斜之前要搜索的原始位置。

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