原理
首先,关于贝塞尔曲线的形成原理网上有很多详解文章。
这里给大家推荐几篇文章的连接作为参考:
比起文字,我觉得下面的一幅动态图更能将其原理准确的表现出来:
上图是4个锚点的动图,而除了4个的还可以有更多的锚点,但原理都是一样的。如图:
其实,锚点的个数只要大于等于3个的情况下便可以画出一条贝塞尔曲线。
代码
先根据动图中4个锚点的情况,简单的写一个贝塞尔的逻辑:
public List<Transform> gameOjbet_tran = new List<Transform>();
private List<Vector3> point = new List<Vector3>();
void Init()
{
point = new List<Vector3>();
for (int i = 0; i < 200; i++)
{
//一
Vector3 pos1 = Vector3.Lerp(gameOjbet_tran[0].position, gameOjbet_tran[1].position, i / 100f);
Vector3 pos2 = Vector3.Lerp(gameOjbet_tran[1].position, gameOjbet_tran[2].position, i / 100f);
Vector3 pos3 = Vector3.Lerp(gameOjbet_tran[2].position, gameOjbet_tran[3].position, i / 100f);
//二
var pos1_0 = Vector3.Lerp(pos1, pos2, i / 100f);
//三
Vector3 find = Vector3.Lerp(pos1_0, pos1_1, i / 100f);
point.Add(find);
}
}
我是在Unity3D的环境中编写的,之中的Vector3.Lerp
是一个求差值的函数,求两点之间一定比例的差值,第一个参数为第一个点(起始点)、第二个参数为第二个点(结束点)、第三个参数为要求的比例。
上面是4个锚点时的基本逻辑,那如果锚点的个数有更多个或只有最少的3个时,我们就要根据其重新写一个吗?当然不用,我通过其形成原理,整合并简化了一个算法,可以适用于任何数量锚点的贝塞尔虚线。
public List<Transform> anchor = new List<Transform>();
private List<Vector3> point = new List<Vector3>();
//计算出指定个点,将他们练成一条直线,使其开起来像是曲线
void GetPathPoints()
{
Vector3[] temp_1 = new Vector3[anchor.Count];
for (int i = 0; i < temp_1.Length; i++)
{//获取锚点坐标
temp_1[i] = anchor[i].position;
}
point = new List<Vector3>();//最终贝塞尔曲线上点的链表集合
float pointNumber = 50;//贝塞尔曲线上点的数量
Vector3[] temp_2;
Vector3[] temp_3;
for (int i = 0; i <= (int)pointNumber; i++)
{
temp_3 = temp_1;
for (int j = temp_3.Length - 1; j > 0; j--)
{
temp_2 = new Vector3[j];
for (int k = 0; k < j; k++)
{
temp_2[k] = Vector3.Lerp(temp_3[k], temp_3[k + 1], i / pointNumber);
}
temp_3 = temp_2;
}
Vector3 find = temp_3[0];
point.Add(find);
}
}
呈现
这里我用的Unity3D物理引擎作为呈现的环境:
void OnDrawGizmos()
{
GetPathPoints();
Gizmos.color = Color.yellow;
for (int i = 0; i < point.Count - 1; i++)
{
Gizmos.DrawLine(point[i], point[i + 1]);
}
}
效果: