Android中Canvas的使用（畫直線、虛線、圓、圓環、矩形、多邊形、圓角矩形、矩形字型居中、圖片、圖片旋轉等）
阿新 • • 發佈：2019-01-26
好久之前就想寫部落格，分享一些自己的總結體會，可總是因為工作忙+本人懶惰才一直沒寫。以後準備每月寫1~2篇部落格吧，希望自己能堅持下去。好了廢話不多說直接上canvas繪製效果圖及程式碼。
Canvas與Paint介紹
在Android中把Canvas當做畫布、Paint當做畫筆，那麼就可以在畫布上用畫筆繪製我們想要的任何東西。我們可以設定一些畫布/畫筆的屬性，比如：畫布的顏色、畫筆的抗鋸齒等。使用Canvas畫圖，一般繪圖都是在自定義view中使用，特別是onDraw(Canvas canvas)方法中，使用引數canvas這個畫布進行繪製圖型，該方法裡面就是繪製圖形的過程。如下圖所示就是我進行繪製的效果圖、在其下有對應原始碼。
Canvas繪製文字
- drawText(String s, int x, int y, Paint paint)
canvas繪製字型比較簡單，直接呼叫drawText(String s, int x, int y, Paint p)方法，其引數分別是：s->待繪製的文字，x->文字在螢幕上的橫座標，y->文字在螢幕上的縱座標，paint->繪製文字的畫筆。
// 建立畫筆
Paint textPaint = new Paint();
textPaint.setColor(Color.BLACK);//設定黑色 Canvas繪製圓、圓環
- drawCircle(int x, int y, int r, Paint paint)
canvas繪製圓環其原理就是繪製小圓覆蓋大圓形成圓環效果，先畫大圓在此基礎上再畫小圓。呼叫drawCircle(int r, int x, int y, Paint paint)方法來，其引數分別是：x->圓心在螢幕上的橫座標，y->圓心在螢幕上的縱座標，r->圓的半徑，paint->繪製文字的畫筆。在這裡畫筆抗鋸齒尤為重要，會使圓環邊緣光滑。
//建立紅畫筆
Paint redPaint = new Paint();
redPaint.setColor(Color.RED);// 設定紅色
redPaint.setAntiAlias(true); //抗鋸齒
redPaint.setStrokeWidth(4); //畫筆粗細為4畫素點
//建立黃畫筆
Paint yellowPaint = new Paint();
yellowPaint.setColor(Color.YELLOW);// 設定黃色
yellowPaint.setAntiAlias(true); //抗鋸齒
yellowPaint.setStrokeWidth(4); //畫筆粗細為4畫素點
//畫大圓
canvas.drawCircle(600, 150, 100, redPaint);
//畫小圓
canvas.drawCircle(600, 150, 80, yellowPaint);
//...
canvas.drawCircle(600, 150, 60, redPaint);
canvas.drawCircle(600, 150, 40, yellowPaint);
canvas.drawCircle(600, 150, 20, redPaint);
Canvas繪製直線、虛線
- drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
drawLine實現線的繪製。startX->起始端點的X座標，startY->起始端點的Y座標，stopX->終止端點的X座標，stopY->終止端點的Y座標。 - drawPath(Path path, Paint paint)
drawPath實現直線、虛線與多邊形繪製。
paint.setStyle ( Paint.Style.STROKE ) ; //繪製直線
paint.setPathEffect ( new DashPathEffect ( new float [ ] { 6, 3 }, 0 ) ) ; //設定虛線效果
在設定虛線效果裡的float陣列的意思是：先畫長度為6的實線再間隔長度為3的空白，之後一直重複這個單元。這個陣列的長度只要大於等於2就行，你可以設定多個數值，產生不同效果，最後這個0指的是與起始位置的偏移量。
//建立藍畫筆
Paint bluePaint = new Paint();
bluePaint.setStyle(Paint.Style.STROKE);/繪製直線
bluePaint.setColor(Color.BLUE);
bluePaint.setStrokeWidth(9); //畫筆粗細為9畫素點
//劃線
canvas.drawLine(400, 400, 600, 400, bluePaint);
//畫虛線
Path path = new Path();
path.moveTo(700, 400);
path.lineTo(900, 400);
PathEffect effects = new DashPathEffect(new float[]{16,4},0);
bluePaint.setPathEffect(effects);
canvas.drawPath(path, bluePaint);Canvas繪製矩形、圓角矩形
- Rect(int left, int top, int right, int bottom)
Rect是使用int型別作為數值引數，因在android中兩點確定一個矩形區域，引數是待繪製矩形區域左上和右下兩點的座標。 - RectF(float left, float top, float right, float bottom)
RectF是使用float型別作為數值引數，Rect和RectF繪製矩形精度不一樣，其引數也是是待繪製矩形區域左上和右下兩點的座標。 - drawRect(RectF rect, Paint paint-)
drawRect實現矩形繪製，rect->RectF物件，paint->畫筆。 - drawRoundRect (RectF rect, float rx, float ry, Paint paint)
drawRoundRect實現圓角矩形繪製，rect->RectF物件，rx->x方向上的圓角半徑，ry->y方向上的圓角半徑，paint->畫筆。
//建立綠畫筆
Paint greenPaint = new Paint();
greenPaint.setColor(Color.GREEN);
greenPaint.setAntiAlias(true); //抗鋸齒
//畫矩形
Rect rect = new Rect();
rect.top = 660;
rect.bottom = 900;
rect.left = 100;
rect.right = 500;
canvas.drawRect(rect, greenPaint);
//畫圓角矩形
RectF rectF = new RectF();
rectF.top = 660;
rectF.bottom = 900;
rectF.left = 600;
rectF.right = 1000;
canvas.drawRoundRect(rectF, 50, 40, greenPaint);Canvas繪製矩形文字居中
矩形內文字居中需要實現水平和垂直方向的居中。設定文字水平居中呼叫畫筆的setTextAlign(Paint.Align.CENTER)即可。設定文字垂直居中則要計算文字左上角Y軸座標值，參考大牛hursing寫的一篇博文可知實現居中文字左上角Y軸座標：
(rectF.bottom + rectF.top - fontMetrics.bottom - fontMetrics.top)/2
hursing分析實現矩形文字居中連結：http://blog.csdn.net/hursing/article/details/18703599。
//文字居中
Paint fondPaint = new Paint();
fondPaint.setColor(Color.RED);
fondPaint.setTextSize(60);
//設定文字水平居中
fondPaint.setTextAlign(Paint.Align.CENTER);
//設定文字垂直居中
FontMetricsInt fontMetrics = fondPaint.getFontMetricsInt();
float baseRect = (rect.bottom + rect.top - fontMetrics.bottom - fontMetrics.top)/2;
float baseRectF = (rectF.bottom + rectF.top - fontMetrics.bottom - fontMetrics.top)/2;
canvas.drawText("矩形居中", rect.centerX(), baseRect, fondPaint);
canvas.drawText("圓角~居中", rectF.centerX(), baseRectF, fondPaint);Canvas繪製圖片、圖片旋轉
- drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
drawBitmap實現圖片繪製， bitmap->圖片資源，left->偏移左邊的位置，top-> 偏移頂部的位置，paint->畫筆。
//獲取圖片
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ruler);
//畫圖片
canvas.drawBitmap(bitmap, 200,1050, null);
//畫旋轉90圖片
Matrix matrix = new Matrix();
matrix.postRotate(90);
// 建立新的圖片
Bitmap rotatedBitmap = Bitmap.createBitmap(bitmap, 0, 0,
bitmap.getWidth(), bitmap.getHeight(), matrix, true);
canvas.drawBitmap(rotatedBitmap, 600, 1050, null);
Canvas繪製多邊形
- drawOval(RectF oval, Paint paint)
drawOval實現橢圓繪製，oval->RectF物件，是左上和右下兩點確定的一塊橢圓區域，paint->畫筆。 - drawPath(Path path, Paint paint)
drawPath實現多邊形繪製。path->包含路徑資訊的Path物件，paint->畫筆。 - path常用方法：
moveTo(int x, int y)->其引數(x,y)代表起點座標。
lineTo(int x, int y)->連線上一個點到當前點(x,y)之間的直線。
setLastPoint(int x, int y)->重置最後一個點的位置為(x,y)。
close()->從最後一個點連線最初的一個點，形成一個閉合區域。
//畫橢圓
RectF oval=new RectF(100,1400,400,1550);
canvas.drawOval(oval, yellowPaint);
//畫三角
Path path2 = new Path();
path2.moveTo(800, 1400);// 此點為多邊形的起點
path2.lineTo(600, 1550);
path2.lineTo(1000, 1550);
path2.close(); // 使這些點構成封閉的多邊形
canvas.drawPath(path2, yellowPaint);
//畫多邊形
Path path3 = new Path();
path3.moveTo(500, 1600);// 此點為多邊形的起點
path3.lineTo(300, 1700);
path3.lineTo(500, 1800);
path3.lineTo(700, 1700);
path3.close(); // 使這些點構成封閉的多邊形
canvas.drawPath(path3, yellowPaint);