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