Flutter ClipPath 用 path 去剪裁 child，path 以外的部分不显示，还能高效的实现动画。
ClipPath 介绍
和布局 widget 不同，剪裁 widget 功能实现是在绘制阶段。所以剪裁 widget 的 size 是不会变的，无论怎样剪裁。
剪裁是在绘制阶段，具体实现是在 paint 方法中调用 PaintingContext 类的 pushClipPath 方法进行剪裁。
void paint(PaintingContext context, Offset offset) { ... layer = context.pushClipPath( needsCompositing, offset, Offset.zero & size, _clip!, super.paint, clipBehavior: clipBehavior, oldLayer: layer as ClipPathLayer?, ); ... } 复制代码
path 在文档中的解释大家自己去看下。如果你用过 potoshop 或 sketch 一类的绘图软件，可能会理解的比较深刻一些。
默认情况下，ClipPath 的剪裁路径是正好包含整个 child，只有溢出 child 的部分才会被裁剪。代码如下：
@override Path get _defaultClip => Path()..addRect(Offset.zero & size); 复制代码
对比一下之前 ClipRect 的 默认 clipper 代码
@override Rect get _defaultClip => Offset.zero & size; 复制代码
虽然返回的类型不同，但效果一样，ClipPath 的矩形是用 Path 来表达的，ClipRect 的矩形是用 Rect 来表达的。虽然表达方式不同，但最后的效果是一样的。
自定义裁剪
我们可以指定 clipper 参数进行自定义裁剪。
举个例子，我们想裁剪出花朵的部分。图片大小为 100 x 100。
class MyClipper extends CustomClipper<Path> { @override Path getClip(Size size) { return Path()..addRect(const Rect.fromLTWH(20, 10, 60, 60)); } @override bool shouldReclip(covariant CustomClipper<Path> oldClipper) { return false; } } 复制代码
Center( child: ClipPath( clipper: MyClipper(), child: Image.network( 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/552bbefbf3ba42b7910ca5721cd61a6c~tplv-k3u1fbpfcp-watermark.image?', width: 100, height: 100, fit: BoxFit.fill, ), )) 复制代码
和 ClipRect 的 MyClipper 几乎完全一样，就是把类型换成了 Path。也许你会问，既然都一样，那都用 ClipRect 不就得了？原因是 ClipPath 更加强大，能裁剪各种形状。比如圆形，菱形，三角形，还能裁剪出动物的形状。比如下面的小鸟就是官方给的例子。
既然 ClipPath这么强大，但 ClipRect 还有一席之地，说明它一定有过人之处，没错，ClipRect 的优点就是相对来说比较高效， ClipPath 是比较昂贵的，所以如果是要实现矩形剪裁，优先选用 ClipRect。
如何得到 path
既然 ClipPath 是用 path 进行剪裁的，那么如何得到 path 呢？
方法一 自己写
自定义 clipper，clipper 是 CustomClipper 类型，我们只需要扩展一个 CustomClipper 就可以随便写 path了。比如我们可以自己写一个倒立的三角形的 path。
class TrianglePath extends CustomClipper<Path>{ @override Path getClip(Size size) { final path = Path(); path.lineTo(size.width, 0.0); path.lineTo(size.width / 2, size.height); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) { return true; } } 复制代码
自己写 path 是比较麻烦的，还得扩展一个类出来。
方法二 通过现有的 ShapeBorder 得到
ShapeBorder 是 形状边框的基类。ShapeBorder 类定义了 getOuterPath 方法，我们可以通过 这个方法得到 path。
Path getOuterPath(Rect rect, { TextDirection? textDirection }); 复制代码
为了方便使用， ClipPath 加了一个 命名构造函数 ClipPath.shape 封装了通过 shape 拿 path 的逻辑，我们不用自己动手调用 getOuterPath 方法，只需要提供 shape 即可。
一共有下面几种 shape 可以用。
- BeveledRectangleBorder
- CircleBorder
- ContinuousRectangleBorder
- MaterialStateOutlinedBorder
- RoundedRectangleBorder
- StadiumBorder
拿 CircleBorder 举个例子吧。
ClipPath.shape( shape:const CircleBorder(), child: Container( width: 100, height: 100, color: Colors.blue[200], )), 复制代码
足够简单吧。
应用场景
Flutter ClipPath 的应用场景和 ClipRect 是一样的，不再赘述，也是剪裁 widget 和制作动画。在 【剪裁 widget】Flutter ClipRect 一文中对如何写动画有举例。 ClipPath 做动画会很炫酷，很多效果是其它方式无法实现的。
