1

プロジェクトにキャンバスを使用していますが、歪んでいる要素がいくつかあります。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);

目標は、42x60の画像がXx60の画像になったことを知ることです。これにより、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;

この式はすぐに崩壊しますが、画像が広くなるにつれて（このような直線的な値ではなく、傾斜した式だと思います）。キャンバスがスキューに対して何をするかについてのアイデアはありますか？

4

2 に答える 2

7

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

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

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

これが、同じオブジェクトが歪んでいる（緑色に塗られている）横にある、歪んでいない赤いオブジェクトです。したがって、直角三角形があります。

ここに画像の説明を入力してください

原点の角度（0.915 rad）がわかっており、隣接する辺の長さがわかっています。これは、2つの画像で60と25です。（赤の高さ）。

斜辺は、歪んでいる長辺です。

そして反対側は三角形の底です-それはどれだけ歪んでいますか！

私が思い出すと、接線は私たちを反対/隣接させます。

tan(0.915) = opposite / 60、JavaScriptコードで反対のことを解決します：

opposite = Math.tan(0.915)*60

したがって、歪んだオブジェクトの下側は、原点から約77ピクセル離れたところから始まります。キャンバスで作業を確認しましょう。

http://jsfiddle.net/LBzUt/

は、私にはよく見えますよ！

問題の三角形はもちろん、キャンバスの原点、私が描いた黒い点、そして赤い長方形の左下です。これは、歪む前に探していた元の位置です。

それはちょっと無計画な説明でした。質問は？

于 2012-02-14T20:52:05.560 に答える
2

サイモンのフィドルの例をさらに一歩進めて、学位を入力するだけです。

これがフィドル ですhttp://jsfiddle.net/LBzUt/33/

于 2012-10-11T15:28:29.027 に答える