SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）

维基百科：贝塞尔曲线

以二次贝塞尔曲线的公式为例：

js函数：

//p0、p1、p2三个点，其中p0为起点，p2为终点，p1为控制点
//它们的坐标用数组表示[x,y]
//t的范围是0-1
function qBerzier(p0,p1,p2,t){var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0];var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[1] + t * t * p2[1];return [x,y];
}

通过函数，可以用L方法绘制贝塞尔曲线，但是这种方法是用直线将离散的点连接起来，只是因为点的距离很近，所以看上去是曲线，不够完美。所以绘制贝塞尔曲线，一般还是用path里的曲线命令比较好。

path路径绘制中，绘制贝塞尔曲线的命令包括：

Q 二次贝赛尔曲线 x1,y1 x,y

T 平滑二次贝塞尔曲线 x,y

C 曲线（curveto） x1,y1 x2,y2 x,y

S 平滑曲线 x2,y2 x,y

其中Q和T可以在一起使用，C和S可以在一起用。

Q 二次贝塞尔曲线

用法：M x0,y0 Q x1,y1 x2,y2

通过M定义（x0,y0）为起点，用Q定义（x1,y1）为控制点，（x2,y2）为终点，构成一条二次贝塞尔曲线。 Q方法非常简单直观。

T 二次贝塞尔曲线平滑延伸

用法：M x0,y0 Q x1,y1 x2,y2 T x4,y4

T 命令是二次被赛尔曲线的平滑延伸命令，用Q定义了一段二次贝塞尔曲线后面，紧接着一个T命令，只需定义终点，就可以自动延伸出一条平滑的曲线。在这段曲线中，(x3,y3)没有手工定义，这里使用的T方法，只定义一个终点，起点是上一段曲线的终点，控制点则是上一段曲线的控制点的对称点（相对于上一段曲线的终点）。在这里，(x3,y3)是(x1,y1)的对称点（相对于(x2,y2)对称）。

C 三次贝塞尔曲线

用法：M x0,y0 C x1,y1 x2,y2 x3,y3

C方法定义的是三次贝塞尔曲线，这里只是多了一个控制点，很好理解

S 三次贝塞尔曲线平滑延伸

用法：M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6

三次贝塞尔也有一个平滑延伸的命令，需要定义一个控制点和一个终点，命令会再自动生成一个控制点，从而形成一条延伸出来的三次贝赛尔曲线。

原文：http://xbingoz.com/194.html

转自：SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）

SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）相关推荐

SVG矢量绘图 path路径详解（基本画法）
SVG的形状标签里,path是最强大的一个,掌握了path就足够处理常见的绘图问题了. 先看一下path标签的基本用法: <path d="M100,100 L200,200 L200 ...
【路径规划】局部路径规划算法——贝塞尔曲线法（含python实现 | c++实现）
文章目录参考资料 1. 算法简介 2. 公式原理及python实现 2.1 一阶贝塞尔曲线 2.2 二阶贝塞尔曲线 2.3 三阶贝塞尔曲线 2.4 n阶贝塞尔曲线 2.5 贝塞尔曲线性质 3. c+ ...
超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
[转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
cmake find_package路径详解
cmake find_package路径详解转自:https://zhuanlan.zhihu.com/p/50829542 经常在Linux下面写C++程序,尤其是需要集成各种第三方库的工程,肯定 ...
Nginx反向代理、动静分离、负载均衡及rewrite隐藏路径详解（Nginx Apache MySQL Redis）–第二部分...
Nginx反向代理.动静分离.负载均衡及rewrite隐藏路径详解 (Nginx Apache MySQL Redis) 楓城浪子原创,转载请标明出处! 更多技术博文请见个人博客:https://fe ...
python调用包的路径_Python3 模块、包调用路径详解
如下所示: ''' 以下代码均为讲解,不能实际操作 ''' ''' 博客园 Infi_chu ''' ''' 模块的优点: 1.高可维护性 2.可以大大减少编写的代码量模块一共有三种: 1.Pyth ...
SpringBoot默认包扫描机制及@ComponentScan指定扫描路径详解
SpringBoot默认包扫描机制及@ComponentScan指定扫描路径详解 SpringBoot默认包扫描机制标注了@Component和@Component的衍生注解如@Controller ...
linux 软链接相对路径,Linux入门之ln命令创建软链接的绝对路径和相对路径详解（Ubuntu）...
ln命令创建软链接的绝对路径和相对路径详解简介 ln命令总结简介 Linux链接,可以分为硬链接与软链接:本文主要介绍软链接.(默认情况下,ln命令产生硬链接) 软链接文件类似于Windows的 ...

SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）

SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）相关推荐

最新文章

热门文章