2

x と y が画像の中心にある座標点 x、y に画像を描画しようとしています。

画像を回転させるために以前に見つけた次のコードがあります。

function drawImageRot(img,x,y,width,height,deg) {
  //Convert degrees to radian
  var rad = deg * Math.PI / 180;

  //Set the origin to the center of the image
  context.translate(x + width / 2, y + height / 2);

  //Rotate the canvas around the origin
  context.rotate(rad);

  //draw the image
  context.drawImage(img, width / 2 * (-1), height / 2 * (-1), width, height);

  //reset the canvas
  context.rotate(rad * ( -1 ) );
  context.translate((x + width / 2) * (-1), (y + height / 2) * (-1));
}

しかし、下と右に画像を描くようですか？つまり、x、y 座標は画像の左上隅に関連していますか?

4

3 に答える 3

3

そのメソッドの開始時に、コンテキストを左上から中央に変換します。画像の中心で渡したい場合。次に、その手順をスキップして、次のコードを作成できます。

function drawImageRot(img,x,y,width,height,deg) {
  //Convert degrees to radian
  var rad = deg * Math.PI / 180;


  //Set the origin to the center of the image
  context.translate(x, y);

  //Rotate the canvas around the origin
  context.rotate(rad);

  //draw the image
  context.drawImage(img, width / 2 * (-1), height / 2 * (-1), width, height);

  //reset the canvas
  context.rotate(rad * ( -1 ) );

  //
  context.translate((x) * (-1), (y) * (-1));
}

翻訳を変更したのと同じ方法で、翻訳を取り消す必要があることを忘れないでください。

于 2013-05-14T14:36:20.380 に答える
1

この関数に左上隅ではなく中央の座標を指定する場合は、単に置き換えます

context.translate(x + width / 2, y + height / 2);

と

context.translate(x, y);
于 2013-05-14T14:36:48.657 に答える