flutter - 如何使 SVG 路径在 Flutter 中可拖动？

Question

当我使用 CustomPainter 并在 Canvas 上绘制 SVG 路径时。

我想让拖动 SVG 路径成为可能（通过用户手指触摸移动画布上绘制的各个路径）。

我正在分享代码：

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: CustomPaint(
          painter: Svgpainter(),
          child: SizedBox.expand(),
        ),
      ),
    );
  }
}

class Svgpainter extends CustomPainter {
  //* SVG PATHS
  static final _svgPaths = [
    [
      '''M288.7,187.7c-53.7-32.6-119.8,1-119.8,1s11.6,92.6,11.4,121.4c-0.8,2-1,4.1-0.4,6.3
        c-0.2,1.2-0.6,1.7-1,1.7h1.7c1.1,3,2.9,4.3,5.8,5.3c10.9,4,21.5,6.8,33.1,7.7c3.6,0.3,7.1,0.2,10.5-0.2c1.6,1.5,4,2.4,7.1,2.1
        c13.2-1.2,28-1.9,38.6-10.3c1.7-1.4,2.7-2.7,3.1-4.7h0.8L288.7,187.7z''',
      Color(0xffFFB564)
    ],
    [
      '''M222.6,133.8c0,0-17.9-15.6-5.3,39.9c0.6,2.5,19.4,3.4,19.4,3.4L222.6,133.8z''',
      Color(0xffFFFBE8)
    ],
    [
      '''M188.6,181.4c0,0-20.6,0-20.6,12.4c0.1,17.2,13.4,105.6,13.1,119.9c-0.2,9.3,19.1,13.6,19.1,13.6''',
      Color(0xffF9A035)
    ],
    [
      '''M200.2,93.3c0,0,9.7,50.2,11.6,48.4c2-1.8,10.8-7.9,10.8-7.9l-13.5-40.5H200.2z''',
      Color(0xffFFB564)
    ],
    [
      '''M184.1,123.6c0,0-12.9,24.6-10.9,22.8c2-1.8,27-2.4,27-2.4L184.1,123.6z''',
      Color(0xffFFFBE8)
    ],
    [
      '''M257.9,92.8c-1.5,2-3,4.1-4.4,6.3c-1.2,1.9-2.9,2.3-4.6,1.9c-1.7,3.4-3.5,6.7-5.7,9.8
        c-6.2,22.4-0.7,41.7-8.7,63.8c-1.3,3.5,0.3,0.3,2.2,2.5c5.6-3,31.1,3.5,38.7,4.2c1.7-2.3-9.1-3.3-10.3-6.6c1.4,3.9,0.2-5.2,0.2-6.1
        c0.3-2.6,0-5.5,0.3-8.1c0.7-4.6-1.4-6.4-0.8-11c1.9-14.5,3.4-29.4,3-44.1c-2.2-3.9-4.1-7.9-5.6-12.1C261,92.9,259.4,92.7,257.9,92.8z''',
      Color(0xffF25F68)
    ],
    [
      '''M218.2,174.8c0,0-4.5-16.5-9-36.4c-4.8-21.3-9.7-43.8-9-45.1c1.3-2.6,5.4-4.8,8.9,0c2,2.7,7.9,21.6,13.5,40.5c6.3,21.1,12.2,42.3,11.9,40.8''',
      Color(0xffAF3A46)
    ],
  ];

  final Paint _paint = Paint();

  @override
  void paint(Canvas canvas, Size size) {
    for (var p in _svgPaths) {
      final path = parseSvgPath(p[0]);
      _paint
        ..color = p[1] as Color
        ..style = PaintingStyle.fill;
      canvas.drawPath(path, _paint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

我希望每条路径都是可拖动的。期待解决方案。

标签： fluttersvgflutter-layoutflutter-dependencies