Question

我正在通过 svg_path_parser 将 svg 解析为路径，然后通过 CustomPathClipper() 对其进行剪辑

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: [ ClipPath(
    child: Stack(
      children: [
        Material(
          color: Colors.amber,
          child: InkWell(
            onTap: () {
              print(i);
            },
            child: Container(
              // width: 69,
              // height: 148,
              color: Colors.transparent,
            ),
          ),
        )
      ],
    ),
    clipper: PathClipper(i),
  ),],
        ),
      ),
    );
  }
}

快船类

class PathClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    print("clip $size");
    Path path = parseSvgPath(painterPathes[i].split("d=\"")[1].split("\" ")[0]);

    // final Matrix4 matrix = Matrix4.identity();
    // final Rect bounds = path.getBounds();
    // matrix.scale(0.3);
    // path.transform(matrix.storage);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper oldClipper) {
    return true;
  }
}

从 xd 导出的 svg

<svg xmlns="http://www.w3.org/2000/svg" width="70.213" height="149.489" viewBox="0 0 70.213 149.489">
  <path id="Path_1" data-name="Path 1" d="M897.454,488.617l.623,1.821,1.049,3.068,1.865,7.076,1.158,4.438.9,4.5.965,4.889,1.094,4.374.772,3.409c.193.852.579,3.409.579,3.409l.386,2.83.836,3.474.45,3.667.836,3.859.772,4.052.643,4.181.772,4.117c.193,1.029.772,4.31.772,4.31s.772,3.023.772,3.409.515,3.8.515,3.8l.579,3.924.515,3.409.643,3.667,1.029,2.959,1.094,2.766,1.672,2.83,1.8,2.637,1.544,2.83,1.158,2.38.579,2.38.386,1.994v11.514l-.643,2.573-.708,2.187-.772,1.93-1.544,3.281-1.158,2.38-1.415,1.8-1.029,1.865-1.8,1.93-1.93,1.8-2.187,1.544-1.608,1.029-.643.386-4.631-.064-3.152-1.158-3.023-1.415-2.637-1.415-1.994-1.737-1.222.064-1.8,1.737-1.351,1.415-1.865,1.351-1.351.45H881.18l-2.251-1.094s-1.865-1.865-1.994-2.123-1.8-2.637-1.8-2.637-.965-2.058-1.094-2.38L873.526,619h-2.509l-1.994.708h-5.339l-1.93-.708-1.544-1.994-1.094-1.994-1.544-3.409-1.222-3.216-1.029-3.281L855,603.05V594.3l.579-3.859.772-3.088,1.93-3.667,1.93-2.895,2.123-3.8.836-2.766.515-3.345V559.245l-.515-11.192-.579-11.064V522.9l.965-6.111V513l.836-3.409.45-3.345.965-4.7.45-3.6.515-3.8.45-3.088c.113-.772.515-2.895.515-3.216a9.391,9.391,0,0,1,.45-1.544l.9-.9s.772.193.965,0,1.672,0,1.672,0l1.286.45,1.415,1.029,1.029.965.643.965.772.515.515-1.479s.042-.217.133-.641a9.9,9.9,0,0,1,.51-1.8,18.792,18.792,0,0,0,.772-2.123l.772-.965h2.83l2.123.643,1.479,1.8s.45,1.094.579,1.094.643.45.643,0V483.6l1.286-1.737c.322-.434,1.608-.643,1.608-.643l1.8-.386,2.058,1.029,1.286,2.251,1.158,2.251.713,1.559Z" transform="translate(-854.5 -480.308)" fill="none" stroke="#707070" stroke-width="1"/>
</svg>

我的问题是 svg 路径始终位于下面屏幕截图中的那个位置。并且它没有采用 xd svg 中的 x y 尺寸我尝试使用像 Tranform.translate() 这样的小部件来定位剪辑路径，但不幸的是不起作用。

 Transform.translate(
offset:Offset(0,0),
child:ClipPath(
    child: Stack(
      children: [
        Material(
          color: Colors.amber,
          child: InkWell(
            onTap: () {
              print(i);
            },
            child: Container(
              // width: 69,
              // height: 148,
              color: Colors.transparent,
            ),
          ),
        )
      ],
    ),
    clipper: PathClipper(i),
  ),)

并且也尝试了 path.transform(matrix4) 并且也不起作用

所以我在这里缺少什么 [1]：https://i.stack.imgur.com/XFT9B.png

无法在颤动中正确定位剪切路径

0 个答案: