Flutter ClipPath路径剪切组件

属性图

图片[1]-Flutter  ClipPath路径剪切组件-IT网络技术分享

直线剪切 lineto

图片[2]-Flutter  ClipPath路径剪切组件-IT网络技术分享
class jd extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // TODO: implement getClip
    var path = Path();
    path.moveTo(size.width / 2, 0); //开始路径,如果不设置默认为x0.0 y0.0
    path.lineTo(0, size.height / 2);
    path.lineTo(size.width, size.height / 2 - 50);
    path.lineTo(size.width, 0);
    path.close(); //结束
    return path; //返回路径
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

贝塞尔曲线quadraticbezierto

图片[3]-Flutter  ClipPath路径剪切组件-IT网络技术分享
class jd extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // TODO: implement getClip
    var path = Path();
    // 贝塞尔绘制曲线
    path.lineTo(0, 0);
    path.lineTo(0, size.height / 2 - 40);

    path.quadraticBezierTo(size.width/2, size.height/2+30, size.width, size.height / 2 - 40);
    path.lineTo(size.width, 0);

    path.close(); //结束
    return path; //返回路径
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return false;
  }
}
THE END
喜欢就支持一下吧
点赞6 分享