【Android基础】(12)SurfaceView绘图API详解

本文地址：http://blog.csdn.net/scarthr/article/details/42524599

SurfaceView是一个可以直接从内存或者DMA等硬件接口取得图像数据,是个非常重要的绘图容器。它的特性是：可以在主线程之外的线程中向屏幕绘图上。这样可以避免画图任务繁重的时候造成主线程阻塞，从而提高了程序的反应速度。在游戏开发中多用到SurfaceView。

一 SurfaceView的使用

我们创建一个MyView继承SurfaceView，实现SurfaceHolder.Callback接口。

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.util.AttributeSet;  
6. import android.view.SurfaceHolder;  
7. import android.view.SurfaceView;  
8.   
9. public class MyView extends SurfaceView implements SurfaceHolder.Callback {  
10.   
11.     public MyView(Context context, AttributeSet attrs) {  
12.         super(context, attrs);  
13.         getHolder().addCallback(this);  
14.     }  
15.   
16.     public void draw() {  
17.         // 开始绘图时要锁定画布  
18.         Canvas canvas = getHolder().lockCanvas();  
19.   
20.         // 结束时要解锁画布  
21.         getHolder().unlockCanvasAndPost(canvas);  
22.     }  
23.   
24.     @Override  
25.     public void surfaceChanged(SurfaceHolder holder, int format, int width,  
26.             int height) {  
27.         // SurfaceView改变时候调用  
28.     }  
29.   
30.     @Override  
31.     public void surfaceCreated(SurfaceHolder holder) {  
32.         // 创建SurfaceView调用  
33.         draw();  
34.     }  
35.   
36.     @Override  
37.     public void surfaceDestroyed(SurfaceHolder holder) {  
38.         // SurfaceView意外销毁时调用  
39.     }  
40. }  

这个SurfaceHolder相当于Surface的一个控制器，用它来控制SurfaceView的大小，图形等等。

注意这个draw方法要在Surface创建后调用，在被销毁前结束。

二 使用SurfaceView绘制图形

我们在构造方法中设置好画笔的颜色，draw方法里画图就可以了：

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.util.AttributeSet;  
8. import android.view.SurfaceHolder;  
9. import android.view.SurfaceView;  
10.   
11. public class MyView extends SurfaceView implements SurfaceHolder.Callback {  
12.   
13.     private Paint paint;  
14.   
15.     public MyView(Context context, AttributeSet attrs) {  
16.         super(context, attrs);  
17.         paint = new Paint();  
18.         paint.setColor(Color.RED);  
19.         getHolder().addCallback(this);  
20.     }  
21.   
22.     public void draw() {  
23.         // 开始绘图时要锁定画布  
24.         Canvas canvas = getHolder().lockCanvas();  
25.         canvas.drawColor(Color.WHITE);  
26.         canvas.drawRect(0, 0, 100, 100, paint);  
27.         // 结束时要解锁画布  
28.         getHolder().unlockCanvasAndPost(canvas);  
29.     }  
30.   
31.     @Override  
32.     public void surfaceChanged(SurfaceHolder holder, int format, int width,  
33.             int height) {  
34.         // SurfaceView改变时候调用  
35.     }  
36.   
37.     @Override  
38.     public void surfaceCreated(SurfaceHolder holder) {  
39.         // 创建SurfaceView调用  
40.         draw();  
41.     }  
42.   
43.     @Override  
44.     public void surfaceDestroyed(SurfaceHolder holder) {  
45.         // SurfaceView意外销毁时调用  
46.     }  
47. }  

然后在Activity中setContentView时直接设置我们的MyView就可以看到效果了。

三 绘制组合图形

我们创建这样一个容器类：

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.graphics.Canvas;  
7.   
8. public class Container {  
9.   
10.     private List<Container> children;  
11.   
12.     public Container() {  
13.         children = new ArrayList<Container>();  
14.     }  
15.   
16.     public void draw(Canvas canvas) {  
17.         childrenDraw(canvas);  
18.         for (Container c : children) {  
19.             c.draw(canvas);  
20.         }  
21.     }  
22.   
23.     public void childrenDraw(Canvas canvas) {  
24.   
25.     };  
26.   
27.     public void addChildrenView(Container child) {  
28.         children.add(child);  
29.     }  
30.   
31.     public void removeChildrenView(Container child) {  
32.         children.remove(child);  
33.     }  
34. }  

