講解文字測量之前我們先定義一個(gè)圓環(huán)陨囊，如圖：
實(shí)現(xiàn)的代碼如下：
//繪制環(huán)
paint.setStyle(Paint.Style.STROKE);
paint.setColor(CIRCLE_COLOR);
paint.setStrokeWidth(RING_WIDTH);
canvas.drawCircle(getWidth()/2,getHeight()/2,RADIUS,paint);
//繪制進(jìn)度條
paint.setColor(HIGHLIGHT_COLOR);
paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawArc(getWidth()/2-RADIUS,getHeight()/2-RADIUS,
getWidth()/2+RADIUS,getHeight()/2+RADIUS,-90,225,false,paint);
paint.setStrokeCap(Paint.Cap.BUTT);
通過這個(gè)api可以實(shí)現(xiàn)進(jìn)度環(huán)帶圓角
paint.setStrokeCap(Paint.Cap.ROUND)
這其實(shí)也很簡單，接下來我們根據(jù)這一段代碼實(shí)現(xiàn)文字顯示在圓環(huán)的中心很洋，也在我們?nèi)粘ｍ?xiàng)目中溶耘，尤其是做過圖形的 衣形，應(yīng)該經(jīng)常會遇到這樣的需求能犯，由于現(xiàn)在有很多的三方庫已經(jīng)實(shí)現(xiàn)了這些需求旺聚，但為了學(xué)習(xí)它是如何實(shí)現(xiàn)的缀拭，這也是比較有必要的咳短。
繪制文字使用的api canvas.drawText()
設(shè)置文字字體api：
paint.setTypeface(Typeface.createFromAsset(getResources().getAssets(),"Quicksand-Regular.ttf"))
設(shè)置填充樣式：
paint.setStyle(Paint.Style.FILL)
運(yùn)行圖片結(jié)果如下：
但這不是我們理想得到的效果，雖然使用paint.setTextAlign(Paint.Align.CENTER),橫向是居中了智厌，但縱向卻沒有诲泌。我們顯示的文字不是規(guī)則圖形，而顯示的縱向的高度getHeight()/2顯示的位置是文字的baseline處铣鹏。
解決這樣的問題有兩種方法
1.使用TextBounds,結(jié)合圖像分析下敷扫，相對偏移來講，上方是負(fù)值诚卸，下方是正值葵第，左邊是負(fù)值，右邊是正值合溺。
代碼如下：
String text = "abab";
paint.getTextBounds(text,0,text.length(),bound);
float offset = (bound.top + bound.bottom)/2f;
canvas.drawText(text,getWidth()/2,getHeight()/2 - offset,paint);
這里的偏移值是文字的offset = (上頂+下底)/2
運(yùn)行效果：
2.使用FontMetrics
使用步驟：
第一步：實(shí)例化FontMetrics Paint.FontMetrics metrics = new Paint.FontMetrics();
第二步：paint.getFontMetrics(metrics);
第三步：計(jì)算偏移值float offset = (metrics.ascent+metrics.descent)/2
第四步跟第一種方法一樣就是在縱向減掉偏移值即可
有人會問了卒密，這兩種方法有什么區(qū)別呢？區(qū)別在于第一種適用于靜態(tài)文字棠赛，第二種適用于動(dòng)態(tài)文字哮奇。
文字貼邊
代碼如下：
//繪制文字：貼邊
paint.setTextAlign(Paint.Align.LEFT);
paint.setTextSize(DisplayUtils.dpToPx(150));
paint.getTextBounds(text,0,text.length(),bound);
canvas.drawText(text,-bound.left,-bound.top,paint);
paint.setTextSize(DisplayUtils.dpToPx(15));
paint.getTextBounds(text,0,text.length(),bound);
canvas.drawText(text,-bound.left,-bound.top+paint.getFontSpacing(),paint);
文字貼邊要注意的是由于文字自帶像素，貼邊的時(shí)候可能會沒對齊睛约，這時(shí)候我們可以使用getTextBounds得到左邊空白處的距離減掉就可以了鼎俘。
多行繪制文字
多行文字繪制可以使用StaticLayout
具體代碼實(shí)現(xiàn)如下：
StaticLayout staticLayout = new StaticLayout(text,textPaint,getWidth(), Layout.Alignment.ALIGN_NORMAL,
1,0,false);
staticLayout.draw(canvas);
我們可以模擬一個(gè)新聞界面，有圖片和文字辩涝，文字在圖片區(qū)域邊緣自動(dòng)換行
在新聞界面中應(yīng)該是比較常見的贸伐。實(shí)現(xiàn)效果如圖：
首先我們先繪制第一行，因?yàn)樵诶L制的時(shí)候可能會出現(xiàn)文字越界的情況怔揩，所以在選擇api的時(shí)候需要選擇如下api捉邢。start和end表示的是繪制文字的開始和結(jié)束。
/**
* Draw the text, with origin at (x,y), using the specified paint. The origin is interpreted
* based on the Align setting in the paint.
*
* @param text The text to be drawn
* @param start The index of the first character in text to draw
* @param end (end - 1) is the index of the last character in text to draw
* @param x The x-coordinate of the origin of the text being drawn
* @param y The y-coordinate of the baseline of the text being drawn
* @param paint The paint used for the text (e.g. color, size, style)
*/
public void drawText(@NonNull String text, int start, int end, float x, float y,
@NonNull Paint paint) {
super.drawText(text, start, end, x, y, paint);
}
還有就是我們需要測量文字顯示到什么時(shí)候結(jié)束商膊，就要用到paint.breakText并返回int類型的測量字符個(gè)數(shù)伏伐。這個(gè)我們就可以作為繪制文字結(jié)束下標(biāo)的參數(shù)。
int count = paint.breakText(text,true,getWidth(),measureWidth);
canvas.drawText(text,0,count,0,paint.getFontSpacing(),paint);
一行繪制也就完成了翘狱，如果讓它顯示多行呢秘案？這里我們可以利用drawText的第二和第三參數(shù)，通過查看源碼我們會知道潦匈，這里的參數(shù)start 和end表示的是字符的開始和結(jié)束的下標(biāo)阱高。我們可以通過這個(gè)來循環(huán)繪制就可以了。
int length = text.length();
float yOffset = paint.getFontSpacing();
for (int start = 0, count; start < length; start += count, yOffset += paint.getFontSpacing()) {
count = paint.breakText(text, start,length,true, getWidth(), measureWidth);
canvas.drawText(text, start, start + count, 0,yOffset , paint);
}
運(yùn)行看下結(jié)果：
但這里有個(gè)問題也就是圖片被遮住了茬缩，跟我們想要顯示的效果不一樣赤惊。其實(shí)到這里差不多已經(jīng)完成了，就差最后一步凰锡，我們只需要判斷如果文字顯示到圖片區(qū)域邊界時(shí)換行就可以了未舟，我們可以使用Paint.FontMetrics來確定文字顯示的邊界像素。在定義一個(gè)useableWidth變量顯示文字顯示的寬度
for (int start = 0, count; start < length; start += count, yOffset += paint.getFontSpacing()) {
float textTop = metrics.top + yOffset;
float textBottom = metrics.bottom + yOffset;
if (textTop>IMAGE_PADDING && textTop<IMAGE_WIDTH + IMAGE_PADDING ||
textBottom>IMAGE_PADDING && textBottom<IMAGE_WIDTH + IMAGE_PADDING){
useableWidth = getWidth()-IMAGE_WIDTH;
}else{
useableWidth = getWidth();
}
count = paint.breakText(text, start,length,true, useableWidth, measureWidth);
canvas.drawText(text, start, start + count, 0,yOffset , paint);
}
運(yùn)行結(jié)果如下：
Canvas的幾何變換
1.translate(x,y) ------- 平移
2.rotate(degree) ------- 旋轉(zhuǎn)
3.scale(x,y) ------- 放縮
4.skew(x,y) ------- 錯(cuò)切
Matrix的幾何變換
1.preTranslate(x,y)/postTranslate(x,y)
2.preRotate(degree)/postRotate(degree)
3.preScale(x,y)/postScale(x,y)
4.preSkew(x,y)/postSkew(x,y)
Camera的幾何變換
1.rotate()/rotateX()/roateY()/rotateZ()
2.translate()
3.setLocation()
三維空間z軸內(nèi)是正外是負(fù)
幾何變換差不多就這些掂为，接著來做個(gè)小栗子??
canvas.save();
canvas.translate(IMAGE_PADDING+IMAGE_WIDTH/2,IMAGE_PADDING+IMAGE_WIDTH/2);
canvas.rotate(-30);
canvas.clipRect(-IMAGE_WIDTH,-IMAGE_WIDTH,IMAGE_WIDTH,0);
canvas.rotate(30);
canvas.translate(-(IMAGE_PADDING+IMAGE_WIDTH/2),-(IMAGE_PADDING+IMAGE_WIDTH/2));
canvas.drawBitmap(image, IMAGE_PADDING, IMAGE_PADDING, paint);
canvas.restore();
canvas.save();
canvas.translate(IMAGE_PADDING+IMAGE_WIDTH/2,IMAGE_PADDING+IMAGE_WIDTH/2);
canvas.rotate(-30);
camera.applyToCanvas(canvas);
canvas.clipRect(-IMAGE_WIDTH,0,IMAGE_WIDTH,IMAGE_WIDTH);
canvas.rotate(30);
canvas.translate(-(IMAGE_PADDING+IMAGE_WIDTH/2),-(IMAGE_PADDING+IMAGE_WIDTH/2));
canvas.drawBitmap(image, IMAGE_PADDING, IMAGE_PADDING, paint);
canvas.restore();
這里的例子是使用camera做旋轉(zhuǎn)裕膀，使用clipRect切圖達(dá)到的一個(gè)折疊圖片的效果，大家可以到我的github找到文字測量和幾何變換的demo中看下效果勇哗，后面會針對該翻轉(zhuǎn)做一個(gè)屬性動(dòng)畫的翻轉(zhuǎn)效果昼扛。
到這里差不多就寫完了，源碼已經(jīng)上傳
源碼
