37

半球（北半球）の画像の上にある文字盤を背景として回転させます。範囲は0〜180度です。キャンバス変換を行うメソッドへの入力時に、ダイヤルが回転し、一致した値の上で停止します。phrogzから渡されたヘルプとサンプルに基づいて私が試していたものは次のとおりです

4

1 に答える 1

95

一般的に、あなたがしたいことは次のとおりです。

  1. オブジェクトが回転するキャンバス上のポイントにコンテキストを変換します。
  2. コンテキストをローテーションします。
  3. 回転の中心のオブジェクト内の負のオフセットによってコンテキストを変換します。
  4. オブジェクトを0,0に描画します。

コード内：

ctx.save();
ctx.translate( canvasRotationCenterX, canvasRotationCenterY );
ctx.rotate( rotationAmountInRadians );
ctx.translate( -objectRotationCenterX, -objectRotationCenterY );
ctx.drawImage( myImageOrCanvas, 0, 0 );
ctx.restore();

これが実際の動作例です。（回転の計算は、すばやくスケッチされたゲージダイヤルに適合するラジアン単位のスイング量とオフセットを見つけるために実験的にハッキングされました。）

translate明らかなように、上記の手順3の呼び出しを、呼び出しのオフセットに置き換えることができdrawImage()ます。例えば： 

ctx.drawImage( myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY );

同じ場所に複数のオブジェクトを描画する場合は、コンテキスト変換を使用することをお勧めします。

于 2011-01-10T18:29:18.270 に答える