友情連結：

神馬是Canvas

基本概念

Canvas：可以理解為是一個為我們提供了各種工具的畫布，我們可以在上面盡情的繪製（旋轉，平移，縮放等等）。可以理解為系統分配給我們一個一個記憶體空間，然後提供了一些對這個記憶體空間操作的方法(API)， 實際儲存是在下面的bitmap。

兩種畫布

這裡canvas可以繪製兩種型別的畫圖，分別是view和surfaceView。
View：是普通畫圖，適合處理量比較小，幀率比較小的動畫，比如說象棋遊戲之類的。
SurfaceView：主要用在遊戲，高品質動畫方面的畫圖。
區別：在SurfaceView中定義一個專門的執行緒來完成畫圖工作，應用程式不需要等待View的刷圖，提高效能。

Canvas座標系與繪圖座標系

Canvas繪圖中牽扯到兩種座標系：Canvas座標系與繪圖座標系。

• Canvas座標系
  Canvas座標系指的是Canvas本身的座標系，Canvas座標系有且只有一個，且是唯一不變的，其座標原點在View的左上角，從座標原點向右為x軸的正半軸，從座標原點向下為y軸的正半軸。

• 繪圖座標系
  Canvas的drawXXX方法中傳入的各種座標指的都是繪圖座標系中的座標，而非Canvas座標系中的座標。預設情況下，繪圖座標系與Canvas座標系完全重合，即初始狀況下，繪圖座標系的座標原點也在View的左上角，從原點向右為x軸正半軸，從原點向下為y軸正半軸。但不同於Canvas座標系，繪圖座標系並不是一成不變的，可以通過呼叫Canvas的translate方法平移座標系，可以通過Canvas的rotate方法旋轉座標系，還可以通過Canvas的scale方法縮放座標系，而且需要注意的是，translate、rotate、scale的操作都是基於當前繪圖座標系的，而不是基於Canvas座標系，一旦通過以上方法對座標系進行了操作之後，當前繪圖座標系就變化了，以後繪圖都是基於更新的繪圖座標系了。也就是說，真正對我們繪圖有用的是繪圖座標系而非Canvas座標系。

我們看下面程式碼就可以明白：

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

        //未平移 在原點
        canvas.drawLine(0, 0, width, 0, mPaint);//繪製x軸
        canvas.drawLine(0, 0, 0, height, mPaint);//繪製y軸

        //第一次移動
        canvas.translate(200,200);
        canvas.drawLine(0, 0, width, 0
 
, mPaint);//繪製x軸
        canvas.drawLine(0, 0, 0, height, mPaint);//繪製y軸

        canvas.restore();

        //第二次移動並旋轉
        canvas.translate(200,200);
        canvas.rotate(30);
        canvas.drawLine(0, 0, width, 0, mPaint);//繪製x軸
        canvas.drawLine(0, 0, 0, height, mPaint);//繪製y軸

    }

每次繪製同樣的(startX, startY,stopX,stopY, paint)線，
但是我們發現平移或者旋轉之後畫出的線座標發生了變化

那麼有童鞋問了，如果我不想讓座標發生變化，或者再回去原點怎麼搞？
別擔心，只需要執行canvas.restore()，下面詳細講解。

Canvas儲存和還原

• canvas.save()
  儲存當前座標
• canvas.restore()
  回覆上一次座標，如果有儲存，回到最後一次儲存的座標，如果沒儲存,則會報錯java.lang.IllegalStateException: Underflow in restore - more restores than saves ，要先存再取。
• restoreToCount(int saveCount)
  回到第幾次的儲存座標狀態

對Canvas的操作 — 平移，旋轉，縮放

Canvas平移

/** 
 * 畫布向（dx，dy）方向平移 
 *  
 * 引數1: 向X軸方向移動dx距離 
 * 引數2: 向Y軸方向移動dy距離   
 */
 canvas.translate(float dx, float dy);

Canvas縮放

/** 
 * 在X軸方向放大為原來sx倍，Y軸方向方大為原來的sy倍 
 * 預設原點為左上角
 * 引數1: X軸的放大倍數 
 * 引數2: Y軸的放大倍數 
 */
canvas.scale(float sx, float sy);

/** 
 * 在X軸方向放大為原來sx倍，Y軸方向方大為原來的sy倍 
 * 引數1: X軸的放大倍數 
 * 引數2: Y軸的放大倍數 
 * 引數3: 原點X座標
 * 引數4: 原點Y座標
 */
canvas.scale(float sx, float sy, float px, float py);

Canvas旋轉

/** 
 * 原點為中心，旋轉degrees度（順時針方向為正方向 ）
 * 引數: 旋轉角度 
 */
canvas.rotate(float degrees);

/** 
 * 以（px,py）為中心，旋轉30度，順時針方向為正方向 
 * 引數1: 旋轉角度
 * 引數2: 原點X座標
 * 引數3: 原點Y座標 
 */
canvas.rotate(float degrees, float px, float py);

繪製

畫文字

