Android Canvas繪圖詳解（圖文）
Android中使用圖形處理引擎，2D部分是android SDK內部本身提供，3D部分是用Open GL ES 1.0。今天咱們主要要了解的是2D相關的，若是你想看3D的話那麼能夠跳過這篇文章。 php
大部分2D使用的api都在android.graphics和android.graphics.drawable包中。他們提供了圖形處理相關的： Canvas、ColorFilter、Point(點)和RetcF(矩形)等，還有一些動畫相關的：AnimationDrawable、 BitmapDrawable和TransitionDrawable等。以圖形處理來講，咱們最經常使用到的就是在一個View上畫一些圖片、形狀或者自定義的文本內容，這裏咱們都是使用Canvas來實現的。你能夠獲取View中的Canvas對象，繪製一些自定義形狀，而後調用View. invalidate方法讓View從新刷新，而後繪製一個新的形狀，這樣達到2D動畫效果。下面咱們就主要來了解下Canvas的使用方法。 html
Canvas對象的獲取方式有兩種：一種咱們經過重寫View.onDraw方法，View中的Canvas對象會被當作參數傳遞過來，咱們操做這個Canvas，效果會直接反應在View中。另外一種就是當你想建立一個Canvas對象時使用的方法： java
|
1
2
|
Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas c =newCanvas(b);
|
上面代碼建立了一個尺寸是100*100的Bitmap，使用它做爲Canvas操做的對象，這時候的Canvas就是使用建立的方式。當你使用建立的Canvas在bitmap上執行繪製方法後，你還能夠將繪製的結果提交給另一個Canvas，這樣就能夠達到兩個Canvas協做完成的效果，簡化邏輯。可是android SDK建議使用View.onDraw參數裏提供的Canvas就好，不必本身建立一個新的Canvas對象。接下來咱們看看Canvas提供咱們哪些繪製圖形的方法。咱們建立一個自定義View對象，使用onDraw方法提供的Canvas進行繪製圖形。 android
CanvasDemoActivity.java： git
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
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(newCustomView1(this));
}
/**
* 使用內部類 自定義一個簡單的View
*
@author Administrator
*
*/
class CustomView1 extends View{
Paint paint;
public CustomView1(Context context) {
super(context);
paint =newPaint();//設置一個筆刷大小是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： github
從上面方法的名字看來咱們能夠知道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的一些簡單用法： canvas
|
1
2
3
4
|
protected void onDraw(Canvas canvas) {
canvas.drawCircle(100, 100, 90, paint);
}
|
效果是： api
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@Override
protected void onDraw(Canvas canvas) {
//繪製弧線區域
RectF rect =newRectF(0, 0, 100, 100);
canvas.drawArc(rect,//弧線所使用的矩形區域大小
0, //開始角度
90,//掃過的角度
false,//是否使用中心
paint);
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
protected void onDraw(Canvas canvas) {
//繪製弧線區域
RectF rect =newRectF(0, 0, 100, 100);
canvas.drawArc(rect,//弧線所使用的矩形區域大小
0, //開始角度
90,//掃過的角度
true,//是否使用中心
paint);
}
|
兩圖對比咱們能夠發現，當 drawArcs(rect,startAngel,sweepAngel,useCenter,paint)中的useCenter爲false時，弧線區域是用弧線開始角度和結束角度直接鏈接起來的，當useCenter爲true時，是弧線開始角度和結束角度都與中心點鏈接，造成一個扇形。 ide
|
1
2
3
4
5
|
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLUE);
}
|
canvas.drawColor是直接將View顯示區域用某個顏色填充滿。
|
1
2
3
4
5
6
7
|
@Override
protected void onDraw(Canvas canvas) {
//畫一條線
canvas.drawLine(10, 10, 100, 100, paint);
}
|
Canvas.drawOval：
|
1
2
3
4
5
6
7
8
9
|
@Override
protected void onDraw(Canvas canvas) {
//定義一個矩形區域
RectF oval =newRectF(0,0,200,300);
//矩形區域內切橢圓
canvas.drawOval(oval, paint);
}
|
canvas.drawPosText：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@Override
protected void onDraw(Canvas canvas) {
//按照既定點 繪製文本內容
canvas.drawPosText("Android777",newfloat[]{
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：
|
1
2
3
4
5
6
7
8
9
10
|
@Override
protected void onDraw(Canvas canvas) {
RectF rect =newRectF(50, 50, 200, 200);
canvas.drawRect(rect, paint);
}
}
|
canvas.drawRoundRect：
|
1
2
3
4
5
6
7
8
9
10
11
|
@Override
protected void onDraw(Canvas canvas) {
RectF rect =newRectF(50, 50, 200, 200);
canvas.drawRoundRect(rect,
30,//x軸的半徑
30,//y軸的半徑
paint);
}
|
canvas.drawPath：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@Override
protected void onDraw(Canvas canvas) {
Path path =newPath();//定義一條路徑
path.moveTo(10, 10);//移動到 座標10,10
path.lineTo(50, 60);
path.lineTo(200,80);
path.lineTo(10, 10);
canvas.drawPath(path, paint);
}
|
canvas.drawTextOnPath：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@Override
protected void onDraw(Canvas canvas) {
Path path =newPath();//定義一條路徑
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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
@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 =newPath();
path.addArc(newRectF(0,0,150,150), -180, 180);
Paint citePaint =newPaint(paint);
citePaint.setTextSize(14);
citePaint.setStrokeWidth(1);
canvas.drawTextOnPath("
http://www.android777.com", path, 28, 0, citePaint);
canvas.restore();
Paint tmpPaint =newPaint(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*方法測試過了，咱們結合一些事件，作一些有用戶交互的應用：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
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(newCustomView1(this));
}
/**
* 使用內部類 自定義一個簡單的View
* @author Administrator
*
*/
class CustomView1 extends View{
Paint paint;
private ArrayList<PointF> graphics =newArrayList<PointF>();
PointF point;
public CustomView1(Context context) {
super(context);
paint =newPaint();//設置一個筆刷大小是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(newPointF(event.getX(),event.getY()));
invalidate();//從新繪製區域
returntrue;
}
//在這裏咱們將測試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繪製的。
- 1. [Android] Android Canvas繪圖詳解（圖文）
- 2. Android Canvas繪圖詳解（圖文）
- 3. Canvas繪圖詳解
- 4. Android 繪圖——Canvas
- 5. Android Canvas繪圖
- 6. 【HTML5】Canvas繪圖詳解-1
- 7. canvas繪圖API詳解
- 8. 繪圖——Android繪圖基礎：Canvas、Paint等
- 9. 圖形繪製 Canvas Paint Path 詳解
- 10. Canvas 繪圖
- 更多相關文章...
- • R 繪圖 - 餅圖 - R 語言教程
- • R 繪圖 - 中文支持 - R 語言教程
- • Flink 數據傳輸及反壓詳解
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven