Android SurfaceView實現靜態於動態畫圖效果

本文是基於Android的SurfaceView的動態畫圖效果，實現靜態和動態下的正弦波畫圖，可作為自己做圖的簡單參考，廢話不多說，先上圖，

靜態效果：

動態效果：

比較簡單，代碼注釋的也比較詳細，易懂，我就直接上代碼了吧：

1.main.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6. <SurfaceView   
7.     android:layout_width="fill_parent"  
8.     android:layout_height="600px"  
9.     android:id="@+id/surfaceview_draw"/>  
10. <RelativeLayout android:layout_width="fill_parent"  
11.     android:layout_height="wrap_content">  
12. <Button android:layout_below="@id/surfaceview_draw"  
13.     android:layout_marginLeft="7dip"  
14.     android:id="@+id/simpledraw_btn"  
15.     android:text="簡單繪圖"  
16.     android:layout_width="wrap_content"  
17.     android:layout_height="wrap_content"  
18.     android:textSize="20dip"/>  
19.   
20. <Button  
21.     android:id="@+id/timerdraw_btn"  
22.     android:layout_width="wrap_content"  
23.     android:layout_height="wrap_content"  
24.     android:layout_toRightOf="@id/simpledraw_btn"  
25.     android:text="定時繪圖"   
26.     android:textSize="20dip"/>  
27. <Button   
28.     android:id="@+id/cleardraw_btn"  
29.     android:layout_width="wrap_content"  
30.     android:layout_height="wrap_content"  
31.     android:layout_toRightOf="@id/timerdraw_btn"  
32.     android:text="清除圖像"  
33.     android:textSize="20dip"/>  
34. </RelativeLayout>  
35. </LinearLayout>  

