Android開發之Paint的高級使用

前言：相信大家在繪製View的時候，對Paint使用已經不陌生了，今天我給大家總結一下Paint的用法，一些注意事項，以及Paint繪製文字的高級用法。

---------------------分割線-------------------

使用注意事項：

1.初始化畫筆的時候要在init()裏面初始化，切不可在onDraw裏面初始化畫筆

2.可以把固定不變的顏色、形狀等在init裏面初始化。

2.在onDraw裏面操作畫筆的時候記得paint.reset();重置一下。

---------------------分割線-------------------

在這裏做總結一下paint常用的功能：

        //重置
        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.setColor(Color.RED);
        canvas.drawCircle(100, 100, 100, mPaint);

效果圖：（注意：默認效果是實心的）

其他形狀可以自行設置

---------------------------測試二：--------------------------

可能你也注意到了，關於線帽和畫筆樣式有什麼效果，ok我們使用Path來做一個小測試：

 mPaint.reset();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);//描邊
        mPaint.setStrokeWidth(50);
        mPaint.setStrokeCap(Paint.Cap.ROUND);//圓的
        //測試1
        Path path = new Path();
        path.moveTo(100, 100);
        path.lineTo(300, 100);
        path.lineTo(100, 300);
        mPaint.setStrokeJoin(Paint.Join.MITER);
        canvas.drawPath(path, mPaint);

        path.moveTo(100, 400);
        path.lineTo(300, 500);
        path.lineTo(100, 700);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        canvas.drawPath(path, mPaint);

        path.moveTo(100, 800);
        path.lineTo(300, 800);
        path.lineTo(100, 1100);
        mPaint.setStrokeJoin(Paint.Join.BEVEL);
        canvas.drawPath(path, mPaint);

效果圖：

其他效果可以自行設置。

----------------------分割線----------------------------------

關於文字繪製的一些常用方法：

	//獲得字符行間距
        mPaint.getFontSpacing();
        //獲得字符之間的距離
        mPaint.getLetterSpacing();
        mPaint.getLetterSpacing(letterSpacing);//設置
        //設置文本刪除線
        mPaint.setStrikeThruText(true);
        //是否設置下劃線
        mPaint.setUnderlineText(true);
        //設置文本大小
        mPaint.setTextSize(textSize);
        mPaint.getTextSize();
        mPaint.setTypeface(Typeface.BOLD);//設置字體類型
//        Typeface.ITALIC;
//        Typeface.create(familyName,style);//加載自定義字體
        //文字傾斜 默認0，官方推薦的-0.25是斜體
        mPaint.setTextSkewX(-0.25f);
        //文本對齊方式
        mPaint.setTextAlign(Paint.Align.LEFT);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mPaint.setTextAlign(Paint.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);


        // 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);

以上皆是繪製文字的常用api，大家可以自行測試。

--------------------------分割線-----------------------

關於文本Metrics的使用（重點、難點）：

 mPaint.setTextSize(80);
        mPaint.setTextAlign(Paint.Align.LEFT);
        mPaint.setColor(Color.BLUE);
        canvas.drawText(str, 0, 200, mPaint);

        //文本Metrics
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        float top = fontMetrics.top;
        float ascent = fontMetrics.ascent;
        float descent = fontMetrics.descent;
        float bottom = fontMetrics.bottom;
        float leading = fontMetrics.leading;

        Log.i("--top-->", top + "");
        Log.i("--ascent-->", ascent + "");
        Log.i("--descent-->", descent + "");
        Log.i("--bottom-->", bottom + "");
        Log.i("--leading-->", leading + "");

我們設置的文本座標是（0,200），文本大小是80,。

ok看下我們獲取的top、ascent、descent、bottom、leading值：

ok由此我們可以簡單得出的是leading值爲0，leading上爲負數，下面爲正數，然後在根據文本座標，我們可以得到top，ascent，descent，bottom，和leading的線：

	mPaint.setColor(Color.BLUE);
        canvas.drawLine(0, 200 + top, 2000, 200 + top, mPaint);//top線

        mPaint.setColor(Color.BLACK);
        canvas.drawLine(0, 200 + ascent, 2000, 200 + ascent, mPaint);//ascent線

        mPaint.setColor(Color.RED);
        canvas.drawLine(0, 200 + leading, 2000, 200 + leading, mPaint);//leading或baselineY

        mPaint.setColor(Color.BLUE);
        canvas.drawLine(0, 200 + descent, 2000, 200 + descent, mPaint);//descent線

        mPaint.setColor(Color.BLACK);
        canvas.drawLine(0, 200 + bottom, 2000, 200 + bottom, mPaint);//bottom線

如圖所示：

ok這裏得出一個疑惑點，字體的中間線如何獲取，想獲取中線線其實求出中間線的y座標即可！

根據圖所示，我們可以分析出center線在descent線和ascent線的中間（如有錯誤，歡迎指出）。

獲取中間線的座標，我們必須先獲取字體的真實高度：

 	//字體高度
        float textHeight = (200 + descent) - (200 + ascent);
        Log.i("--textHeight-->", textHeight + "");

然後獲取center線的座標：

        //中間
        float centerY = (descent - textHeight / 2) + 200;
        mPaint.setColor(Color.RED);
        canvas.drawLine(0, centerY, 2000, centerY, mPaint);//center線

ok這樣的話我們就找到了文字的關鍵的幾個線了，我們就可以自由的利用這些線進行各種操作了。

----------------------------完--------------------------