n階貝塞爾曲線

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

貝塞爾曲線

本文章借鑑自Unity中的曲線繪製.github

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

原理

在咱們寫代碼以前仍是瞭解一下原理爲好,因此貝塞爾曲線的原理就是利用通過全部直線上的點的差值來進行繪製,如圖爲二階曲線編輯器

Img

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

\[ 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]\]spa

從中咱們能夠發現規律從而推導到n階的公式:
code

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

而咱們要在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);
}
相關文章
相關標籤/搜索