《貝賽爾曲線》方法實現平滑曲線

轉載自:http://blog.csdn.net/xiaominghimi/archive/2011/06/20/6555828.aspx

 至於貝賽爾曲線的實現,在Android中極其的簡單,因爲它是Android封裝的一個方法,這個能不簡單麼。。。。。。只不過它隱藏的比較深,它隱藏於Path類中,方法如下:

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

Since: API Level 1

此方參數解釋:

第一個參數:操作點的x座標

第二個參數:操作點的y座標

第三個參數:結束點的x座標

第四個參數:結束點的y座標

從API中看出,賽貝爾曲線從API-1就開始支持了;

 

熟悉方法後,下面就來實現:

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

 

直接看MySurfaceView類,此類繼承SurfaceView ,是遊戲的主視圖

 

這裏爲了更清晰的講解:這裏部分代碼先不貼出來了,最後會整體貼出,當然源碼也是免費在最後提供~

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

[java] view plaincopy
  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;  
 

本類構造函數:

[java] view plaincopy
  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. }  
 

  接着我把繪製貝賽爾曲線封裝一個方法了,函數如下:

[java] view plaincopy
  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. }  
 

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

[c-sharp] view plaincopy
  1. /** 
  2.  * 觸屏事件監聽 
  3.  */  
  4. @Override  
  5. public boolean onTouchEvent(MotionEvent event) {  
  6.     endX = (intevent.getX();  
  7.     endY = (intevent.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函數得到隨機的操作點,主要爲了讓其曲線不斷的變化從而形成一個震動的曲線運動軌跡;

 

ok,效果接圖如下:

 

 

 

 

     這裏可能由於圖片是靜止的效果看起來不是很明顯,大家可以運行源碼來觀察 ,好了~本節就這樣吧;\

[java] view plaincopy
  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. }  
 

源碼地址:

http://download.csdn.net/detail/xiaominghimi/3378910


發佈了38 篇原創文章 · 獲贊 14 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章