Android中使用圖形處理引擎，2D部分是android SDK內部自己提供，3D部分是用Open GL ES 1.0。今天我們主要要了解的是2D相關的，如果你想看3D的話那麼可以跳過這篇文章。

大部分2D使用的api都在android.graphics和android.graphics.drawable包中。他們提供了圖形處理相關的： Canvas、ColorFilter、Point(點)和RetcF(矩形)等，還有一些動畫相關的：AnimationDrawable、 BitmapDrawable和TransitionDrawable等。以圖形處理來說，我們最常用到的就是在一個View上畫一些圖片、形狀或者自定義的文字內容，這裡我們都是使用Canvas來實現的。你可以獲取View中的Canvas物件，繪製一些自定義形狀，然後呼叫View. invalidate方法讓View重新重新整理，然後繪製一個新的形狀，這樣達到2D動畫效果。下面我們就主要來了解下Canvas的使用方法。

Canvas物件的獲取方式有兩種：一種我們通過重寫View.onDraw方法，View中的Canvas物件會被當做引數傳遞過來，我們操作這個Canvas，效果會直接反應在View中。另一種就是當你想建立一個Canvas物件時使用的方法：

1. Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
2. Canvas c = new Canvas(b);

上面程式碼建立了一個尺寸是100*100的Bitmap，使用它作為Canvas操作的物件，這時候的Canvas就是使用建立的方式。當你使用建立的Canvas在bitmap上執行繪製方法後，你還可以將繪製的結果提交給另外一個Canvas，這樣就可以達到兩個Canvas協作完成的效果，簡化邏輯。但是android SDK建議使用View.onDraw引數裡提供的Canvas就好，沒必要自己建立一個新的Canvas物件。接下來我們看看Canvas提供我們哪些繪製圖形的方法。我們建立一個自定義View物件，使用onDraw方法提供的Canvas進行繪製圖形。

CanvasDemoActivity.java：

1. package com.android777.demo.uicontroller.graphics;
3. import android.app.Activity;
4. import android.content.Context;
5. import android.graphics.Canvas;
6. import android.graphics.Color;
7. import android.graphics.Paint;
8. import android.os.Bundle;
9. import android.view.View;
11. public class CanvasDemoActivity extends Activity {
13. @Override
14. protected void onCreate(Bundle savedInstanceState) {
15. super.onCreate(savedInstanceState);
17. setContentView(new CustomView1(this));
19. }
21. /**
22. * 使用內部類 自定義一個簡單的View
23. * @author Administrator
24. *
25. */
26. class CustomView1 extends View{
28. Paint paint;
30. public CustomView1(Context context) {
31. super(context);
32. paint = new Paint(); //設定一個筆刷大小是3的黃色的畫筆
33. paint.setColor(Color.YELLOW);
34. paint.setStrokeJoin(Paint.Join.ROUND);
35. paint.setStrokeCap(Paint.Cap.ROUND);
36. paint.setStrokeWidth(3);
37. }
39. //在這裡我們將測試canvas提供的繪製圖形方法
40. @Override
41. protected void onDraw(Canvas canvas) {
43. }
45. }
47. }

執行結果是一片黑色的區域，因為在自定義的CustomView1中，我們沒有做任何的繪製操作。canvas提供的繪製圖形的方法都是以draw開頭的，我們可以檢視api：

從上面方法的名字看來我們可以知道Canvas可以繪製的物件有：弧線(arcs)、填充顏色(argb和color)、 Bitmap、圓(circle和oval)、點(point)、線(line)、矩形(Rect)、圖片(Picture)、圓角矩形 (RoundRect)、文字(text)、頂點(Vertices)、路徑(path)。通過組合這些物件我們可以畫出一些簡單有趣的介面出來，但是光有這些功能還是不夠的，如果我要畫一個儀表盤(數字圍繞顯示在一個圓圈中)呢？ 幸好Android還提供了一些對Canvas位置轉換的方法：rorate、scale、translate、skew(扭曲)等，而且它允許你通過獲得它的轉換矩陣物件(getMatrix方法，不知道什麼是轉換矩陣？看這裡) 直接操作它。這些操作就像是雖然你的筆還是原來的地方畫，但是畫紙旋轉或者移動了，所以你畫的東西的方位就產生變化。為了方便一些轉換操作，Canvas 還提供了儲存和回滾屬性的方法(save和restore)，比如你可以先儲存目前畫紙的位置(save)，然後旋轉90度，向下移動100畫素後畫一些圖形，畫完後呼叫restore方法返回到剛才儲存的位置。下面我們就演示下canvas的一些簡單用法：

