详解SVG路径path的贝塞尔曲线

什么是贝塞尔曲线?

“什么是贝塞尔曲线?”又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。贝塞尔曲线就是这样的一条曲线,它是依据四个位置任意的点坐标绘制出的一条光滑曲线。

我们只要知道,他可以绘制任何曲线,包括之前我们最常用到的直线。

贝塞尔曲线有:线性贝塞尔曲线(直线)、二次方贝塞尔曲线、三次方贝塞尔曲线......

维基百科上对于贝塞尔曲线描述很赞的Gif动画如下:

详解SVG路径path的贝塞尔曲线_第1张图片

2 回顾SVG中path的主要指令

以上讲SVG形状的时候已经讲解过SVG中的线性贝塞尔曲线。其中重要的属性d用来定义路径的坐标点。具体的值由指令字母+坐标点来确定。例如以下代码M=moveTo(移动到),L=lineTo(画线到)

详解SVG路径path的贝塞尔曲线_第2张图片

前五个指令为基本指令。除了以下五个之外的指令,剩下的都是跟贝塞尔曲线相关的了。

详解SVG路径path的贝塞尔曲线_第3张图片

3.线性贝塞尔曲线

详解SVG路径path的贝塞尔曲线_第4张图片

属性d用于存储路径坐标点数据,下面构造的是一条

4二次贝塞尔曲线

详解SVG路径path的贝塞尔曲线_第5张图片

二次贝塞尔曲线对应的指令和参数是:

Q x1 y1 x y

详解SVG路径path的贝塞尔曲线_第6张图片
详解SVG路径path的贝塞尔曲线_第7张图片

T指令自动补全对称的控制点(上图蓝色部分),让曲线平滑起来

详解SVG路径path的贝塞尔曲线_第8张图片

5.三次贝塞尔曲线

详解SVG路径path的贝塞尔曲线_第9张图片

三次贝塞尔曲线的命令参数为:C x1 y1 x2 y2 x y

详解SVG路径path的贝塞尔曲线_第10张图片
详解SVG路径path的贝塞尔曲线_第11张图片
详解SVG路径path的贝塞尔曲线_第12张图片

加群295383988,小白一起讨论技术傲~

你可能感兴趣的:(详解SVG路径path的贝塞尔曲线)