自由筆記-AndroidView模塊之自定義View畫布相關

1、Paint的基本實用方法和技巧

（1）基本的使用

1.1 負責圖形繪製相關

//重置

mPaint.reset();

mPaint.setColor(Color.RED);

mPaint.setAlpha(255);

//設置畫筆的樣式

mPaint.setStyle(Paint.Style.FILL);//填充內容

mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

mPaint.setStyle(Paint.Style.STROKE);//描邊

//畫筆的寬度

mPaint.setStrokeWidth(50);

//線帽

mPaint.setStrokeCap(Paint.Cap.BUTT);//沒有

mPaint.setStrokeCap(Paint.Cap.ROUND);//圓形

mPaint.setStrokeCap(Paint.Cap.SQUARE);//方形

mPaint.setStrokeJoin(Paint.Join.MITER);//銳角

mPaint.setStrokeJoin(Paint.Join.ROUND);//圓弧

mPaint.setStrokeJoin(Paint.Join.BEVEL);//直線

//線段的連接處的樣式

mPaint.setStrokeJoin(Paint.Join.MITER);//銳角

mPaint.setStrokeJoin(Paint.Join.ROUND);//圓弧

mPaint.setStrokeJoin(Paint.Join.BEVEL);//直線

 

防鋸齒，會損失一定的性能

mPaint.setAntiAlias(true);

 

 

1.2 負責文字繪製相關

//獲得字符行間距

mPaint.getFontSpacing();

//獲得字符之間的間距

mPaint.getLetterSpacing();

mPaint.setLetterSpacing(letterSpacing)//設置

//設置文本刪除線

mPaint.setStrikeThruText(true);

//是否設置下劃線

mPaint.setUnderlineText(true);

//設置文本大小

mPaint.setTextSize(textSize);

mPaint.getTextSize();

mPaint.setTypeface(Typeface.BOLD);//設置字體類型

Typeface.ITALIC

Typeface.create(familyName, style)//加載自定義字體

//文字傾斜 默認0，官方推薦的-0.25f是斜體

mPaint.setTextSkewX(-0.25f);

//文本對齊方式

mPaint.setTextAlign(Align.LEFT);

mPaint.setTextAlign(Align.CENTER);

mPaint.setTextAlign(Align.RIGHT);

//計算制定長度的字符串（字符長度、字符個數、顯示的時候真實的長度）

int breadText = mPaint.breakText(text, measureForwards, maxWidth, measuredWidth)

mPaint.setTextSize(50);

float[] measuredWidth = new float[1];

int breakText = mPaint.breakText(str, true, 200, measuredWidth);

Log.i("RICKY", "breakText="+breakText+", str.length()="+str.length()+", measredWidth:"+measuredWidth[0]);

// Rect bounds獲取文本的矩形區域（寬高）

mPaint.getTextBounds(text, index, count, bounds)

mPaint.getTextBounds(text, start, end, bounds)

//獲取文本的寬度，和上面類似，但是是一個比較粗略的結果

float measureText = mPaint.measureText(str);

//獲取文本的寬度，和上面類似，但是是比較精準的。

float[] measuredWidth = new float[10];

//measuredWidth得到每一個字符的寬度；textWidths字符數

int textWidths = mPaint.getTextWidths(str, measuredWidth);

mPaint.getTextWidths(text, start, end, widths)

=====================基線的問題=====================

 

FontMetrics fontMetrics = mPaint.getFontMetrics();

fontMetrics.top;

fontMetrics.ascent;

fontMetrics.descent;

fontMetrics.bottom;

所有的四個值都是以基線baseLine爲基準來計算的。baseline以上的就是負的；以下的是正的。

 

在做自定義控件的時候canvas.drawText(x,y),繪製文本的時候並不是text的左上角，而是以baseline爲基準的。

 

1）實例：指定左上角的頂點座標 繪製文本

公式： float baselineY = Y - fontMetrics.top; Y表示做左上角座標

 

2）實例：指定中間位置，繪製文本 centerY表示中線座標

