javascript - svgのパスで正確な最も近いx座標とy座標を取得する方法は?

Question

私はsvg edit 2.7で作業しており、svgのパスタグで作業しており、不規則な形状のパスを作成しています。次に、任意の svg オブジェクトをパス タグの上または内側にドラッグできます。パス タグの上または内側にドラッグ アンド ドロップすると、そのオブジェクトの角度に対して正確に最も近い描画された x 点と y 点が得られます。SVG オブジェクトをパス タグの上にドラッグする必要があります。角度を変更する必要があります(変換セクション: 回転)。たとえば、作業領域にパス (サーフェス) を描画し、そのパス (サーフェス) にドラッグ アンド ドロップする必要があります。ここに私の問題ベースの画像を添付しました：

ここで、パスタグのすべてのポイントが見つかりましたが、ドラッグされたオブジェクトがそのパス境界に残っている間に正確なポイントを取得する必要があります。

最も近いパスポイントを取得するための次のコード

function closestPoint(pathNode, point) {
  var pathLength = pathNode.getTotalLength(),
      precision = pathLength / pathNode.pathSegList.numberOfItems * .125,
      best,
      bestLength,
      bestDistance = Infinity;

  // linear scan for coarse approximation
  for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
    if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
      best = scan, bestLength = scanLength, bestDistance = scanDistance;
    }
  }

  // binary search for precise estimate
  precision *= .5;
  while (precision > .5) {
    var before,
        after,
        beforeLength,
        afterLength,
        beforeDistance,
        afterDistance;
    if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
      best = before, bestLength = beforeLength, bestDistance = beforeDistance;
    } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
      best = after, bestLength = afterLength, bestDistance = afterDistance;
    } else {
      precision *= .5;
    }
  }
  best = [best.x, best.y];
  best.distance = Math.sqrt(bestDistance);
  return best;

  function distance2(p) {
    var dx = p.x - point[0],
        dy = p.y - point[1];
    return dx * dx + dy * dy;
  }
}

上記のコードは、パス タグで隣接する行を検索するために使用されます。

    var segments = pathNode.pathSegList;
      for (var i=0,len=segments.numberOfItems;i<len;++i){
      var segment = segments.getItem(i);
      switch(segment.pathSegType){
      case SVGPathSeg.PATHSEG_LINETO_ABS:
// segment is a SVGPathSegLinetoAbs object
      console.log( "Absolute Line To", segment.x, segment.y );
      break;
      case SVGPathSeg.PATHSEG_CLOSEPATH:
      break;
      }
   }

ここで 絶対線 TOは、パス タグ内のすべてのポイントをもたらします。ユーザーがパス タグの 2 行目にドア オブジェクトを残すとき、パス内の x 座標と y 座標を取得する方法。前もって感謝します