如何在 Flutter 中找到一条线上的点？答案

【问题标题】：How do I find a point on a line in Flutter?如何在 Flutter 中找到一条线上的点？
【发布时间】：2022-06-27 04:06:57
【问题描述】：

如果我在 Flutter 中有如下图表：

如果绿色图表是具有许多 lineTo 段的 Path 对象，我如何找到具有给定 x 坐标的点的 y 坐标？

正如您在图像中看到的，在 x 轴上的特定点有一条灰色虚线，我想在它与绿色图形的交点处绘制一个点。

这是一个示例路径：

final path = Path();
path.moveTo(0, 200);
path.lineTo(10, 210);
path.lineTo(30, 190);
path.lineTo(55, 150);
path.lineTo(80, 205);
path.lineTo(100, 0);

我想找到dx = 75 处的点的 y 坐标。

【问题讨论】：

标签： flutter dart graphics 2d flutter-canvas

【解决方案1】：

对于每个x（即从左到右只有一个图形/线）只有一个点的 any 路径，实现此目的的最简单方法是使用 @ 987654321@.

然后您可以简单地使用路径的距离来执行二进制搜索并通过Path.getTangentForOffset找到偏移量：

const searchDx = 75;
const iterations = 12;
  
final pathMetric = path.computeMetrics().first;
final pathDistance = pathMetric.length;
late Offset closestOffset;
var closestDistance = pathDistance / 2;
for (var n = 1; n <= iterations; n++) {
  closestOffset = pathMetric.getTangentForOffset(closestDistance)!.position;
  if (closestOffset.dx == searchDx) break;
   
  final change = pathDistance / pow(2, n);
  if (closestOffset.dx < searchDx) {
    closestDistance += change;
  } else {
    closestDistance -= change;
  }
}
  
print(closestOffset); // Offset(75.0, 193.9)

请注意，如果您想要运行更多的迭代（由于二分搜索的性质，这应该不是必需的），您应该将final change = pathDistance / pow(2, n); 替换为更便宜的操作，例如存储当前搜索间隔的左右点.

您可以通过example on Dartpad 找到完整的工作代码。

【讨论】：