Flutter 貝塞爾曲線實現案例

需要安裝flutter的開發環境：大家可以去看看之前的教程：

1 win系統flutter開發環境安裝教程:

2 mac系統flutter開發環境安裝教程：

普通貝塞爾曲線

我們這邊寫了clippath 來處理我們貝塞爾曲線的繪製 clippath 裡面我們巢狀了乙個 container 盒子元件設定高度200 寬度撐滿螢幕然後我們來處理clippath 元件裡面的 clipper 熟悉

class  bottomclippertest extends customclipper
@override
bool shouldreclip(covariant customclipperoldclipper) 
}

我們這邊寫了乙個 bottomclippertest 類繼承與 customclipper 然後重寫了getclip 和 shouldreclip 方法 ,shouldreclip 方法我們返回 false 在 getclip 方法中我們建立 path物件

var path=path();

然後繪製貝塞爾曲線需要的一些節點如上圖話的5個點和貝塞爾曲線的需要的開始點和結束點最後我們返回乙個 path物件即可

完整**：

import 'package:flutter/material.dart';
/** *
* 建立人：xuqing
* 類說明： 普通貝塞爾曲線
* **/class myhomepage extends statefulwidget ) : super(key: key);
@override
_myhomepagestate createstate() 
}class _myhomepagestate extends state
@override
void dispose() 
@override
widget build(buildcontext context) 
}class  bottomclippertest extends customclipper
@override
bool shouldreclip(covariant customclipperoldclipper) 
}

波浪形貝塞爾曲線實現：

}我們很上面的普通的貝塞爾曲線一樣我寫了乙個 `clippath 元件裡面巢狀乙個 container 元件高度200 寬度撐滿螢幕我們重點看一下 clipper 屬性的實現：

class  bottomclipper extends customclipper
@override
bool shouldreclip(covariant customclipperoldclipper) 
}

同上我們寫了乙個bottomclipper 類繼承 customclipper 類重寫getclip 方法和 shouldreclip ,shouldreclip 返回 false 重點是getclip 方法裡面我們建立 path物件

var path=path();

這個波浪形的貝塞爾曲線我們有2個控制點分別是在螢幕寬度1/4和螢幕寬度按3/4 處

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  secondconttorpoint=offset(size.width/4*3, size.height-90); // 第二個控制點起始點
var  secondendpoint=offset(size.width, size.height-40); // 第二個控制點結束點
path.quadraticbezierto(secondconttorpoint.dx, secondconttorpoint.dy,
secondendpoint.dx, secondendpoint.dy);

其他的點和上面通普通貝塞爾曲線相同最後我們返回path 即可實現我們的波浪形貝塞爾曲線的繪製了

到此我們最基礎的貝塞爾曲線的繪製就講完了

碼雲：

Flutter 貝塞爾曲線實現案例

Flutter 貝塞爾曲線實現案例

Flutter 貝塞爾曲線切割

貝塞爾曲線

相關推薦