Android - Canvas 簡單總結

在自定義控件時，經常需要使用canvas、paint等，在canvas類中，繪畫基本都是靠drawXXX()方法來完成的，在這些方法中，很多時候都需要用到paint類型的參數，本文先對paint類常用的一些設置做個簡單總結

paint 屬性設置簡單總結

圖形繪制相關：

public void set(Paint src)  根據已有畫筆的屬性進行賦值

public void setColor(int color) 設置顏色

public void setAlpha(int alpha) 設置透明度，alpha為透明度,取值范圍為0~255,數值越小越透明

public void setARGB(int a, int r, int g, int b)  設置透明度和顏色，a代表透明度，r，g，b代表顏色值

public void setAntiAlias(boolean aa) 設置是否使用抗鋸齒功能，比較耗資源，減慢繪制速度

public void setDither(boolean dither) 設定是否使用圖像抖動，如true，繪制出來的圖片顏色更飽滿、清晰  

public void setStyle(android.graphics._Original_Paint.Style style) 設置畫筆的樣式，為FILL，FILL_OR_STROKE，或STROKE  

以下這段文字來源於網絡，謝謝作者！

當我們在調用drawCircle、drawOval、drawArc、drawRect等方法時，我們既可以繪制對應圖形的填充面，也可以只繪制該圖形的輪廓線，控制的關鍵在於畫筆Paint中的style。Paint通過setStyle方法設置要繪制的類型，style有取三種值：Paint.Style.FILL、Paint.Style.STROKE和Paint.Style.FILL_AND_STROKE。

當style為FILL時，繪制是填充面，FILL是Paint默認的style；

當style為STROKE時，繪制的是圖形的輪廓線；

當style為FILL_AND_STROKE時，同時繪制填充面和輪廓線，不過這種情況用的不多，因為填充面和輪廓線是用同一種顏色繪制的，區分不出輪廓線的效果。

public void setStrokeCap(Cap cap) 

當畫筆樣式為STROKE或FILL_OR_STROKE時，設置筆刷的圖形樣式，如圓形樣式  Cap.ROUND,或方形樣式Cap.SQUARE  

public void setStrokeWidth(float width) 當畫筆樣式為STROKE或FILL_OR_STROKE時，設置筆刷的粗細度       

文字繪制相關：

public void setTextSize(float textSize) 設置文字大小

public void setTextScaleX(float scaleX) 設置文字x軸的縮放比例，可以實現文字的拉伸效果  

public void setTextSkewX(float skewX)  設置文字傾斜弧度  

public void setUnderlineText(boolean flag) 設置文字下划線效果    

public void setStrikeThruText(boolean flag) 設置刪除線效果

public Typeface setTypeface(Typeface typeface) 設置字體風格    

public void setTextAlign(android.graphics._Original_Paint.Align align) 設置文字的對齊方向  

其中有兩個屬性設置需要作說明：

1、public Typeface setTypeface(Typeface typeface) ，接收參數為 Typeface對象，在Typeface.java類中，比較簡單的，有defaultFromStyle方法返回Typeface對象：

public static Typeface defaultFromStyle(int style) {}

2、public void setTextAlign(android.graphics._Original_Paint.Align align) 設置文字的對齊方向，接收的參數為Paint的內部枚舉類Align的值，可選LEFT、CENTER和RIGHT。

下邊是文字繪制時常用的屬性設置例子：

public void draw(Canvas canvas) {
    super.draw(canvas);
    paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
    paint.setColor(Color.RED);
    paint.setTextSize(41);
    paint.setTextAlign(Align.CENTER);
    paint.setTextScaleX(2.5f);
    paint.setTextSkewX(-0.5f);
    paint.setUnderlineText(true);
    paint.setStrikeThruText(true);
    canvas.drawText("hwgt的博客", 0, 41, paint);
    ... ...
}

另外，需要注意的是：Canvas的drawText()方法中，如不setTextAlign(... ...)的話，第二個參數 x 默認是字符串的左邊的位置，第三個參數則固定為這個字符串的baseline的位置。

 

Canvas屬性與方法

首先列出canvas以draw開頭的方法：

設置ARGB、顏色填充畫布：

public void drawARGB(int a, int r, int g, int b) {}
public void drawColor(int color) {}
public void drawRGB(int r, int g, int b) {}
canvas.drawARGB(50, 255, 0, 0);//參數即為ARGB的值

畫點：

public native void drawPoint(float x, float y, Paint paint);
  //參數比較明顯，就是點的坐標，需要注意的是，在繪制點之前，需要設置畫筆的寬度，否則不能畫出來
  paint.setStrokeWidth(13);
  //另外，還可以設置畫筆的樣式，來指定所畫的點的樣式，圓形還是方形
  paint.setStrokeCap(Paint.Cap.ROUND);//或者paint.setStrokeCap(Paint.Cap.BUTT);
  canvas.drawPoint(100, 100, paint);

