涉及知識

繪制過程

(如果對繪制過程與構造函數還不了解的，請查看我之前文章 自定義View——Android坐標系與View繪制流程 )

Canvas涉及方法

Paint涉及方法

（PS: 因API較多，只列出了涉及的方法，想了解更多，請查看官方文檔)

(注意: 以下的代碼中未指定函數名的都是在onDraw函數中進行使用,同時為了演示方便，在onDraw中使用了一些new方法，請在實際使用中不要這樣做，因為onDraw函數是經常需要重新運行的)

一、Canvas

1、創(chuàng)建畫筆

創(chuàng)建畫筆并初始化

//創(chuàng)建畫筆
private Paint mPaint = new Paint();

private void initPaint(){
    //初始化畫筆
    mPaint.setStyle(Paint.Style.FILL);//設置畫筆類型
    mPaint.setAntiAlias(true);//抗鋸齒
}

2、繪制坐標軸

使用onSizeChanged方法，獲取根據父布局等因素確認的View寬高

//寬高
private int mWidth;
private int mHeight;

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth = w;
    mHeight = h;
}

把原點從左上角移動到畫布中心

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(mWidth/2,mHeight/2);// 將畫布坐標原點移動到中心位置
}

繪制坐標原點

//繪制坐標原點
mPaint.setColor(Color.BLACK);//設置畫筆顏色
mPaint.setStrokeWidth(10);//為了看得清楚,設置了較大的畫筆寬度
canvas.drawPoint(0,0,mPaint);

//繪制坐標軸4個斷點
canvas.drawPoints(new float[]{
    mWidth/2*0.8f,0
    ,0,mHeight/2*0.8f
    ,-mWidth/2*0.8f,0
    ,0,-mHeight/2*0.8f},mPaint);

繪制坐標軸

mPaint.setStrokeWidth(1);//恢復畫筆默認寬度
//繪制X軸
canvas.drawLine(-mWidth/2*0.8f,0,mWidth/2*0.8f,0,mPaint);
//繪制Y軸
canvas.drawLine(0,mHeight/2*0.8f,0,mHeight/2*0.8f,mPaint);

繪制坐標軸箭頭，一次繪制多條線

mPaint.setStrokeWidth(3);
//繪制X軸箭頭
canvas.drawLines(new float[]{
    mWidth/2*0.8f,0,mWidth/2*0.8f*0.95f,-mWidth/2*0.8f*0.05f,            mWidth/2*0.8f,0,mWidth/2*0.8f*0.95f,mWidth/2*0.8f*0.05f
},mPaint);
//繪制Y軸箭頭
canvas.drawLines(new float[]{
      0,mHeight/2*0.8f,mWidth/2*0.8f*0.05f,mHeight/2*0.8f-mWidth/2*0.8f*0.05f,
      0,mHeight/2*0.8f,-mWidth/2*0.8f*0.05f,mHeight/2*0.8f-mWidth/2*0.8f*0.05f,
},mPaint);

canvas.scale(1,-1);//翻轉Y軸

3、畫布變換

繪制矩形

//繪制矩形
mPaint.setStyle(Paint.Style.STROKE);//設置畫筆類型
canvas.drawRect(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8,mPaint);

canvas.translate(200,200);
mPaint.setColor(Color.BLUE);
canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint);

縮放

canvas.scale(0.5f,0.5f);
mPaint.setColor(Color.BLUE);
canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint);

旋轉

canvas.rotate(90);
mPaint.setColor(Color.BLUE);
canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint);

錯切

canvas.skew(1,0.5f);
mPaint.setColor(Color.BLUE);
canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint);

4、畫布的保存和恢復

save():用于保存canvas的狀態(tài)，之后可以調用canvas的平移、旋轉、縮放、錯切、裁剪等操作。restore():在save之后調用，用于恢復之前保存的畫布狀態(tài)，從而在之后的操作中忽略save與restore之間的畫布變化。

