深度SVG路徑path的貝塞爾曲線指令

貝塞爾曲線

貝塞爾曲線就是這樣的一條曲線，它是依據四個位置任意的點坐標繪制出的一條光滑曲線；可以繪制任何曲線，自然包括直線。包括了很多種類型：線性貝塞爾曲線、二次方貝塞爾曲線、三次方貝塞爾曲線、四次方貝塞爾曲線、五次方貝塞爾曲線、……。

直觀感受：

一個標准的3次貝塞爾曲線需要4個點：起始點、終止點（也稱錨點）以及兩個相互分離的中間點。

三次貝塞爾曲線指令對應指令C,S【廁所】。

• C = curveto
• S = smooth curveto

三次貝塞爾曲線指令：C x1 y1, x2 y2, x y兩個控制點(x1,y1)和(x2,y2)，(x,y)代表曲線的終點。字母C表示特定動作與行為，這里需要大寫，表示標准三次方貝塞爾曲線。

Eg:

<svg width="190px" height="160px">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="3" fill="none"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="3" fill="none"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="3" fill="none"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="3" fill="none"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="3" fill="none"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="3" fill="none"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="3" fill="none"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="3" fill="none"/>
</svg>

圖形效果類似：

可以看到M后面的起點，加C后面3個點，構成了貝賽爾曲線的4個點。

C指令有三個坐標參數，而S指令自動對稱一個控制點，因此，跟在C指令之后的S指令，只需要2個參數哦，如下：

S x2 y2, x y

二次貝塞爾曲線指令對應了Q,T【切圖】。

• Q = quadratic Belzier curve
• T = smooth quadratic Belzier curveto

二次貝塞爾曲線指令和三次貝塞爾曲線相比，就是2個控制點合為1個。

參考：

貝塞爾曲線百度百科：

http://baike.baidu.com/link?url=GJdFZM4ZYyML_KeohngfW40eKL85UTpTSmi4UYyLG1mBluQq3U8ZskDHu-k_gK_hD1Mk86xRFuvKQJ6QOE3wWa

深度SVG路徑path的貝塞爾曲線指令

http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/

貝塞爾曲線初探

http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

Animated Bézier Curves

https://www.jasondavies.com/animated-bezier/