キャンバスでゆがんだときに新しい幅を計算する

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

何を意味するかを確認するために以下のコードをチェックアウトの目標は、私が0,0でそれを描画する前に、いくつかの翻訳を行うことができますので、42 60で画像が今60画像によってXだったことを知っていることであろう。個々の画像を個別に測定するのは簡単ですが、プロジェクト全体で、調整する必要のあるスキュー値と高さ/幅が異なります。この式は、すぐに（私はそれが傾斜式ではない。このようなまっすぐな値だと思う）ばらばらになるのに画像が広くなるにつれ

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

：現在、私はこのコードを（25と42幅のイメージにちゃんと動作します）を使用します。どのようなキャンバスが斜めになるかについてのアイデアはありますか？

Answer 1

あなたは数学的にそれを導出できるはずです。私は信じています：

Math.atan(skewAmount)は、何かが原点に対して歪んでいる角度です（ラジアン単位）。

したがって1.3は、オブジェクトを0.915ラジアンまたは52度歪ませます。

ここでは、歪んだ同じオブジェクト（緑色で塗りつぶしたもの）の隣にある赤色のスキンなしオブジェクトがあります。私たちは、原点角度（0.915ラド）を知っているし、我々はあなたの二つの画像のための60と25で、隣接する辺の長さを、知っている

：だから、直角三角形を持っています。 （赤の高さ）。

斜辺は、斜めになっている長辺です。

反対側は三角形の底部です。どのくらい歪んでいますか？

タンジェントは私たち最初のもののために私が思い出すならば、その反対/隣接取得：だからの下側を

opposite = Math.tan(0.915)*60

：

tan(0.915) = opposite/60、我々が持っているJavaScriptコードで反対のための解決を歪んだオブジェクトは原点から約77ピクセル離れて開始します。キャンバスに私たちの仕事をチェックしてみましょう：

http://jsfiddle.net/LBzUt/

は、私には良いですね！

当然の三角形はキャンバスの原点、私が描いた黒い点、赤い四角形の左下です。これは、斜めになる前に探していた元の位置です。

これはやや不安な説明でした。質問は？

Answer 2

あなたは、単に度入力することができますので、さらに一歩サイモンのフィドルを例に取る：

は、ここで私は、私はそれをこのように明確ことができると思いますフィドル http://jsfiddle.net/LBzUt/33/