Flutter中的剪裁

圆形剪裁(ClipOval)

可以用来剪裁圆形头像

                                                    
ClipOval(
  child: new SizedBox(
    width: 150.0,
    height: 150.0,
    child: new Image.network("http://www.yezhou.me/images/flutter/tangyixin.jpg", fit: BoxFit.cover,),
  ),
),

                                                

圆角矩形剪裁(ClipRRect)

borderRadius参数用于控制圆角的位置大小。

                                                    
ClipRRect(
  borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
  child: new SizedBox(
    width: 150.0,
    height: 150.0,
    child: new Image.network("http://www.yezhou.me/images/flutter/tang.jpg", fit: BoxFit.cover,),
  ),
)

                                                

矩形剪裁(ClipRect)

需要定义Clipper参数才能使用，不然没有效果。

                                                    
class _MyClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return new Rect.fromLTRB(10.0, 10.0, size.width - 10.0, size.height - 10.0);
  }
  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
      return true;
  }
}

                                                

这里定义剪裁掉周边10像素的大小

                                                    
ClipRect(
  clipper: new _MyClipper(),
  child:new SizedBox(
	width: 150.0,
	height: 150.0,
	child: new Image.network("http://www.yezhou.me/images/flutter/tangyixin.jpg", fit: BoxFit.cover,),
  ) ,
),

                                                

路径剪裁(ClipPath)

可以剪裁任意形状，比如五角星、三角形

定义五角星的路径_StarCliper：

                                                    
class _StarCliper extends CustomClipper<Path>{
  final double radius;
  _StarCliper({this.radius});
  /// 角度转弧度公式
  double degree2Radian(int degree) {
    return (pi * degree / 180);
  }
  @override
  Path getClip(Size size) {
    double radius = this.radius;
    Path path = new Path();
    double radian = degree2Radian(36);// 36为五角星的角度
    double radius_in = (radius * sin(radian / 2) / cos(radian)); // 中间五边形的半径
    path.moveTo((radius * cos(radian / 2)), 0.0);// 此点为多边形的起点
    path.lineTo((radius * cos(radian / 2) + radius_in * sin(radian)),
        (radius - radius * sin(radian / 2)));
    path.lineTo((radius * cos(radian / 2) * 2),
        (radius - radius * sin(radian / 2)));
    path.lineTo((radius * cos(radian / 2) + radius_in * cos(radian / 2)),
        (radius + radius_in * sin(radian / 2)));
    path.lineTo((radius * cos(radian / 2) + radius * sin(radian)),
        (radius + radius * cos(radian)));
    path.lineTo((radius * cos(radian / 2)),
        (radius + radius_in));
    path.lineTo((radius * cos(radian / 2) - radius * sin(radian)),
        (radius + radius * cos(radian)));
    path.lineTo((radius * cos(radian / 2) - radius_in * cos(radian / 2)),
        (radius + radius_in * sin(radian / 2)));
    path.lineTo(0.0, (radius - radius * sin(radian / 2)));
    path.lineTo((radius * cos(radian / 2) - radius_in * sin(radian)),
        (radius - radius * sin(radian / 2)));
    path.close();// 使这些点构成封闭的多边形
    return path;
  }
  @override
  bool shouldReclip(_StarCliper oldClipper) {
    return this.radius != oldClipper.radius;
  }
}

                                                

                                                    
ClipPath(
  clipper: new _StarCliper(radius: 80.0),
  child:new SizedBox(
	width:160.0,
	height: 160.0,
	child: new Image.network("http://www.yezhou.me/images/flutter/tang.jpg", fit: BoxFit.cover,),
  ),
),

                                                

Flutter Clip