首先介绍以下什么是贝塞尔曲线
贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向。
控制点个数为0时,它是一条直线;
控制点个数为1时,它是二次贝塞尔曲线;
控制点个数为2时,它是三次贝塞尔曲线;
....
数学公式
二次贝塞尔曲线
p0,p2是起始点,p1是控制点
分别把p0,p1,p2点的x,y坐标带入,求出曲线上的点的x,y坐标
三次贝塞尔曲线
p0,p3是起始点,p1,p2是控制点
svg的path中与贝塞尔曲线相关的命令有:
C(curveto):三次贝塞尔曲线,参数:
x1,y1 x2,y2 m,n
x1,y1 x2,y2为两个控制点的xy坐标,m n为终点的坐标,起始点为执行该命令之前,笔触的位置。(注:svg中的曲线命令通常与M命令一起使用)
S(smooth curveto)参数:
x2,y2 m,n
x2,y2为第二个控制点,m n为终点的坐标,对于第一个控制点分为两种情况:
当S命令的前一个命令是C或S命令时,第一个控制点是前一个C或S的控制点的对称点(关于前一个命令的终点或当前命令的起始点);
否则S命令将退化为二次贝塞尔曲线(同Q)。
Q(quadratic Belzier c
urve)二次贝塞尔曲线,参数:
x1,y1 m,n
x1,y1为控制点坐标,m,n为终点坐标。
T(smooth quadratic Belzier curveto)
参数:m,n
同S相似,T是Q的退化或者懒人写法。分为两种情况:
当T的前一个命令是Q或T时,控制点是前一个Q或T的控制点的对称点(关于前一个命令的终点或当前命令的起始点);否则T命令将退化为一条直线。
相对坐标
c,s,q,t命令的相对位移相对的是同一个点,
以c命令为例,当pen表示当前笔触的位置时,
点的绝对坐标为:
x1=pen[0]+dx1
y1=pen[1]+dy1
x2=pen[0]+dx2
y2=pen[1]+dy2
m=pen[0]+mx
n=pen[1]+my
参考:https://zh.wikipedia.org/zh-cn/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/