鼠标拖拽绘制圆心固定的圆形及相关功能实现技术问询

嘿，我懂这种感觉——明明看起来应该很简单的功能，实际动手时却卡壳，尤其状态不好的时候更闹心。别着急，我来给你捋清楚这个拖拽绘圆功能的实现思路，附上完整的代码示例，应该能帮你搞定所有要求！

先明确咱们要做的事：监听鼠标的按下、拖拽、松开事件，实时计算半径，绘制圆形，显示半径数值，还要支持Shift键的正方形限制功能。

1. 基础结构准备 #

首先需要一个画布用来画圆，再加个元素显示当前半径数值：

<canvas id="drawCanvas" width="800" height="600"></canvas>
<p>当前半径：<span id="radiusValue">0</span>px</p>

给画布加个样式，方便咱们看到绘制区域：

#drawCanvas {
  border: 1px solid #ccc;
  cursor: crosshair;
}
p {
  font-family: Arial, sans-serif;
}

2. JavaScript核心逻辑 #

接下来是关键的交互和绘制代码，我会逐部分解释：

const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
const radiusValueEl = document.getElementById('radiusValue');

let isDragging = false;
let startX, startY;
let shiftPressed = false;

// 监听Shift键状态
document.addEventListener('keydown', (e) => {
  if (e.key === 'Shift') {
    shiftPressed = true;
  }
});
document.addEventListener('keyup', (e) => {
  if (e.key === 'Shift') {
    shiftPressed = false;
  }
});

// 鼠标按下：记录起始坐标，开启拖拽状态
canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  const rect = canvas.getBoundingClientRect();
  startX = e.clientX - rect.left;
  startY = e.clientY - rect.top;
});

// 鼠标移动：实时计算并绘制圆形
canvas.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const rect = canvas.getBoundingClientRect();
  let currentX = e.clientX - rect.left;
  let currentY = e.clientY - rect.top;

  // 处理Shift键：让矩形变为正方形
  if (shiftPressed) {
    const dx = currentX - startX;
    const dy = currentY - startY;
    const maxAbs = Math.max(Math.abs(dx), Math.abs(dy));
    // 保持偏移方向，同时让水平/垂直偏移量绝对值相等
    currentX = startX + (dx >= 0 ? maxAbs : -maxAbs);
    currentY = startY + (dy >= 0 ? maxAbs : -maxAbs);
  }

  // 计算半径：勾股定理，支持任意方向拖拽
  const radius = Math.sqrt(Math.pow(currentX - startX, 2) + Math.pow(currentY - startY, 2));

  // 清除画布，避免残留之前的绘制
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制圆形：圆心(startX, startY)，半径radius
  ctx.beginPath();
  ctx.arc(startX, startY, radius, 0, Math.PI * 2);
  ctx.strokeStyle = '#2c3e50';
  ctx.lineWidth = 2;
  ctx.stroke();

  // 更新显示半径数值（保留两位小数）
  radiusValueEl.textContent = radius.toFixed(2);
});

// 鼠标松开：结束拖拽状态
canvas.addEventListener('mouseup', () => {
  isDragging = false;
});

// 鼠标移出画布：防止拖拽时移出后松开没触发mouseup
canvas.addEventListener('mouseleave', () => {
  isDragging = false;
});

关键细节说明 #

• 任意方向拖拽支持：用勾股定理计算两点之间的距离作为半径，不管你往哪个方向拖，这个公式都能准确算出半径，完美覆盖上下左右及任意中间方向。
• 实时半径显示：每次鼠标移动时，把计算出的半径保留两位小数后更新到页面元素里，用户能直观看到数值。
• Shift键功能：按住Shift时，我们会让当前坐标相对于起始点的水平和垂直偏移量绝对值相等，这样形成的矩形就是正方形，同时绘制的还是圆形（如果想要半径等于正方形的边长，直接把radius改成maxAbs就行，按需调整）。
• 画布清除：每次绘制前用clearRect清空画布，避免之前的圆形残留，保证显示的是当前拖拽的最新状态。

如果还有细节需要调整，比如圆形的颜色、线条粗细，或者半径数值的精度，直接改对应的代码参数就好啦！

内容的提问来源于stack exchange，提问作者Leo