SVG矢量繪圖 path路徑詳解(貝塞爾曲線及平滑)


以二次貝塞爾曲線的公式為例:

二次貝塞爾曲線公式

 

js函數:

Js代碼   收藏代碼
  1. //p0、p1、p2三個點,其中p0為起點,p2為終點,p1為控制點  
  2. //它們的坐標用數組表示[x,y]  
  3. //t的范圍是0-1  
  4. function qBerzier(p0,p1,p2,t){  
  5.     var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0];  
  6.     var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[1] + t * t * p2[1];  
  7.     return [x,y];  
  8. }  

 

通過函數,可以用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

Snip20150708_4

通過M定義(x0,y0)為起點,用Q定義(x1,y1)為控制點,(x2,y2)為終點,構成一條二次貝塞爾曲線。 Q方法非常簡單直觀。

 

T 二次貝塞爾曲線平滑延伸

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

Snip20150708_5

T 命令是二次被賽爾曲線的平滑延伸命令,用Q定義了一段二次貝塞爾曲線后面,緊接着一個T命令,只需定義終點,就可以自動延伸出一條平滑的曲線。 在這段曲線中,(x3,y3)沒有手工定義,這里使用的T方法,只定義一個終點,起點是上一段曲線的終點,控制點則是上一段曲線的控制點的對稱點(相對於 上一段曲線的終點)。 在這里,(x3,y3)是(x1,y1)的對稱點(相對於(x2,y2)對稱)。

 

C 三次貝塞爾曲線

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

Snip20150708_6

C方法定義的是三次貝塞爾曲線,這里只是多了一個控制點,很好理解

 

S 三次貝塞爾曲線平滑延伸

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

Snip20150708_7

三次貝塞爾也有一個平滑延伸的命令,需要定義一個控制點和一個終點,命令會再自動生成一個控制點,從而形成一條延伸出來的三次貝賽爾曲線。

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM