百度百科: 贝塞尔曲线(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
