SVG 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

三次贝塞尔曲线指令 (C,S)

  曲线指令一共有三组,和直线指令一样,指令字母大写表示坐标位置是绝对坐标,指令字母小写表示坐标位置是相对坐标。三次贝塞尔曲线指令 (C,c,S,s)是其中的一个。

  可以通过定义一个起点和终点,以及两个控制点(一个控制起点,一个控制终点),绘制一条贝塞尔曲线。

三次贝塞尔曲线指令的格式为:

C (or c) x1,y1 x2,y2 x,y
  • x1,y1 是曲线起点的控制点坐标
  • x2,y2 是曲线终点的控制点坐标
  • x,y 是曲线的终点坐标

  你可以将若干个贝塞尔曲线连起来,从而创建出一条很长的平滑曲线。通常情况下,一个点某一侧的控制点是它另一侧的控制点的对称(以保持斜率不变)。这样,你可以使用一个简写的贝塞尔曲线命令S,如下所示:

S x2 y2, x y (or s dx2 dy2, dx dy)

  S命令可以用来创建与之前那些曲线一样的贝塞尔曲线,但是,如果S命令跟在一个C命令或者另一个S命令的后面,它的第一个控制点,就会被假设成前一个控制点的对称点。如果S命令单独使用,前面没有C命令或者另一个S命令,那么它的两个控制点就会被假设为同一个点。下面是S命令的语法示例,下图中的某个控制点用红色标示,与它对称的控制点用蓝色标示。

S命令语法示例