dnfield/flutter_path_drawing

Path is a little bit different than SVG.asset

desmeit opened this issue · 0 comments

I parse a SVG to use with Custom Clipper:

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(
        "M372.34,30.6S280.44,88.5,202.54,.1C124.64,88.5,32.74,30.6,32.74,30.6c0,0-49.9,110.9-26.5,226.7,23.3,115.7,196.3,147.9,196.3,147.9,0,0,173-32.2,196.3-147.9,23.4-115.8-26.5-226.7-26.5-226.7h0ZM32.74,42.5S124.64,100.4,202.54,12c77.9,88.4,169.8,30.5,169.8,30.5,0,0,31.2,69.5,32.6,155.8,1.5-91.8-32.6-167.7-32.6-167.7,0,0-91.9,57.9-169.8-30.6C124.64,88.5,32.74,30.6,32.74,30.6,32.74,30.6-1.36,106.6,.14,198.3,1.54,112,32.74,42.5,32.74,42.5h0ZM202.34,370.9c-46-10.1-149.5-47.5-164.2-120.5-14-69.4,1.4-137.7,13.2-175.5,14,4.3,31.3,7.9,50.8,7.9,36.5,0,70.8-12.6,100.5-36.9,29.7,24.2,64,36.9,100.5,36.9,19.4,0,36.7-3.5,50.7-7.8,11.8,37.9,27.2,106.5,13.3,175.5-16.5,80.9-137.3,113.9-164.8,120.4h0Zm-.1-17.2c-48-11.3-136.1-46.9-148.2-106.7-11.7-57.8-1.4-115.5,8.4-151.8,13.2,2.9,26.5,4.4,39.7,4.4,35.8,0,70.3-11.3,100.5-32.8,30.2,21.5,64.7,32.8,100.5,32.8,13.2,0,26.4-1.5,39.6-4.4,9.8,36.5,20.1,94.3,8.5,151.8-14,68.4-119.8,99.4-149,106.7h0Zm148.8-119.8c-13.8,68.4-119.6,99.4-148.9,106.7-48-11.3-136.1-46.9-148.2-106.7-3.3-16.3-4.8-32.5-5.1-48.3-.4,19.8,.9,40.6,5.1,61.4,12.1,59.8,100.2,95.3,148.2,106.7,29.3-7.3,135-38.2,148.9-106.7,4.2-20.6,5.5-41.2,5-60.8-.2,15.6-1.7,31.7-5,47.7h0Zm-207.5,55.9v-30.2l37.4-1.9v-103.7l-37.4,9.8v-31.8l49.3-16.6h31.6v142.4l37.1,1.8v30.2h-118Z");
    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;
}
   child: ClipPath(
                                  clipper: PracticeClip(),

                                  child: Container(
                                      color: Colors.blue,
                                      child: Shimmer(
                                          child: SvgPicture.asset(
                                        values[index].svg!,
                             

                                        semanticsLabel: 'xxx',

I have taken the code from Illustrator following these instructions:
https://bootcamp.uxdesign.cc/how-to-create-custom-shapes-in-flutter-from-any-vector-in-less-than-a-minute-93cafadd8e04#:~:text=Get%20path%20from%20SVG,panel%20in%20the%20screenshot%20below.

But it is not exactly. The Path is slightly larger and sits a bit further to the left. Is there any way to get the Path exact?

Bildschirmfoto 2023-09-06 um 15 04 45