Flutter 自定義組件之貝塞爾曲線繪製波浪球

設計圖效果--設計圖地址

百度百科: 貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程序的數學曲線。通常的矢量圖形軟件經過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，咱們在繪圖工具上看到的鋼筆工具就是來作這種矢量曲線的。貝塞爾曲線是計算機圖形學中至關重要的參數曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具，如PhotoShop等。在Flash4中尚未完整的曲線工具，而在Flash5裏面已經提供出貝塞爾曲線工具。

源碼地址

開發效果圖

貝塞爾曲線畫圓

如圖當畫圓時係數M約等於0.55228475，繪製時調用cubicTo(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y)進行繪製，繪製時以圓心爲圓點，x軸、y軸爲線劃分紅4分，進行繪製。

畫路徑代碼

void _canvasBesselPath(Path path) {

    Point p1 = Point(x: radius*2,y: radius);
    Point p2 = Point(x: radius,y: radius*2);
    Point p3 = Point(x: 0,y: radius);
    Point p4 = Point(x: radius,y: 0);

    if (isToRight) {
      if (percent <= 0.2) {
        p1.x = radius*2 + radius*percent/0.2;
      } else if (percent <= 0.4) {
        p4.x = p2.x = radius + radius*(percent-0.2)/0.2;
        p1.x = p2.x + radius*2;
      } else if (percent <= 0.6) {
        p4.x = p2.x = radius*2 ;
        p1.x = radius*4 - radius*(percent - 0.4)/0.2;
      } else if (percent <= 0.8) {
        p4.x = p2.x = radius*2 - radius*(percent - 0.6)/0.2;
        p1.x = p2.x+radius;
      } else if (percent <= 0.9) {
        p3.x = radius*(percent - 0.8)/0.3;
        p4.x = p2.x = radius;
        p1.x = radius*2;
      } else if (percent <= 1.0) {
        p3.x = radius*(1 - percent)/0.3;
        p4.x = p2.x = radius;
        p1.x = radius*2;
      }
    } else {
      if (percent <= 0.2) {
        p3.x = - radius*percent/0.2;
      } else if (percent <= 0.4) {
        p3.x = -radius - radius*(percent-0.2)/0.2;
        p4.x = p2.x = p3.x + 2*radius;
      } else if (percent <= 0.6) {
        p3.x =  radius*(percent - 0.4)/0.2 - radius*2;
        p4.x = p2.x = 0;
      } else if (percent <= 0.8) {
        p3.x = -radius+radius*(percent - 0.6)/0.2;
        p4.x = p2.x = p3.x + radius;
        p1.x = p2.x + radius*2 - radius*(percent - 0.6)/0.2;
      } else if (percent <= 0.9) {
        p1.x = radius*2 - radius*(percent - 0.8)/0.3;
      } else if (percent <= 1.0) {
        p1.x = radius*2 - radius*(1 - percent)/0.3;
      }
    }

    final p1Radius = p2.y - p1.y;
    final p24LeftRadius = p2.x - p3.x;
    final p24RightRadius = p1.x - p2.x;
    final p3Radius = p2.y - p3.y;
    path.moveTo(p1.x, p1.y);
    path.cubicTo(
        p1.x, p1.y + p1Radius*M,
        p2.x + p24RightRadius*M, p2.y,
        p2.x, p2.y
    );
    path.cubicTo(
        p2.x - p24LeftRadius*M, p2.y,
        p3.x, p3.y + p3Radius*M,
        p3.x, p3.y
    );
    path.cubicTo(
        p3.x, p3.y - p3Radius*M,
        p4.x - p24LeftRadius*M, p4.y,
        p4.x, p4.y
    );
    path.cubicTo(
        p4.x + p24RightRadius*M, p4.y,
        p1.x , p1.y - p1Radius*M,
        p1.x, p1.y
    );

  }
複製代碼

分享一個貝塞爾曲線在線演示網站

源碼地址

分享一個Flutter項目

後續

在UI中國上看到了一個不錯的設計，裏面也涉及貝塞爾曲線全手勢操做燈的demo,這裏的貝塞爾曲線p二、p4的Y軸向中間作一個伸縮就能夠。