前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >贝塞尔曲线

贝塞尔曲线

作者头像
bering
发布2020-06-08 11:03:35
1.2K0
发布2020-06-08 11:03:35
举报
文章被收录于专栏:游戏开发之旅游戏开发之旅

定义

一条贝塞尔曲线是由一组定义的控制点 P0到 Pn,在 n 调用它的顺序 (n = 1 为线性,2 为二次,等.)。第一个和最后一个控制点总是具有终结点的曲线;然而,中间两个控制点 (如果有的话) 一般不会位于曲线上 。

贝塞尔曲线包含两个控制点即 n = 2 称为线性的贝塞尔曲线

贝塞尔曲线包含三个控制点即 n = 3 称为二次贝塞尔曲线

贝塞尔曲线包含四个控制点即 n = 4,所以称为三次贝塞尔曲线。

线性的贝塞尔曲线

p0和p1两个点之间的线性插值的点p可以获得:

p=p0+t∗(p1−p0)p=p0+t*(p1-p0) \qquadp=p0+t∗(p1−p0) (0 <= t <= 1)

线性的贝塞尔曲线有两个控制点。为给出了两个点 P0和 P1一个线性的贝塞尔曲线是只是这两个点之间的直线 B(t)=p0+t∗(p1−p0)=(1−t)∗p0+t∗p1B(t)=p0+t*(p1-p0)=(1-t)*p0+t*p1\qquadB(t)=p0+t∗(p1−p0)=(1−t)∗p0+t∗p1 (0 <= t <= 1)

在这里插入图片描述
在这里插入图片描述
二次贝塞尔曲线

二次贝塞尔曲线具有三个控制点。二次贝塞尔曲线是点对点的两个线性贝塞尔曲线的线性插值。为给出了三个点 P0、P1和 P2一条二次贝塞尔曲线,其实是两条线性的贝塞尔曲线,线性贝塞尔曲线的 P0和 P1和 线性贝塞尔曲线P1和 P2. 所以,给出二次贝塞尔曲线 :

B(t)=(1−t)∗Bp0p1(t)+t∗Bp1p2(t)B(t)=(1-t)*B_{p0p1}(t)+t*B_{p1p2}(t) \qquadB(t)=(1−t)∗Bp0p1​(t)+t∗Bp1p2​(t) (0=<t<=1)

B(t)=(1−t)∗[(1−t)∗p0+t∗p1]+t∗[(1−t)∗p1+t∗p2]B(t)=(1-t)*[(1-t)*p0+t*p1]+t*[(1-t)*p1+t*p2]\qquadB(t)=(1−t)∗[(1−t)∗p0+t∗p1]+t∗[(1−t)∗p1+t∗p2](0=<t<=1)

二次贝塞尔最终公式: B(t)=(1−t)2∗p0+2∗t∗(1−t)∗p1+t2∗p2B(t)=(1-t)^2*p0+2*t*(1-t)*p1+t^2*p2\qquadB(t)=(1−t)2∗p0+2∗t∗(1−t)∗p1+t2∗p2(0=<t<=1)

在这里插入图片描述
在这里插入图片描述
三次贝塞尔曲线

三次方贝塞尔曲线具有四个控制点。二次贝塞尔曲线是 点对点的两条二次贝塞尔曲线的线性插值。对于给出的四个点 P0、P1、P2和 P3三次方贝塞尔曲线,是二次贝塞尔曲线P0、P1和 P2和 二次贝塞尔曲线P1、P2和 P3 得到的 线性插值 .所以,给出三次方贝塞尔曲线

B(t)=(1−t)Bp0p1p2+t∗Bp1p2p3B(t)=(1-t)B_{p0p1p2}+t*B_{p1p2p3}\qquadB(t)=(1−t)Bp0p1p2​+t∗Bp1p2p3​(0<=t<=1) 拆分=>=>=> B(t)=(1−t)∗[(1−t)2∗p0+2∗t∗(1−t)∗p1+t2∗p2]+t∗[(1−t)2∗p1+2∗t∗(1−t)∗p2+t2∗p3]B(t)=(1-t)*[(1-t)^2*p0+2*t*(1-t)*p1+t^2*p2]+t*[(1-t)^2*p1+2*t*(1-t)*p2+t^2*p3]\qquadB(t)=(1−t)∗[(1−t)2∗p0+2∗t∗(1−t)∗p1+t2∗p2]+t∗[(1−t)2∗p1+2∗t∗(1−t)∗p2+t2∗p3](0<=t<=1)

三次贝塞尔公式:

B(t)=(1−t)3∗p0+3∗(1−t)2∗t∗p1+3∗(1−t)∗t2∗p2+t3∗p3B(t)=(1-t)^3*p0+3*(1-t)^2*t*p1+3*(1-t)*t^2*p2+t^3*p3\qquadB(t)=(1−t)3∗p0+3∗(1−t)2∗t∗p1+3∗(1−t)∗t2∗p2+t3∗p3(0<=t<=1)

在这里插入图片描述
在这里插入图片描述
应用

根据 二次贝塞尔最终公式: B(t)=(1−t)2∗p0+2∗t∗(1−t)∗p1+t2∗p2B(t)=(1-t)^2*p0+2*t*(1-t)*p1+t^2*p2\qquadB(t)=(1−t)2∗p0+2∗t∗(1−t)∗p1+t2∗p2(0=<t<=1) 得到曲线上的点,然后通过doTween的DOPath,或者编辑器画出曲线

代码语言:javascript
复制
function CalculateCubicBezierPoint(t, p0, p1, p2)
	local u=1-t
	local tt=t*t
	local uu=(1-t)*(1-t)
	
	local p=uu*p0+2*t*u*p1+tt*p2
	return p
end
代码语言:javascript
复制
/// <summary>
/// 获取存储贝塞尔曲线点的数组
/// </summary>
/// <param name="startPoint"></param>起始点
/// <param name="controlPoint"></param>控制点
/// <param name="endPoint"></param>目标点
/// <param name="segmentNum"></param>采样点的数量
/// <returns></returns>存储贝塞尔曲线点的数组
function GetBeizerList(startPoint, controlPoint, endPoint,segmentNum)
	local paths={}
	for i=1,segmentNum do
		local t=i/segmentNum
		local p=CalculateCubicBezierPoint(t,startPoint,controlPoint,endPoint)
		table.insert(paths,p)
	end
	return paths
end

参考: https://blog.csdn.net/u010019717/article/details/47684223 https://blog.csdn.net/BBoyLXiang/article/details/88815637

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 定义
    • 线性的贝塞尔曲线
      • 二次贝塞尔曲线
        • 三次贝塞尔曲线
          • 三次贝塞尔公式:
        • 应用
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档