ClipPath 介紹

ClipPath可以根據給定的Path來裁剪widget盛正，它的定義跟ClipRect基本一樣，不一樣的地方是ClipRect傳遞的參數是個Rect類型屑埋，而ClipPath需要傳一個Path類型豪筝，它的定義如下：

ClipPath({Key key, 
        CustomClipper<Path> clipper, 
        Clip clipBehavior: Clip.antiAlias, 
        Widget child })

這些參數的含義在講ClipRect的時候都已經介紹過了，這里就不在贅述了摘能，需要注意的是clipper 這里傳入的需要是個Path類型壤蚜。
根據Path去裁剪widget是相當的耗性能的，如果是一些已知的具體形狀的裁剪徊哑，考慮使用下面裁剪工具來提高性能

• 矩形的裁剪袜刷，考慮使用ClipRect
• 橢圓或者圓形裁剪，考慮使用ClipOval
• 圓角矩形裁剪莺丑，考慮使用ClipRRect

ClipPath 使用

上一節(jié)講ClipRect的時候我們裁剪了一張圖片著蟹，這里繼續(xù)用上一節(jié)的例子，把圖片裁剪成一個三角形的樣子梢莽，代碼如下：

class HomeState extends State<HomeWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('ClipDemo'),),
        body: Container(
            alignment: Alignment.center,
            child: clipPath()
        ));
  }

  Widget clipPath() {
    return  ClipPath(
          clipper: __MyPathClipper(),
          child: Align(
            alignment: Alignment.topCenter,
            heightFactor: 0.5,
            child: Image.network("http://img.redocn.com/sheying/20150213/mulanweichangcaoyuanfengjing_3951976.jpg",fit: BoxFit.fill),
          )
    );
  }
}

class __MyPathClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

效果如下：

除了自己提供一個CustomClipper以外萧豆，ClipPath還提供了一個靜態(tài)方法shape，這個靜態(tài)方法接受一個參數類型為ShapeBorder的參數昏名，用來標識想要裁剪的邊框形狀涮雷，ShapeBorder是個抽象接口類，目前flutter已經提供了需要實現(xiàn)接口類轻局，如：CircleBorder RoundedRectangleBorder BoxBorder UnderlineInputBorder等等洪鸭，通過這些現(xiàn)有的接口類，我們可以很方便的來做裁剪操作仑扑。

ClipPath.shape 的使用

下面我們繼續(xù)用上面那個例子來做演示览爵，上面的例子中我們自己實現(xiàn)了一個CustomClipper 返回了一個Path來裁剪出一個三角形，下面我們用CircleBorder來裁剪出一個圓形出來镇饮，代碼如下：

class HomeState extends State<HomeWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('ClipDemo'),),
        body: Container(
            alignment: Alignment.center,
            child: clipPathShape()
        ));
  }

  Widget clipPathShape() {
    return ClipPath.shape(
        shape: CircleBorder(),
        child: Align(
          alignment: Alignment.topCenter,
          heightFactor: 0.5,
          child: Image.network(
              "http://img.redocn.com/sheying/20150213/mulanweichangcaoyuanfengjing_3951976.jpg",
              fit: BoxFit.fill),
        ));
  }
}

效果如下：