Flutter 自定义组件之贝塞尔曲线画波浪球

百度百科: 贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

源码地址

设计图效果--设计图地址

image

开发效果图

image

image

贝塞尔曲线画圆

image

如图当画圆时系数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,这里的贝塞尔曲线p2、p4的Y轴向中间做一个伸缩就可以。

image