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

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

我看不错！

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

这是一个偶然的解释。任何问题？

Answer 2

以西蒙的小提琴例子一步，所以你可以简单地输入角度：

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