原生JS Canvas如何绘制并拖动可调整大小的矩形？-css教程-PHP中文网

原生JS Canvas如何绘制并拖动可调整大小的矩形？

聖光之護

发布： 2025-02-21 16:18:09

原创

277人浏览过

原生js canvas如何绘制并拖动可调整大小的矩形？

使用原生JavaScript和Canvas绘制可交互矩形

本文介绍如何利用原生JavaScript和Canvas元素绘制一个可拖动和调整大小的矩形。

一、绘制矩形：

首先，我们需要使用JavaScript获取Canvas元素和其2D渲染上下文：

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

ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.fillRect(10, 10, 100, 50); // 绘制矩形 (x, y, width, height)

登录后复制

这段代码绘制了一个蓝色矩形，其左上角坐标为(10, 10)，宽为100像素，高为50像素。

二、拖动矩形：

实现拖动功能需要监听鼠标事件：mousedown、mousemove和mouseup。

let isDragging = false;
let startX, startY;

canvas.addEventListener('mousedown', (e) => {
  // 检查鼠标是否在矩形内
  if (isPointInRect(e.offsetX, e.offsetY, 10, 10, 100, 50)) {
    isDragging = true;
    startX = e.offsetX;
    startY = e.offsetY;
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const dx = e.offsetX - startX;
    const dy = e.offsetY - startY;
    // 清除画布并重新绘制矩形
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(10 + dx, 10 + dy, 100, 50);
    startX = e.offsetX;
    startY = e.offsetY;
  }
});

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

//辅助函数，判断点是否在矩形内
function isPointInRect(x, y, rectX, rectY, rectWidth, rectHeight) {
  return x >= rectX && x <= rectX + rectWidth && y >= rectY && y <= rectY + rectHeight;
}

登录后复制

这段代码添加了鼠标事件监听器。mousedown事件检测鼠标是否点击在矩形内，如果是则开始拖动；mousemove事件计算矩形位移并重新绘制；mouseup事件结束拖动。

三、调整矩形大小：

为了调整矩形大小，我们可以监听dblclick事件，并根据点击位置调整矩形的宽高。这部分实现较为复杂，需要判断点击位置是哪个边或角，然后进行相应的调整。为了简化，这里省略了这部分代码，但可以参考文中提到的Fabric.js库来实现更高级的功能。

四、总结：

以上代码展示了使用原生JavaScript和Canvas绘制可拖动矩形的核心步骤。对于更复杂的交互和功能，例如调整大小、旋转等，建议使用Fabric.js等Canvas库，它们提供了更便捷的API和更丰富的功能。

以上就是原生JS Canvas如何绘制并拖动可调整大小的矩形？的详细内容，更多请关注php中文网其它相关文章！