javascript - 用与图像中心点相关的 x,y 绘制图像？

Question

我试图在坐标点 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 坐标与图像的左上角相关？

Answer 1

在该方法的开头，它将上下文从左上角转换到中心。如果你想在图像的中心传递。然后您可以跳过该步骤，生成以下代码。

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

不要忘记，您必须以与更改翻译相同的方式撤消翻译。