如何用原生JS和Canvas实现可拖动并可调整大小的矩形？

// 获取画布元素和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 矩形对象
let rect = {
  x: 100,
  y: 100,
  width: 50,
  height: 50,
  isDragging: false
};

// 绘制矩形
function drawRect() {
  ctx.fillStyle = 'red';
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

// 鼠标按下事件
canvas.addEventListener('mousedown', (e) => {
  const mouseX = e.clientX - canvas.offsetLeft;
  const mouseY = e.clientY - canvas.offsetTop;

  // 检查鼠标是否在矩形内
  if (mouseX >= rect.x && mouseX <= rect.x + rect.width &&
      mouseY >= rect.y && mouseY <= rect.y + rect.height) {
    rect.isDragging = true;
  }
});

// 鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
  if (rect.isDragging) {
    const mouseX = e.clientX - canvas.offsetLeft;
    const mouseY = e.clientY - canvas.offsetTop;

    rect.x = mouseX - rect.width / 2;
    rect.y = mouseY - rect.height / 2;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawRect();
  }
});

// 鼠标松开事件
canvas.addEventListener('mouseup', () => {
  rect.isDragging = false;
});

drawRect();

// ... (previous code) ...

// 鼠标点击事件
canvas.addEventListener('click', (e) => {
  const mouseX = e.clientX - canvas.offsetLeft;
  const mouseY = e.clientY - canvas.offsetTop;

  // 检查鼠标是否在矩形边缘附近 (简化版，仅处理右下角缩放)
  if (mouseX >= rect.x + rect.width - 5 && mouseX <= rect.x + rect.width + 5 &&
      mouseY >= rect.y + rect.height - 5 && mouseY <= rect.y + rect.height + 5) {
    rect.isResizing = true;
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (rect.isResizing) {
    const mouseX = e.clientX - canvas.offsetLeft;
    const mouseY = e.clientY - canvas.offsetTop;

    rect.width = mouseX - rect.x;
    rect.height = mouseY - rect.y;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawRect();
  }
});

canvas.addEventListener('mouseup', () => {
  rect.isResizing = false;
});

// ... (rest of the code) ...