1. protected void onDraw(Canvas canvas) {
3. canvas.drawCircle(100, 100, 90, paint);
4. }

效果是：

1. @Override
2. protected void onDraw(Canvas canvas) {
4. //繪製弧線區域
6. RectF rect = new RectF(0, 0, 100, 100);
8. canvas.drawArc(rect, //弧線所使用的矩形區域大小
9. 0, //開始角度
10. 90, //掃過的角度
11. false, //是否使用中心
12. paint);
14. }

使用下面的程式碼：

1. protected void onDraw(Canvas canvas) {
3. //繪製弧線區域
5. RectF rect = new RectF(0, 0, 100, 100);
7. canvas.drawArc(rect, //弧線所使用的矩形區域大小
8. 0, //開始角度
9. 90, //掃過的角度
10. true, //是否使用中心
11. paint);
13. }

兩圖對比我們可以發現，當 drawArcs(rect,startAngel,sweepAngel,useCenter,paint)中的useCenter為false時，弧線區域是用弧線開始角度和結束角度直接連線起來的，當useCenter為true時，是弧線開始角度和結束角度都與中心點連線，形成一個扇形。

1. protected void onDraw(Canvas canvas) {
3. canvas.drawColor(Color.BLUE);
5. }

canvas.drawColor是直接將View顯示區域用某個顏色填充滿。

1. @Override
2. protected void onDraw(Canvas canvas) {
4. //畫一條線
5. canvas.drawLine(10, 10, 100, 100, paint);
7. }

Canvas.drawOval：

1. @Override
2. protected void onDraw(Canvas canvas) {
4. //定義一個矩形區域
5. RectF oval = new RectF(0,0,200,300);
6. //矩形區域內切橢圓
7. canvas.drawOval(oval, paint);
9. }

canvas.drawPosText：

1. @Override
2. protected void onDraw(Canvas canvas) {
4. //按照既定點 繪製文字內容
5. canvas.drawPosText("Android777", new float[]{
6. 10,10, //第一個字母在座標10,10
7. 20,20, //第二個字母在座標20,20
8. 30,30, //....
9. 40,40,
10. 50,50,
11. 60,60,
12. 70,70,
13. 80,80,
14. 90,90,
15. 100,100
16. }, paint);
18. }

canvas.drawRect：

1. @Override
2. protected void onDraw(Canvas canvas) {
4. RectF rect = new RectF(50, 50, 200, 200);
6. canvas.drawRect(rect, paint);
8. }
10. }

canvas.drawRoundRect：

1. @Override
2. protected void onDraw(Canvas canvas) {
4. RectF rect = new RectF(50, 50, 200, 200);
6. canvas.drawRoundRect(rect,
7. 30, //x軸的半徑
8. 30, //y軸的半徑
9. paint);
11. }

canvas.drawPath：

1. @Override
2. protected void onDraw(Canvas canvas) {
4. Path path = new Path(); //定義一條路徑
5. path.moveTo(10, 10); //移動到 座標10,10
6. path.lineTo(50, 60);
7. path.lineTo(200,80);
8. path.lineTo(10, 10);
10. canvas.drawPath(path, paint);
12. }

canvas.drawTextOnPath：

1. @Override
2. protected void onDraw(Canvas canvas) {
4. Path path = new Path(); //定義一條路徑
5. path.moveTo(10, 10); //移動到 座標10,10
6. path.lineTo(50, 60);
7. path.lineTo(200,80);
8. path.lineTo(10, 10);
10. // canvas.drawPath(path, paint);
11. canvas.drawTextOnPath("Android777開發者部落格", path, 10, 10, paint);
13. }

