贝塞尔曲线

贝塞尔曲线广泛应用于各种绘图相关的软件中,圆和弧都是规则的曲线图形,而很多项目中还需要绘制一些不规则的曲线图形,这时候就需要用到贝塞尔曲线。贝赛尔曲线又称贝兹曲线,是电脑图形学中相当重要的参数曲线。贝塞尔曲线于 1962 年由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所发表,他运用贝塞尔曲线来为汽车的主体进行设计。

贝塞尔曲线的特点就是它的任意处都是光滑的,数据点之间的曲线任意值都不能大于数据点值同时也不存在极值点(要么是上升曲线要么下降曲线,不可以是又上升又下降)

贝塞尔曲线又分为线性贝塞尔曲线、二次贝塞尔曲线、三次贝塞尔曲线。

线性贝塞尔曲线 ,实际上就是一条连接两点的直线段

二次贝塞尔曲线 ,就是两点间的一条 抛物线 ,利用一个控制点来控制 抛物线 的形状。

三次 贝塞尔曲线 ,则需要一个起点,一个终点,两个控制点来控制 曲线 的形状(其中三次贝塞尔曲线的灵活度是最高的)。

photoShop里面有一个工具叫做钢笔工具,用他绘制的线段就可以在线段的起点和终点出各添加一个锚点,通过设置起点和终点锚点的相对位置来控制这个线段的形状,

如果这条线段没有添加锚点或者锚点的方向平行于线段的方向,此时这条线就是直线,就是线性贝塞尔曲线

如果只添加了一条锚点改变了这条线段的形状,就是二次贝塞尔曲线

如果添加了两条锚点改变了这条线段的形状,就是三次贝塞尔曲线


贝塞尔曲线

还有常见的一些运动函数,由快到慢,由慢到块,块慢块,慢快慢,就可以用这个贝塞尔曲线来表达出来

前端css里面有个transition-timing-function属性可以设置缓动函数,他的值可以自定义缓

函数cubic-bezier(, , , ),每个值的取值范围为-1~1,其中x1,y1表示线

起点的锚点位置,x2,y2表示线段终点的冒点位置,从而根据自己的需求生成运动速度的曲

函数,还可以在http://yisibl.github.io/cubic-bezier/这个网站根据自己的参数预览运动曲线

展开阅读全文

页面更新:2024-06-17

标签:曲线   极值   线段   抛物线   据点   终点   线性   美文   函数   形状   两点   图形   方向   位置   起点   参数

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top