当前位置: 首页 > 后端技术 > Node.js

贝塞尔曲线的数学原理

时间:2023-04-03 18:29:01 Node.js

贝塞尔曲线的数学原理相信各位吃鸡的都知道什么是贝塞尔曲线。用惯了PS的会用钢笔工具,用惯了AI的会用Bezier嘛,因为它画出的曲线容易控制,而且很漂亮,下面我们来深入了解一下数学原理和公式这条贝塞尔曲线。在数学上,贝塞尔曲线分为很多种,一阶贝塞尔曲线,二阶贝塞尔曲线,三阶贝塞尔曲线等等,除了一阶贝塞尔曲线是一条直线,其余的多阶贝塞尔曲线都是抛物线。由起点、终点和控制点组成,最终的曲线样式根据控制点的数量和位置来确定。原理我们先在一个平面内选取3个不共线的点,依次用线段连接起来。如图所示,在第一条线段上选择一个点D。计算点到线段起点的距离AD占线段总长度AB的比值。根据上一步得到的比例,从第二条线段中找到对应的点E,使得AD:AB=BE:BC。连接DE的这两点。从新线段DE中再次找到相同比例的点F,使得DF:DE=AD:AB=BE:BC。至此,我们已经确定了贝塞尔曲线上的一个点F。接下来请回忆一下中学学过的极限知识,让选中的点D在第一条线段上从起点A移动到终点B,找出所有贝塞尔曲线上的点F。找到所有的点后,我们也得到了这条贝塞尔曲线。无法想象?没关系。看完动画,我们大概了解了贝塞尔曲线绘制的过程。我们看公式1一阶贝塞尔曲线一阶贝塞尔曲线只有起点和终点,没有控制点,所以画出的图形只是一条直线,所以时间t为1秒时的公式为如下$B(t)=(1-t)P_0+tP_1,tin[0,1]$2。二阶贝塞尔二阶贝塞尔只有一个控制点。这时起点到终点的线段发生变化。具体的变化是通过控制点的位置来改变的。图中绿色线段为红色曲线的切线$B(t)=(1-t)^2P_0+2t(1-t)P_1+t^2P_2,tin[0,1]$就是asimplequadraticequation3.Higher-orderBesselthird-orderfourth-orderfifth-orderfrom从三阶开始,贝塞尔变得复杂。高阶的通式如下$$P_i^k=(1-t)P_i^{k-1}+tP_{i+1}^{k-1}$$$$k=1,2,···,n$$$$i=0,1,···,n-k$$可以通过链接动态绘制多阶贝塞尔曲线DEMOSVG画贝塞尔曲线为什么选择SVG而不选择Canvas是因为容易演示,而SVG对矢量图的渲染更好,所以更适合描绘几何图形,而Canvas适合游戏等比较大的渲染结果如图