clipper

Flutter的ClipPath路径裁切（贝塞尔曲线）

ClipPath路径裁切控件

clipPath控件可以把其内部的⼦控件切割，它有两个主要属性（参数）:

child:要切割的元素，可以是容器，图⽚.....

clipper:切割的路径，这个要和CustomClipper对象配合使⽤。

classHomePageextendsStatelessWidget{

@override

Widgetbuild(BuildContextcontext){

returnScaffold(

body:Column(

children:[

ClipPath(

clipper:BottomClipper(),

child:Container(

color:rpleAccent,

height:200.0,

),

)

],

)

);

}

}

ClipPath的⼦元素是⼀个容器控件Container。BootomClipper是我们⾃定义的⼀个对象，⾥边主要就是切割的路径。

CustomClipper裁切路径

主要的贝塞尔曲线路径就写在getClip⽅法⾥，它返回⼀段路径。

⼀个⼆阶的贝塞尔曲线是需要控制点和终点的，控制点就像⼀块磁铁，把直线吸引过去，形成⼀个完美的弧度，这个弧度就是贝塞尔曲线了。

classBottomClipperTestextendsCustomClipper{

@override

PathgetClip(Sizesize){

//TODO:implementgetClip

varpath=Path();

(0,0);

(0,-30);

varfirstControlPoint=Offt(/2,);

varfirstEndPoint=Offt(,-30);

ticBezierTo(,,,);

(,-30);

(,0);

returnpath;

}

@override

boolshouldReclip(CustomClipperoldClipper){

//TODO:implementshouldReclip

returnfal;

}

}

裁切变成两个对称的贝塞尔曲线

classBottomClipperextendsCustomClipper{

@override

PathgetClip(Sizesize){

//TODO:implementgetClip

varpath=Path();

(0,-20);

varfirstControlPoint=Offt(/4,);

varfirstEndPoint=Offt(/2.25,-30);

ticBezierTo(,,,);

varcondControlPoint=Offt(/4*3,-80);

varcondEndPoint=Offt(,-40);

ticBezierTo(,,,);

(,-40);

(,0);

returnpath;

}

@override

boolshouldReclip(CustomClipperoldClipper){

//TODO:implementshouldReclip

returnfal;

}

}