贝塞尔曲线

百度百科: 贝塞尔曲线(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轴向中间做一个伸缩就可以。 ...

signature_pad一个基于Canvas的平滑手写画板工具介绍实现手写有多种方式。 一种比较容易做出的是对鼠标移动轨迹画点，再将两点之间以直线相连，最后再进行平滑处理，这种方案不需要什么算法支持，但同样，它面对一个性能和美观的抉择，打的点多，密集，性能相对较低，但更加美观，视觉上更平滑； 此处用的另一种方案，画贝塞尔曲线。 由于canvas没有默认的画出贝塞尔曲线方法，因此曲线是通过不断画出一个个点形成的，那么问题来了，这些点谁来定？ 这里使用了贝塞尔曲线的一系列算法，包括求控制点，求长度，计算当前点的大小，最后用canvas画出每一个确定位置的点。 参数及配置介绍提供的可配置参数如下 export interface IOptions { // 点的大小(不是线条) dotSize?: number | (() => number); // 最粗的线条宽度 minWidth?: number; // 最细的线条宽度 maxWidth?: number; // 最小间隔距离(这个距离用贝塞尔曲线填充) minDistance?: number; // 背景色 backgroundColor?: string; // 笔颜色 penColor?: string; // 节流的间隔 throttle?: number; // 当前画笔速度的计算率，默认0.7，意思就是 当前速度=当前实际速度*0.7+上一次速度*0.3 velocityFilterWeight?: number; // 初始回调 onBegin?: (event: MouseEvent | Touch) => void; // 结束回调 onEnd?: (event: MouseEvent | Touch) => void;}这里要注意的是并没有线条粗细这个选项，因为这里面的粗细不等线条都是通过一个个大小不同的点构造而成； throttle这个配置可以参考loadsh或者underscore的_.throttle，功能一致，就是为了提高性能。 ...