這個系列主要是介紹下Android自定義View和Android繪圖機制，自己能力有限，如果在介紹過程中有什麼錯誤，歡迎指正

前言

在上一篇Android繪圖系列(一)——自定義View基礎中我們瞭解自定義View相關的基本知識，不過，這些東西依舊還是理論，接下來我們就實際繪製一些東西

在本篇文章中，我們先了解以下Canvas,並且畫一些基本的圖形

Canvas簡介

Canvas我們可以稱之為畫布，能夠在上面繪製各種東西，是安卓平臺2D圖形繪製的基礎，非常強大。

一般來說，比較基礎的東西有兩大特點:

1.可操作性強：由於這些是構成上層的基礎，所以可操作性必然十分強大。

2.比較難用：各種方法太過基礎，想要完美的將這些操作組合起來有一定難度。**

Canvas的常用操作

PS： Canvas常用方法在上面表格中已經全部列出了，當然還存在一些其他的方法未列出，具體可以參考官方文件 Canvas

繪製基本圖形

繪製顏色：

繪製顏色是填充整個畫布，常用於繪製底色。

canvas.drawColor(Color.RED);

首先我們寫一個類繼承View,並且我們onDraw()方法中呼叫這個方法

package com.study.customview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by HFS on 2017/2/4.
 */

public class CustomView extends View {
    public CustomView(Context context) {
        super(context);
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.RED);
    }
}

OK，看下效果

注意：接下來繪製的圖形都需要另外一個引數：Paint 可以把Canvas理解為畫布，Paint理解為畫筆

• 初始化畫筆

  // 1.建立一個畫筆
  private Paint mPaint = new Paint();

  // 2.初始化畫筆
    private void initPaint() {
        mPaint.setColor(Color.BLACK);       //設定畫筆顏色
        mPaint.setStyle(Paint.Style.FILL);  //設定畫筆模式為填充
        mPaint.setStrokeWidth(10f);         //設定畫筆寬度為10px
    }

  // 3.在建構函式中初始化
    public xxxView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

在建立完畫筆之後，就可以在Canvas中繪製各種內容了。

繪製點

直接上程式碼了

package com.study.customview.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by HFS on 2017/2/4.
 */

public class PointView extends View {

    private Paint mPaint=new Paint();

    public PointView(Context context) {
        super(context);

        initPaint();
    }

    public PointView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public PointView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化畫筆
     */
    private void initPaint() {
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(10f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫一個點
        canvas.drawPoint(200,300,mPaint);

        //畫一組點
        canvas.drawPoints(new float[]{
                500,600,
                500,700,
                500,800,
                500,900

        },mPaint);
   }
}

效果圖：

注意：座標點都是相對於螢幕左上角而言的。座標原點預設在左上角，水平向右為x軸增大方向，豎直向下為y軸增大方向。

繪製直線

直接上程式碼:

package com.study.customview.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by HFS on 2017/2/4.
 * 直線View
 */

public class LineView extends View {
    private Paint mPaint=new Paint();

    public LineView(Context context) {
        super(context);

        initPaint();
    }

    public LineView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public LineView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化畫筆
     */
    private void initPaint() {
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(10f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //從（200，300）這個點開始 到(500,600)這個點結束
        canvas.drawLine(200,400,500,600,mPaint);
        // 繪製一組線 每四數字(兩個點的座標)確定一條線
        canvas.drawLines(new float[]{
                100,200,200,200,
                100,300,200,300
        },mPaint);
    }
}

效果圖:

繪製矩形

關於繪製矩形，Canvas提供了三種過載方法

解釋下:
第一種就是提供四個數值(矩形左上角和右下角兩個點的座標)來確定一個矩形進行繪製。
其餘兩種是先將矩形封裝為Rect或RectF(實際上仍然是用兩個座標點來確定的矩形)，然後傳遞給Canvas繪製

package com.study.customview.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by HFS on 2017/2/4.
 */

public class RectView extends View {
    private Paint mPaint=new Paint();

    public RectView(Context context) {
        super(context);

        initPaint();
    }

    public RectView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public RectView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化畫筆
     */
    private void initPaint() {
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(10f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //第一種
        canvas.drawRect(200,300,500,600,mPaint);
        //第二種
        Rect rect=new Rect(200,300,500,600);
        canvas.drawRect(rect,mPaint);
        //第三種
        RectF rectF=new RectF(200,300,500,600);
        canvas.drawRect(rectF,mPaint);
    }
}

效果圖

為什麼會有Rect和RectF兩種？兩者有什麼區別嗎？

答案當然是存在區別的，兩者最大的區別就是精度不同，Rect是int(整形)的，而RectF是float(單精度浮點型)的。除了精度不同，兩種提供的方法也稍微存在差別，在這裡我們暫時無需關注，想了解更多參見官方文件 Rect 和 RectF

繪製圓角矩形：

同樣有兩個過載方法

一般我們使用第一個

package com.study.customview.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by HFS on 2017/2/4.
 * 圓角矩形View
 */

public class RoundRectView extends View {
    private Paint mPaint=new Paint();

    public RoundRectView(Context context) {
        super(context);

        initPaint();
    }

