Android游戲開發25：Android中貝塞爾曲線的繪制方法

       貝塞爾曲線，很多人可能不太了解，什麼叫做貝塞爾曲線呢？這裡先做一下簡單介紹：貝塞爾曲線也可以叫做貝濟埃曲線或者貝茲曲線，它由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋。一般的矢量圖形軟件常利用貝塞爾曲線來精確畫出曲線。

       上面的介紹中，“線段像可伸縮的皮筋”這句話非常關鍵，但也特別好理解。至於貝塞爾曲線的詳細內容大家可以查閱相關資料。

       Android提供的貝塞爾曲線繪制接口

       在Android開發中，要實現貝塞爾曲線其實還是很簡單的，因為Android已經給我們提供了相關接口，但此接口方法被藏的有點深，藏於Path類中。此方法如下：

       android.graphics.Path.quadTo(float x1, float y1, float x2, float y2)

       Since: API Level 1

       參數說明：

       x1：操作點的x坐標

       y1：操作點的y坐標

       x2：結束點的x坐標

       y2：結束點的y坐標

       從API中看出，貝塞爾曲線從API－1就開始支持了。

       Android貝塞爾曲線的繪制實例

       熟悉方法後，下面就來實現：

       SurfaceView框架不多講，看過我博客的都應該知道的。

       直接看MySurfaceView類，此類繼承SurfaceView，是游戲的主視圖。

       這裡為了更清晰的講解：這裡部分代碼先不貼出來了，最後會整體貼出。

       首先是定義相關的成員變量：

1. // 貝賽爾曲線成員變量(起始點，控制（操作點），終止點，3點坐標)   
2. private int startX, startY, controlX, controlY, endX, endY;   
3. // Path   
4. private Path path;   
5. // 為了不影響主畫筆，這裡繪制貝賽爾曲線單獨用一個新畫筆   
6. private Paint paintQ;   
7. // 隨機庫（讓貝賽爾曲線更明顯）   
8. private Random random;  

       本類構造函數：

1. /**  
2.  * SurfaceView初始化函數  
3.  */  
4. public MySurfaceView(Context context) {   
5.     super(context);   
6.     ...   
7.         //貝賽爾曲線相關初始化   
8.         path = new Path();   
9.         paintQ = new Paint();   
10.         paintQ.setAntiAlias(true);   
11.         paintQ.setStyle(Style.STROKE);   
12.         paintQ.setStrokeWidth(5);   
13.         paintQ.setColor(Color.WHITE);   
14.         random = new Random();   
15.     ...   
16. }  

       接著我把貝賽爾曲線的繪制封裝成一個方法了，函數如下：

1. /**  
2.  * 繪制貝賽爾曲線  
3.  *  
4.  * @param canvas 主畫布  
5.  */  
6. public void drawQpath(Canvas canvas) {   
7.     path.reset();// 重置path   
8.     // 貝賽爾曲線的起始點   
9.     path.moveTo(startX, startY);   
10.     // 設置貝賽爾曲線的操作點以及終止點   
11.     path.quadTo(controlX, controlY, endX, endY);   
12.     // 繪制貝賽爾曲線（Path）   
13.     canvas.drawPath(path, paintQ);   
14. }  

       最後是用戶觸屏監聽函數以及邏輯函數：

1. /**  
2.  * 觸屏事件監聽  
3.  */  
4. @Override  
5. public boolean onTouchEvent(MotionEvent event) {   
6.     endX = (int) event.getX();   
7.     endY = (int) event.getY();   
8.     return true;   
9. }   
10. /**  
11.  * 游戲邏輯  
12.  */  
13. private void logic() {   
14.     if (endX != 0 && endY != 0) {   
15.         // 設置操作點為線段x/y的一半   
16.         controlX = random.nextInt((endX - startX) / 2);   
17.         controlY = random.nextInt((endY - startY) / 2);   
18.     }   
19. }  

       整個代碼很easy，主要是貝賽爾函數的參數，尤其是操作點，操作點的各種不同可以實現不同的效果，這裡我簡單的統一的講操作點設置成用戶觸屏點的x、y的一半，呵呵偷懶了~~

       我把貝賽爾的操作點寫在了邏輯logic()函數中，不斷的執行，並且每次利用nextInt函數得到隨機的操作點，主要為了讓其曲線不斷的變化從而形成一個震動的曲線運動軌跡。

       運行效果截圖如下：

       這裡可能由於圖片是靜止的，所以效果看起來不是很明顯，大家可以運行源碼來觀察。

       下面貼出整個MySurfaceView的源碼：

