基于FabricJS实现多边形边线动态位置调整的技术求助

嘿，我来给你捋捋这个需求的靠谱实现思路——其实你之前尝试的点-in-多边形检测思路不算错，但对于边线偏移这个需求来说，直接用几何计算来生成偏移后的线段会更直接、高效，还能避免点检测的边界误差问题。

核心思路：基于几何向量的边线偏移 #

我们的目标是根据每条边对应的正负距离，把边向多边形内侧/外侧平移指定距离。核心是计算每条边的垂直法向量，再根据距离的正负和多边形的顶点缠绕顺序（顺时针/逆时针）确定偏移方向，最终生成偏移后的线段。

具体实现步骤 #

1. 先判断多边形的顶点缠绕顺序

多边形的顶点顺序（顺时针/逆时针）决定了“内侧”和“外侧”的法向量方向，我们可以通过计算多边形面积的符号来判断：

function getPolygonWindingOrder(points) {
  let area = 0;
  for (let i = 0; i < points.length; i++) {
    const j = (i + 1) % points.length;
    area += points[i].x * points[j].y - points[j].x * points[i].y;
  }
  // 面积为正：逆时针；为负：顺时针
  return area > 0 ? 'counter-clockwise' : 'clockwise';
}

2. 编写线段偏移计算函数

根据边的两个顶点、偏移距离和缠绕顺序，计算出偏移后的线段端点：

function getOffsetEdge(pointA, pointB, distance, isCounterClockwise) {
  const dx = pointB.x - pointA.x;
  const dy = pointB.y - pointA.y;
  const edgeLength = Math.sqrt(dx * dx + dy * dy);
  
  if (edgeLength === 0) return { a: pointA, b: pointB }; // 避免除以0

  // 计算单位化的垂直法向量（外侧/内侧）
  const outerNormalX = -dy / edgeLength;
  const outerNormalY = dx / edgeLength;
  const innerNormalX = dy / edgeLength;
  const innerNormalY = -dx / edgeLength;

  // 根据距离正负和缠绕顺序选择偏移方向
  let offsetX, offsetY;
  const absDistance = Math.abs(distance);
  if (distance > 0) {
    // 向外偏移
    offsetX = isCounterClockwise ? outerNormalX * absDistance : innerNormalX * absDistance;
    offsetY = isCounterClockwise ? outerNormalY * absDistance : innerNormalY * absDistance;
  } else {
    // 向内偏移
    offsetX = isCounterClockwise ? innerNormalX * absDistance : outerNormalX * absDistance;
    offsetY = isCounterClockwise ? innerNormalY * absDistance : outerNormalY * absDistance;
  }

  // 计算偏移后的两个端点
  return {
    a: { x: pointA.x + offsetX, y: pointA.y + offsetY },
    b: { x: pointB.x + offsetX, y: pointB.y + offsetY }
  };
}

3. 结合FabricJS对象更新边线

把多边形的顶点转换为绝对坐标（如果有旋转/缩放还要额外处理），然后遍历每条边，用上面的函数计算偏移后的线段，更新对应的FabricJS Line对象：

// 假设poly是你的FabricJS Polygon实例，lines是边线数组（和LinesDistances顺序对应）
const polyPoints = poly.points.map(p => ({
  x: p.x * poly.scaleX + poly.left,
  y: p.y * poly.scaleY + poly.top
}));
const isCCW = getPolygonWindingOrder(polyPoints) === 'counter-clockwise';

// 处理旋转情况（如果多边形有旋转）
if (poly.angle !== 0) {
  const angleRad = poly.angle * Math.PI / 180;
  const cos = Math.cos(angleRad);
  const sin = Math.sin(angleRad);
  
  // 把绝对坐标转成多边形局部坐标系（消除旋转影响）
  const localPoints = polyPoints.map(p => {
    const dx = p.x - poly.left;
    const dy = p.y - poly.top;
    return {
      x: dx * cos + dy * sin,
      y: -dx * sin + dy * cos
    };
  });

  // 计算偏移后的局部线段，再转回绝对坐标
  LinesDistances.forEach((distance, idx) => {
    const i = idx;
    const j = (idx + 1) % localPoints.length;
    const offsetEdge = getOffsetEdge(localPoints[i], localPoints[j], distance, isCCW);
    
    // 把局部坐标转回绝对坐标（加旋转）
    const aAbsX = offsetEdge.a.x * cos - offsetEdge.a.y * sin + poly.left;
    const aAbsY = offsetEdge.a.x * sin + offsetEdge.a.y * cos + poly.top;
    const bAbsX = offsetEdge.b.x * cos - offsetEdge.b.y * sin + poly.left;
    const bAbsY = offsetEdge.b.x * sin + offsetEdge.b.y * cos + poly.top;

    // 更新边线
    lines[idx].set({ x1: aAbsX, y1: aAbsY, x2: bAbsX, y2: bAbsY });
  });
} else {
  // 无旋转的情况直接计算
  LinesDistances.forEach((distance, idx) => {
    const i = idx;
    const j = (idx + 1) % polyPoints.length;
    const offsetEdge = getOffsetEdge(polyPoints[i], polyPoints[j], distance, isCCW);
    lines[idx].set({ x1: offsetEdge.a.x, y1: offsetEdge.a.y, x2: offsetEdge.b.x, y2: offsetEdge.b.y });
  });
}

// 重新渲染画布
canvas.renderAll();

为什么不用点-in-多边形检测？ #

点-in-多边形适合判断单个点是否在多边形内部，但对于边线偏移需求，直接通过几何向量计算偏移方向更精准，不需要额外的点检测逻辑，还能避免复杂多边形下的点检测误差。如果是凸多边形，上面的方法完全够用；如果是凹多边形，可能需要额外处理偏移后线段的相交问题，但基础逻辑是一致的。

内容的提问来源于stack exchange，提问作者user969068