/**
 * 引數1：輸入的內容 
 * 引數2：文字x軸的位置 
 * 引數3：文字Y軸的位置 
 * 引數4：畫筆物件 
 */
drawText(String text, float x, float y,  Paint paint)

/**
 * 引數1：輸入的內容 
 * 引數2：要從第幾個字開始繪製
 * 引數3：要繪製到第幾個文字 
 * 引數4：文字x軸的位置 
 * 引數5：文字Y軸的位置 
 * 引數6：畫筆物件 
 */
drawText(String text, int start, int end, float x, float y,Paint paint)

樣例：

canvas.drawText("開始寫字啦！", 200,200,mPaint);
canvas.drawText("開始寫字啦！",2,3, 200,400,mPaint);

畫圓

/**
 * 引數1：圓心X 
 * 引數2：圓心Y 
 * 引數3：半徑R 
 * 引數4：畫筆物件 
 */  
drawCircle(float cx, float cy, float radius, Paint paint)

樣例：

    mPaint.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(300,300,80,mPaint);

    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(300,500,80,mPaint);

    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawCircle(300,700,80,mPaint);

畫線

/* 
 * 引數1：startX 
 * 引數2：startY 
 * 引數3：stopX 
 * 引數4：stopY 
 * 引數5：畫筆物件 
 */   
canvas.drawLine(float startX, float startY, float stopX, float stopY,Paint paint);

/* 
 * 同時繪製多條線。 
 * 引數1：float陣列：每四個一組為一條線。
 * 引數2：畫筆物件 
 */  
canvas.drawLines(@Size(multiple=4)float[] pts, Paint paint);

樣例：

mPaint.setColor(getResources().getColor(android.R.color.holo_red_dark));
canvas.drawLine(50,50,200,50,mPaint);

mPaint.setColor(getResources().getColor(android.R.color.darker_gray));
canvas.drawLines(new float[]{200,200,300,200,300,300,300,400},mPaint);

畫橢圓

/**
 * 引數1: 矩形
 * 引數2: 畫筆
 * ／
canvas.drawOval(RectF oval, Paint paint);

/**
 *  引數1：float left 
 *  引數2：float top 
 *  引數3：float right 
 *  引數4：float bottom 
 *  引數5：畫筆
 *／
canvas.drawOval(float left, float top, float right, float bottom, @NonNull Paint paint);

樣例：

mPaint.setColor(getResources().getColor(android.R.color.holo_red_dark));
canvas.drawOval(new RectF(50,50,400,400),mPaint);

mPaint.setColor(getResources().getColor(android.R.color.darker_gray));
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
     canvas.drawOval(50,500,700,700,mPaint);
}

畫弧度

/**
 *  引數1：RectF物件。 
 *  引數2：開始的角度。（水平向右為0度順時針反向為正方向） 
 *  引數3：掃過的角度 
 *  引數4：是否和中心連線 
 *  引數5：畫筆物件 
 */    
canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint);

/**
 *  引數1：float left 
 *  引數2：float top 
 *  引數3：float right 
 *  引數4：float bottom  
 *  引數5：開始的角度。（水平向右為0度順時針反向為正方向） 
 *  引數6：掃過的角度 
 *  引數7：是否和中心連線 
 *  引數8：畫筆物件 
 */
canvas.drawArc(float left, float top, float right, float bottom,float startAngle, float sweepAngle, boolean useCenter,Paint paint);

樣例：

mPaint.setColor(getResources().getColor(android.R.color.holo_red_dark));
canvas.drawArc(new RectF(50,50,400,400),45,135,true,mPaint);

mPaint.setColor(getResources().getColor(android.R.color.darker_gray));
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      canvas.drawArc(50,500,700,700,45,135,false,mPaint);
}

矩形

/** 
 *  矩形 
 *  引數1：float left 
 *  引數2：float top 
 *  引數3：float right 
 *  引數4：float bottom 
 *  引數5:畫筆
 */  
canvas.drawRect(float left, float top, float right, float bottom,Paint paint);  

/** 
 *  引數1：矩形 
 *  引數2:畫筆
 */  
canvas.drawRectRect r,Paint paint);  

樣例：

mPaint.setColor(getResources().getColor(android.R.color.darker_gray));
canvas.drawRect(new RectF(50,50,400,400),mPaint);

        mPaint.setColor(getResources().getColor(android.R.color.holo_red_dark));
canvas.drawRect(50,500,700,700,mPaint);

圓角矩形

／**
  *  引數1：矩形 
  *  引數2：x半徑
  *  引數3：y半徑 
  *  引數4: 畫筆
  *／
drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)


／**
  *  引數1：float left 
  *  引數2：float top 
  *  引數3：float right 
  *  引數4：float bottom 
  *  引數5：x半徑
  *  引數6：y半徑 
  *  引數4: 畫筆
  *／
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, @NonNull Paint paint)

樣例：

mPaint.setColor(getResources().getColor(android.R.color.darker_gray));
canvas.drawRoundRect(new RectF(50,50,400,400),20,20,mPaint);
                               mPaint.setColor(getResources().getColor(android.R.color.holo_red_dark));
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    canvas.drawRoundRect(50,500,700,700,30,50,mPaint);
}

