LeaferJS中限制对象移动范围的实现方法

在图形编辑和交互式应用中，经常需要限制某些图形元素的移动范围，使其只能在特定区域内拖动。LeaferJS作为一款强大的图形渲染库，提供了多种方式来实现这一功能。

基础实现方法

最简单的限制移动范围方法是通过监听拖动事件，在移动过程中判断对象位置是否超出边界。以下是基本实现思路：

1. 监听对象的PointerEvent.DOWN事件，记录拖动开始状态
2. 在PointerEvent.MOVE事件中计算新位置
3. 判断新位置是否超出边界范围
4. 如果未超出则更新位置，否则保持原位置

const box = new Box({
  width: 200,
  height: 200,
  fill: '#FF4B4B'
});

const ellipse = new Ellipse({
  width: 100,
  height: 100,
  fill: '#FEB027',
  draggable: false
});

box.add(ellipse);

let isDragging = false;
ellipse.on(PointerEvent.DOWN, () => { isDragging = true; });

app.on(PointerEvent.MOVE, (e) => {
  if (isDragging) {
    const bounds = box.getBounds('box', 'local');
    const newX = ellipse.x + e.movementX;
    const newY = ellipse.y + e.movementY;
    
    if (newX >= 0 && newX + ellipse.width <= bounds.width &&
        newY >= 0 && newY + ellipse.height <= bounds.height) {
      ellipse.x = newX;
      ellipse.y = newY;
    }
  }
});

考虑变换后的范围检测

当对象应用了旋转、缩放等变换时，简单的范围判断会失效。这时需要使用世界坐标系下的范围检测：

app.on(PointerEvent.MOVE, (e) => {
  if (isDragging) {
    const parentBounds = box.getBounds('box', 'world');
    const selfBounds = ellipse.getBounds('box', 'world');
    
    const newX = selfBounds.x + e.movementX;
    const newY = selfBounds.y + e.movementY;
    
    if (newX >= parentBounds.x && 
        newX + selfBounds.width <= parentBounds.x + parentBounds.width &&
        newY >= parentBounds.y && 
        newY + selfBounds.height <= parentBounds.y + parentBounds.height) {
      const localPos = box.worldToLocal({ x: newX, y: newY });
      ellipse.x = localPos.x;
      ellipse.y = localPos.y;
    }
  }
});

使用内置dragBounds属性

最新版本的LeaferJS提供了更简便的方式——直接使用dragBounds属性来限制拖动范围：

const ellipse = new Ellipse({
  width: 100,
  height: 100,
  fill: '#FEB027',
  draggable: true,
  dragBounds: { 
    x: 0, 
    y: 0, 
    width: 200, 
    height: 200 
  }
});

这种方式会自动处理各种变换情况，是最推荐的实现方法。dragBounds可以指定相对于父容器的范围，支持旋转、缩放等各种变换下的精确范围检测。

实际应用建议

1. 对于简单场景，优先使用dragBounds属性
2. 需要自定义拖动逻辑时，使用世界坐标系范围检测
3. 注意性能优化，避免在移动事件中进行过多计算
4. 考虑用户体验，可以添加视觉反馈（如半透明、边框高亮等）

通过合理运用这些技术，可以轻松实现各种复杂的拖动限制需求，为用户提供更专业的交互体验。