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

Question

我正在使用画布作为一个项目,我有许多元素,我正在倾斜.我只是倾斜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乘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.(红色的高度).

斜边是偏斜的长边.

而另一面则是三角形的底部 - 它被扭曲了多少!

如果我记得,切线让我们对面/邻近,所以对于第一个:

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

opposite = Math.tan(0.915)*60

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

http://jsfiddle.net/LBzUt/

在我看来很好!

当然,问题的三角形是画布原点,我绘制的黑点和红色矩形的左下角,这是我们在倾斜之前搜索的原始位置.

这是一个随意的解释.任何问题？