欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【Canvas】用canvas画出二次贝塞尔和三次贝塞尔图

程序员文章站 2023-12-27 09:13:39
...

前言

在Android开发和面试中(尤其是一些中高级岗位面试),面试官可能会问你自定义控件的详细内容,我们知道自定义控件这一块涉及到的内容很多,回答的越多越深入,那么面试的印象会更好。自定义控件涉及的内容比如测量和绘制、事件分发的处理、动画效果的渲染与实现,当然还有不得不提的贝赛尔曲线(实际上一些面试官自己都不是很理解二阶贝塞尔、三阶贝塞尔曲线等概念)。
参考文章

概念

ézier curve(贝塞尔曲线) 是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。

贝塞尔曲线所依据的最原始的数学公式是 伯恩斯坦多项式。 简单来说,伯恩斯坦多项式可以用来证明,在[ a, b ] 区间上所有的连续函数都可以用多项式来逼近,并且收敛性很强,也就是一致收敛。 就是一个连续函数,你可以将它写成若干个伯恩斯坦多项式相加的形式,并且,随着 n→∞,这个多项式将一致收敛到原函数,这个就是伯恩斯坦斯的逼近性质。

到了1959年,当时就职于雪铁龙的法国数学家 Paul de Casteljau 开始对伯恩斯坦多项式进行了图形化的尝试,并且提供了一种数值稳定的德卡斯特里奥(de Casteljau) 算法。根据这个算法,就可以只通过很少的控制点,去生成复杂的平滑曲线,也就是贝塞尔曲线。

而贝塞尔曲线的得名,得归功于1962年就职于雷诺的法国工程师皮埃尔·贝塞尔(Pierre Bézier),他使用这种方法来辅助汽车的车体工业设计,并且广泛宣传,因此大家才都称他为贝塞尔曲线 。

Bezier曲线是应用于二维图形的曲线。曲线由顶点和控制点组成,通过改变控制点坐标可以改变曲线的形状。

参考文章

二次Bezier曲线公式

【Canvas】用canvas画出二次贝塞尔和三次贝塞尔图
【Canvas】用canvas画出二次贝塞尔和三次贝塞尔图

三次Bezier曲线公式

【Canvas】用canvas画出二次贝塞尔和三次贝塞尔图
【Canvas】用canvas画出二次贝塞尔和三次贝塞尔图

贝塞尔曲线的特点及用途

对于贝塞尔曲线,最重要的点是数据点和控制点。
数据点: 指一条路径的起始点和终止点。
控制点:控制点决定了一条路径的弯曲轨迹

曲线发现者

“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。

实践

  • 二次贝塞尔
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(300,0);
				ctx.lineTo(200,200);
				ctx.stroke();
				
				ctx.beginPath();
				ctx.moveTo(50,50)
				ctx.quadraticCurveTo(300,0,200,200);
				ctx.stroke();
			}
		}
		
		
	</script>
</html>

浏览器显示结果如下:

【Canvas】用canvas画出二次贝塞尔和三次贝塞尔图

  • 三次贝塞尔
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.beginPath();
				ctx.moveTo(50,50);
				ctx.lineTo(300,0);
				ctx.lineTo(0,300);
				ctx.lineTo(300,300);
				ctx.stroke();
				
				ctx.beginPath();
				ctx.moveTo(50,50)
				ctx.bezierCurveTo(300,0,0,300,300,300);
				ctx.stroke();
			}
		}
		
		
	</script>
</html>

浏览器显示结果如下:
【Canvas】用canvas画出二次贝塞尔和三次贝塞尔图

上一篇:

下一篇: