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。

【剪裁 widget】Flutter ClipPath_ide

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-jue.byteimg.com/tos-cn-i-k3u1fbpfcp/552bbefbf3ba42b7910ca5721cd61a6c~tplv-k3u1fbpfcp-watermark.image?',
          width: 100,
          height: 100,
          fit: BoxFit.fill,
        ),
      ))

和 ClipRect 的 MyClipper 几乎完全一样，就是把类型换成了 Path。也许你会问，既然都一样，那都用 ClipRect 不就得了？原因是 ClipPath 更加强大，能裁剪各种形状。比如圆形，菱形，三角形，还能裁剪出动物的形状。比如下面的小鸟就是官方给的例子。

【剪裁 widget】Flutter ClipPath_Android_02

既然 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 可以用。

  1. BeveledRectangleBorder
  2. CircleBorder
  3. ContinuousRectangleBorder
  4. MaterialStateOutlinedBorder
  5. RoundedRectangleBorder
  6. 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 做动画会很炫酷，很多效果是其它方式无法实现的。