js canvas 拖动缩放矩形的宽高

要实现在 canvas 上拖动和缩放矩形的宽高，可以按照以下步骤进行：

创建一个 canvas 元素和一个 2D 上下文对象：

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

定义一个矩形对象，包含矩形的位置和大小信息：

const rectangle = {
  x: 100,   // 矩形左上角的 x 坐标
  y: 100,   // 矩形左上角的 y 坐标
  width: 200,   // 矩形的宽度
  height: 100   // 矩形的高度
};

编写一个函数来绘制矩形：

function drawRectangle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);   // 清空画布
  ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);   // 绘制矩形
}

编写一个函数来判断鼠标是否在矩形内部：

function isMouseInsideRectangle(mouseX, mouseY) {
  return (mouseX >= rectangle.x && mouseX <= rectangle.x + rectangle.width &&
          mouseY >= rectangle.y && mouseY <= rectangle.y + rectangle.height);
}

定义一些变量来跟踪拖动和缩放操作的状态：

let isDragging = false;   // 是否正在拖动矩形
let isResizing = false;   // 是否正在调整矩形大小
let dragStartX = 0;   // 拖动操作开始时鼠标的 x 坐标
let dragStartY = 0;   // 拖动操作开始时鼠标的 y 坐标

监听鼠标按下事件，根据鼠标位置进行相应的操作：

canvas.addEventListener('mousedown', (event) => {
  const mouseX = event.clientX - canvas.getBoundingClientRect().left;
  const mouseY = event.clientY - canvas.getBoundingClientRect().top;

  if (isMouseInsideRectangle(mouseX, mouseY)) {
    isDragging = true;
    dragStartX = mouseX - rectangle.x;   // 记录拖动操作开始时鼠标与矩形左上角的偏移量
    dragStartY = mouseY - rectangle.y;
  } else if (mouseX >= rectangle.x + rectangle.width - 10 && mouseX <= rectangle.x + rectangle.width &&
             mouseY >= rectangle.y + rectangle.height - 10 && mouseY <= rectangle.y + rectangle.height) {
    isResizing = true;
    dragStartX = mouseX - rectangle.width;   // 记录调整大小操作开始时鼠标与矩形右下角的偏移量
    dragStartY = mouseY - rectangle.height;
  }
});

监听鼠标移动事件，根据操作状态更新矩形的位置和大小：

canvas.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX - canvas.getBoundingClientRect().left;
  const mouseY = event.clientY - canvas.getBoundingClientRect().top;

  if (isDragging) {
    rectangle.x = mouseX - dragStartX;   // 更新矩形的位置
    rectangle.y = mouseY - dragStartY;
    drawRectangle();
  } else if (isResizing) {
    rectangle.width = mouseX - rectangle.x - dragStartX;   // 更新矩形的宽度
    rectangle.height = mouseY - rectangle.y - dragStartY;   // 更新矩形的高度
    drawRectangle();
  }
});

监听鼠标松开事件，结束拖动或缩放操作：

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

最后，调用 drawRectangle() 函数来绘制初始的矩形：

drawRectangle();

这样，你就可以在 canvas 上拖动和缩放矩形的宽高了。注意在 HTML 中添加一个 id 为 "canvas" 的 canvas 元素，并将上述代码放在页面加载完成后执行