1. package com.qpath;   
2. import java.util.Random;   
3. import android.content.Context;   
4. import android.graphics.Canvas;   
5. import android.graphics.Color;   
6. import android.graphics.Paint;   
7. import android.graphics.Paint.Style;   
8. import android.graphics.Path;   
9. import android.view.KeyEvent;   
10. import android.view.MotionEvent;   
11. import android.view.SurfaceHolder;   
12. import android.view.SurfaceHolder.Callback;   
13. import android.view.SurfaceView;   
14. /**  
15.  * 賽貝爾曲線  
16.  * @author Himi  
17.  *  
18.  */  
19. public class MySurfaceView extends SurfaceView implements Callback, Runnable {   
20.     private SurfaceHolder sfh;   
21.     private Paint paint;   
22.     private Thread th;   
23.     private boolean flag;   
24.     private Canvas canvas;   
25.     public static int screenW, screenH;   
26.     // -----------以上是SurfaceView游戲框架   
27.     // 貝賽爾曲線成員變量(起始點，控制（操作點），終止點，3點坐標)   
28.     private int startX, startY, controlX, controlY, endX, endY;   
29.     // Path   
30.     private Path path;   
31.     // 為了不影響主畫筆，這裡繪制貝賽爾曲線單獨用一個新畫筆   
32.     private Paint paintQ;   
33.     // 隨機庫（讓貝賽爾曲線更明顯）   
34.     private Random random;   
35.     /**  
36.      * SurfaceView初始化函數  
37.      */  
38.     public MySurfaceView(Context context) {   
39.         super(context);   
40.         sfh = this.getHolder();   
41.         sfh.addCallback(this);   
42.         paint = new Paint();   
43.         paint.setColor(Color.WHITE);   
44.         paint.setAntiAlias(true);   
45.         setFocusable(true);   
46.         // -----------以上是SurfaceView游戲框架   
47.         //貝賽爾曲線相關初始化   
48.         path = new Path();   
49.         paintQ = new Paint();   
50.         paintQ.setAntiAlias(true);   
51.         paintQ.setStyle(Style.STROKE);   
52.         paintQ.setStrokeWidth(5);   
53.         paintQ.setColor(Color.WHITE);   
54.         random = new Random();   
55.     }   
56.     /**  
57.      * SurfaceView視圖創建，響應此函數  
58.      */  
59.     public void surfaceCreated(SurfaceHolder holder) {   
60.         screenW = this.getWidth();   
61.         screenH = this.getHeight();   
62.         flag = true;   
63.         // 實例線程   
64.         th = new Thread(this);   
65.         // 啟動線程   
66.         th.start();   
67.         // -----------以上是SurfaceView游戲框架   
68.     }   
69.     /**  
70.      * 游戲繪圖  
71.      */  
72.     public void myDraw() {   
73.         try {   
74.             canvas = sfh.lockCanvas();   
75.             if (canvas != null) {   
76.                 canvas.drawColor(Color.BLACK);   
77.                 // -----------以上是SurfaceView游戲框架   
78.                 drawQpath(canvas);   
79.             }   
80.         } catch (Exception e) {   
81.             // TODO: handle exception   
82.         } finally {   
83.             if (canvas != null)   
84.                 sfh.unlockCanvasAndPost(canvas);   
85.         }   
86.     }   
87.     /**  
88.      * 繪制貝賽爾曲線  
89.      *  
90.      * @param canvas 主畫布  
91.      */  
92.     public void drawQpath(Canvas canvas) {   
93.         path.reset();// 重置path   
94.         // 貝賽爾曲線的起始點   
95.         path.moveTo(startX, startY);   
96.         // 設置貝賽爾曲線的操作點以及終止點   
97.         path.quadTo(controlX, controlY, endX, endY);   
98.         // 繪制貝賽爾曲線（Path）   
99.         canvas.drawPath(path, paintQ);   
100.     }   
101.     /**  
102.      * 觸屏事件監聽  
103.      */  
104.     @Override  
105.     public boolean onTouchEvent(MotionEvent event) {   
106.         endX = (int) event.getX();   
107.         endY = (int) event.getY();   
108.         return true;   
109.     }   
110.     /**  
111.      * 游戲邏輯  
112.      */  
113.     private void logic() {   
114.         if (endX != 0 && endY != 0) {   
115.             // 設置操作點為線段x/y的一半   
116.             controlX = random.nextInt((endX - startX) / 2);   
117.             controlY = random.nextInt((endY - startY) / 2);   
118.         }   
119.     }   
120.     /**  
121.      * 按鍵事件監聽  
122.      */  
123.     @Override  
124.     public boolean onKeyDown(int keyCode, KeyEvent event) {   
125.         return super.onKeyDown(keyCode, event);   
126.     }   
127.     public void run() {   
128.         while (flag) {   
129.             long start = System.currentTimeMillis();   
130.             myDraw();   
131.             logic();   
132.             long end = System.currentTimeMillis();   
133.             try {   
134.                 if (end - start < 50) {   
135.                     Thread.sleep(50 - (end - start));   
136.                 }   
137.             } catch (InterruptedException e) {   
138.                 e.printStackTrace();   
139.             }   
140.         }   
141.     }   
142.     /**  
143.      * SurfaceView視圖狀態發生改變，響應此函數  
144.      */  
145.     public void surfaceChanged(SurfaceHolder holder, int format, int width,   
146.             int height) {   
147.     }   
148.     /**  
149.      * SurfaceView視圖消亡時，響應此函數  
150.      */  
151.     public void surfaceDestroyed(SurfaceHolder holder) {   
152.         flag = false;   
153.     }   
154. }