高级UI之贝塞尔曲线
创始人
2024-01-30 19:52:31

前言

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

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

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

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

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

贝塞尔曲线详解

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

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

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

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

在这里插入图片描述

在这里插入图片描述

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

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


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

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


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

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

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







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

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


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

我们直接通过下图得出

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

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



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

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

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

案例QQ气泡炸裂效果:


更多Android 知识点可参考

Android 性能调优系列https://0a.fit/dNHYY

Android 车载学习指南https://0a.fit/jdVoy

Android Framework核心知识点笔记https://0a.fit/acnLL

Android 八大知识体系https://qr21.cn/CaZQLo?BIZ=ECOMMERCE

Android 中高级面试题锦https://0a.fit/YXwVq

相关内容

热门资讯

长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
1秒多少毫秒 1秒等于多少毫秒... 长度单位换算1丈=10尺;1尺=10寸;1寸=10分;1分=10厘;1丈≈3.33米;1尺≈3.33...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
中国电信人工电话多少 中国电信... 当我们在使用中国移动、中国电信和中国联通提供的电信业务时,可能会发生争议。建议直接向服务提供商投诉,...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...