javascript - 从光标中心绘制一个正方形

Question

目前我有一个 Canvas ，你可以用你的光标画一个正方形，比如paint.net。当您拖动光标时，它将从左 Angular 开始创建一个正方形。我希望它从广场的中心开始。是否可以通过 rect 实现这一点？ ?
下面的代码从左 Angular 开始绘制一个正方形，其中 mouseCoords是光标开始拖动的起点，currentMouse是您拖动到的位置。

//create rectangle starting from left corner
canvas.getContext('2d').rect(
  mouseCoords.x,
  mouseCoords.y,
  currentMouse.x - mouseCoords.x,
  currentMouse.y - mouseCoords.y
);

Answer 1

如 mouseCoords.x和 mouseCoords.y是中心，然后 currentMouse.x - mouseCoords.x和 currentMouse.y - mouseCoords.y将分别是宽度的一半和高度的一半。考虑到这一点，它应该是直截了当的； x坐标将为 mouseCoords.x - (currentMouse.x - mouseCoords.x)这是 2 * mouseCoords.x - currentMouse.x ，同样适用于 y协调:

canvas.getContext('2d').rect(
  2 * mouseCoords.x - currentMouse.x,
  2 * mouseCoords.y - currentMouse.y,
  2 * (currentMouse.x - mouseCoords.x),
  2 * (currentMouse.y - mouseCoords.y)
);

如果使用描述值的变量会更清楚:

let halfWidth = currentMouse.x - mouseCoords.x;
let halfHeight = currentMouse.y - mouseCoords.y;

canvas.getContext('2d').rect(
  mouseCoords.x - halfWidth,
  mouseCoords.y - halfHeight,
  2 * halfWidth,
  2 * halfHeight
);