它有添加和移除子控件的方法，draw方法是以此调用子控件的childrenDraw方法，如果还有子控件，再调子控件的children方法。

在创建一个画圆和正方形的类，都继承自Container：

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.graphics.Canvas;  
4. import android.graphics.Color;  
5. import android.graphics.Paint;  
6.   
7. public class Circle extends Container {  
8.     private Paint paint;  
9.   
10.     public Circle() {  
11.         paint = new Paint();  
12.         paint.setColor(Color.RED);  
13.     }  
14.   
15.     @Override  
16.     public void childrenDraw(Canvas canvas) {  
17.         canvas.drawCircle(50, 50, 50, paint);  
18.     }  
19. }  

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.graphics.Canvas;  
4. import android.graphics.Color;  
5. import android.graphics.Paint;  
6.   
7. public class Rect extends Container {  
8.   
9.     private Paint paint;  
10.   
11.     public Rect() {  
12.         paint = new Paint();  
13.         paint.setColor(Color.BLUE);  
14.     }  
15.   
16.     @Override  
17.     public void childrenDraw(Canvas canvas) {  
18.         canvas.drawRect(0, 0, 100, 100, paint);  
19.     }  
20. }  

最后是GameView类，继承自SurfaceView：

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.util.AttributeSet;  
6. import android.view.SurfaceHolder;  
7. import android.view.SurfaceView;  
8.   
9. public class GameView extends SurfaceView implements SurfaceHolder.Callback {  
10.   
11.     private Container container;  
12.     private Rect rect = new Rect();  
13.     private Circle circle = new Circle();  
14.   
15.     public GameView(Context context, AttributeSet attrs) {  
16.         super(context, attrs);  
17.         container = new Container();  
18.         rect = new Rect();  
19.         circle = new Circle();  
20.         rect.addChildrenView(circle);  
21.         container.addChildrenView(rect);  
22.         getHolder().addCallback(this);  
23.     }  
24.   
25.     public void draw() {  
26.         Canvas canvas = getHolder().lockCanvas();  
27.         container.draw(canvas);  
28.         getHolder().unlockCanvasAndPost(canvas);  
29.     }  
30.   
31.     @Override  
32.     public void surfaceChanged(SurfaceHolder holder, int format, int width,  
33.             int height) {  
34.     }  
35.   
36.     @Override  
37.     public void surfaceCreated(SurfaceHolder holder) {  
38.         draw();  
39.     }  
40.   
41.     @Override  
42.     public void surfaceDestroyed(SurfaceHolder holder) {  
43.     }  
44. }  

用Container包含了一个矩形，矩形又包含了一个圆，运行效果：

接下来我们让这个创建的图形移动起来。

我们在Container中添加成员变量x、y，用来记录绘图坐标。

修改Container的draw方法：

[java] view plaincopy

1. public void draw(Canvas canvas) {  
2.     // canvas.save();  
3.     canvas.translate(getX(), getY());  
4.     childrenDraw(canvas);  
5.     for (Container c : children) {  
6.         c.draw(canvas);  
7.     }  
8.     // canvas.restore();  
9. }  

在Rect的childrenDraw方法中，对坐标进行改变：

[java] view plaincopy

1. setX(getX() + 1);  
2. setY(getY() + 2);  

在GameView中加入定时器，每隔100毫秒重新绘制一次图形，达到图形移动的效果。

[java] view plaincopy

1. private TimerTask task;  
2. private Timer timer;  
3.   
4. public void startTimer() {  
5.     timer = new Timer();  
6.     task = new TimerTask() {  
7.   
8.         @Override  
9.         public void run() {  
10.             draw();  
11.         }  
12.     };  
13.     timer.schedule(task, 100, 100);  
14. }  
15.   
16. public void stopTimer() {  
17.     if (timer != null) {  
18.         timer.cancel();  
19.         timer = null;  
20.     }  
21.   
22. }  

在创建SurfaceView的时候启动定时器，在销毁SurfaceView的时候取消定时器。

[java] view plaincopy

1. @Override  
2. public void surfaceCreated(SurfaceHolder holder) {  
3.     startTimer();  
4. }  
5.   
6. @Override  
7. public void surfaceDestroyed(SurfaceHolder holder) {  
8.     stopTimer();  
9. }  

源码下载

