zoukankan      html  css  js  c++  java
  • flutter-贝塞尔曲线

    import 'package:flutter/material.dart';
    
    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: <Widget>[
              ClipPath(
                clipper: BottomClipper(),//路径
                child: Container(
                  color: Colors.deepOrange,
                  height: 200,
                ),
              )
            ],
          ),
        );
      }
    }
    
    class BottomClipper extends CustomClipper<Path>{
      @override
      Path getClip(Size size) {
        var path=Path();
        path.lineTo(0, 0);
        path.lineTo(0, size.height-30);
        var firstControlPoint =Offset(size.width/2,size.height);
        var firstEndPoint = Offset(size.width,size.height-30);
         path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy);
        path.lineTo(size.width, size.height-30);
        path.lineTo(size.width, 0);
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return false;
      }
    }

    双曲线

    import 'package:flutter/material.dart';
    
    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: <Widget>[
              ClipPath(
                clipper: BottomClipper(),//路径
                child: Container(
                  color: Colors.deepOrange,
                  height: 200,
                ),
              )
            ],
          ),
        );
      }
    }
    
    class BottomClipper extends CustomClipper<Path>{
      @override
      Path getClip(Size size) {
        var path=Path();
        path.lineTo(0, 0);
        path.lineTo(0, size.height-20);
        path.lineTo(0, size.height-20);
          var firstControlPoint =Offset(size.width/4,size.height);
          var firstEndPoint = Offset(size.width/2.25,size.height-30);
    
          path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy);
    
          var secondControlPoint = Offset(size.width/4*3,size.height-80);
          var secondEndPoint = Offset(size.width,size.height-40);
    
          path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
    
        path.lineTo(size.width, size.height-40);
        path.lineTo(size.width, 0);
    
        return path;
      }
    
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return false;
      }
    }

  • 相关阅读:
    Java基础--线程创建方式
    Java基础--static关键字
    Java基础--异常处理
    mybatis的#{}和${}的区别以及order by注入问题
    前后端分离结构中使用shiro进行权限控制
    Java FTP下载文件
    10个经典智力推理题!据说答对7道,智力在140!
    Java面试题总结之数据结构、算法和计算机基础(刘小牛和丝音的爱情故事1)
    Java面试题总结之JDBC 和Hibernate
    Java面试题总结之数据库与SQL语句
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13235926.html
Copyright © 2011-2022 走看看