Android自定義View基礎(chǔ)：坐標(biāo)系
Android自定義View基礎(chǔ)：角度弧度
Android自定義View進(jìn)階：分類與流程

1.Canvas的常用操作速查表

API

2.Canvas詳解

創(chuàng)建畫筆：

//創(chuàng)建畫筆
private Paint paint = new Paint();
private void initPaint(){
        mPaint.setColor(Color.BLACK);       //設(shè)置畫筆顏色
        mPaint.setStyle(Paint.Style.FILL);  //設(shè)置畫筆模式為填充
        mPaint.setStrokeWidth(10f);         //設(shè)置畫筆寬度為10px
}

//構(gòu)造函數(shù)
  public PaintView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

繪制點(diǎn)：

   canvas.drawPoint(200, 200, mPaint);     //在坐標(biāo)(200,200)位置繪制一個(gè)點(diǎn)
        canvas.drawPoints(new float[]{          //繪制一組點(diǎn)，坐標(biāo)位置由float數(shù)組指定
                500,500,
                500,600,
                500,700
        },mPaint);

圖例

繪制直線：

//繪制直線需要兩個(gè)點(diǎn)，初始點(diǎn)和結(jié)束點(diǎn)，同樣繪制直線也可以繪制一條或者繪制一組：
    canvas.drawLine(300,300,500,600,mPaint);    // 在坐標(biāo)(300,300)(500,600)之間繪制一條直線
        canvas.drawLines(new float[]{               // 繪制一組線 每四數(shù)字(兩個(gè)點(diǎn)的坐標(biāo))確定一條線
                100,200,200,200,
                100,300,200,300
        },mPaint);

繪制矩形：
確定確定一個(gè)矩形最少需要四個(gè)數(shù)據(jù)，就是對(duì)角線的兩個(gè)點(diǎn)的坐標(biāo)值，這里一般采用左上角和右下角的兩個(gè)點(diǎn)的坐標(biāo)。
關(guān)于繪制矩形，Canvas提供了三種重載方法，第一種就是提供四個(gè)數(shù)值(矩形左上角和右下角兩個(gè)點(diǎn)的坐標(biāo))來(lái)確定一個(gè)矩形進(jìn)行繪制。 其余兩種是先將矩形封裝為Rect或RectF(實(shí)際上仍然是用兩個(gè)坐標(biāo)點(diǎn)來(lái)確定的矩形)，然后傳遞給Canvas繪制，如下：

    // 第一種
    canvas.drawRect(100,100,800,400,mPaint);

    // 第二種
    Rect rect = new Rect(100,100,800,400);
    canvas.drawRect(rect,mPaint);

    // 第三種
    RectF rectF = new RectF(100,100,800,400);
    canvas.drawRect(rectF,mPaint);

以上三種方法所繪制出來(lái)的結(jié)果是完全一樣的。

    // 第二種
    canvas.drawRoundRect(100,100,800,400,30,30,mPaint);

上面兩種方法繪制效果也是一樣的，但鑒于第二種方法在API21的時(shí)候才添加上，所以我們一般使用的都是第一種。

    // 矩形
    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);

    // 第一種
    RectF rectF = new RectF(100,100,800,400);
    canvas.drawOval(rectF,mPaint);

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

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

canvas.drawCircle(500,500,400,mPaint);  // 繪制一個(gè)圓心坐標(biāo)在(500,500)，半徑為400 的圓。

繪制圓形有四個(gè)參數(shù)，前兩個(gè)是圓心坐標(biāo)，第三個(gè)是半徑，最后一個(gè)是畫筆。

// 第一種
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) {}

從上面可以看出，相比于繪制橢圓，繪制圓弧還多了三個(gè)參數(shù)：

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

通過(guò)字面意思我們基本能猜測(cè)出來(lái)前兩個(gè)參數(shù)(startAngle， sweepAngel)的作用，就是確定角度的起始位置和掃過(guò)角度， 不過(guò)第三個(gè)參數(shù)是干嘛的？試一下就知道了,上代碼：

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

上述代碼實(shí)際上是繪制了一個(gè)起始角度為0度，掃過(guò)90度的圓弧，兩者的區(qū)別就是是否使用了中心點(diǎn)，結(jié)果如下：

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

STROKE                //描邊
FILL                  //填充
FILL_AND_STROKE       //描邊加填充

為了區(qū)分三者效果我們做如下實(shí)驗(yàn)：

    Paint paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setStrokeWidth(40);     //為了實(shí)驗(yàn)效果明顯，特地設(shè)置描邊寬度非常大

    // 描邊
    paint.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(200,200,100,paint);

    // 填充
    paint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(200,500,100,paint);

    // 描邊加填充
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawCircle(200, 800, 100, paint);