位置轉換方法，canvas.rorate和canvas.translate：

1. @Override
2. protected void onDraw(Canvas canvas) {
4. paint.setAntiAlias(true);
5. paint.setStyle(Style.STROKE);
6. canvas.translate(canvas.getWidth()/2, 200); //將位置移動畫紙的座標點:150,150
7. canvas.drawCircle(0, 0, 100, paint); //畫圓圈
9. //使用path繪製路徑文字
10. canvas.save();
11. canvas.translate(-75, -75);
12. Path path = new Path();
13. path.addArc(new RectF(0,0,150,150), -180, 180);
14. Paint citePaint = new Paint(paint);
15. citePaint.setTextSize(14);
16. citePaint.setStrokeWidth(1);
17. canvas.drawTextOnPath("http://www.android777.com", path, 28, 0, citePaint);
18. canvas.restore();
20. Paint tmpPaint = new Paint(paint); //小刻度畫筆物件
21. tmpPaint.setStrokeWidth(1);
23. float y=100;
24. int count = 60; //總刻度數
26. for(int i=0 ; i <count ; i++){
27. if(i%5 == 0){
28. canvas.drawLine(0f, y, 0, y+12f, paint);
29. canvas.drawText(String.valueOf(i/5+1), -4f, y+25f, tmpPaint);
31. }else{
32. canvas.drawLine(0f, y, 0f, y +5f, tmpPaint);
33. }
34. canvas.rotate(360/count,0f,0f); //旋轉畫紙
35. }
37. //繪製指標
38. tmpPaint.setColor(Color.GRAY);
39. tmpPaint.setStrokeWidth(4);
40. canvas.drawCircle(0, 0, 7, tmpPaint);
41. tmpPaint.setStyle(Style.FILL);
42. tmpPaint.setColor(Color.YELLOW);
43. canvas.drawCircle(0, 0, 5, tmpPaint);
44. canvas.drawLine(0, 10, 0, -65, paint);
46. }

上面幾個例子基本已經將常用的canvas.draw*方法測試過了，我們結合一些事件，做一些有使用者互動的應用：

1. package com.android777.demo.uicontroller.graphics;
3. import java.util.ArrayList;
5. import android.app.Activity;
6. import android.content.Context;
7. import android.graphics.Canvas;
8. import android.graphics.Color;
9. import android.graphics.Paint;
10. import android.graphics.PointF;
11. import android.os.Bundle;
12. import android.view.MotionEvent;
13. import android.view.View;
15. public class CanvasDemoActivity extends Activity {
17. @Override
18. protected void onCreate(Bundle savedInstanceState) {
19. super.onCreate(savedInstanceState);
21. setContentView(new CustomView1(this));
23. }
25. /**
26. * 使用內部類 自定義一個簡單的View
27. * @author Administrator
28. *
29. */
30. class CustomView1 extends View{
32. Paint paint;
33. private ArrayList<PointF> graphics = new ArrayList<PointF>();
34. PointF point;
36. public CustomView1(Context context) {
37. super(context);
38. paint = new Paint(); //設定一個筆刷大小是3的黃色的畫筆
39. paint.setColor(Color.YELLOW);
40. paint.setStrokeJoin(Paint.Join.ROUND);
41. paint.setStrokeCap(Paint.Cap.ROUND);
42. paint.setStrokeWidth(3);
44. }
46. @Override
47. public boolean onTouchEvent(MotionEvent event) {
49. graphics.add(new PointF(event.getX(),event.getY()));
51. invalidate(); //重新繪製區域
53. return true;
54. }
56. //在這裡我們將測試canvas提供的繪製圖形方法
57. @Override
58. protected void onDraw(Canvas canvas) {
59. for (PointF point : graphics) {
60. canvas.drawPoint(point.x, point.y, paint);
61. }
62. // super.onDraw(canvas);
64. }
65. }
67. }

當用戶點選時將出現一個小點，拖動時將畫出一條用細點組成的虛線：

canvas的應用

canva還可以製作很多自定義控制元件，比如google日曆的monthview就是用canvas繪製出來的，github上有很多使用canva的專案，所有的圖表庫都是用canvas繪製的。