失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 贝塞尔(贝兹尔)曲线介绍

贝塞尔(贝兹尔)曲线介绍

时间:2019-01-07 17:59:13

相关推荐

贝塞尔(贝兹尔)曲线介绍

独角兽企业重金招聘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/

如果觉得《贝塞尔(贝兹尔)曲线介绍》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。