Flutter中的剪裁

圆形剪裁(ClipOval)

可以用来剪裁圆形头像

1
2
3
4
5
6
7
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参数用于控制圆角的位置大小。

1
2
3
4
5
6
7
8
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参数才能使用,不然没有效果。

1
2
3
4
5
6
7
8
9
10
11
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像素的大小

1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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;
}
}
1
2
3
4
5
6
7
8
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

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :