Android Canvas繪圖描述Android Canvas 方法總結
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物件時使用的方法：
Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888); 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：
package com.android777.demo.uicontroller.graphics; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.os.Bundle; import android.view.View; public class CanvasDemoActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new CustomView1(this)); } /** * 使用內部類 自定義一個簡單的View * @author Administrator * */ class CustomView1 extends View{ Paint paint; public CustomView1(Context context) { super(context); paint = new Paint(); //設定一個筆刷大小是3的黃色的畫筆 paint.setColor(Color.YELLOW); paint.setStrokeJoin(Paint.Join.ROUND); paint.setStrokeCap(Paint.Cap.ROUND); paint.setStrokeWidth(3); } //在這裡我們將測試canvas提供的繪製圖形方法 @Override protected void onDraw(Canvas canvas) { } } }
執行結果是一片黑色的區域，因為在自定義的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的一些簡單用法：
protected void onDraw(Canvas canvas) { canvas.drawCircle(100, 100, 90, paint); }
效果是：
@Override protected void onDraw(Canvas canvas) { //繪製弧線區域 RectF rect = new RectF(0, 0, 100, 100); canvas.drawArc(rect, //弧線所使用的矩形區域大小 0, //開始角度 90, //掃過的角度 false, //是否使用中心 paint); }
使用下面的程式碼：
protected void onDraw(Canvas canvas) { //繪製弧線區域 RectF rect = new RectF(0, 0, 100, 100); canvas.drawArc(rect, //弧線所使用的矩形區域大小 0, //開始角度 90, //掃過的角度 true, //是否使用中心 paint); }
兩圖對比我們可以發現，當 drawArcs(rect,startAngel,sweepAngel,useCenter,paint)中的useCenter為false時，弧線區域是用弧線開始角度和結束角度直接連線起來的，當useCenter為true時，是弧線開始角度和結束角度都與中心點連線，形成一個扇形。
protected void onDraw(Canvas canvas) { canvas.drawColor(Color.BLUE); }
canvas.drawColor是直接將View顯示區域用某個顏色填充滿。
@Override protected void onDraw(Canvas canvas) { //畫一條線 canvas.drawLine(10, 10, 100, 100, paint); }
Canvas.drawOval：
@Override protected void onDraw(Canvas canvas) { //定義一個矩形區域 RectF oval = new RectF(0,0,200,300); //矩形區域內切橢圓 canvas.drawOval(oval, paint); }
canvas.drawPosText：
@Override protected void onDraw(Canvas canvas) { //按照既定點 繪製文字內容 canvas.drawPosText("Android777", new float[]{ 10,10, //第一個字母在座標10,10 20,20, //第二個字母在座標20,20 30,30, //.... 40,40, 50,50, 60,60, 70,70, 80,80, 90,90, 100,100 }, paint); }
canvas.drawRect：
@Override protected void onDraw(Canvas canvas) { RectF rect = new RectF(50, 50, 200, 200); canvas.drawRect(rect, paint); } }
canvas.drawRoundRect：
@Override protected void onDraw(Canvas canvas) { RectF rect = new RectF(50, 50, 200, 200); canvas.drawRoundRect(rect, 30, //x軸的半徑 30, //y軸的半徑 paint); }
canvas.drawPath：
@Override protected void onDraw(Canvas canvas) { Path path = new Path(); //定義一條路徑 path.moveTo(10, 10); //移動到 座標10,10 path.lineTo(50, 60); path.lineTo(200,80); path.lineTo(10, 10); canvas.drawPath(path, paint); }
canvas.drawTextOnPath：
@Override protected void onDraw(Canvas canvas) { Path path = new Path(); //定義一條路徑 path.moveTo(10, 10); //移動到 座標10,10 path.lineTo(50, 60); path.lineTo(200,80); path.lineTo(10, 10); // canvas.drawPath(path, paint); canvas.drawTextOnPath("Android777開發者部落格", path, 10, 10, paint); }
位置轉換方法，canvas.rorate和canvas.translate：
@Override protected void onDraw(Canvas canvas) { paint.setAntiAlias(true); paint.setStyle(Style.STROKE); canvas.translate(canvas.getWidth()/2, 200); //將位置移動畫紙的座標點:150,150 canvas.drawCircle(0, 0, 100, paint); //畫圓圈 //使用path繪製路徑文字 canvas.save(); canvas.translate(-75, -75); Path path = new Path(); path.addArc(new RectF(0,0,150,150), -180, 180); Paint citePaint = new Paint(paint); citePaint.setTextSize(14); citePaint.setStrokeWidth(1); canvas.drawTextOnPath("http://www.android777.com", path, 28, 0, citePaint); canvas.restore(); Paint tmpPaint = new Paint(paint); //小刻度畫筆物件 tmpPaint.setStrokeWidth(1); float y=100; int count = 60; //總刻度數 for(int i=0 ; i <count ; i++){ if(i%5 == 0){ canvas.drawLine(0f, y, 0, y+12f, paint); canvas.drawText(String.valueOf(i/5+1), -4f, y+25f, tmpPaint); }else{ canvas.drawLine(0f, y, 0f, y +5f, tmpPaint); } canvas.rotate(360/count,0f,0f); //旋轉畫紙 } //繪製指標 tmpPaint.setColor(Color.GRAY); tmpPaint.setStrokeWidth(4); canvas.drawCircle(0, 0, 7, tmpPaint); tmpPaint.setStyle(Style.FILL); tmpPaint.setColor(Color.YELLOW); canvas.drawCircle(0, 0, 5, tmpPaint); canvas.drawLine(0, 10, 0, -65, paint); }
上面幾個例子基本已經將常用的canvas.draw*方法測試過了，我們結合一些事件，做一些有使用者互動的應用：
package com.android777.demo.uicontroller.graphics; import java.util.ArrayList; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.PointF; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; public class CanvasDemoActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new CustomView1(this)); } /** * 使用內部類 自定義一個簡單的View * @author Administrator * */ class CustomView1 extends View{ Paint paint; private ArrayList<PointF> graphics = new ArrayList<PointF>(); PointF point; public CustomView1(Context context) { super(context); paint = new Paint(); //設定一個筆刷大小是3的黃色的畫筆 paint.setColor(Color.YELLOW); paint.setStrokeJoin(Paint.Join.ROUND); paint.setStrokeCap(Paint.Cap.ROUND); paint.setStrokeWidth(3); } @Override public boolean onTouchEvent(MotionEvent event) { graphics.add(new PointF(event.getX(),event.getY())); invalidate(); //重新繪製區域 return true; } //在這裡我們將測試canvas提供的繪製圖形方法 @Override protected void onDraw(Canvas canvas) { for (PointF point : graphics) { canvas.drawPoint(point.x, point.y, paint); } // super.onDraw(canvas); } } }
當用戶點選時將出現一個小點，拖動時將畫出一條用細點組成的虛線：
canvas的應用
canva還可以製作很多自定義控制元件，比如google日曆的monthview就是用canvas繪製出來的，github上有很多使用canva的專案，所有的圖表庫都是用canvas繪製的。
Android Canvas 方法總結
簡介
在自定義 View的時候，我們經常需要繪製一些自己想要的效果。這裡就需要使用Canvas物件。下面將Canvas物件常用方法做個筆記，方便記憶。
對Canvas進行操作
對Canvas的一系列操作，是指對Canvas進行旋轉、平移、縮放等操作。這些操作可以讓Canvas物件使用起來更加便捷。
Canvas平移
/**
* 畫布向（100，50）方向平移
*
* 引數1: 向X軸方向移動100距離
* 引數2: 向Y軸方向移動50距離
*/
canvas.translate(100, 50);
Canvas縮放
/**
* 在X軸方向放大為原來2倍，Y軸方向方大為原來的4倍
* 引數1: X軸的放大倍數
* 引數2: Y軸的放大倍數
*/
canvas.scale(2, 4);
/**
* 在X軸方向放大為原來2倍，Y軸方向方大為原來的4倍
* 引數1: X軸的放大倍數
* 引數2: Y軸的放大倍數
* 引數3: 原點X座標
* 引數4: 原點Y座標
*/
canvas.scale(2, 4，100,100);- Bitmap b =Bitmap.createBitmap(100,100,Bitmap.Config.ARGB_8888);
- Canvas c =newCanvas
Canvas旋轉
/**
* 原點為中心，旋轉30度（順時針方向為正方向 ）
* 引數: 旋轉角度
*/
canvas.rotate(30);
/**
* 以（100,100）為中心，旋轉30度，順時針方向為正方向
* 引數: 旋轉角度
*/
canvas.rotate(30,100,100);
Canvas操作例子
Paint p = new Paint();
p.setColor(Color.argb(50,255,100,100));
canvas.drawRect(0,0,200,200,p); // 以原始Canvas畫出一個矩形1
canvas.translate(300,300); // 將Canvas平移 (100,100)
p.setColor(Color.argb(50,100,255,100));
canvas.drawRect(0,0,200,200,p); // 矩形2
canvas.rotate(30); //將Canvas旋轉30
p.setColor(Color.argb(50,100,0,255));
canvas.drawRect(0,0,200,200,p); // 矩形3
canvas.scale(2, 2); // 將Canvas以原點為中心，放大兩倍
p.setColor(Color.argb(50,255,255,0));
canvas.drawRect(0,0,200,200,p); // 矩形4
Canvas示例Canvas儲存和還原
Canvas提供了幾個方法，讓我們可以方便的對Canvas的狀態進行更改和還原。
這些方法是：save()、restore()、restoreToCount(int saveCount)。
我們在對Canvas進行平移、旋轉、放大等操作時候，可以呼叫save()方法，將當前修改過的Canvas狀態進行儲存，呼叫restore() 方法後，會將Canvas還原成最近的一個save() 的狀態。
save()方法還會有一個返回值，我們也可以呼叫restoreToCount(int saveCount)方法，將這個返回值作為引數傳遞進去，就可以將Canvas還原成某一個特定的save()狀態。
canvas.translate(100,100); // 平移（100,100）
int save1 = canvas.save(); // 儲存Canvas狀態（狀態1）
canvas.scale(2, 2); // 放大2倍
int save2 = canvas.save(); // 儲存Canvas狀態（狀態2）
canvas.restore(); // 返回最新的save狀態，即狀態2
canvas.restoreToCount(save1);// 手動指定的返回到 狀態1
畫文字
/**
* 引數2：文字的x軸的開始位置
* 引數2：文字Y軸的結束位置
* 引數3：畫筆物件
*/
canvas.drawText("開始寫字了！",50, 50, p);// 畫文字
/**
* 引數2：要從第幾個字開始繪製
* 引數3：要繪製到第幾個文字
* 引數4：文字的x軸的開始位置
* 引數5：文字Y軸的結束位置
* 引數6：畫筆物件
*/
canvas.drawText("開始寫字了！",2,5, 50, 50, p);// 畫文字，結果為：“寫字了”
/**
* 引數2：路徑
* 引數3：距離路徑開始位置的偏移量
* 引數4：距離路徑上下的偏移量（可以為負數）
* 引數5：畫筆物件
*/
canvas.drawTextOnPath("1234567890101123123", path, 0, -50, p);
畫圓
/**
* 引數1：圓心X
* 引數2：圓心Y
* 引數3：半徑R
* 引數4：畫筆物件
*/
canvas.drawCircle(200, 200, 100, p);
畫線
/*
* 引數1：startX
* 引數2：startY
* 引數3：stopX
* 引數4：stopY
* 引數5：畫筆物件
*/
canvas.drawLine(100, 100, 300, 300, p);// 畫線
/*
* 同時繪製多條線。
* 引數1：float陣列：每四個一組為一條線。最後不足四個，就忽略那些值。
* 引數2：畫筆物件
*/
canvas.drawLines(new float[]{100,100,200,200,200,100,300,100}, p);
畫橢圓
/*
* 引數1：float left
* 引數2：float top
* 引數3：float right
* 引數4：float bottom
*/
RectF oval = new RectF(150, 200, 500, 400);// 畫一個橢圓
canvas.drawOval(oval, p);
畫弧度
/**
* 畫圓弧
* 引數1：RectF物件。
* 引數2：開始的角度。（水平向右為0度順時針反向為正方向）
* 引數3：掃過的角度
* 引數4：是否和中心連線
* 引數5：畫筆物件
*/
canvas.drawArc(oval, 20, 180, false, p);
矩形
/**
* 矩形
* 引數1：float left
* 引數2：float top
* 引數3：float right
* 引數4：float bottom
*/
canvas.drawRect(100,100, 200, 200, p);
//畫圓角矩形
RectF oval3 = new RectF(80, 260, 200, 300);// 設定個新的長方形
canvas.drawRoundRect(oval3, 20, 5, p);//第二個引數是x半徑，第三個引數是y半徑
多邊形
/**
* Path類封裝複合(多輪廓幾何圖形的路徑
* 由直線段*、二次曲線,和三次方曲線，也可畫以油畫。drawPath(路徑、油漆),要麼已填充的或撫摸
* (基於油漆的風格),或者可以用於剪斷或畫畫的文字在路徑。
*/
Path path = new Path(); // 路徑物件
path.moveTo(80, 200);// 此點為多邊形的起點
path.lineTo(120, 250);
path.lineTo(80, 250);
//.... 可以新增多個點。構成多邊形
path.close(); // 使終點和起點連結，構成封閉圖形
canvas.drawPath(path, p);
畫貝塞爾曲線
p.setStyle(Style.STROKE);
Path path2=new Path();
path2.moveTo(100, 100);//設定Path的起點
/**
* 引數1、2：x1，y1為控制點的座標值
* 引數3、4：x2，y2為終點的座標值
*/
path2.quadTo(300, 100, 400, 400); //設定貝塞爾曲線的控制點座標和終點座標
path2.quadTo(500, 700, 800, 800);
canvas.drawPath(path2, p);//畫出貝塞爾曲線
畫點
/**
* 引數1、2：點的x、y座標
*/
canvas.drawPoint(60, 390, p);//畫一個點
/**
* 引數1：多個點，每兩個值為一個點。最後個數不夠兩個的值，忽略。
*/
canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//畫多個點
畫圖片
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
/**
* 引數1：bitmap物件
* 引數2：影象左邊座標點
* 引數3：影象上邊座標點
*/
canvas.drawBitmap(bitmap, 200,300, p); 在Android中需要通過graphics類來顯示2D圖形。
graphics中包括了Canvas（畫布）、Paint（畫筆）、Color（顏色）、Bitmap（影象）等常用的類。graphics具有繪製點、線、顏色、2D幾何圖形、影象處理等功能。
1.Color（顏色）類
Android系統中顏色的常用表示方法有以下3種：
（1）int color = Color.BLUE;
（2）int color = Color.argb(150,200,0,100);
（3）在xml檔案中定義顏色；
在實際應用當中，我們常用的顏色有以下一些，其顏色常量及其表示的顏色如下所示：
Color.BLACK 黑色 Color.GREEN 綠色
Color.BLUE 藍色 Color.LTGRAY 淺灰色
Color.CYAN 青綠色 Color.MAGENTA 紅紫色
Color.DKGRAY 灰黑色 Color.RED 紅色
Color.YELLOW 黃色 Color.TRANSPARENT 透明
Color.GRAY 灰色 Color.WHITE 白色
2.Paint（畫筆）類
要繪製圖形，首先得調整畫筆，按照自己的開發需要設定畫筆的相關屬性。Pain類的常用屬性設定方法如下：
setAntiAlias(); //設定畫筆的鋸齒效果
setColor(); //設定畫筆的顏色
setARGB(); //設定畫筆的A、R、G、B值
setAlpha(); //設定畫筆的Alpha值
setTextSize(); //設定字型的尺寸
setStyle(); //設定畫筆的風格（空心或實心）
setStrokeWidth(); //設定空心邊框的寬度
getColor(); //獲取畫筆的顏色
3.Canvas（畫布）類
畫筆屬性設定好之後，還需要將影象繪製到畫布上。Canvas類可以用來實現各種圖形的繪製工作，如繪製直線、矩形、圓等等。Canvas繪製常用圖形的方法如下：
繪製直線：canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint);
繪製矩形：canvas.drawRect(float left, float top, float right, float bottom, Paint paint);
繪製圓形：canvas.drawCircle(float cx, float cy, float radius, Paint paint);
繪製字元：canvas.drawText(String text, float x, float y, Paint paint);
繪製圖形：canvas.drawBirmap(Bitmap bitmap, float left, float top, Paint paint);
4.自定義View的基本實現方法
首先，我們需要自定義一個類，比如MyView，繼承於View類。然後，複寫View類的onDraw()函式。最後，在onDraw()函式中使用Paint和Canvas物件繪製我們需要的圖形。
5.動手實踐
在這裡，我使用上面提到的一些方法，繪製了一幅簡單的北京奧運宣傳畫，包括奧運五環，“北京歡迎您”的宣傳標語以及福娃。做成後的效果圖如圖1所示。
圖1 Android_OlympicLogo效果圖
其中，使用了自定義的MyView類，在MyView類中，重寫了onDraw()函式，並定義幾種不同的畫筆，分別用來繪製各種顏色的奧運五環以及繪製字串“北京歡迎您”等。具體的MyView.java原始碼如下。
1 package com.example.android_olympiclogo; 2 3 import android.view.View; 4 import android.content.Context; 5 import android.graphics.BitmapFactory; 6 import android.graphics.Canvas; 7 import android.graphics.Color; 8 import android.graphics.Paint; 9 import android.graphics.Paint.Style; 10 11 public class MyView extends View { 12 13 public MyView(Context context) { 14 super(context); 15 } 16 17 public void onDraw(Canvas canvas) { 18 19 Paint paint_blue = new Paint(); //繪製藍色的環 20 paint_blue.setColor(Color.BLUE); 21 paint_blue.setStyle(Style.STROKE); 22 paint_blue.setStrokeWidth(10); 23 canvas.drawCircle(110,150,60,paint_blue); 24 25 Paint paint_yellow = new Paint(); //繪製黃色的環 26 paint_yellow.setColor(Color.YELLOW); 27 paint_yellow.setStyle(Style.STROKE); 28 paint_yellow.setStrokeWidth(10); 29 canvas.drawCircle((float)175.5, 210, 60, paint_yellow); 30 31 Paint paint_black = new Paint(); //繪製黑色的環 32 paint_black.setColor(Color.BLACK);