独角兽企业重金招聘Python工程师标准>>>
贝塞尔(贝兹尔)曲线介绍
什么是贝塞尔曲线?
“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。贝塞尔曲线就是这样的一条曲线,它是依据四个位置任意的点坐标绘制出的一条光滑曲线。
“贝赛尔”工具在photoshop中叫“钢笔工具”;在CorelDraw中翻译成“贝赛尔工具”;而在Fireworks中叫“画笔”。它是用来“画线”造型的一种专业工具。
贝塞尔曲线有一阶,二阶,三阶,高阶。一般计算机中使用三阶的。 想看原理的,点击这个链接/hnfxs/p/3148483.html
其有4个点:起始点,2个中间点,结束点。
此曲线经常被SVG,Canvas,CSS3所使用。
SVG上使用
使用SVG的path可以支持画贝塞尔曲线:
<svg width="160px" height="160px"><path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/></svg>
M指的是MoveTo(10, 10)这个点(起始点)。然后C就是开始画曲线,需要指定剩下的三个点。
Canvas上使用
Canvas使用bezierCurveTo()方法:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.moveTo(20,20);ctx.bezierCurveTo(20,100,200,100,200,20);ctx.stroke();
开始点:moveTo(20,20)控制点 1:bezierCurveTo(20,100,200,100,200,20)控制点 2:bezierCurveTo(20,100,200,100,200,20)结束点: bezierCurveTo(20,100,200,100,200,20)
CSS3上使用
CSS3属性叫做cubic-bezier,CSS3贝塞尔起点是0,0; 终点是1, 1; 所以只需要定义剩下的2个点,例如:
transition:cubic-bezier(.25,.1,.25,1)
有专门的页面让大家感受CSS3的贝塞尔曲线: http://cubic-/#.25,.1,.25,1
参考:
张鑫旭 /wordpress/?p=3626百度百科 /item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF贝塞尔曲线原理 /hnfxs/p/3148483.html有代码的介绍 /trent/imagesharp/100486Android移动端应用: //03/30/Android-Animation-%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF%E4%B9%8B%E7%BE%8E/
如果觉得《贝塞尔(贝兹尔)曲线介绍》对你有帮助,请点赞、收藏,并留下你的观点哦!