Flutter中如何将SVG路径转换为Offset点列表

针对两个核心问题的解决方式如下：

• SVG路径本身不存在预存的点列表，所有可见点位都是根据路径指令按精度采样生成的
• svg_path_parser提供的是纯Dart实现的Path对象，并非Flutter渲染层的原生Path，完全可以遍历内部指令段完成采样，不需要依赖原生Path.contains()这类黑盒方法

核心实现逻辑 #

不要把解析后的路径转成Flutter原生Path对象，直接遍历解析库生成的路径指令集合，针对不同类型的路径段按固定步长采样，即可得到完整的Offset列表：

• 先通过SVG的XML解析拿到对应id节点的d属性，也就是SVG路径字符串
• 用svg_path_parser解析路径字符串，遍历它的commands属性里的所有路径指令
• 针对移动、直线、三次贝塞尔、二次贝塞尔、圆弧、闭合这几类标准SVG路径指令，分别做点位采样
• 采样时可以根据路径段的长度自动计算采样步数，保证不同长度的段采样密度一致

核心实现代码参考：

import 'package:svg_path_parser/svg_path_parser.dart';
import 'dart:ui';

List<Offset> sampleSvgPath(String svgPathStr, {double step = 1.0}) {
  final parsedPath = parseSvgPath(svgPathStr);
  final List<Offset> points = [];
  Offset currentPos = Offset.zero;
  Offset? subPathStart;

  for (final command in parsedPath.commands) {
    if (command is MoveToCommand) {
      currentPos = Offset(command.x, command.y);
      subPathStart = currentPos;
      points.add(currentPos);
    } else if (command is LineToCommand) {
      final end = Offset(command.x, command.y);
      final distance = (end - currentPos).distance;
      final steps = (distance / step).ceil();
      for (int i = 1; i <= steps; i++) {
        final t = i / steps;
        points.add(Offset(
          currentPos.dx + (end.dx - currentPos.dx) * t,
          currentPos.dy + (end.dy - currentPos.dy) * t,
        ));
      }
      currentPos = end;
    } else if (command is CurveToCommand) {
      final cp1 = Offset(command.x1, command.y1);
      final cp2 = Offset(command.x2, command.y2);
      final end = Offset(command.x, command.y);
      final estLen = _cubicBezierLength(currentPos, cp1, cp2, end);
      final steps = (estLen / step).ceil();
      for (int i = 1; i <= steps; i++) {
        final t = i / steps;
        points.add(_cubicBezierPoint(t, currentPos, cp1, cp2, end));
      }
      currentPos = end;
    } else if (command is QuadraticCurveToCommand) {
      final cp = Offset(command.x1, command.y1);
      final end = Offset(command.x, command.y);
      final estLen = _quadBezierLength(currentPos, cp, end);
      final steps = (estLen / step).ceil();
      for (int i = 1; i <= steps; i++) {
        final t = i / steps;
        points.add(_quadBezierPoint(t, currentPos, cp, end));
      }
      currentPos = end;
    } else if (command is ArcToCommand) {
      final end = Offset(command.x, command.y);
      // 圆弧段可转多段三次贝塞尔后复用贝塞尔采样逻辑，按精度要求实现即可
      currentPos = end;
    } else if (command is ClosePathCommand) {
      if (subPathStart != null && currentPos != subPathStart) {
        final distance = (subPathStart - currentPos).distance;
        final steps = (distance / step).ceil();
        for (int i = 1; i <= steps; i++) {
          final t = i / steps;
          points.add(Offset(
            currentPos.dx + (subPathStart.dx - currentPos.dx) * t,
            currentPos.dy + (subPathStart.dy - currentPos.dy) * t,
          ));
        }
        currentPos = subPathStart;
      }
    }
  }
  // 过滤重复点位减少冗余
  return points.toSet().toList();
}

Offset _cubicBezierPoint(double t, Offset p0, Offset p1, Offset p2, Offset p3) {
  final u = 1 - t;
  final tt = t * t;
  final uu = u * u;
  return Offset(
    u*u*u*p0.dx + 3*uu*t*p1.dx + 3*u*tt*p2.dx + tt*t*p3.dx,
    u*u*u*p0.dy + 3*uu*t*p1.dy + 3*u*tt*p2.dy + tt*t*p3.dy,
  );
}

Offset _quadBezierPoint(double t, Offset p0, Offset p1, Offset p2) {
  final u = 1 - t;
  return Offset(
    u*u*p0.dx + 2*u*t*p1.dx + t*t*p2.dx,
    u*u*p0.dy + 2*u*t*p1.dy + t*t*p2.dy,
  );
}

double _cubicBezierLength(Offset p0, Offset p1, Offset p2, Offset p3, {int sampleCount = 10}) {
  double len = 0;
  Offset prev = p0;
  for (int i = 1; i <= sampleCount; i++) {
    final t = i / sampleCount;
    final curr = _cubicBezierPoint(t, p0, p1, p2, p3);
    len += (curr - prev).distance;
    prev = curr;
  }
  return len;
}

double _quadBezierLength(Offset p0, Offset p1, Offset p2, {int sampleCount = 10}) {
  double len = 0;
  Offset prev = p0;
  for (int i = 1; i <= sampleCount; i++) {
    final t = i / sampleCount;
    final curr = _quadBezierPoint(t, p0, p1, p2);
    len += (curr - prev).distance;
    prev = curr;
  }
  return len;
}

采样步长可以根据业务需求调整：步长设为1.0时约每1个逻辑像素采一个点，足够应付点击判定、路径描边点提取这类常规场景；如果需要更高精度可以把步长调小，对应的点列表长度会上升，内存占用也会同步增加。不要尝试从Flutter原生Path对象中提取点位，原生Path是C++层实现的渲染对象，Dart层没有暴露遍历内部路径段的接口。

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