公式： float baselineY = centerY + (fontMetrics.bottom-fontMetrics.top)/2 - fontMetrics.bottom

=getHeight()/2-(paint.descent()+paint.ascent())/2

 

 

2、Canvas：畫布、畫板。

 

canvas.drawLine(0, 0, 100, 100, paint);//繪製直線

float []pts = {0,0,100,100,200,200,300,300};

canvas.drawLines(pts, paint);

canvas.drawPoints(pts, paint);//點

RectF r = new RectF(100, 100, 400, 500);

canvas.drawRect(r, paint); //矩形

canvas.drawRect(left, top, right, bottom, paint);//矩形

canvas.drawRoundRect(r, 30, 30, paint);//圓角矩形

canvas.drawCircle(300, 300, 200, paint);//畫圓

canvas.drawOval(r, paint);//畫橢圓

canvas.drawArc(r, 0, 90, true, paint);//畫圓弧

 

Path路徑來繪製線條

 

Path path = new Path();

path.moveTo(100, 100);

path.lineTo(200, 100);

path.lineTo(200, 200);

path.cubicTo(250, 200, 350, 300, 450, 400);

path.close();

canvas.drawPath(path, paint);

 

//--------------------Canvas變換技巧--------------------------

//1.平移（Translate）

RectF r = new RectF(0, 0, 400, 500);

canvas.drawRect(r, paint);

paint.setColor(Color.BLUE);

//將畫布平移

canvas.translate(50, 50);

//當canvas執行drawXXX的時候就會新建一個新的畫布圖層

canvas.drawRect(r, paint);

RectF r2 = new RectF(0, 0, 400, 500);

paint.setColor(Color.RED);

//雖然新建了一個畫布圖層，但是還是會沿用之前設置的平移變換。不可逆的。（save和restore來解決）

canvas.drawRect(r2, paint);

//2.縮放Scale

RectF r = new RectF(0, 0, 400, 500);

canvas.drawRect(r, paint);

paint.setColor(Color.BLUE);

//sx,sy：分別對x/y方向的一個縮放係數,畫布的縮放會導致裏面所有的繪製的東西都會有一個縮放效果

canvas.scale(1.5f, 0.5f);

canvas.drawRect(r, paint);

3.旋轉Rotate

RectF r = new RectF(200, 200, 400, 500);

canvas.drawRect(r, paint);

paint.setColor(Color.BLUE);

canvas.rotate(45);

canvas.rotate(45, 200, 200);

canvas.drawRect(r, paint);

4.斜拉畫布Skew

RectF r = new RectF(200, 200, 400, 500);

canvas.drawRect(r, paint);

paint.setColor(Color.BLUE);

//sx,sy傾斜度：X軸方向上傾斜60度，tan60=根號3

canvas.skew(1.73f, 0);

canvas.drawRect(r, paint);

//5.裁剪畫布clip

RectF r = new RectF(200, 200, 400, 500);

canvas.drawRect(r, paint);

paint.setColor(Color.BLUE);

canvas.clipRect(new Rect(250, 250, 300, 400));

canvas.drawColor(Color.YELLOW);

 

Canvas畫布的正確的理解：

1）當canvas執行drawXXX的時候就會新建一個新的畫布圖層

canvas.drawRect(r, paint);

2）雖然後面新建了一個畫布圖層，但是還是會沿用之前設置的平移變換。不可逆的。（save和restore來解決）

canvas.translate(50, 50);

//當canvas執行drawXXX的時候就會新建一個新的畫布圖層

canvas.drawRect(r, paint);

RectF r2 = new RectF(0, 0, 400, 500);

paint.setColor(Color.RED);

//雖然新建了一個畫布圖層，但是還是會沿用之前設置的平移變換。不可逆的。（save和restore來解決）

canvas.drawRect(r2, paint);

 

 

3、PathMeasure

這是一個用來測量Path的類，可以獲取Path路徑中相關的信息，比如任意長度一點的座標，角度值、截取片段等。

利用這個類結合Path可以做出很多不錯的動畫效果。具體用法參考自行百度吧，這裏就不一一列舉了