SVG_39_path標籤之字母C_三次貝塞爾曲線又名立方貝塞爾曲線

對於想要了解path標籤其他字母屬性和相關path使用的朋友,可以參看以下文章

SVG_5_矢量圖_Path標籤_弧線世界開啓

SVG_18_a標籤_clipPath標籤_限制路徑效果

SVG_23_mpath標籤_軌跡複用

SVG_38_path標籤之字母Q---二次貝塞爾曲線

 

貝塞爾曲線百科

貝塞爾曲線(Bézier curve),又稱貝茲曲線或貝濟埃曲線,是應用於二維圖形應用程序的數學曲線。一般的矢量圖形軟件通過它來精確畫出曲線,貝茲曲線由線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。貝塞爾曲線是計算機圖形學中相當重要的參數曲線,在一些比較成熟的位圖軟件中也有貝塞爾曲線工具,如PhotoShop等。在Flash4中還沒有完整的曲線工具,而在Flash5裏面已經提供出貝塞爾曲線工具。

 

簡單一句話總結:貝塞爾曲線是可以通過控制點靈活控制的曲線。

 

今日知識點:

二次貝塞爾曲線其實是三次貝塞爾曲線的特殊形式,兩個控制點座標是同一個,三次貝塞爾曲線是有兩個控制點的。

C c1x,c1y c2x,c2y x,y

字母C之後:

c1x,c1y這一對兒座標表示第一個控制點;

c2x,c2y這一對兒座標表示第二個控制點;

x,y這一對兒座標表示終點座標;

 

<!-- 繪製各種曲線是,M起點座標一定是要的C標籤:C c1x,c1y c2x,c2y x,y
    三次貝塞爾曲線,    字母C之後:    c1x,c1y這一對兒座標表示第一個控制點;    c2x,c2y這一對兒座標表示第二個控制點;    x,y這一對兒座標表示終點座標;-->    <path d="M20,20C30,200 400,200 200,10" fill="none" stroke="red"  />

左側切線交點座標爲控制點1,

右側切線交點座標爲控制點2。

(示意圖,湊活看)

 

下方是隨意做了一個圖形效果

Xi說孔方兄認證

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章