本文地址：http://blog.csdn.net/scarthr/article/details/42524599

SurfaceView是一个可以直接从内存或者DMA等硬件接口取得图像数据,是个非常重要的绘图容器。它的特性是：可以在主线程之外的线程中向屏幕绘图上。这样可以避免画图任务繁重的时候造成主线程阻塞，从而提高了程序的反应速度。在游戏开发中多用到SurfaceView。

一 SurfaceView的使用

我们创建一个MyView继承SurfaceView，实现SurfaceHolder.Callback接口。

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.util.AttributeSet;  
6. import android.view.SurfaceHolder;  
7. import android.view.SurfaceView;  
8.   
9. public class MyView extends SurfaceView implements SurfaceHolder.Callback {  
10.   
11.     public MyView(Context context, AttributeSet attrs) {  
12.         super(context, attrs);  
13.         getHolder().addCallback(this);  
14.     }  
15.   
16.     public void draw() {  
17.         // 开始绘图时要锁定画布  
18.         Canvas canvas = getHolder().lockCanvas();  
19.   
20.         // 结束时要解锁画布  
21.         getHolder().unlockCanvasAndPost(canvas);  
22.     }  
23.   
24.     @Override  
25.     public void surfaceChanged(SurfaceHolder holder, int format, int width,  
26.             int height) {  
27.         // SurfaceView改变时候调用  
28.     }  
29.   
30.     @Override  
31.     public void surfaceCreated(SurfaceHolder holder) {  
32.         // 创建SurfaceView调用  
33.         draw();  
34.     }  
35.   
36.     @Override  
37.     public void surfaceDestroyed(SurfaceHolder holder) {  
38.         // SurfaceView意外销毁时调用  
39.     }  
40. }  

这个SurfaceHolder相当于Surface的一个控制器，用它来控制SurfaceView的大小，图形等等。

注意这个draw方法要在Surface创建后调用，在被销毁前结束。

二 使用SurfaceView绘制图形

我们在构造方法中设置好画笔的颜色，draw方法里画图就可以了：

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.util.AttributeSet;  
8. import android.view.SurfaceHolder;  
9. import android.view.SurfaceView;  
10.   
11. public class MyView extends SurfaceView implements SurfaceHolder.Callback {  
12.   
13.     private Paint paint;  
14.   
15.     public MyView(Context context, AttributeSet attrs) {  
16.         super(context, attrs);  
17.         paint = new Paint();  
18.         paint.setColor(Color.RED);  
19.         getHolder().addCallback(this);  
20.     }  
21.   
22.     public void draw() {  
23.         // 开始绘图时要锁定画布  
24.         Canvas canvas = getHolder().lockCanvas();  
25.         canvas.drawColor(Color.WHITE);  
26.         canvas.drawRect(0, 0, 100, 100, paint);  
27.         // 结束时要解锁画布  
28.         getHolder().unlockCanvasAndPost(canvas);  
29.     }  
30.   
31.     @Override  
32.     public void surfaceChanged(SurfaceHolder holder, int format, int width,  
33.             int height) {  
34.         // SurfaceView改变时候调用  
35.     }  
36.   
37.     @Override  
38.     public void surfaceCreated(SurfaceHolder holder) {  
39.         // 创建SurfaceView调用  
40.         draw();  
41.     }  
42.   
43.     @Override  
44.     public void surfaceDestroyed(SurfaceHolder holder) {  
45.         // SurfaceView意外销毁时调用  
46.     }  
47. }  

然后在Activity中setContentView时直接设置我们的MyView就可以看到效果了。

三 绘制组合图形

我们创建这样一个容器类：

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.graphics.Canvas;  
7.   
8. public class Container {  
9.   
10.     private List<Container> children;  
11.   
12.     public Container() {  
13.         children = new ArrayList<Container>();  
14.     }  
15.   
16.     public void draw(Canvas canvas) {  
17.         childrenDraw(canvas);  
18.         for (Container c : children) {  
19.             c.draw(canvas);  
20.         }  
21.     }  
22.   
23.     public void childrenDraw(Canvas canvas) {  
24.   
25.     };  
26.   
27.     public void addChildrenView(Container child) {  
28.         children.add(child);  
29.     }  
30.   
31.     public void removeChildrenView(Container child) {  
32.         children.remove(child);  
33.     }  
34. }  

