计算路径包围的区域与Flutter中特定点之间的距离

Question

根据路径文档：

Closed sub-paths enclose a (possibly discontiguous) region of the plane based on the current fillType.

据我了解，这意味着当一个 Path 对象关闭时，它围绕着一个二维区域。

当用户点击屏幕上的某个点时，我想计算用户点击的点与路径包围的区域之间的距离。我明白了用户通过 GestureDetector/onPanDown 单击的意思，但我无法弄清楚如何计算到路径的距离（或路径包围的区域）。 Path 提供的所有功能似乎 return void 或 bool 但没有距离。

想象一下：（当我将它绘制到屏幕上时，红色是 Path 对象，X 应该是我的用户点击的地方；绿线表示的两者之间的距离是我感兴趣的在）

如何计算距离？

Answer 1

首先遍历路径的所有点。并为每个点找出到点击位置的距离并保持最短的一个。

因此要获取路径的点，请使用 PathMetrics。

double getShortestDistance(Path path, Offset clickedPoint) {
    PathMetrics pathMetrics = path.computeMetrics();
    
    double minDistance;
    
    pathMetrics.toList().forEach((element) {
      for (var i = 0; i < element.length; i++) {
        Tangent tangent = element.getTangentForOffset(i.toDouble());
        Offset pos = tangent.position;
        
        double distance = getDistance(pos,clickedPoint);
        if(minDistance==null||distance<minDistance) {
          minDistance = distance;
        }
      }
    });

    return minDistance;
  }

  double getDistance(Offset pos, Offset clickedPoint) {
    double dx = pos.dx-clickedPoint.dx;
    double dy = pos.dy-clickedPoint.dy;
    double distance = sqrt(dx*dx+dy*dy);
    return distance.abs();
  }

参考来自

计算路径包围的区域与Flutter中特定点之间的距离

Calculate distance between the area surrounded by a Path and a specific point in Flutter

flutter

flutter-canvas

flutter-path

dart-ui