以二次貝塞爾曲線的公式為例:
js函數:
- //p0、p1、p2三個點,其中p0為起點,p2為終點,p1為控制點
- //它們的坐標用數組表示[x,y]
- //t的范圍是0-1
- function qBerzier(p0,p1,p2,t){
- var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0];
- var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[1] + t * t * p2[1];
- return [x,y];
- }
通過函數,可以用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
通過M定義(x0,y0)為起點,用Q定義(x1,y1)為控制點,(x2,y2)為終點,構成一條二次貝塞爾曲線。 Q方法非常簡單直觀。
T 二次貝塞爾曲線平滑延伸
用法:M x0,y0 Q x1,y1 x2,y2 T x4,y4
T 命令是二次被賽爾曲線的平滑延伸命令,用Q定義了一段二次貝塞爾曲線后面,緊接着一個T命令,只需定義終點,就可以自動延伸出一條平滑的曲線。 在這段曲線中,(x3,y3)沒有手工定義,這里使用的T方法,只定義一個終點,起點是上一段曲線的終點,控制點則是上一段曲線的控制點的對稱點(相對於 上一段曲線的終點)。 在這里,(x3,y3)是(x1,y1)的對稱點(相對於(x2,y2)對稱)。
C 三次貝塞爾曲線
用法:M x0,y0 C x1,y1 x2,y2 x3,y3
C方法定義的是三次貝塞爾曲線,這里只是多了一個控制點,很好理解
S 三次貝塞爾曲線平滑延伸
用法:M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6
三次貝塞爾也有一個平滑延伸的命令,需要定義一個控制點和一個終點,命令會再自動生成一個控制點,從而形成一條延伸出來的三次貝賽爾曲線。
原文:http://xbingoz.com/194.html