曲线命令 curve - convertSvg/svg-path-parse GitHub Wiki
- 三次贝塞尔曲线 C
三次贝塞尔曲线需要定义一个点和两个控制点
// x1 y1, x2 y2 control point x y coordinates
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
- S 命令—为了简化 C 命令,多次贝塞尔曲线,代码过多
S 命令可以用来创建与前面一样的贝塞尔曲线,但是,如果S命令跟在一个C或S命令后面,则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用,前面没有C或S命令,那当前点将作为第一个控制点。下面是S命令的语法示例,图中左侧红色标记的点对应的控制点即为蓝色标记点。
S x2 y2, x y (or s dx2 dy2, dx dy)
S 命令可以用来创建与前面一样的贝塞尔曲线,但是,如果S命令跟在一个C或S命令后面,则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用,前面没有C或S命令,那当前点将作为第一个控制点。下面是S命令的语法示例,图中左侧红色标记的点对应的控制点即为蓝色标记点。
- 二次贝塞尔曲线 Q
二次贝塞尔曲线 Q,它比三次贝塞尔曲线简单,只需要一个控制点,用来确定起点和终点的曲线斜率。因此它需要两组参数,控制点和终点坐标。
// x1 y1 control point x y coordinates
Q x1 y1, x y (or q dx1 dy1, dx dy)
- T命令—为了简化 Q 命令,多次贝塞尔曲线,可以通过更简短的参数
// x y coordinates
T x y (or t dx dy)
和之前一样,快捷命令T会通过前一个控制点,推断出一个新的控制点。这意味着,在你的第一个控制点后面,可以只定义终点,就创建出一个相当复杂的曲线。需要注意的是,T命令前面必须是一个Q命令,或者是另一个T命令,才能达到这种效果。如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线。
虽然三次贝塞尔曲线拥有更大的自由度,但是两种曲线能达到的效果总是差不多的。具体使用哪种曲线,通常取决于需求,以及对曲线对称性的依赖程度。
Cario cairo_curve_to () cairo_rel_curve_to ()
void
cairo_curve_to (cairo_t *cr,
double x1,
double y1,
double x2,
double y2,
double x3,
double y3);
Parameters
cr
a cairo context
x1
the X coordinate of the first control point
y1
the Y coordinate of the first control point
x2
the X coordinate of the second control point
y2
the Y coordinate of the second control point
x3
the X coordinate of the end of the curve
y3
the Y coordinate of the end of the curve
深入阅读: