在fabric.js中如何实现对象仅在另一指定画布对象范围内移动？

完全可以实现该需求，核心思路是监听对象的移动事件，实时校验矩形位置是否在多边形边界内，超出范围就回退到上一个合法位置即可。

核心用到的API #

• fabric.Polygon.containsPoint()：用于判断指定坐标点是否落在多边形内部
• canvas的object:moving事件：对象移动时实时触发，用于做边界校验

完整实现代码 #

// 初始化画布
const canvas = new fabric.Canvas('yourCanvasId');

// 存储上一次合法位置的变量
let lastValidPos = null;

// 1. 创建作为边界的多边形
const boundaryPolygon = new fabric.Polygon([
  {x: 100, y: 100},
  {x: 350, y: 70},
  {x: 420, y: 220},
  {x: 270, y: 380},
  {x: 90, y: 240}
], {
  fill: '#f5f5f5',
  selectable: false, // 边界多边形默认设为不可选中，避免误操作
  isBoundary: true // 自定义属性，标记为边界容器
});
canvas.add(boundaryPolygon);

// 2. 创建需要限制移动范围的矩形
const limitedRect = new fabric.Rect({
  width: 60,
  height: 60,
  fill: '#2385bb',
  left: 150,
  top: 150,
  needLimit: true // 自定义属性，标记该对象需要限制移动范围
});
canvas.add(limitedRect);

// 3. 监听移动事件做边界校验
canvas.on('object:moving', (e) => {
  const movingObj = e.target;
  // 仅处理需要限制范围的对象
  if (!movingObj.needLimit) return;

  // 匹配对应的边界多边形，多边界场景可加自定义关联属性匹配
  const boundary = canvas.getObjects().find(item => item.isBoundary);
  if (!boundary) return;

  // 获取当前矩形四个角的绝对坐标
  const rectCorners = movingObj.getCoords();
  let allInside = true;

  // 校验四个角是否都在多边形内部
  for (let corner of rectCorners) {
    if (!boundary.containsPoint(corner)) {
      allInside = false;
      break;
    }
  }

  if (allInside) {
    // 位置合法，更新最后合法位置记录
    lastValidPos = {left: movingObj.left, top: movingObj.top};
  } else if (lastValidPos) {
    // 超出边界，回退到上一个合法位置
    movingObj.set(lastValidPos);
  }
});

// 初始化时记录初始合法位置
lastValidPos = {left: limitedRect.left, top: limitedRect.top};

自定义调整说明 #

• 如果允许矩形部分超出，只需要修改校验规则即可，比如改为仅校验矩形中心点是否在多边形内部，无需校验四个角
• 如果存在多个多边形边界，可给多边形和限制矩形增加对应关联的自定义属性，事件触发时匹配对应边界即可
• 如果对象支持缩放，可同步监听object:scaling事件，用相同的逻辑做边界校验

内容的提问来源于stack exchange，提问作者v.wih