高级UI---LSN-7-1-贝塞尔曲线

前言

相信很多同学都知道“[贝塞尔曲线]”这个词,我们在很多地方都能经常看到。但是,可能并不是每位同学都清楚地知道,到底什么是“贝塞尔曲线”,又是什么特点让它有这么高的知名度。

贝塞尔曲线的数学基础是早在 1912 年就广为人知的[伯恩斯坦多项式]。但直到 1959 年,当时就职于雪铁龙的法国数学家 [Paul de Casteljau]才开始对它进行图形化应用的尝试,并提出了一种数值稳定的 [de Casteljau 算法]。然而贝塞尔曲线的得名,却是由于 1962 年另一位就职于雷诺的法国工程师 [Pierre Bézier]的广泛宣传。他使用这种只需要很少的控制点就能够生成复杂平滑曲线的方法,来辅助汽车车体的工业设计。

正是因为控制简便却具有极强的描述能力,贝塞尔曲线在工业设计领域迅速得到了广泛的应用。不仅如此,在计算机图形学领域,尤其是矢量图形学,贝塞尔曲线也占有重要的地位。今天我们最常见的一些矢量绘图软件,如 Flash、Illustrator、CorelDraw 等,无一例外都提供了绘制贝塞尔曲线的功能。甚至像 Photoshop 这样的位图编辑软件,也把贝塞尔曲线作为仅有的矢量绘制工具(钢笔工具)包含其中。

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。在Flash4中还没有完整的曲线工具,而在Flash5里面已经提供出贝塞尔曲线工具。

好吧,我承认上面是一组废话, 来源于百科,那么其实想要真正了解什么是贝塞尔曲线,我们首先来明白他到底是什么,

贝塞尔曲线详解

本质概念:一组算法
目的:这组算法用来干什么?
核心:通过这组算法,我门能达到什么效果

那么首先我门来看最基础的一介贝塞尔


一介贝塞尔

一阶贝塞尔曲线的核心目的其实就只是由两点控制的一条直线

二阶贝塞尔曲线是由一个控制点去控制一条的曲线,而曲线的运动是由两个直线所控制


二介贝塞尔绘制过程
image.png

那么这里相信有很多同学对于上图比较的懵,接下来我们将上图拆解出来分析


image.png

那么此时贝塞尔曲线的计算规则是由A-C & B-C进行连线


image.png

然后在AC线段和BC线段进行等比定位


画的不是太标准,但是AC CB 定位点的位置的比例需要一致

然后由AC上的点和CB上的点进行连接,在选取这条线段上同AC CB比例相同的点


image.png

那么这个点就是绘制贝塞尔曲线的点


image.png

我们的整条曲线是从AC线段开始绘制,通过Path路径进行绘制,如下图


二介贝塞尔绘制过程

那么此时如果你还不明白,或者是你们受不了我的图纸了,那么看下面

实际线条是从A开始到C结束
绘制过程由A点开始,例:D点和A点成一个百分比
那么这里BC线段上同样出现BE这两个点,百分比和AD一致
在经由这两个点连线
出现DE这条线,那么在从这条线上面取得同AD,BE的比例的点F
那么当前这个点就是当前绘制的这一个点
我们由A-C开始启动绘制,用PATH记录点进行绘制,从而得到一条曲线,这条曲线就是我们的贝塞尔曲线

PS:哎,如果在这里才懂得同学你们就让我伤心了,果然还是别人画的图比我画的好看。

那么此时其实我们对于之前的在百度百科上看到的贝塞尔算法


二阶算法.png

三阶算法.png

这种算法可以直接忽略了,因为看的蛋疼

我们直接通过下图得出


image.png

想要找到绘制点的话只需要遵守DF:DE= AD:AB= BE:BC,那么此时F点就是绘制点,这样更加直观明了

那么我们还存在三阶贝塞尔,四阶,五阶等等.... 可以多阶

三阶贝塞尔

四阶贝塞尔
五阶贝塞尔

那么多阶计算模式和我们之前基本上差不多比如说三阶

image.png

从上图我们可以看到三阶比二阶多了一条线段,实际上表示的是最终开始点在A结束在B
中途会往C的方法有一定的移动,然后最终到D结束,计算方式有一定的区别,先由AB BC计算出一条线,在由BC CD 计算出第二条线构建一个二阶的贝塞尔,然后进行进行绘制,最终绘制的点是J 原则:AE:AB= BF:BC= CG:CD= EH:EF= FI:FG= HJ:HI

那么此时如果我们的三阶能够看懂的话那么多阶都是同原理

案例QQ气泡炸裂效果:

image.png
image.png
image.png

著作:Kerwin Barry
邮箱:kerwin0210@sina.com
原创博客,转载请注明出处.....

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 一、前言 本系列文章通过介绍 贝塞尔曲线 的基础知识,贝塞尔曲线在iOS中的应用以及一些高级技巧,循序渐进,试图让...
    我是王海龙阅读 4,229评论 4 19
  • 谈谈贝塞尔曲线 最近在做项目的时候,需要用到一个动画,非常简单的动画,简单到就是直接对一个View做平移… 然而虽...
    雨润听潮阅读 5,958评论 1 16
  • 背景: 给一系列顶点,如果只是用直线将其中的各个点依次连接起来,最终形成一个折线图,这种很容易实现。但是现实...
    狂风无迹阅读 38,934评论 12 70
  • 前言 近段时间我在工作中实现了一个动画功能,其中涉及到动画元素要按一定的轨迹在屏幕上移动,运动轨迹的生成我使用了P...
    Alexyz123阅读 6,542评论 0 11
  • 北京城朱府大堂内,本就严谨的气氛,此时因回荡在堂内的脚步声而显得凝重。 一个紫衣翠簪,满面震惊的女子,不可置信地一...
    十里桃花夜清浅_0c07阅读 254评论 0 0