如何在teledraw.js的canvas画布内移动已绘制的各类图形元素？

你不需要手动维护绘制的图形数据，teledraw.js 会自动将所有已绘制的图形存储在实例的shapes数组中，每个图形实例都内置了坐标、尺寸属性和碰撞检测方法，直接复用这个数据源就能实现拖拽，和你参考的多元素拖拽demo逻辑完全通用，只需要适配teledraw的内置API即可。

1. 初始化状态变量与实例 #

首先声明拖拽需要的状态变量，获取你已经初始化的teledraw实例：

// 替换为你自己的teledraw实例
const td = new TeledrawCanvas('your-canvas-element-id');
// 拖拽状态变量
let activeShape = null; // 当前选中的拖拽图形
let offsetX = 0; // 鼠标点击位置和图形锚点的X轴偏移量
let offsetY = 0; // 鼠标点击位置和图形锚点的Y轴偏移量
let isDragging = false; // 拖拽状态标识

2. 点击选中图形逻辑 #

给canvas绑定mousedown事件，倒序遍历图形数组优先选中上层的图形，用teledraw内置的containsPoint方法做碰撞检测，不需要自己写碰撞判断逻辑：

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

  // 倒序遍历，后绘制的图形在上层，优先匹配上层元素
  for (let i = td.shapes.length - 1; i >= 0; i--) {
    const currentShape = td.shapes[i];
    if (currentShape.containsPoint(mouseX, mouseY)) {
      activeShape = currentShape;
      isDragging = true;
      // 记录偏移量，避免拖拽时图形直接跳转到鼠标位置
      offsetX = mouseX - currentShape.x;
      offsetY = mouseY - currentShape.y;
      break;
    }
  }
});

3. 拖拽移动与边界限制逻辑 #

绑定mousemove事件，拖拽状态下更新图形坐标，同时增加边界判断保证图形不会超出画布范围：

td.canvas.addEventListener('mousemove', (e) => {
  if (!isDragging || !activeShape) return;

  const canvasBounding = td.canvas.getBoundingClientRect();
  const mouseX = e.clientX - canvasBounding.left;
  const mouseY = e.clientY - canvasBounding.top;

  // 计算图形新坐标
  let newX = mouseX - offsetX;
  let newY = mouseY - offsetY;

  // 边界判断，可根据图形类型自定义调整规则
  const maxMoveX = td.canvas.width - (activeShape.width || 0);
  const maxMoveY = td.canvas.height - (activeShape.height || 0);
  newX = Math.max(0, Math.min(newX, maxMoveX));
  newY = Math.max(0, Math.min(newY, maxMoveY));

  // 赋值新坐标并重绘画布
  activeShape.x = newX;
  activeShape.y = newY;
  td.render();
});

4. 结束拖拽逻辑 #

绑定mouseup和mouseleave事件，拖拽结束后重置所有状态变量：

['mouseup', 'mouseleave'].forEach(eventName => {
  td.canvas.addEventListener(eventName, () => {
    isDragging = false;
    activeShape = null;
  });
});

如果需要拖拽线条、自由路径这类没有统一宽高属性的图形，可以调整边界判断规则：

• 线条类图形可以读取端点的x、y属性，计算所有端点的最小/最大坐标值来做边界限制
• 如果需要展示选中态，可以在调用td.render()前额外绘制选中边框、锚点等装饰元素

内容的提问来源于stack exchange，提问作者Tolga Günaydın