1. package com.huangcheng.draw;  
2.   
3. import java.util.Timer;  
4. import java.util.TimerTask;  
5.   
6. import android.app.Activity;  
7. import android.graphics.Canvas;  
8. import android.graphics.Color;  
9. import android.graphics.Paint;  
10. import android.graphics.Rect;  
11. import android.os.Bundle;  
12. import android.util.Log;  
13. import android.view.SurfaceHolder;  
14. import android.view.SurfaceView;  
15. import android.view.View;  
16. import android.view.View.OnClickListener;  
17. import android.widget.Button;  
18.   
19. public class SurfaceViewDrawActivity extends Activity {  
20.     /** Called when the activity is first created. */  
21.     private SurfaceView surface_draw;  
22.     private SurfaceHolder surfaceholder;  
23.   
24.     private Button simpledraw_btn;  
25.     private Button timerdraw_btn;  
26.     private Button cleardraw_btn;  
27.   
28.     private Timer timer;  
29.     private TimerTask timertask;  
30.   
31.     private int[] Y;// 保存圖像Y軸上的點   
32.     private int centerY, oldX, oldY, currentX;// 保存水平中心線位置,上一個(x,y)點，當先繪制到的x   
33.   
34.     private volatile int signal=0;  
35.     @Override  
36.     public void onCreate(Bundle savedInstanceState) {  
37.         super.onCreate(savedInstanceState);  
38.         setContentView(R.layout.main);  
39.         surface_draw = (SurfaceView) findViewById(R.id.surfaceview_draw);  
40.         surfaceholder = surface_draw.getHolder();  
41.   
42.         simpledraw_btn = (Button) findViewById(R.id.simpledraw_btn);  
43.         timerdraw_btn = (Button) findViewById(R.id.timerdraw_btn);  
44.         cleardraw_btn = (Button) findViewById(R.id.cleardraw_btn);  
45.         cleardraw_btn.setEnabled(false);  
46.   
47.         centerY = 300;  
48.         Y = new int[getWindowManager().getDefaultDisplay().getWidth()];  
49.         for (int i = 1; i < Y.length + 1; i++) {  
50.             Y[i - 1] = centerY + (int) (100 * Math.sin(i * 2 * Math.PI / 180));  
51.             // System.out.println("sin:"+100*Math.sin(i*2*Math.PI/180));   
52.         }  
53.         simpledraw_btn.setOnClickListener(new OnClickListener() {  
54.   
55.             @Override  
56.             public void onClick(View arg0) {  
57.                 // TODO Auto-generated method stub   
58.                 simpledraw();// 靜態繪制正弦圖   
59.                 signal=1;  
60.                 simpledraw_btn.setEnabled(false);  
61.                 timerdraw_btn.setEnabled(false);  
62.                 cleardraw_btn.setEnabled(true);  
63.             }  
64.         });  
65.         timerdraw_btn.setOnClickListener(new OnClickListener() {  
66.   
67.             @Override  
68.             public void onClick(View arg0) {  
69.                 // TODO Auto-generated method stub   
70.                 oldX=0;  
71.                 oldY=centerY;  
72.                 currentX=0;  
73.                 timer=new Timer();  
74.                 timertask=new TimerTask() {  
75.                       
76.                     @Override  
77.                     public void run() {  
78.                         // TODO Auto-generated method stub   
79.                         currentX++;  
80.                         complexdraw(currentX);  
81.                         if(currentX==Y.length-1){  
82.                             ClearDraw();  
83.                             currentX = 0;  
84.                             oldX=0;  
85.                             oldY=centerY;  
86.                         }  
87.                     }  
88.                 };  
89.                 timer.schedule(timertask, 0, 5);// 動態繪制正弦圖   
90.                 signal=2;  
91.                 simpledraw_btn.setEnabled(false);  
92.                 timerdraw_btn.setEnabled(false);  
93.                 cleardraw_btn.setEnabled(true);  
94.             }  
95.         });  
96.         cleardraw_btn.setOnClickListener(new OnClickListener() {  
97.               
98.             @Override  
99.             public void onClick(View arg0) {  
100.                 // TODO Auto-generated method stub   
101.                 if(signal==1){  
102.                     ClearDraw();  
103.                     simpledraw_btn.setEnabled(true);  
104.                     timerdraw_btn.setEnabled(true);  
105.                 }  
106.                 if(signal==2){  
107.                     timertask.cancel();  
108.                     timer.cancel();  
109.                     ClearDraw();  
110.                     simpledraw_btn.setEnabled(true);  
111.                     timerdraw_btn.setEnabled(true);  
112.                 }  
113.             }  
114.         });  
115.     }  
116.     // 簡單畫圖   
117.     void simpledraw() {  
118.         oldX = 0;  
119.         oldY = centerY;  
120.         Canvas canvas = surfaceholder  
121.                 .lockCanvas(new Rect(oldX, 0, oldX + Y.length,  
122.                         getWindowManager().getDefaultDisplay().getHeight()));// 關鍵:獲取畫布   
123.         Log.i("Canvas:X:",  
124.                 String.valueOf(oldX) + "," + String.valueOf(oldX + Y.length));  
125.   
126.         Paint mPaint = new Paint();  
127.         mPaint.setColor(Color.GREEN);// 畫筆為綠色   
128.         mPaint.setStrokeWidth(2);// 設置畫筆粗細   
129.   
130.         int y;  
131.   
132.         for (int i = oldX + 1; i < Y.length; i++) {// 繪畫正弦波   
133.             y = Y[i - 1];  
134.             canvas.drawLine(oldX, oldY, i, y, mPaint);  
135.             // System.out.println("oldX:"+oldX+" oldY:"+oldY+",x:"+i+" y:"+y);   
136.             oldX = i;  
137.             oldY = y;  
138.         }  
139.         surfaceholder.unlockCanvasAndPost(canvas);  
140.     }  
141.   
142.     // 消除畫得圖   
143.     void ClearDraw() {  
144.         Canvas canvas = surfaceholder.lockCanvas(null);  
145.         canvas.drawColor(Color.BLACK);// 清除畫布   
146.         surfaceholder.unlockCanvasAndPost(canvas);  
147.     }  
148.     //動態畫圖   
149.     void complexdraw(int current){  
150.         Canvas canvas = surfaceholder  
151.                 .lockCanvas(new Rect(oldX, 0, current,  
152.                         getWindowManager().getDefaultDisplay().getHeight()));// 關鍵:獲取畫布   
153.         Log.i("Canvas:X:",  
154.                 String.valueOf(oldX) + "," + String.valueOf(oldX + Y.length));  
155.   
156.         Paint mPaint = new Paint();  
157.         mPaint.setColor(Color.GREEN);// 畫筆為綠色   
158.         mPaint.setStrokeWidth(2);// 設置畫筆粗細   
159.           
160.         int y=Y[current-1];  
161.         canvas.drawLine(oldX, oldY, current, y, mPaint);  
162.         // System.out.println("oldX:"+oldX+" oldY:"+oldY+",x:"+i+" y:"+y);   
163.         oldX = current;  
164.         oldY = y;  
165.         surfaceholder.unlockCanvasAndPost(canvas);  
166.     }  
167. }  

更多Android相關信息見Android 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=11