Flutter學習之矢量圖SVG的區(qū)域填色示例詳解

更新時間：2023年04月14日 14:37:54 作者：小孫的Flutter

這篇文章主要為大家介紹了Flutter學習之矢量圖SVG的區(qū)域填色示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

請先看效果

具體步驟: 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,
      ),
    );
  },
)