畫點

/** 
 * 引數1、2：點的x、y座標 
 */  
canvas.drawPoint(60, 390, p);//畫一個點  

/** 
 * 引數1：多個點，每兩個值為一個點。最後個數不夠兩個的值，忽略。 
 */  
canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//畫多個點

樣例：

mPaint.setColor(getResources().getColor(android.R.color.darker_gray));
        canvas.drawPoint(50,50,mPaint);

        mPaint.setColor(getResources().getColor(android.R.color.holo_red_dark));
        canvas.drawPoints(new float[]{100,100,200,200,300, 300, 400,400,500,500,600,600},mPaint);

畫圖片

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);   
/** 
 * 引數1：bitmap物件 
 * 引數2：影象左邊座標點 
 * 引數3：影象上邊座標點 
 */  
canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint);

樣例：

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
canvas.drawBitmap(bitmap, 200,300, mPaint);

到這裡基本屬性就講完了，接下來是一個練習。

程式碼繪製安卓小機器人

下面是程式碼 ， 相當簡單，就是計算一下座標，就不詳細講了，有問題可以留言。

public class AndroidView extends View {

    private float bodyWidth;
    private float bodyHeigh;

    private float armWidth;
    private float armHeight;

    private float legWidth;
    private float legHeight;

    private static final int INTERSPACE = 20;

    private Paint mPaint;

    private RectF bodyRect;
    private RectF legRect;
    private RectF armRect;


    public AndroidView(Context context) {
        this(context, null);
    }

    public AndroidView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AndroidView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(getResources().getColor(android.R.color.holo_green_dark));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        setBodyParams();

        setArmParams();

        setLegParams();
    }

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

        canvas.save();

        //畫身體
        canvas.drawRoundRect(bodyRect, 20, 20, mPaint);

        //畫頭
        canvas.translate(0, -(bodyWidth / 2 + INTERSPACE));
        canvas.drawArc(bodyRect, 0, -180, true, mPaint);

        //畫左胳膊
        canvas.drawRoundRect(armRect, 30, 30, mPaint);

        //畫右胳膊
        canvas.translate(bodyWidth + 5 * INTERSPACE, 0);
        canvas.drawRoundRect(armRect, 30, 30, mPaint);

        //畫左腿
        canvas.translate(-(bodyWidth + 7 * INTERSPACE),bodyWidth*11/10);
        canvas.drawRoundRect(legRect, 30, 30, mPaint);

        //畫右腿
        canvas.translate(2*INTERSPACE+legWidth,0);
        canvas.drawRoundRect(legRect, 30, 30, mPaint);

        //畫左眼
        canvas.translate(0,-bodyHeigh-5*INTERSPACE);
        mPaint.setColor(getResources().getColor(android.R.color.white));
        canvas.drawCircle(getWidth()/2,getHeight()/2,INTERSPACE/2,mPaint);

        //畫右眼
        canvas.translate(-(2*INTERSPACE+legWidth),0);
        mPaint.setColor(getResources().getColor(android.R.color.white));
        canvas.drawCircle(getWidth()/2,getHeight()/2,INTERSPACE/2,mPaint);

        canvas.restore();
        mPaint.setTextSize(60);
        mPaint.setColor(getResources().getColor(android.R.color.holo_red_dark));
        canvas.drawText("我是安卓小機器人",150,100,mPaint);
    }

    private void setBodyParams() {
        bodyWidth = getWidth() * 2 / 5;
        bodyHeigh = bodyWidth;

        bodyRect = new RectF();
        bodyRect.left = (getWidth() - bodyWidth) / 2;
        bodyRect.top = (getHeight() - bodyHeigh) / 2;
        bodyRect.right = bodyRect.left + bodyWidth;
        bodyRect.bottom = bodyRect.top + bodyHeigh;

    }

    private void setLegParams() {
        legWidth = getWidth() * 1 / 13;
        legHeight = getHeight() * 1 / 7;

        legRect = new RectF();
        legRect.left = (getWidth() - legWidth) / 2;
        legRect.top = (getHeight() - legHeight) / 2;
        legRect.right = legRect.left + legWidth;
        legRect.bottom = legRect.top + legHeight;
    }

    private void setArmParams() {
        armWidth = getWidth() * 1 / 13;
        armHeight = getHeight() * 1 / 6;

        armRect = new RectF();
        armRect.left = (getWidth() - bodyWidth) / 2 - INTERSPACE * 4;
        armRect.top = getHeight() / 2 + INTERSPACE * 2;
        armRect.right = armRect.left + armWidth;
        armRect.bottom = armRect.top + armHeight;
    }
}

掃碼關注公眾號“偉大程式猿的誕生“，更多幹貨等著你～
掃碼關注公眾號“偉大程式猿的誕生“，更多幹貨等著你～
掃碼關注公眾號“偉大程式猿的誕生“，更多幹貨等著你～