    public RoundRectView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public RoundRectView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化畫筆
     */
    private void initPaint() {
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(10f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        RectF rect=new RectF(100,100,800,400);
        canvas.drawRoundRect(rect,30,30,mPaint);
    }
}

效果圖

下面簡單解析一下圓角矩形的幾個必要的引數的意思。

很明顯可以看出，第二種方法前四個引數和第一種方法的RectF作用是一樣的，都是為了確定一個矩形，最後一個引數Paint是畫筆，無需多說，與矩形相比，圓角矩形多出來了兩個引數rx 和 ry，這兩個引數是幹什麼的呢？

稍微分析一下，既然是圓角矩形，他的角肯定是圓弧(圓形的一部分)，我們一般用什麼確定一個圓形呢？

答案是圓心 和 半徑，其中圓心用於確定位置，而半徑用於確定大小。

由於矩形位置已經確定，所以其邊角位置也是確定的，那麼確定位置的引數就可以省略，只需要用半徑就能描述一個圓弧了。

但是，半徑只需要一個引數，但這裡怎麼會有兩個呢？

好吧，讓你發現了，這裡圓角矩形的角實際上不是一個正圓的圓弧，而是橢圓的圓弧，這裡的兩個引數實際上是橢圓的兩個半徑，他們看起來個如下圖：

紅線標註的 rx 與 ry 就是兩個半徑，也就是相比繪製矩形多出來的那兩個引數。

我們瞭解到原理後，就可以為所欲為了，通過計算可知我們上次繪製的矩形寬度為700，高度為300，當你讓 rx大於350(寬度的一半)， ry大於150(高度的一半) 時奇蹟就出現了， 你會發現圓角矩形變成了一個橢圓， 他們畫出來是這樣的 ( 為了方便確認我更改了畫筆顏色， 同時繪製出了矩形和圓角矩形 )：

        // 矩形
        RectF rectF = new RectF(100,100,800,400);  

        // 繪製背景矩形
        mPaint.setColor(Color.GRAY);
        canvas.drawRect(rectF,mPaint);

        // 繪製圓角矩形
        mPaint.setColor(Color.BLUE);
        canvas.drawRoundRect(rectF,700,400,mPaint);

其中灰色部分是我們所選定的矩形，而裡面的圓角矩形則變成了一個橢圓，實際上在rx為寬度的一半，ry為高度的一半時，剛好是一個橢圓，通過上面我們分析的原理推算一下就能得到，而當rx大於寬度的一半，ry大於高度的一半時，實際上是無法計算出圓弧的，所以drawRoundRect對大於該數值的引數進行了限制(修正)，凡是大於一半的引數均按照一半來處理。

繪製橢圓：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //第一種
        RectF rectF=new RectF(100,100,800,400);
        canvas.drawOval(rectF,mPaint);

        //第二種
        canvas.drawOval(100,100,800,400,mPaint);
    }
}

同樣，以上兩種方法效果完全一樣，但一般使用第一種。

繪製橢圓實際上就是繪製一個矩形的內切圖形，原理如下，就不多說了：

PS： 如果你傳遞進來的是一個長寬相等的矩形(即正方形)，那麼繪製出來的實際上就是一個圓。

繪製圓：

繪製圓形也比較簡單, 如下：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //在(600，600)這個點繪製一個半徑為300的圓
        canvas.drawCircle(600,600,300,mPaint);
    }

繪製圓形有四個引數，前兩個是圓心座標，第三個是半徑，最後一個是畫筆。

繪製圓弧：

繪製圓弧就比較神奇一點了，為了理解這個比較神奇的東西，我們先看一下它需要的幾個引數：

// 第一種
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}

// 第二種
public void drawArc(float left, float top, float right, float bottom, float startAngle,
            float sweepAngle, boolean useCenter, @NonNull Paint paint) {}

從上面可以看出，相比於繪製橢圓，繪製圓弧還多了三個引數：

startAngle  // 開始角度
sweepAngle  // 掃過角度
useCenter   // 是否使用中心

通過字面意思我們基本能猜測出來前兩個引數(startAngle， sweepAngel)的作用，就是確定角度的起始位置和掃過角度， 不過第三個引數是幹嘛的？試一下就知道了,上程式碼：

        RectF rectF = new RectF(100,100,800,400);
        // 繪製背景矩形
        mPaint.setColor(Color.GRAY);
        canvas.drawRect(rectF,mPaint);

        // 繪製圓弧
        mPaint.setColor(Color.BLUE);
        canvas.drawArc(rectF,0,90,false,mPaint);

        //-------------------------------------

        RectF rectF2 = new RectF(100,600,800,900);
        // 繪製背景矩形
        mPaint.setColor(Color.GRAY);
        canvas.drawRect(rectF2,mPaint);

        // 繪製圓弧
        mPaint.setColor(Color.BLUE);
        canvas.drawArc(rectF2,0,90,true,mPaint);

上述程式碼實際上是繪製了一個起始角度為0度，掃過90度的圓弧，兩者的區別就是是否使用了中心點，結果如下：

可以發現使用了中心點之後繪製出來類似於一個扇形，而不使用中心點則是圓弧起始點和結束點之間的連線加上圓弧圍成的圖形。這樣中心點這個引數的作用就很明顯了，不必多說想必大家試一下就明白了