n階貝塞爾曲線

新博客：https://yinl.fun
歡迎關注，同步更新

貝塞爾曲線

本文章借鑒自Unity中的曲線繪制.

貝塞爾曲線(Bézier curve)是由法國數學家Pierre Bézier所提出,類似於Photoshop軟件中的鋼筆工具,不過鋼筆工具僅僅只是用了二階貝塞爾曲線.

原理

在我們寫代碼之前還是了解一下原理為好,所以貝塞爾曲線的原理就是利用經過所有直線上的點的差值來進行繪制,如圖為二階曲線

下面給出二階曲線的公式,P0,P1,P2為示例圖上三點,t為差值數據:

$$ B(t) = (1 - t)^2P_0 + 2t(1 - t)P_1 + t^2P_2 , t\epsilon[0,1] $$

而一階曲線自然就是一個直線,公式為:

$$ B(t) = P_0 + (P_1 - P_0)t = (1 - t)P_0 + tP_1 , t\epsilon[0,1]$$

從中我們可以發現規律從而推導到n階的公式:

$$ B(t) = \sum_{i=0}^nPi(1 -t)^{n-i}t^i , t\epsilon[0,1]$$

而我們要在Scene窗口繪制出貝塞爾曲線,所以這里用到Editor類下的OnInspectorGUI函數繪制Inspector窗口中的貝塞爾曲線配置,OnSceneGUI函數中繪制真正的貝塞爾曲線,繪制方式我們利用Handles函數進行直線模擬曲線方式的繪制.

代碼

首先我們需要一個數據類Curve,存儲簡單的Vector3數組

// 貝塞爾曲線數據
public Vector3[] points;

然后我們需要一個Editor類這里我們起名為CurveTool,繼承自Editor並重寫剛才說的兩個函數,此處代碼不懂可以看我之前寫過的文章: Unity編輯器

public override void OnInspectorGUI()
{
    serializedObject.Update();
    EditorGUILayout.BeginVertical();
    EditorGUILayout.PropertyField(points, new GUIContent("坐標組"), true);
    EditorGUILayout.EndVertical();
    serializedObject.ApplyModifiedProperties();
}

然后接下來時重寫OnSceneGUI函數了,不過在之前我們要看看具體怎么用代碼來實現剛才的N階曲線.
因為我們要利用直線來繪制,所以需要一個for循環來執行繪制,利用GetPoint函數來獲取具體每個精度點的位置然后繪制直線就好了.

Vector3 lineStart = GetPoint(0f); // GetPoint函數為獲取當前點的位置
for (int i = 1; i <= curve.lineSteps; i++) // lineSteps為繪制精度
{
    Vector3 lineEnd = GetPoint(i / (float)curve.lineSteps);
    Handles.DrawLine(lineStart, lineEnd);
    lineStart = lineEnd;
}

每次取差值就能減少一階,所以利用遞歸從n階到最后的一階然后的返回值就是最終點的位置.

public Vector3 GetPoint(float t)
{
    Vector3[] pos = new Vector3[curve.points.Length];
    pos = (Vector3[])curve.points.Clone();
    return curve.transform.TransformPoint(GetLerpPoint(pos, t));
}

public Vector3 GetLerpPoint(Vector3[] pos, float t)
{
    if (pos.Length == 2)
    {
        return Vector3.Lerp(pos[0], pos[1], t);
    }
    Vector3[] newPos = new Vector3[pos.Length - 1];
    for (int i = 0; i < pos.Length - 1; i++)
    {
        newPos[i] = Vector3.Lerp(pos[i], pos[i + 1], t);
    }

    return GetLerpPoint(newPos, t);
}