Flutter 自定義元件之貝塞爾曲線畫波浪球

mochixuan發表於2019-07-05

百度百科: 貝塞爾曲線(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
    );

  }
複製程式碼