Flutter 貝塞爾曲線實現案例

2021-10-25 10:13:23 字數 2870 閱讀 7502

需要安裝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的開發環境 大家可以去看看之前的教程 1 win系統flutter開發環境安裝教程 2 mac系統flutter開發環境安裝教程 普通貝塞爾曲線 我們這邊寫了clippath 來處理我們貝塞爾曲線的繪製 clippath 裡面我們巢狀了乙個 container 盒子元件設定高度...

Flutter 貝塞爾曲線切割

現在人們對於 的美感要求是越來越高了,所以很多布局需要優美的曲線設計。當然最簡單的辦法是作乙個png的透明,然後外邊放乙個container.但其內容如果本身就不是,只是容器,這種放入的做法會讓包體變大。其實我們完全可以使用貝塞爾曲線進行切割。clippath控制項可以把其內部的子控制項切割,它有兩...

貝塞爾曲線

1.概述 貝塞爾曲線 b zier curve 又稱 貝茲曲線或貝濟埃曲線,是應用於二維圖形應用程式的數學曲線。一般的向量圖形 軟體通過它來精確畫出曲線,貝茲曲線由 線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。貝塞爾曲線是計算機圖形學...