1. 程式人生 > 實用技巧 >Unity中貝塞爾曲線(Bezier),實現二階和三階

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);
    }

就這樣。拜拜~