Android游戲開發中繪制游戲觸摸軌跡的曲線圖

       本篇文章主要來講解怎樣繪制游戲觸摸軌跡的曲線圖。

       我們在onTouchEvent方法中，可以獲取到觸摸屏幕時手指觸摸點的x、y坐標，如何用這些點形成一條無規則軌跡並把這條無規則軌跡曲線顯示在屏幕上就是本篇文章的主旨內容。

       Android Path類

       Android提供了一個Path類 ， 顧名思義這個類可以設置曲線路徑軌跡。任何無規則的曲線實際上都是由若干條線段組成，而線段的定義為兩點之間最短的一條線。path類就 可以記錄這兩點之間的軌跡，那麼若干個Path 就是我們須要繪制的無規則曲線。

       下面介紹一下API 中path類設置軌跡路徑的方法。

       public class

       Path
       extends Object
       java.lang.Object
       android.graphics.Path

       quadTo(float x1, float y1, float x2, float y2)
       Add a quadratic bezier from the last point, approaching control point (x1,y1), and ending at (x2,y2).

       解釋：

       參數1 軌跡起始點X坐標

       參數2 軌跡起始點Y坐標

       參數3 軌跡結束點X坐標

       參數4 軌跡結束點Y坐標

       所以根據這個參數就可以設置一條線段軌跡。

       分步講解

       為了設置一條比較圓滑好看的曲線我們需要對游戲畫筆進行一些設置。注釋已經在代碼中寫的很清楚了，在這裡我詳細說一下 設置畫筆風格  mPaint.setStyle(Paint.Style.STROKE); 意思是設置畫筆的風格 android 畫筆一共提供了三種風格Paint.Style.STROKE 、Paint.Style.FILL、Paint.Style.FILL_AND_STROKE 意思分別為 空心 、實心、實心與空心 。如果不設置的話默認為 Paint.Style.FILL，在這裡必須設置成空心。因為如果一旦設置成實心或者實心與空心那麼畫筆會把path路徑中間包住這樣就不是曲線線段了，所以大家注意一下這裡。

1. /** 創建曲線畫筆 **/  
2. mPaint = new Paint();   
3. mPaint.setColor(Color.BLACK);   
4. /**設置畫筆抗鋸齒**/  
5. mPaint.setAntiAlias(true);   
6. /**畫筆的類型**/  
7. mPaint.setStyle(Paint.Style.STROKE);   
8. /**設置畫筆變為圓滑狀**/  
9. mPaint.setStrokeCap(Paint.Cap.ROUND);   
10. /**設置線的寬度**/  
11. mPaint.setStrokeWidth(5);  

       在觸摸按下事件中 通過moveTo() 方法設置觸摸屏幕點為軌跡的起始點，這樣在觸摸移動事件中設置曲線的軌跡 起始點為上次觸摸點 結束點為本次觸摸點。使用quadTo方法記錄每次移動產生的一個曲線線段 然後將所有的曲線線段繪制在屏幕中，如果觸摸抬起將調用reset()方法重置曲線軌跡。

1. @Override  
2. public boolean onTouchEvent(MotionEvent event) {   
3.     /** 拿到觸摸的狀態 **/  
4.     int action = event.getAction();   
5.     float x = event.getX();   
6.     float y = event.getY();   
7.     switch (action) {   
8.     // 觸摸按下的事件   
9.     case MotionEvent.ACTION_DOWN:   
10.     /**設置曲線軌跡起點 X Y坐標**/  
11.     mPath.moveTo(x, y);   
12.     break;   
13.     // 觸摸移動的事件   
14.     case MotionEvent.ACTION_MOVE:   
15.     /**設置曲線軌跡**/  
16.     //參數1 起始點X坐標   
17.     //參數2 起始點Y坐標   
18.     //參數3 結束點X坐標   
19.     //參數4 結束點Y坐標   
20.     mPath.quadTo(mposX, mposY, x, y);   
21.     break;   
22.     // 觸摸抬起的事件   
23.     case MotionEvent.ACTION_UP:   
24.     /**按鍵抬起後清空路徑軌跡**/  
25.     mPath.reset();   
26.     break;   
27.     }   
28.    //記錄當前觸摸X Y坐標   
29.     mposX = x;   
30.     mposY = y;   
31.     return true;   
32. }   

      游戲繪制中調用drawPath方法將onTouchEvent中記錄的路徑曲線繪制在屏幕當中。

