判断点是否在线段的缓冲范围内

应用场景

通过鼠标点选择线段、多段线。

已知条件

线段两端点坐标：P1[x1, y1]、P2[x2, y2]
目标点：P[x0,y0]
缓冲半径：offset

QQ截图20200324172923.png

思路

1. 面积法。P与四个角ABCD拆分成4个三角形求面积之和
2. 向量叉乘判断左右
3. 多边形射线法，求相交点的个数是奇数还是偶数
4. 以中点O为坐标原点，沿着OP2和垂直向量为坐标轴，向量点乘求向量OP在两坐标轴上的投影

代码

function isPointInsideSegmentOffset(x0, y0, x1, y1, x2, y2, offset) {
  let dx, dy, cx, cy, m, ux, uy, vx, vy, wx, wy;
  dx = (x2 - x1) / 2;
  dy = (y2 - y1) / 2;
  cx = (x2 + x1) / 2;
  cy = (y2 + y1) / 2;
  m = Math.hypot(dx, dy);
  ux = dx / m;
  uy = dy / m;
  vx = -uy;
  vy = ux;
  wx = x0 - cx;
  wy = y0 - cy;

  return (Math.abs(ux * wx + uy * wy) <= m && Math.abs(vx * wx + vy * wy) <= offset)
}