[Android] Android Canvas繪圖詳解（圖文）

時間 2019-11-07

原文原文鏈接

摘要 Android中使用圖形處理引擎，2D部分是android SDK內部本身提供，3D部分是用Open GL ES 1.0。今天咱們主要要了解的是2D相關的，若是你想看3D的話那麼能夠跳過這篇文章。大部分2D使用的api都在android.graphics和android.graphics.drawable包中。他們提供了圖php

Android中使用圖形處理引擎，2D部分是android SDK內部本身提供，3D部分是用Open GL ES 1.0。今天咱們主要要了解的是2D相關的，若是你想看3D的話那麼能夠跳過這篇文章。html

大部分2D使用的api都在android.graphics和android.graphics.drawable包中。他們提供了圖形處理相關的： Canvas、ColorFilter、Point(點)和RetcF(矩形)等，還有一些動畫相關的：AnimationDrawable、 BitmapDrawable和TransitionDrawable等。以圖形處理來講，咱們最經常使用到的就是在一個View上畫一些圖片、形狀或者自定義的文本內容，這裏咱們都是使用Canvas來實現的。你能夠獲取View中的Canvas對象，繪製一些自定義形狀，而後調用View. invalidate方法讓View從新刷新，而後繪製一個新的形狀，這樣達到2D動畫效果。下面咱們就主要來了解下Canvas的使用方法。java

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

1 2	`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進行繪製圖形。canvas

CanvasDemoActivity.java：api

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：app

從上面方法的名字看來咱們能夠知道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的一些簡單用法：ide

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);

}

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。