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这一对儿坐标表示终点坐标;

 

    

SVG_39_path标签之字母C_三次贝塞尔曲线又名立方贝塞尔曲线_第1张图片

左侧切线交点坐标为控制点1,

右侧切线交点坐标为控制点2。

(示意图,凑活看)

SVG_39_path标签之字母C_三次贝塞尔曲线又名立方贝塞尔曲线_第2张图片

 

下方是随意做了一个图形效果

SVG_39_path标签之字母C_三次贝塞尔曲线又名立方贝塞尔曲线_第3张图片

Xi说孔方兄认证

SVG_39_path标签之字母C_三次贝塞尔曲线又名立方贝塞尔曲线_第4张图片

你可能感兴趣的:(SVG)