原理
首先,關於貝塞爾曲線的形成原理網上有很多詳解文章。
這裏給大家推薦幾篇文章的連接作爲參考:
比起文字,我覺得下面的一幅動態圖更能將其原理準確的表現出來:
上圖是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]);
}
}
效果: