我們在onDraw裏面canvas畫布其實有兩個座標系並且可以新建多個畫布：一個默認的座標系是canvas座標系，還有一個是繪圖座標系。後面的連接博客的開頭就進行了詳細的介紹。講解兩個座標系的博客。畫布有一個默認畫布，然後我們可以自己新建畫布：int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);，然後在新建的畫布上進行一系列操作。比如我最後會貼的一部分代碼實現一個仿支付寶刷臉的基本UI。下面我先貼一些基本代碼和效果圖幫助循序漸進和方便我自己以後回顧：
（1）
我們經常見到類似的數據統計比例圖。可能大部分人用的是第三方的統計包。但是他的原理也是通過複雜的數學計算然後在onDraw裏面進行繪製出來的。我這裏貼一下我實現這個的代碼。
public class View5 extends View {
private Paint mPaint;
private int width;
private int height;
public View5(Context context) {
this(context, null);
}
public View5(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public View5(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setColor(Color.GREEN);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Paint.Cap.ROUND);
// mPaint.setTextSize(60);
// mPaint.setStrokeWidth(60);//只有畫圓和圓點的時候纔會用這個
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getWidth();
height = getHeight();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//(1)沒有平移的繪圖座標系
// canvas.drawLine(0, 0, width, 0, mPaint);
// canvas.drawLine(0, 0, 0, height, mPaint);//繪製y軸
//(2)平移了的繪圖座標系，還支持旋轉
// canvas.translate(200, 200);
// canvas.drawLine(0, 0, width, 0, mPaint);
// canvas.drawLine(0, 0, 0, height, mPaint);
//(3)畫字
// canvas.drawText("這是沒有平移的", 150, 150, mPaint);
//(4)畫圓
// canvas.drawCircle(600,600,200,mPaint);//STROKE
// mPaint.setStyle(Paint.Style.FILL);
// canvas.drawCircle(600,600,200,mPaint);//FILL
// mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
// canvas.drawCircle(600,600,200,mPaint);//FILL_AND_STROKE
//(5)畫線參數一和二十線的起始座標，參數三和四是線的技術座標
// canvas.drawLine(100, 100, width, 100, mPaint);
// canvas.drawLines(new float[]{200,200,300,200,300,300,300,400},mPaint);
//(6)畫橢圓rectF的四個參數：一代表橢圓左側的x座標，二代表上邊的y座標，三代表右側的x座標，四代表底部的y座標
// canvas.drawOval(new RectF(50, 50, 400, 700), mPaint);
//(7)畫圓弧參數2和3分別是起始角度和圓弧角度,參數4代表是否顯示半徑連線，起始我個人覺得畫圓弧的rectF是一個橢圓
//的四個參數，只不過根據起始角度和結束角把這個橢圓進行了截取
canvas.drawArc(new RectF(50, 50, 400, 400), 30, 270, true, mPaint);
// mPaint.setColor(Color.RED);
canvas.drawArc(new RectF(60, 47, 410, 397), 30, -90, true, mPaint);//往右移動距離是上移距離的三倍
//(8)畫矩形
// canvas.drawRoundRect(new RectF(50,50,400,400),20,20,mPaint);//這是帶圓角的矩形
// canvas.drawRect(new RectF(50,50,400,400),mPaint);//不帶圓角的矩形
//(9)畫圓點
// canvas.drawPoint(50,50,mPaint);
//每兩個一組代表一個原點的xy座標
// canvas.drawPoints(new float[]{100,100,200,200,300, 300, 400,400,500,500,600,600},mPaint);
//(10)畫圖片
// Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
// canvas.drawBitmap(bitmap, 200,300, mPaint);
}
}
上面的第7部分代碼就是實現這個功能的，我這裏寫的只是比較簡單的。實際上要經過計算然後動態賦值畫出的分析圖的。我上面寫的十個練手小demo也可以在我上面的那個連接裏面有和效果圖。
（2）關於text的onDraw
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
TextPaint mPaint = new TextPaint();
mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);//抗鋸齒
mPaint.setTextSize(48);
int textHeigth = 48;
float translateY = textHeigth;
canvas.save();
canvas.translate(0, translateY);
mPaint.setFlags(Paint.SUBPIXEL_TEXT_FLAG);
canvas.drawText("繪製文本", 0, 0, mPaint);
canvas.restore();
canvas.save();
translateY += textHeigth * 2;
canvas.translate(0, translateY);
mPaint.setColor(Color.GREEN);
canvas.drawText("綠色文本", 0, 0, mPaint);
canvas.restore();
canvas.save();
translateY += textHeigth*2;
canvas.translate(0,translateY);
mPaint.setUnderlineText(true);
canvas.drawText("這是帶下劃線的text",0,0,mPaint);
canvas.restore();
} TextView mTv = (TextView) findViewById(R.id.tv);
mTv.getPaint().setFlags(Paint.FAKE_BOLD_TEXT_FLAG);//加粗
mTv.getPaint().setFlags(Paint.ANTI_ALIAS_FLAG);//抗鋸齒
mTv.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);//這個是設置下劃線，如果跟加粗一起用，要寫在加粗後面
（3）仿支付寶的刷臉界面：
我這裏只是簡約版，真實的底部應該是一個surfaceView加載相機預覽界面的。
實現：我用一個幀佈局進行覆蓋，下面是一張圖片，上面是一個自定義控件，這個自定義控件讓下面的佈局只能露出一個圓形的視角。重點在於這個自定義控件，代碼如下：
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:src="@mipmap/ic_launcher" />
<shen.da.ye.mypaintdemo.View10
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>public class View10 extends View {
public View10(Context context) {
this(context, null);
}
public View10(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public View10(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
canvas.drawARGB(0, 0, 0, 0);
//這要這句代碼走了，就代表新建了一個畫布
int layer = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);
canvas.drawARGB(255, 255, 255, 255);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.FILL);
paint.setColor(getResources().getColor(R.color.testColor));
canvas.drawCircle(500, 600, 200, paint);
paint.setXfermode(null);
canvas.restoreToCount(layer);
}
}