它有添加和移除子控件的方法，draw方法是以此调用子控件的childrenDraw方法，如果还有子控件，再调子控件的children方法。

在创建一个画圆和正方形的类，都继承自Container：

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.graphics.Canvas;  
4. import android.graphics.Color;  
5. import android.graphics.Paint;  
6.   
7. public class Circle extends Container {  
8.     private Paint paint;  
9.   
10.     public Circle() {  
11.         paint = new Paint();  
12.         paint.setColor(Color.RED);  
13.     }  
14.   
15.     @Override  
16.     public void childrenDraw(Canvas canvas) {  
17.         canvas.drawCircle(50, 50, 50, paint);  
18.     }  
19. }  

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.graphics.Canvas;  
4. import android.graphics.Color;  
5. import android.graphics.Paint;  
6.   
7. public class Rect extends Container {  
8.   
9.     private Paint paint;  
10.   
11.     public Rect() {  
12.         paint = new Paint();  
13.         paint.setColor(Color.BLUE);  
14.     }  
15.   
16.     @Override  
17.     public void childrenDraw(Canvas canvas) {  
18.         canvas.drawRect(0, 0, 100, 100, paint);  
19.     }  
20. }  

最后是GameView类，继承自SurfaceView：

[java] view plaincopy

1. package com.thr.testsurfaceview;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.util.AttributeSet;  
6. import android.view.SurfaceHolder;  
7. import android.view.SurfaceView;  
8.   
9. public class GameView extends SurfaceView implements SurfaceHolder.Callback {  
10.   
11.     private Container container;  
12.     private Rect rect = new Rect();  
13.     private Circle circle = new Circle();  
14.   
15.     public GameView(Context context, AttributeSet attrs) {  
16.         super(context, attrs);  
17.         container = new Container();  
18.         rect = new Rect();  
19.         circle = new Circle();  
20.         rect.addChildrenView(circle);  
21.         container.addChildrenView(rect);  
22.         getHolder().addCallback(this);  
23.     }  
24.   
25.     public void draw() {  
26.         Canvas canvas = getHolder().lockCanvas();  
27.         container.draw(canvas);  
28.         getHolder().unlockCanvasAndPost(canvas);  
29.     }  
30.   
31.     @Override  
32.     public void surfaceChanged(SurfaceHolder holder, int format, int width,  
33.             int height) {  
34.     }  
35.   
36.     @Override  
37.     public void surfaceCreated(SurfaceHolder holder) {  
38.         draw();  
39.     }  
40.   
41.     @Override  
42.     public void surfaceDestroyed(SurfaceHolder holder) {  
43.     }  
44. }  

用Container包含了一个矩形，矩形又包含了一个圆，运行效果：

接下来我们让这个创建的图形移动起来。

我们在Container中添加成员变量x、y，用来记录绘图坐标。

修改Container的draw方法：

[java] view plaincopy

1. public void draw(Canvas canvas) {  
2.     // canvas.save();  
3.     canvas.translate(getX(), getY());  
4.     childrenDraw(canvas);  
5.     for (Container c : children) {  
6.         c.draw(canvas);  
7.     }  
8.     // canvas.restore();  
9. }  

在Rect的childrenDraw方法中，对坐标进行改变：

[java] view plaincopy

1. setX(getX() + 1);  
2. setY(getY() + 2);  

在GameView中加入定时器，每隔100毫秒重新绘制一次图形，达到图形移动的效果。

[java] view plaincopy

1. private TimerTask task;  
2. private Timer timer;  
3.   
4. public void startTimer() {  
5.     timer = new Timer();  
6.     task = new TimerTask() {  
7.   
8.         @Override  
9.         public void run() {  
10.             draw();  
11.         }  
12.     };  
13.     timer.schedule(task, 100, 100);  
14. }  
15.   
16. public void stopTimer() {  
17.     if (timer != null) {  
18.         timer.cancel();  
19.         timer = null;  
20.     }  
21.   
22. }  

在创建SurfaceView的时候启动定时器，在销毁SurfaceView的时候取消定时器。

[java] view plaincopy

1. @Override  
2. public void surfaceCreated(SurfaceHolder holder) {  
3.     startTimer();  
4. }  
5.   
6. @Override  
7. public void surfaceDestroyed(SurfaceHolder holder) {  
8.     stopTimer();  
9. }  

源码下载