Flutter矢量圖SVG的區域填色怎么實現

本文小編為大家詳細介紹“Flutter矢量圖SVG的區域填色怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Flutter矢量圖SVG的區域填色怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

具體步驟: 1.SVG實際上就是一個xml文件,通過flutter自帶的package xml進行進行圖層解析 import 'package:xml/xml.dart';

這里是解析的部分代碼

Future<void> load() async {
  draws.clear();
  colors.clear();
  actualColors.clear();
  String assetName = 'lib/1057.svg';
  String svg = await rootBundle.loadString(assetName);
  final document = XmlDocument.parse(svg);
  final svgRoot = document.rootElement;
  Iterable<XmlElement> pathNodes = svgRoot.findAllElements('path');
  List<XmlElement> pathNodesList = pathNodes.toList();
  RegExp colorRegex = RegExp(r"#\w{6}");
  for (int i = 0; i < pathNodesList.length; i++) {
    XmlElement element = pathNodesList[i];
    String? d = element.getAttribute('d');
    final Path path = parseSvgPathData(d ?? '');
    draws.add(path);
    String? style = element.getAttribute('style');
    assemblyColor(colorRegex, style);
  }
  setState(() {});
}

2.繪制到canvas上:解析完成后,就是繪制呀 這里是繪制的代碼

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < draws.length; i++) {
      Path path = draws[i];
      canvas.drawPath(path, Paint()..color = colors[i]);
    }
  }
  Future<void> onTap(Offset offset) async {
    for (int i = 0; i < draws.length; i++) {
      Path path = draws[i];
      if (path.contains(offset)) {
        colors[i] = actualColors[i];
        return;
      }
    }
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

3.容器縮放:繪制完成后，一定要縮放啊 不然小小的多不開心 這里是容器的代碼

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    return InteractiveViewer(
      boundaryMargin: const EdgeInsets.all(50),
      maxScale: 6,
      child: OverflowBox(
        child: GestureDetector(
          onTapDown: (TapDownDetails details) {
            Offset offset = Offset(
                details.localPosition.dx / (width / size.width),
                details.localPosition.dy / (width / size.width));
            _painter.onTap(offset);
            setState(() {});
            // 在這里處理點擊事件
          },
          child: Container(
            color: Colors.white,
            width: width,
            height: width,
            child: Center(
              child: Transform.translate(
                offset: Offset(
                    -(size.width - width) / 2.0 * (width / size.width),
                    -(size.width - width) / 2.0 * (width / size.width)),
                child: Transform.scale(
                  scale: width / size.width,
                  child: RepaintBoundary(
                    child: CustomPaint(
                      isComplex: true,
                      size: Size(size.width, size.width),
                      painter: MyPainter(),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4.動畫:如此看來現在點擊填充的時候是不是有個動畫就更好了？

class _FillWidgetState extends State<FillWidget>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    _animationController = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this)
      ..repeat(reverse: true)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          print("Animation completed");
          setState(() {});
        } else if (status == AnimationStatus.dismissed) {
          print("Animation dismissed");
        }
      });
    _radiusAnimation =
        Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
    load();
    super.initState();
  }
child: AnimatedBuilder(
  animation: _animationController,
  builder: (BuildContext context, Widget? child) {
    return RepaintBoundary(
      child: CustomPaint(
        key: UniqueKey(),
        isComplex: true,
        size: Size(size.width, size.width),
        painter: _painter,
      ),
    );
  },
)

讀到這里，這篇“Flutter矢量圖SVG的區域填色怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。