svg - 在 flutter 中改变路径的高度和宽度

Question

我正在使用 path_drawing 包从 Flutter 中的 SVG 获取路径。从 SVG 数据中提取路径后，它将其返回给 ClipPath 小部件，后者使用该路径来剪辑容器。之后，我增加了 Container 的宽度和高度，这不会增加 SVG 的大小。
如何更改 SVG 的大小？

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

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      appBar: AppBar(),
      body: Center(
        //Container enclosed in ClipPath which uses Practice Clip as a clipper
        child: ClipPath(
            clipper: PracticeClip(),
            child: Container(
              //Container color
              color: Colors.red,
              //width and height of container
              width: 100.0, 
              height: 100.0,
            )),
      ),
    );
  }
}

class PracticeClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    //parseSvgPathData comes from a package
    //Library link: https://pub.dev/packages/path_drawing (Library link)
    //parseSvgPathData returns a Path object
    //extracting path from SVG data
    path = parseSvgPathData(
        "M12.007.48C5.391.485.005 5.831 0 12.399v.03l2.042 1.191.028-.019a5.821 5.821 0 0 1 3.308-1.02c.371 0 .734.034 1.086.1l-.036-.006a5.69 5.69 0 0 1 2.874 1.431l-.004-.003.35.326.198-.434c.192-.42.414-.814.66-1.173.099-.144.208-.29.332-.446l.205-.257-.252-.211a8.33 8.33 0 0 0-3.836-1.807l-.052-.008a8.566 8.566 0 0 0-4.081.251l.061-.016c.971-4.257 4.714-7.224 9.133-7.227a9.31 9.31 0 0 1 6.601 2.713 9.197 9.197 0 0 1 2.508 4.499 8.386 8.386 0 0 0-2.498-.379h-.154c-.356.006-.7.033-1.037.078l.045-.005-.042.006a8.104 8.104 0 0 0-.39.06c-.057.01-.114.022-.17.033a8.103 8.103 0 0 0-.392.089l-.138.035a9.21 9.21 0 0 0-.483.144l-.029.01c-.355.12-.709.268-1.051.439l-.027.014c-.152.076-.305.16-.469.256l-.036.022a8.217 8.217 0 0 0-2.108 1.801l-.011.013-.075.092a8.346 8.346 0 0 0-.378.503c-.088.13-.177.269-.288.452l-.06.104a8.986 8.986 0 0 0-.234.432l-.016.029c-.17.341-.317.698-.44 1.063l-.017.053a8.053 8.053 0 0 0-.411 2.717v-.007l.001.112c.006.158.013.295.023.431l-.002-.037a11.677 11.677 0 0 0 .042.412l.005.042.013.103c.018.127.038.252.062.378.241 1.266.845 2.532 1.745 3.66l.041.051.042-.05c.359-.424 1.249-1.77 1.325-2.577l.001-.015-.007-.013a5.56 5.56 0 0 1-.64-2.595v-.001c0-3.016 2.371-5.521 5.397-5.702l.199-.007a5.93 5.93 0 0 1 3.47 1.025l.028.019 2.041-1.187v-.03a11.771 11.771 0 0 0-3.511-8.424A11.963 11.963 0 0 0 12.008.48z");
    return path;// path is returned to ClipPath clipper
  }

  @override
  bool shouldReclip(PracticeClip oldClipper) => false;
}

Answer 1

我相信您想扩展路径。就像是:

class PracticeClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    //parseSvgPathData comes from a package
    //Library link: https://pub.dev/packages/path_drawing (Library link)
    //parseSvgPathData returns a Path object
    //extracting path from SVG data
    final Path path = parseSvgPathData(
        "M12.007.48C5.391.485.005 5.831 0 12.399v.03l2.042 1.191.028-.019a5.821 5.821 0 0 1 3.308-1.02c.371 0 .734.034 1.086.1l-.036-.006a5.69 5.69 0 0 1 2.874 1.431l-.004-.003.35.326.198-.434c.192-.42.414-.814.66-1.173.099-.144.208-.29.332-.446l.205-.257-.252-.211a8.33 8.33 0 0 0-3.836-1.807l-.052-.008a8.566 8.566 0 0 0-4.081.251l.061-.016c.971-4.257 4.714-7.224 9.133-7.227a9.31 9.31 0 0 1 6.601 2.713 9.197 9.197 0 0 1 2.508 4.499 8.386 8.386 0 0 0-2.498-.379h-.154c-.356.006-.7.033-1.037.078l.045-.005-.042.006a8.104 8.104 0 0 0-.39.06c-.057.01-.114.022-.17.033a8.103 8.103 0 0 0-.392.089l-.138.035a9.21 9.21 0 0 0-.483.144l-.029.01c-.355.12-.709.268-1.051.439l-.027.014c-.152.076-.305.16-.469.256l-.036.022a8.217 8.217 0 0 0-2.108 1.801l-.011.013-.075.092a8.346 8.346 0 0 0-.378.503c-.088.13-.177.269-.288.452l-.06.104a8.986 8.986 0 0 0-.234.432l-.016.029c-.17.341-.317.698-.44 1.063l-.017.053a8.053 8.053 0 0 0-.411 2.717v-.007l.001.112c.006.158.013.295.023.431l-.002-.037a11.677 11.677 0 0 0 .042.412l.005.042.013.103c.018.127.038.252.062.378.241 1.266.845 2.532 1.745 3.66l.041.051.042-.05c.359-.424 1.249-1.77 1.325-2.577l.001-.015-.007-.013a5.56 5.56 0 0 1-.64-2.595v-.001c0-3.016 2.371-5.521 5.397-5.702l.199-.007a5.93 5.93 0 0 1 3.47 1.025l.028.019 2.041-1.187v-.03a11.771 11.771 0 0 0-3.511-8.424A11.963 11.963 0 0 0 12.008.48z");
    final Rect pathBounds = path.getBounds();
    final Matrix4 matrix4 = Matrix4.identity();
    matrix4.scale(size.width / pathBounds.width, size.height / pathBounds.height);
    return path.transform(matrix4.storage);// path is returned to ClipPath clipper
  }

  @override
  bool shouldReclip(PracticeClip oldClipper) => false;
}

应该让你开始。