如何使用Paper.js获取相交Path上两交点间的路径段？

嘿，刚好对Paper.js的路径操作比较熟，来给你一步步拆解这两个问题！

这里分两种常见场景来处理：

场景1：两点是Path上的已有Segment点 #

如果你的两个点是路径上已经存在的Segment（比如通过path.segments能拿到的点），可以直接通过索引分割路径：

• 先确定两个segment在路径中的索引，把小的索引设为起始点，大的设为终点
• 用Path.split()方法分两次切割，取出中间的段

代码示例：

// 假设path是你的目标路径，seg1、seg2是路径上的两个Segment实例
const seg1Index = path.segments.indexOf(seg1);
const seg2Index = path.segments.indexOf(seg2);
const startIdx = Math.min(seg1Index, seg2Index);
const endIdx = Math.max(seg1Index, seg2Index);

// 第一次切割：在起始segment后面分割
const [leftPart, tempRightPath] = path.split(startIdx + 0.5);
// 第二次切割：在终点segment前面分割
const [middleSegment, rightPart] = tempRightPath.split(endIdx - startIdx - 0.5);

// middleSegment就是你要的两点间路径段

场景2：两点是路径上的任意点（比如交点） #

如果两点是路径上的随机点（不是预先定义的segment），需要先拿到它们在路径上的偏移量（从路径起点到该点的长度），再进行分割：

代码示例：

// 假设path是目标路径，pointA、pointB是路径上的任意两个点
const offsetA = path.getOffsetOf(pointA);
const offsetB = path.getOffsetOf(pointB);
const startOffset = Math.min(offsetA, offsetB);
const endOffset = Math.max(offsetA, offsetB);

// 先复制原路径避免修改原路径（可选，根据你的需求决定）
const tempPath = path.clone();
// 第一次切割：从起始偏移处分割
const [leftPart, tempMiddlePath] = tempPath.split(startOffset);
// 第二次切割：从剩余路径的对应偏移处分割
const [targetSegment, rightPart] = tempMiddlePath.split(endOffset - startOffset);

// targetSegment就是两点间的路径段

这个需求其实是上面场景2的延伸，步骤如下：

1. 获取交点数组：用Path.getIntersections()方法拿到两条路径的所有交点，返回的数组里每个元素是Intersection对象，包含point属性（交点坐标）
2. 处理交点：确保至少有两个交点，然后取出对应的坐标
3. 按场景2的方法分割路径：拿到交点在目标路径上的偏移量，切割出中间段

代码示例：

// 假设pathA和pathB是两条相交的路径
const intersections = pathA.getIntersections(pathB);

// 确保有至少两个交点
if (intersections.length >= 2) {
  const point1 = intersections[0].point;
  const point2 = intersections[1].point;

  // 获取两个交点在pathA上的偏移量
  const offset1 = pathA.getOffsetOf(point1);
  const offset2 = pathA.getOffsetOf(point2);
  const start = Math.min(offset1, offset2);
  const end = Math.max(offset1, offset2);

  // 复制原路径避免破坏原路径
  const tempPath = pathA.clone();
  const [left, tempMiddle] = tempPath.split(start);
  const [targetSegment, right] = tempMiddle.split(end - start);

  // 把结果添加到画布上查看（可选）
  project.activeLayer.addChild(targetSegment);
  // 可以给路径段设置样式区分
  targetSegment.strokeColor = 'red';
  targetSegment.strokeWidth = 3;
}

额外注意事项 #

• 如果原路径是闭合路径（比如圆形、矩形），分割时要注意：如果两个偏移量的差大于路径总长度的一半，说明你拿到的是长的那段，要是想要短的那段，可以用路径总长度减去差值来切割
• 如果你不需要保留原路径，可以不用clone()，直接操作原路径，但分割后原路径会被拆成多个部分

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