float point = Math.min(mWidth,mHeight)*0.06f/2;
float r = point*(float) Math.sqrt(2);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLACK);
canvas.save();
canvas.rotate(90);
canvas.drawCircle(200,0,r,mPaint);//圓心(200,0)
canvas.restore();
mPaint.setColor(Color.BLUE);
canvas.drawCircle(200,0,r,mPaint);//圓心(200,0)

保存畫布，旋轉90°，繪制一個圓，之后恢復畫布，使用相同參數再繪制一個圓。可以看到在恢復畫布前后，相同參數繪制的圓，分別顯示在了坐標系的不同位置。

二、豆瓣加載動畫

繪制2個點和一個半圓弧

mPaint.setStyle(Paint.Style.STROKE);//設置畫筆樣式為描邊，如果已經設置，可以忽略
mPaint.setColor(Color.GREEN);
mPaint.setStrokeWidth(10);
float point = Math.min(mWidth,mHeight)*0.2f/2;
float r = point*(float) Math.sqrt(2);
RectF rectF = new RectF(-r,-r,r,r);
canvas.drawArc(rectF,0,180,false,mPaint);
canvas.drawPoints(new float[]{
        point,-point
        ,-point,-point
},mPaint);

但是豆瓣表情在旋轉的過程中，是一個鏈接著兩個點的270°的圓弧

mPaint.setColor(Color.GREEN);
mPaint.setStrokeWidth(10);
float point = Math.min(mWidth,mHeight)*0.2f/2;
float r = point*(float) Math.sqrt(2);
RectF rectF = new RectF(-r,-r,r,r);
canvas.drawArc(rectF,-180,270,false,mPaint);

這里使用ValueAnimator類，來進行演示(實際上應該是根據touch以及網絡情況來進行加載的變化)

簡單說下ValueAnimator類:

動畫部分:

private ValueAnimator animator;
private float animatedValue;
private long animatorDuration = 5000;
private TimeInterpolator timeInterpolator = new DecelerateInterpolator();

private void initAnimator(long duration){
    if (animator !=null &&animator.isRunning()){
        animator.cancel();
        animator.start();
    }else {
        animator=ValueAnimator.ofFloat(0,855).setDuration(duration);
        animator.setInterpolator(timeInterpolator);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                animatedValue = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.start();
    }
}

表情部分:在繪制前最好使用sava()方法保存當前的畫布狀態(tài)，在結束后使用restore()恢復之前保存的狀態(tài)。為了是表情看上去更自然，所以減少10°的初始角度

private void doubanAnimator2(Canvas canvas, Paint mPaint){
    mPaint.setStyle(Paint.Style.STROKE);//描邊
    mPaint.setStrokeCap(Paint.Cap.ROUND);//圓角筆觸
    mPaint.setColor(Color.rgb(97, 195, 109));
    mPaint.setStrokeWidth(15);
    float point = Math.min(mViewWidth,mViewWidth)*0.06f/2;
    float r = point*(float) Math.sqrt(2);
    RectF rectF = new RectF(-r,-r,r,r);
    canvas.save();

    // rotate
    if (animatedValue>=135){
        canvas.rotate(animatedValue-135);
    }

    // draw mouth
    float startAngle=0, sweepAngle=0;
    if (animatedValue<135){
        startAngle = animatedValue +5;
        sweepAngle = 170+animatedValue/3;
    }else if (animatedValue<270){
        startAngle = 135+5;
        sweepAngle = 170+animatedValue/3;
    }else if (animatedValue<630){
        startAngle = 135+5;
        sweepAngle = 260-(animatedValue-270)/5;
    }else if (animatedValue<720){
        startAngle = 135-(animatedValue-630)/2+5;
        sweepAngle = 260-(animatedValue-270)/5;
    }else{
        startAngle = 135-(animatedValue-630)/2-(animatedValue-720)/6+5;
        sweepAngle = 170;
    }
    canvas.drawArc(rectF,startAngle,sweepAngle,false,mPaint);

    // draw eye
    canvas.drawPoints(new float[]{
        -point,-point
        ,point,-point
    },mPaint);

    canvas.restore();
}

在調試完成之后就可以刪除，坐標系部分的代碼了

三、小結