1

画像を描くキャンバスがあります。画像は、描画する前に一定の角度まで回転させることができます（EG：30）。

描画した画像を含めるためにボックスを描画する必要があります。これは簡単ですが、画像を回転させる角度に応じて幅と高さが変わります。

ここで非常によく似た質問をいくつか見ましたが、ActionScriptなどの別の言語で記述されているか、キャンバス内にないdivまたは他の要素を回転させているため、コードに回答を実装できませんでした。私はその背後にある主要な数学を理解することができませんでした。

私はあなたが適応するためにJSFiddleを作成しました：

http://jsfiddle.net/ZY7Ux/

このJSFiddleで2つの関数を作成しました。

drawImageToCanvasRotated(URL, X, Y, Angle);
drawRectangle(X, Y, Width, Height);

位置の値は画像/長方形の中心にあることに注意してください。

ありがとう。

4

1 に答える 1

1

画像を回転すると、新しい幅は次の組み合わせになります。

  • 幅のx次元。これは、全幅よりも少し小さくなります（コサインを使用）。
  • 高さのx次元。これは、0より少し高くなります（正弦を使用）。

同様の計算が新しい高さに適用されます。http://jsfiddle.net/ZY7Ux/1/

var a = Width * Math.cos(Angle);
var b = Height * Math.sin(Angle);
var c = a + b;

var p = Width * Math.sin(Angle);
var q = Height * Math.cos(Angle);
var r = p + q;

context.strokeRect(
    X - c / 2,
    Y - r / 2,
    c,
    r
);
于 2012-12-08T19:37:47.520 に答える