畫直線：

public void drawLine(float startX, float startY, float stopX, float stopY, Paint paint) {}
canvas.drawLine(100, 100, 500, 500, paint);//參數為起點和終點的XY坐標

畫圓：

public void drawCircle(float cx, float cy, float radius, Paint paint) {}
canvas.drawCircle(200, 200, 100, paint);//參數為圓心坐標和半徑

繪制矩形：

public void drawRect(float left, float top, float right, float bottom, Paint paint) {}
public void drawRect(RectF rect, Paint paint) {}
public void drawRect(Rect r, Paint paint) {}
// RectF 和 Rect  都可用來定義一個矩形區域，主要區別是參數類型不同，一個是int類型，一個是float類型
private RectF mRectF;
mRectF = new RectF(100, 100, 200, 500);
canvas.drawRect(mRectF, paint);

繪制圓角矩形：

public void drawRoundRect(RectF rect, float rx, float ry, Paint paint) {}
private RectF mRectF;
mRectF = new RectF(100, 100, 500, 500);//定義一個區域
canvas.drawRoundRect(mRectF, 20, 50, paint); //第二、三個參數分別定義x和y方向的圓角弧度

繪制一個區域的內切圓或橢圓（視所定義的矩形而定）：

public void drawOval(RectF oval, Paint paint) {}
private RectF mRectF;
mRectF = new RectF(100, 100, 200, 500);
canvas.drawOval(mRectF, paint);

繪制弧形區域：

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint) {}
private RectF mRectF;
mRectF = new RectF(100, 100, 200, 200);//定義一個矩形區域
canvas.drawArc(mRectF, 0, 90, false, paint);
//第二個參數為起始弧度，第三個為終止弧度，第四個為顯示方式

繪制路徑 — Path 的使用：

public void drawPath(Path path, Paint paint) {}
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(3);
mPath = new Path();
mPath.moveTo(100, 100);
mPath.lineTo(200, 100);
mPath.lineTo(150, 150);
mPath.lineTo(150, 350);
mPath.close();
canvas.drawPath(mPath, paint);

繪制路徑，即指定幾個點的坐標，然后按照順序將這些點連接起來，那么，首先需要指定起點，使用moveTo方法，如果沒有使用moveTo方法指定起點的話，默認起點為（0,9），然后用lineTo方法指定需要經過的點，最后，如果起點和終點的坐標不一樣，並且需要將起點和終點連接起來的話，就調用close方法，如不調用close方法的話，起點和終點是不會被連接起來的。

繪制文本：

public void drawText(String text, float x, float y, Paint paint) {}
public void drawText(char[] text, int index, int count, float x, float y, Paint paint) {}
public void drawText(String text, int start, int end, float x, float y, Paint paint) {}
canvas.drawText("hwgt", 100, 100, paint);
canvas.drawText(new char [] {'h','w','g','t','3','1','3','3'}, 2, 3, 100, 100, paint);
canvas.drawText("hwgt3133", 2, 4, 100, 100, paint); //含頭不含尾

按照指定點的坐標繪制文本：

public void drawPosText(String text, float[] pos, Paint paint) {}
public void drawPosText(char[] text, int index, int count, float[] pos, Paint paint) {}
canvas.drawPosText("hwgt", new float[]{50.0f,50.0f,100.0f,100.0f,250.0f,250.0f,500.0f,500.0f,}, paint);
canvas.drawPosText(new char[]{'h','w','g','t'}, 3, 1, new float[]{50.0f,50.0f,100.0f,100.0f,250.0f,250.0f,500.0f,500.0f,}, paint);
//推薦使用第二個方法，if (index < 0 || index + count > text.length || count*2 > pos.length)，就會報錯

按照指定的路徑繪制文本：

public void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint) {}

canvas的save和restore方法：

在繪制圖形的過程中，會需要對畫布進行旋轉，縮放，平移等操作，但對畫布進行比如平移操作之后，會對以后畫上去的內容也產生影響，有時，我們只希望這種平移或是旋轉操作只是臨時作用於畫布上的某些內容，這個時候就可以使用save和restore方法，save和restore方法一般是配對使用的，例如：

paint.setFakeBoldText(true); // 將畫筆設置為粗體
canvas.drawText("00000000", 0, 75, paint);
canvas.save();
canvas.translate(0, 250);
canvas.drawText("||||||||||||||||", 0, 75, paint);
canvas.restore();
canvas.drawText("—————", 0, 75, paint);

去掉save和restore方法即能看出效果。

 

暫時總結到這里，后續再做補充