Android 貝茲路徑的淺析

標籤：img   class   工程師   直線   數學   pie   color   16px   view   

部落格也開了挺長時間了，一直都沒有來寫部落格，主要原因是自己懶～～～此篇部落格算是給2017年一個好的開始，同時也給2016年畫上一個句點，不留遺憾。

那就讓我們正式進入今天的主題：貝茲路徑。

首先，讓我們來瞭解下什麼是貝茲路徑。

貝茲路徑(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程式的數學曲線。貝茲路徑於1962，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發表，他運用貝茲路徑來為汽車的主體進行設計。貝茲路徑最初由Paul de Casteljau於1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。

　　

瞭解了什麼是貝茲路徑，接下來我們來看看貝茲路徑的分類。再講分類之前，首先要提到的兩個概念：資料點和控制點。

資料點：曲線的起始點和終點。

控制點：顧名思義，就是控制曲線的彎曲程度的點。

曲線主要有以下分類：

一階曲線：

　　公式：

　　動態圖：

　　原理：從P0(起始點)到P1(終點)之間連續的點組成的一條直線。一階曲線是沒有控制點的。

二階曲線：

　　公式：

　　靜態圖：

　　動態圖：

　　原理：點Q0(t)的變化從P0到P1,描述一個線性Bézier曲線。

　　　　  點Q1(t)的變化從P1到P2,描述了一個線性Bézier曲線。

　　　　  B點(t)的變化從Q0(t)到Q1(t),描述了一個二次Bézier曲線。

　　　　  P0為起始點，P2為終點，P1為控制點。

三階曲線：　

　　公式：　

　　靜態圖：　　

　　動態圖：

　　原理：其原理和二階曲線的原理類似，主要是多了個控制點。

除了以上三種貝茲路徑的分類，當然還有四階曲線、五階曲線...........

說了這麼多了，那我們到底該如何使用貝茲路徑呢，有沒有方法提供給我們呢？

當然有提供給我們的，在我們自訂View的時候，會用到一個叫Path的類，在這個類中，存在兩個方法：quadTo(繪製二階曲線), cubicTo(繪製三階曲線)。這兩個方法我會簡單的用兩段代碼來說明下。這裡我會貼出主要的代碼：

二階曲線主要代碼塊：

@Override    protected void onDraw(Canvas canvas) {        //畫直線
        mPaint.setColor(Color.BLACK);        mPaint.setStrokeWidth(4);        canvas.drawLine(firstPoint.x,firstPoint.y,midPoint.x,midPoint.y,mPaint);        canvas.drawLine(lastPoint.x,lastPoint.y,midPoint.x,midPoint.y,mPaint);       //畫點        mPaint.setStrokeWidth(20);        canvas.drawPoint(firstPoint.x,firstPoint.y,mPaint);        canvas.drawPoint(lastPoint.x,lastPoint.y,mPaint);        canvas.drawPoint(midPoint.x,midPoint.y,mPaint);       //畫二階曲線        mPaint.setColor(Color.BLUE);        mPaint.setStrokeWidth(8);        Path path = new Path();        path.moveTo(firstPoint.x,firstPoint.y);        path.quadTo(midPoint.x,midPoint.y,lastPoint.x,lastPoint.y);        canvas.drawPath(path,mPaint);    }

：(ps:不會在手機上弄動態圖)

三階曲線主要代碼塊：

@Override    protected void onDraw(Canvas canvas) {       mPaint.setColor(Color.BLACK);        //畫直線        mPaint.setStrokeWidth(4);        canvas.drawLine(firstPoint.x,firstPoint.y,control1.x,control1.y,mPaint);        canvas.drawLine(midPoint1.x,midPoint1.y,midPoint2.x,midPoint2.y,mPaint);        canvas.drawLine(midPoint2.x,midPoint2.y,lastPoint.x,lastPoint.y,mPaint);        //畫點        mPaint.setStrokeWidth(20);        canvas.drawPoint(firstPoint.x,firstPoint.y,mPaint);        canvas.drawPoint(lastPoint.x,lastPoint.y,mPaint);        canvas.drawPoint(midPoint1.x,midPoint1.y,mPaint);        canvas.drawPoint(midPoint2.x,midPoint2.y,mPaint);        //畫三階曲線        mPaint.setColor(Color.BLUE);        mPaint.setStrokeWidth(8);        Path path = new Path();        path.moveTo(firstPoint.x,firstPoint.y);        path.cubicTo(midPoint1.x,midPoint1.y,midPoint2.x,midPoint2.y,        lastPoint.x,lastPoint.y);        canvas.drawPath(path,mPaint);    }

：(ps:還是不會在手機上弄動態圖)　　

好了，至此，貝茲路徑的淺析已經講完了，如還想更多去瞭解貝茲路徑，可以看看這個網站：

https://en.wikipedia.org/wiki/B%C3%A9zier_curve

由於第一次寫部落格，有些地方表達的不是很好，還請諒解。如有好的建議和不足之處還望指出，一定虛心更改。

 

Android 貝茲路徑的淺析