flutter 从SVG(包：路径_绘图)

e5nqia27 于 2023-02-13 发布在 Flutter

关注(0)|答案(1)|浏览(178)

我有一张SVG世界Map我尝试复制Map的单个路径数据，并将它们存储到一个多行字符串中，然后将该字符串拆分为一个新行。
然后，对于每个数据字符串，我将数据字符串转换为path对象，并尝试绘制它，但它什么也没绘制。

import 'package:flutter/material.dart';
import 'package:path_drawing/path_drawing.dart';
import 'package:touchable/touchable.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CanvasTouchDetector(
        gesturesToOverride: const [GestureType.onTapUp],
        builder: (context) {
          return CustomPaint(
            size: const Size(double.infinity, double.infinity),
            painter: MyPainter(context),
          );
        },
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final BuildContext context;
  MyPainter(this.context);

  @override
  void paint(Canvas canvas, Size size) {
    TouchyCanvas touchyCanvas = TouchyCanvas(context, canvas);

    final List<String> paths =
        '''m 479.68275,331.6274 -0.077,0.025 -0.258,0.155 -0.147,0.054 -0.134,0.027 -0.105,-0.011 -0.058,-0.091 0.006,-0.139 -0.024,-0.124 -0.02,-0.067 0.038,-0.181 0.086,-0.097 0.119,-0.08 0.188,0.029 0.398,0.116 0.083,0.109 10e-4,0.072 -0.073,0.119 z'''
            .split('\n');

    // drawing the paths
    for (int i = 0; i < paths.length; i++) {
      Path path = parseSvgPathData(paths[i]);

      touchyCanvas.drawPath(
        path,
        Paint()
          ..color = Colors.red
          ..strokeWidth = 2,
        onTapUp: (details) {
          print('clicked');
        },
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

注意：字符串中的路径数据是安道尔的。
我试着去理解这个答案：https://stackoverflow.com/a/60947105/11283915。当我使用这个答案中的数据字符串时，它绘制得很好，但不能与我尝试使用的SVG中的数据字符串一起使用。

flutter

来源：https://stackoverflow.com/questions/75399283/drawing-path-doesnt-work-when-extracted-from-svg-package-path-drawing

1条答案

按热度按时间

bttbmeg01#

将自定义绘图器的大小设置为与SVG的视框相同会使路径显示在绘图器上。例如，我有一个viewbox="0 0 2000 857"的SVG，所以我将自定义绘图器大小设置为Size(2000, MediaQuery.of(context).size.hieght)，将高度设置为设备高度，只是因为我的设备高度非常接近视框中定义的高度。
下面的代码可以工作：

import 'package:flutter/material.dart';
import 'package:path_drawing/path_drawing.dart';
import 'package:touchable/touchable.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: InteractiveViewer(
          child: CanvasTouchDetector(
            gesturesToOverride: const [GestureType.onTapUp],
            builder: (context) {
              return CustomPaint(
                size: const Size(2000, double.infinity),
                painter: MyPainter(context),
              );
            },
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final BuildContext context;
  MyPainter(this.context);

  @override
  void paint(Canvas canvas, Size size) {
    print(size);
    TouchyCanvas touchyCanvas = TouchyCanvas(context, canvas);

    final Map<String, String> mapData = {
      'af':
          'M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z',
    };

    // drawing the paths
    for (String key in mapData.keys) {
      Path path = parseSvgPathData(mapData[key]!);

      touchyCanvas.drawPath(
        path,
        Paint()
          ..color = Colors.red
          ..strokeWidth = 2,
        onTapUp: (details) {
          print('clicked $key');
        },
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

要查看绘制的路径，我只需要滚动屏幕。如果你想限制SVG绘制的区域，请按照以下步骤操作：https://stackoverflow.com/a/60947105/11283915

赞(0）回复(0）举报 2023-02-13

我来回答

flutter 从SVG(包：路径_绘图)

1条答案

相关问题

热门标签

最新问答