从光标中心画一个正方形答案

【问题标题】：Draw a square from cursor center从光标中心画一个正方形
【发布时间】：2020-06-22 05:22:05
【问题描述】：

目前我有一个画布，您可以在其中使用光标绘制正方形，例如paint.net。当您拖动光标时，它将从左角开始创建一个正方形。我希望它从广场的中心开始。是否可以通过rect 实现这一目标？

下面的代码从左角开始绘制一个正方形，其中mouseCoords 是光标开始拖动的起点，currentMouse 是您拖动到的位置。

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

【问题讨论】：

为什么不偏移正方形的起始位置，使其以起始位置为中心？除非我错过了隐藏的复杂性
我试图通过将起点推得更远，但没有成功：mouseCoords.x - (currentMouse.x - mouseCoords.x)（这是 .rect 的第一个参数。对于 Y 也是如此）。这只会导致画在相反的方向
我找到了解决方案，我忘了乘以宽度和高度。感谢您的宝贵时间！

标签： javascript html5-canvas

【解决方案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
);

【讨论】：

【解决方案2】：

我找到了解决方案。我犯了一个错误，忘记将宽度和高度相乘。

context.rect(
  mouseCoords.x - (currentMouse.x - mouseCoords.x),
  mouseCoords.y - (currentMouse.y - mouseCoords.y),
  (currentMouse.x - mouseCoords.x) * 2,
  (currentMouse.y - mouseCoords.y) * 2
);

【讨论】：