1. private void Draw() {   
2.     /**清空畫布**/  
3.     mCanvas.drawColor(Color.WHITE);   
4.     /**繪制曲線**/  
5.     mCanvas.drawPath(mPath, mPaint);   
6.     /**記錄當前觸點位置**/  
7.     mCanvas.drawText("當前觸筆 X：" + mposX, 0, 20,mTextPaint);   
8.     mCanvas.drawText("當前觸筆 Y：" + mposY, 0, 40,mTextPaint);   
9. }  

       代碼的整體實現

       詳細的注釋已經在代碼中寫出 歡迎大家閱讀喔 哇咔咔~~~~

1. import android.app.Activity;   
2. import android.content.Context;   
3. import android.graphics.Canvas;   
4. import android.graphics.Color;   
5. import android.graphics.Paint;   
6. import android.graphics.Path;   
7. import android.os.Bundle;   
8. import android.view.MotionEvent;   
9. import android.view.SurfaceHolder;   
10. import android.view.SurfaceView;   
11. import android.view.Window;   
12. import android.view.WindowManager;   
13. import android.view.SurfaceHolder.Callback;   
14. public class SurfaceViewAcitvity extends Activity {   
15.     MyView mAnimView = null;   
16.     @Override  
17.     public void onCreate(Bundle savedInstanceState) {   
18.     super.onCreate(savedInstanceState);   
19.     // 全屏顯示窗口   
20.     requestWindowFeature(Window.FEATURE_NO_TITLE);   
21.     getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,   
22.         WindowManager.LayoutParams.FLAG_FULLSCREEN);   
23.     // 顯示自定義的游戲View   
24.     mAnimView = new MyView(this);   
25.     setContentView(mAnimView);   
26.     }   
27.     public class MyView extends SurfaceView implements Callback,Runnable {   
28.      /**每50幀刷新一次屏幕**/  
29.     public static final int TIME_IN_FRAME = 50;   
30.     /** 游戲畫筆 **/  
31.     Paint mPaint = null;   
32.     Paint mTextPaint = null;   
33.     SurfaceHolder mSurfaceHolder = null;   
34.     /** 控制游戲更新循環 **/  
35.     boolean mRunning = false;   
36.     /** 游戲畫布 **/  
37.     Canvas mCanvas = null;   
38.     /**控制游戲循環**/  
39.     boolean mIsRunning = false;   
40.     /**曲線方向**/  
41.     private Path mPath;   
42.     private float mposX, mposY;   
43.     public MyView(Context context) {   
44.         super(context);   
45.         /** 設置當前View擁有控制焦點 **/  
46.         this.setFocusable(true);   
47.         /** 設置當前View擁有觸摸事件 **/  
48.         this.setFocusableInTouchMode(true);   
49.         /** 拿到SurfaceHolder對象 **/  
50.         mSurfaceHolder = this.getHolder();   
51.         /** 將mSurfaceHolder添加到Callback回調函數中 **/  
52.         mSurfaceHolder.addCallback(this);   
53.         /** 創建畫布 **/  
54.         mCanvas = new Canvas();   
55.         /** 創建曲線畫筆 **/  
56.         mPaint = new Paint();   
57.         mPaint.setColor(Color.BLACK);   
58.         /**設置畫筆抗鋸齒**/  
59.         mPaint.setAntiAlias(true);   
60.         /**畫筆的類型**/  
61.         mPaint.setStyle(Paint.Style.STROKE);   
62.         /**設置畫筆變為圓滑狀**/  
63.         mPaint.setStrokeCap(Paint.Cap.ROUND);   
64.         /**設置線的寬度**/  
65.         mPaint.setStrokeWidth(5);   
66.         /**創建路徑對象**/  
67.         mPath = new Path();   
68.         /** 創建文字畫筆 **/  
69.         mTextPaint = new Paint();   
70.         /**設置顏色**/  
71.         mTextPaint.setColor(Color.BLACK);   
72.         /**設置文字大小**/  
73.         mTextPaint.setTextSize(15);   
74.     }   
75.     @Override  
76.     public boolean onTouchEvent(MotionEvent event) {   
77.         /** 拿到觸摸的狀態 **/  
78.         int action = event.getAction();   
79.         float x = event.getX();   
80.         float y = event.getY();   
81.         switch (action) {   
82.         // 觸摸按下的事件   
83.         case MotionEvent.ACTION_DOWN:   
84.         /**設置曲線軌跡起點 X Y坐標**/  
85.         mPath.moveTo(x, y);   
86.         break;   
87.         // 觸摸移動的事件   
88.         case MotionEvent.ACTION_MOVE:   
89.         /**設置曲線軌跡**/  
90.         //參數1 起始點X坐標   
91.         //參數2 起始點Y坐標   
92.         //參數3 結束點X坐標   
93.         //參數4 結束點Y坐標   
94.         mPath.quadTo(mposX, mposY, x, y);   
95.         break;   
96.         // 觸摸抬起的事件   
97.         case MotionEvent.ACTION_UP:   
98.         /**按鍵抬起後清空路徑軌跡**/  
99.         mPath.reset();   
100.         break;   
101.         }   
102.        //記錄當前觸摸X Y坐標   
103.         mposX = x;   
104.         mposY = y;   
105.         return true;   
106.     }   
107.     private void Draw() {   
108.         /**清空畫布**/  
109.         mCanvas.drawColor(Color.WHITE);   
110.         /**繪制曲線**/  
111.         mCanvas.drawPath(mPath, mPaint);   
112.         /**記錄當前觸點位置**/  
113.         mCanvas.drawText("當前觸筆 X：" + mposX, 0, 20,mTextPaint);   
114.         mCanvas.drawText("當前觸筆 Y：" + mposY, 0, 40,mTextPaint);   
115.     }   
116.     @Override  
117.     public void surfaceChanged(SurfaceHolder holder, int format, int width,   
118.         int height) {   
119.     }   
120.     @Override  
121.     public void surfaceCreated(SurfaceHolder holder) {   
122.         /**開始游戲主循環線程**/  
123.         mIsRunning = true;   
124.         new Thread(this).start();   
125.     }   
126.     @Override  
127.     public void surfaceDestroyed(SurfaceHolder holder) {   
128.         mIsRunning = false;   
129.     }   
130.     @Override  
131.     public void run() {   
132.         while (mIsRunning) {   
133.         /** 取得更新游戲之前的時間 **/  
134.         long startTime = System.currentTimeMillis();   
135.         /** 在這裡加上線程安全鎖 **/  
136.         synchronized (mSurfaceHolder) {   
137.             /** 拿到當前畫布 然後鎖定 **/  
138.             mCanvas = mSurfaceHolder.lockCanvas();   
139.             Draw();   
140.             /** 繪制結束後解鎖顯示在屏幕上 **/  
141.             mSurfaceHolder.unlockCanvasAndPost(mCanvas);   
142.         }   
143.         /** 取得更新游戲結束的時間 **/  
144.         long endTime = System.currentTimeMillis();   
145.         /** 計算出游戲一次更新的毫秒數 **/  
146.         int diffTime = (int) (endTime - startTime);   
147.         /** 確保每次更新時間為50幀 **/  
148.         while (diffTime <= TIME_IN_FRAME) {   
149.             diffTime = (int) (System.currentTimeMillis() - startTime);   
150.             /** 線程等待 **/  
151.             Thread.yield();   
152.         }   
153.         }   
154.     }   
155.     }   
156. }  

       看懂並掌握了這些代碼實例後，相信大家對如何繪制游戲觸摸軌跡的曲線圖有了方法上的認識了，希望大家在Android游戲開發中自如的運用它們。