Unity中貝塞爾曲線(Bezier)，實現二階和三階

下圖為貝塞爾曲線一階，二階，三階，四階。

  圖片來自 https://www.jasondavies.com/animated-bezier/

 

剛開始知道貝塞爾曲線的時候覺得這東西好難，今天花了點時間想了一下

發現在Unity中實現貝塞爾曲線還是很容易的。

 

貝塞爾曲線二階的原理：

 

 p0到p1的點（紅色0到1），與p1到p2的點（黃色0到1）連接成的線（藍色0到1），這條線經過的軌跡就是貝塞爾曲線。

先上動圖：

 

代碼如下：

/// <summary>
    /// 曲線圓滑度
    /// </summary>
    public int nultiple = 5;
    public List<Vector3> allPoints = new List<Vector3>();

    public RectTransform p1;
    public RectTransform p2;
    public RectTransform p3;

    private void Update()
    {
        CreatTwoBezierCurve(p1.position, p2.position, p3.position);
        for (int i = 1; i < allPoints.Count; i++)
        {
            Debug.DrawLine(allPoints[i - 1], allPoints[i], Color.blue);
        }
    }

    /// <summary>
    ///二階貝塞爾
    /// </summary>
    /// <param name="startPoint"></param>
    /// <param name="endPoint"></param>
    /// <param name="middlePoint"></param>
    public void CreatTwoBezierCurve(Vector3 startPoint, Vector3 endPoint, Vector3 middlePoint)
    {
        allPoints.Clear();
        for (int i = 0; i < nultiple; i++)
        {
            float tempPercent = (float)i / (float)nultiple;
            float dis1 = Vector3.Distance(startPoint, middlePoint);
            Vector3 point1 = startPoint + Vector3.Normalize(middlePoint - startPoint) * dis1 * tempPercent;
            float dis2 = Vector3.Distance(middlePoint, endPoint);
            Vector3 point2 = middlePoint + Vector3.Normalize(endPoint - middlePoint) * dis2 * tempPercent;
            float dis3 = Vector3.Distance(point1, point2);
            Vector3 linePoint = point1 + Vector3.Normalize(point2 - point1) * dis3 * tempPercent;
            allPoints.Add(linePoint);
        }
        allPoints.Add(endPoint);
    }

其中p1是起點，p2是終點，p3是中間控制點。

 

三階原理跟二階相同：

先上動圖：

再上代碼：

    /// <summary>
    /// 曲線圓滑度
    /// </summary>
    public int nultiple = 5;
    public List<Vector3> allPoints = new List<Vector3>();

    public RectTransform p1;
    public RectTransform p2;
    public RectTransform p3;
    public RectTransform p4;

    private void Update()
    {
        // CreatTwoBezierCurve(p1.position, p2.position, p3.position);
        CreatThreeBezierCurve(p1.position, p2.position, p3.position, p4.position);
        for (int i = 1; i < allPoints.Count; i++)
        {
            Debug.DrawLine(allPoints[i - 1], allPoints[i], Color.blue);
        }
    }

    /// <summary>
    /// 三階貝塞爾
    /// </summary>
    /// <param name="startPoint"></param>
    /// <param name="endPoint"></param>
    /// <param name="middlePoint1"></param>
    public void CreatThreeBezierCurve(Vector3 startPoint, Vector3 endPoint, Vector3 middlePoint1, Vector3 middlePoint2)
    {
        allPoints.Clear();
        for (int i = 0; i < nultiple; i++)
        {
            float tempPercent = (float)i / (float)nultiple;
            float dis1 = Vector3.Distance(startPoint, middlePoint1);
            Vector3 pointL1 = startPoint + Vector3.Normalize(middlePoint1 - startPoint) * dis1 * tempPercent;
            float dis2 = Vector3.Distance(middlePoint1, middlePoint2);
            Vector3 pointL2 = middlePoint1 + Vector3.Normalize(middlePoint2 - middlePoint1) * dis2 * tempPercent;
            float dis3 = Vector3.Distance(pointL1, pointL2);
            Vector3 pointLeft = pointL1 + Vector3.Normalize(pointL2 - pointL1) * dis3 * tempPercent;


            float dis4 = Vector3.Distance(middlePoint2, endPoint);
            Vector3 pointR1 = middlePoint2 + Vector3.Normalize(endPoint - middlePoint2) * dis4 * tempPercent;
            float dis5 = Vector3.Distance(pointL2, pointR1);
            Vector3 pointRight = pointL2 + Vector3.Normalize(pointR1 - pointL2) * dis5 * tempPercent;


            float disLeftAndRight = Vector3.Distance(pointLeft, pointRight);
            Vector3 linePoint = pointLeft + Vector3.Normalize(pointRight - pointLeft) * disLeftAndRight * tempPercent;
            allPoints.Add(linePoint);
        }
        allPoints.Add(endPoint);
    }

 

就這樣。拜拜~