css贝塞尔曲线 多个点_了解贝塞尔曲线的数学和Python实现示例
贝塞尔曲线在计算机图形学中被大量使用,通常可以产生平滑的曲线。如果您曾经使用过Photoshop,则可能会发现名为“锚点”的工具,您可以在其中放置锚点并用它们绘制一些曲线,这些也是贝塞尔曲线。如果您使用了基于矢量的图形SVG,这些也会使用贝塞尔曲线。让我们看看它是如何工作的。
定义
给定n + 1 个点(P0,…,Pn)称为控制点,这些点定义的贝塞尔曲线定义为:
eq. 1
其中B(t)称为Bernstein多项式:
eq. 2
你会注意到这个伯恩斯坦多项式看起来很像牛顿二项式公式中的第k项,也就是:
eq. 3
事实上,伯恩斯坦多项式就是(t + (1 - t))^n = 1的展开式中的第k项。这就是为什么如果你把所有的Bi加到n,你会得到1。
二次贝塞尔曲线
二次贝塞尔曲线就是我们所说的有三个控制点的贝塞尔曲线,P(t)的阶数是2。让我们计算给定3个控制点的贝塞尔曲线,并探索一些我们可能会发现的特性!请记住,公式1适用于n+1个点,所以在我们的例子中n=2。
eq. 4
注意,P(t)返回的不是一个数字,而是曲线上的一个点。现在我们只需要选择三个控制点,然后在[0,1]范围内对曲线求值。我们可以在Python中很容易地做到这一点。
import numpy as npimport matplotlib.pyplot as pltP0, P1, P2 = np.array([[0, 0],[2, 4],[5, 3]])# define bezier curveP = lambda t: (1 - t)**2 * P0 + 2 * t * (1 - t) * P1 + t**2 * P2# evaluate the curve on [0, 1] sliced in 50 pointspoints = np.array([P(t) for t in np.linspace(0, 1, 50)])# get x and y coordinates of points separatelyx, y = points[:,0], points[:,1]# plotplt.plot(x, y, 'b-')plt.plot(*P0, 'r.')plt.plot(*P1, 'r.')plt.plot(*P2, 'r.')plt.show()
您会注意到曲线从第一个控制点处开始,到最后一个控制点处结束。这个结果对任意数量的点都成立。由于t的取值范围是从0到1,我们可以通过求P(t)在t=0和t=1时的值来证明这一点。使用eq.1:
eq. 5
eq. 6
因为是从P0到P2,P1完全决定了曲线的形状。移动P1你可能会注意到:
贝塞尔曲线总是包含在控制点形成的多边形中。这个多边形因此被称为控制多边形,或者贝塞尔多边形。这个属性也适用于任意数量的控制点,这使得它们在使用软件时的操作非常直观。
控制多边形还具有以下特性:包含曲线的面积最小,称为凸包。
插补
贝塞尔曲线的一个有趣应用是绘制一条通过一组预定义点的平滑曲线。之所以有趣,是因为P(t)的公式产生点,并且不是y = f(x)的形式,因此一个x可以具有多个y。。例如,我们可以这样画:
下面是如何使用公式1为任意数量的控制点编写通用版本的Bezier曲线。
import numpy as npimport matplotlib.pyplot as pltfrom math import factorialdef comb(n, k): return factorial(n) // (factorial(k) * factorial(n - k))def get_bezier_curve(points): n = len(points) - 1 return lambda t: sum( comb(n, i) * t**i * (1 - t)**(n - i) * points[i] for i in range(n + 1) )def evaluate_bezier(points, total): bezier = get_bezier_curve(points) new_points = np.array([bezier(t) for t in np.linspace(0, 1, total)]) return new_points[:,0], new_points[:,1]points = np.array([ [0, 0], [-1, 3], [4, 3], [6, 0], [7, 2.5]])x, y = points[:,0], points[:,1]bx, by = evaluate_bezier(points, 50)plt.plot(bx, by, 'b-')plt.plot(x, y, 'r.')plt.show()
运行该Python程序,显示如下图形:
css贝塞尔曲线 多个点_了解贝塞尔曲线的数学和Python实现示例相关推荐
- 对坐标的曲线积分求做功_对坐标的曲线积分对弧长的曲线积分 二重积分
高数:对坐标的曲线积分这题怎么写? 再问:可是答案是4a^2啊再问:奇怪再答:我感觉应该是你的答案错了吧,我找不出我哪里不对.再问:恩恩,那请问逆时针和顺时针区别在哪呢再答:如果是顺时针,那么用格林公 ...
- css贝塞尔曲线 多个点_贝塞尔曲线实践
贝塞尔曲线: 贝塞尔曲线本质上是由线段和节点组成的,形象的说节点是可拖动的支点,线段像可伸缩的皮筋.一个常规的曲线往往由4个控制点构成(p0,p1,p2,p3),曲线经过起点(p0)和终点(p1). ...
- python如何画贝塞尔曲线_初识贝塞尔曲线
贝塞尔曲线在CSS动画中和canvas.svg绘图中都是比较重要的一个东西!所以我来好好的小结一下关于它的一些东西. 什么是贝塞尔曲线 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre ...
- bezier.CSS_SVG_canvas画_贝兹曲线
ZC:(1).SVG可以绘制 贝兹曲线:(2).canvas能绘制 贝兹曲线:(3).现在(20180202)查资料发现,css 貌似不能绘制 贝兹曲线,css使用贝兹曲线 主要是用于控制动画的速度, ...
- canvas贝塞尔曲线爱心_canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
写在最前 由于原生的Canvas最高只支持到三阶贝塞尔曲线,那么我想添加多个控制点怎么办呢?(即便大部分复杂曲线都可以用3阶贝塞尔来模拟)与此同时,关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控 ...
- 贝塞尔曲线(Bezier)之爱心点赞曲线动画效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此 博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
- HTML5期末大作业:动漫网站设计——火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计...
HTML5期末大作业:动漫网站设计--火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计- 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- 史上最全的贝塞尔曲线(Bezier)全解(一):初识贝塞尔曲线
作为一个有只志向的码农,除了知道一些基本的知识够自己努力搬砖以外,还应该get一些更炫酷的技能,用更优雅的姿势进行搬砖;想要实现一些十分炫酷的效果,贝塞尔曲线就必须进行一些研究了; 最近一段时间, ...
- 静态HTML网页设计作品——火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计
HTML5期末大作业:动漫网站设计--火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计- 文章目录 HTML5期末大作业:动漫网站设计--火影忍者动漫(7页 ...
最新文章
- Maven学习总结(九)——使用Nexus搭建Maven私服
- 大马哈鱼的C#学习笔记(3):Invoke/BeginInvoke/DynamicInvoke
- cnn 一维时序数据_一时序数据输入维cnn
- SQL Servr 2008空间数据应用系列三:SQL Server 2008空间数据类型
- 分页插件pageHelpler的使用(ssm框架中)服务器端分页
- java 搜索引擎 关键词高亮_和我一起打造个简单搜索之SpringDataElasticSearch关键词高亮(示例代码)...
- ceq c matlab,求一个函数MATLAB的编程,求大神指教。
- 科技行业的起步时代已结束
- 双主动桥隔离双向DC-DC变换器(七)设计建议及未来趋势、总结
- 思科交换机配置试题_思科交换机配置命令
- java 继承 ppt_Java的继承机制详解.ppt
- mysql开机启动_MySQL开机自动启动的设置方法
- 店铺流量下跌应该如何解决
- 计算机为何引入16进制,计算机内存地址为什么要用16进制数来表示
- 揭秘大家都在用的报表——帆软报表,专为数据分析而生!
- layui上传图片(加大小限制)
- docker磁盘空间满了怎么清理
- delete、truncate、drop的区别有哪些,该如何选择
- java 余弦定理_文本相似度计算之余弦定理
- 铁甲雄兵显示服务器维护,铁甲雄兵正在获取服务器地址
热门文章
- Kaldi AMI数据集脚本学习2----run_prepare_shared.sh
- 程序员这样面试,拿到offer的几率是非常大
- mysql 5.622_新特新解读 | MySQL 8.0 对 count(*)的优化
- think php5关联模型,thinkphp5中关联模型的定义与使用方法
- java怎么设置zip的名词_[Java]对新创建Zip文件的子项设置 压缩/存储 模式
- sql语句ding_SQL语句映射文件增删改查、参数、缓存
- c语言输入字符串_我们一起学C语言(四)
- 【大数据】0002---MongoDB集群自动分离创建新集群
- 数组 / 伪数组 判断及方法调用 (权威指南笔记)
- Thread线程notify方法的自我理解