Flutter 贝塞尔曲线切割
现在人们对于网站的美感要求是越来越高了,所以很多布局需要优美的曲线设计。当然最简单的办法是作一个PNG的透明图片,然后外边放一个Container
.但其内容如果本身就不是图片,只是容器,这种放入图片的做法会让包体变大。其实我们完全可以使用贝塞尔曲线进行切割。
ClipPath 路径裁切控件
clipPath
控件可以把其内部的子控件切割,它有两个主要属性(参数):
- child :要切割的元素,可以是容器,图片.....
- clipper : 切割的路径,这个要和CustomClipper对象配合使用。
class CurvePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('贝塞尔曲线切割')),
body: Column(
children: <Widget>[
ClipPath( //路径裁切组件
clipper: BottomClipper(), //路径
child: Container(
color: Colors.deepOrangeAccent,
height: 200.0,
),
),
],
),
);
}
}
在Scaffold
里放置了一个列容器,然后把ClipPath
控件放到了里边,ClipPath
的子元素是一个容器控件Container
。BootomClipper
是我们自定义的一个对象,里边主要就是切割的路径。
CustomClipper 裁切路径
我们主要的贝塞尔曲线路径就写在getClip
方法里,它返回一段路径。
一个二阶的贝塞尔曲线是需要控制点和终点的,控制点就像一块磁铁,把直线吸引过去,形成一个完美的弧度,这个弧度就是贝塞尔曲线了。
我们先来熟悉一下裁切路径和贝塞尔曲线,作一个最简单的贝塞尔曲线出来。
全部代码如下:
import 'package:flutter/material.dart'; class CustomClipperDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false, //去掉debug图标
theme: ThemeData(
primarySwatch: Colors.red
),
home: CurvePage(),
);
}
} class CurvePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('贝塞尔曲线切割')),
body: Column(
children: <Widget>[
ClipPath( //路径裁切组件
clipper: BottomClipper(), //路径
child: Container(
color: Colors.deepOrangeAccent,
height: 200.0,
),
),
],
),
);
}
} class BottomClipper extends CustomClipper<Path>{ @override
Path getClip(Size size){
var path = Path();
path.lineTo(, ); //第1个点
path.lineTo(, size.height-50.0); //第2个点
var firstControlPoint = Offset(size.width/, size.height);
var firstEdnPoint = Offset(size.width, size.height-50.0);
path.quadraticBezierTo(
firstControlPoint.dx,
firstControlPoint.dy,
firstEdnPoint.dx,
firstEdnPoint.dy
);
path.lineTo(size.width, size.height-50.0); //第3个点
path.lineTo(size.width, ); //第4个点 return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
波浪形式的贝塞尔曲线
在上面代码的基础上修改为波浪式的贝塞尔曲线,波浪形式的只要把裁切变成两个对称的贝塞尔曲线就可以实现了。
代码如下:
//曲线路径
class BottomClipper extends CustomClipper<Path>{
@override
Path getClip(Size size){
var path = Path(); //定义路径
//path.lineTo(0, 0); //第1个点
//path.lineTo(0, size.height-50.0); //第2个点
//var firstControlPoint = Offset(size.width/2, size.height); //第一段曲线控制点
//var firstEdnPoint = Offset(size.width, size.height-50.0); //第一段曲线结束点
//path.quadraticBezierTo( //形成曲线
// firstControlPoint.dx,
// firstControlPoint.dy,
// firstEdnPoint.dx,
// firstEdnPoint.dy
//);
//path.lineTo(size.width, size.height-50.0); //第3个点
//path.lineTo(size.width, 0); //第4个点 //波浪曲线路径
path.lineTo(, ); //第1个点
path.lineTo(, size.height - 40.0); //第2个点
var firstControlPoint = Offset(size.width/, size.height); //第一段曲线控制点
var firstEndPoint = Offset(size.width/2.25, size.height-); //第一段曲线结束点
path.quadraticBezierTo( //形成曲线
firstControlPoint.dx,
firstControlPoint.dy,
firstEndPoint.dx,
firstEndPoint.dy); var secondControlPoint = Offset(size.width/*, size.height-); //第二段曲线控制点
var secondEndPoint = Offset(size.width, size.height-); //第二段曲线结束点
path.quadraticBezierTo( //形成曲线
secondControlPoint.dx,
secondControlPoint.dy,
secondEndPoint.dx,
secondEndPoint.dy); path.lineTo(size.width, size.height-);
path.lineTo(size.width, ); return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
Flutter 贝塞尔曲线切割的更多相关文章
- 20个Flutter实例视频教程-第15节: 贝塞尔曲线切割
博客地址: https://jspang.com/post/flutterDemo.html#toc-61b 视频地址: https://www.bilibili.com/video/av397092 ...
- IOS 贝塞尔曲线切割圆角
写一个UIView扩展 1. .h文件 @interface UIView (Corner) - (void)setCornerWithType:(UIRectCorner)type Radius:( ...
- iOS开发之画图板(贝塞尔曲线)
贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能.如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解.这篇博文的重点不在于如何用使用贝塞尔曲线,而是利用贝 ...
- 贝塞尔曲线在Unity中的应用
前言:国庆放假后基本整个人的散掉了.加之种种原因,没时间没心情写博客.最近研究了一下3d的一些效果.其中有类似翻书撕纸的操作,可是一个panel怎么由平整的变成弯曲的呢? 两点可以确定一条直线,三点可 ...
- canvas贝塞尔曲线
贝塞尔曲线 Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点.控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...
- 贝塞尔曲线(UIBezierPath)属性、方法汇总
UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...
- 深度掌握SVG路径path的贝塞尔曲线指令
一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...
- 贝塞尔曲线(cubic bezier)
对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下: transition语法:transition:<transition-property> ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
随机推荐
- ocr 识别 字体大小问题?
字体大 字体小?????? ???????????
- java基础:多态过程中的动态绑定
重刷java-core的chapter05,P158 重读多态,感觉又不一样了. 记录一下对象方法执行过程: 1. 编译器查看对象声明类型和方法名,如class.fuction(param),cla ...
- Vue入门——v-if和v-show
v-if 特点:每次都会重新删除或创元素 有较高的切换性能消耗 v-show 特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式 有较高的初始渲染消耗
- TFTP简单文件传送协议
T F T P ( Trivial File Transfer Protocol)即简单文件传送协议,最初打算用于引导无盘系统(通常是工作站或X终端).和将在介绍的使用T C P的文件传送协议(F T ...
- linux实操_shell自定义函数
基本语法: #定义函数 function 函数名(){ 函数体 } #调用函数 函数名 参数1 参数2... 实例:计算两个数的和. 运行后
- Greenplum实战之查询优化
本文主要分为三部分: GP优化需要准备的一些关于优化之外的知识,包括清空缓存.性能监控.执行计划分析. 具体优化措施,从以下四个方面考虑: 表.字段 sql GP配置.服务器配置 硬件及节点资源 GP ...
- let和const的区别
es6语法中新增了 let和const 不再只是有var 1. let的用法 let是用来声明变量的,它和var的用法差不多,但是let所声明的变量只在它的代码块内有效,像for循环里用let会更好点 ...
- [Luogu] 产生数
题面:https://www.luogu.org/problemnew/show/P1037 题解:https://www.zybuluo.com/wsndy-xx/note/1145473
- seq2seq聊天模型(一)
原创文章,转载请注明出处 最近完成了sqe2seq聊天模型,磕磕碰碰的遇到不少问题,最终总算是做出来了,并符合自己的预期结果. 本文目的 利用流程图,从理论方面,回顾,总结seq2seq模型, seq ...
- P1582 倒水,P2158 [SDOI2008]仪仗队——数学,二进制
有n个瓶子,里面都有一升水,但是只想保留k个瓶子,只能两个瓶子里面的水体积相等时才能倒在一个瓶子里:不能丢弃有水的瓶子:瓶子容量无限: 问需要购买几个额外的瓶子才能满足条件: 因为每个瓶子一开始只有一 ...