讲解文字测量之前我们先定义一个圆环，如图：
实现的代码如下：
//绘制环
paint.setStyle(Paint.Style.STROKE);
paint.setColor(CIRCLE_COLOR);
paint.setStrokeWidth(RING_WIDTH);
canvas.drawCircle(getWidth()/2,getHeight()/2,RADIUS,paint);
//绘制进度条
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);
通过这个api可以实现进度环带圆角
paint.setStrokeCap(Paint.Cap.ROUND)
这其实也很简单，接下来我们根据这一段代码实现文字显示在圆环的中心，也在我们日常项目中，尤其是做过图形的 ，应该经常会遇到这样的需求，由于现在有很多的三方库已经实现了这些需求，但为了学习它是如何实现的，这也是比较有必要的。
绘制文字使用的api canvas.drawText()
设置文字字体api：
paint.setTypeface(Typeface.createFromAsset(getResources().getAssets(),"Quicksand-Regular.ttf"))
设置填充样式：
paint.setStyle(Paint.Style.FILL)
运行图片结果如下：
但这不是我们理想得到的效果，虽然使用paint.setTextAlign(Paint.Align.CENTER),横向是居中了，但纵向却没有。我们显示的文字不是规则图形，而显示的纵向的高度getHeight()/2显示的位置是文字的baseline处。
解决这样的问题有两种方法
1.使用TextBounds,结合图像分析下，相对偏移来讲，上方是负值，下方是正值，左边是负值，右边是正值。
代码如下：
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
运行效果：
2.使用FontMetrics
使用步骤：
第一步：实例化FontMetrics Paint.FontMetrics metrics = new Paint.FontMetrics();
第二步：paint.getFontMetrics(metrics);
第三步：计算偏移值float offset = (metrics.ascent+metrics.descent)/2
第四步跟第一种方法一样就是在纵向减掉偏移值即可
有人会问了，这两种方法有什么区别呢？区别在于第一种适用于静态文字，第二种适用于动态文字。
文字贴边
代码如下：
//绘制文字：贴边
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);
文字贴边要注意的是由于文字自带像素，贴边的时候可能会没对齐，这时候我们可以使用getTextBounds得到左边空白处的距离减掉就可以了。
多行绘制文字
多行文字绘制可以使用StaticLayout
具体代码实现如下：
StaticLayout staticLayout = new StaticLayout(text,textPaint,getWidth(), Layout.Alignment.ALIGN_NORMAL,
1,0,false);
staticLayout.draw(canvas);
我们可以模拟一个新闻界面，有图片和文字，文字在图片区域边缘自动换行
在新闻界面中应该是比较常见的。实现效果如图：
首先我们先绘制第一行，因为在绘制的时候可能会出现文字越界的情况，所以在选择api的时候需要选择如下api。start和end表示的是绘制文字的开始和结束。
/**
* 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);
}
还有就是我们需要测量文字显示到什么时候结束，就要用到paint.breakText并返回int类型的测量字符个数。这个我们就可以作为绘制文字结束下标的参数。
int count = paint.breakText(text,true,getWidth(),measureWidth);
canvas.drawText(text,0,count,0,paint.getFontSpacing(),paint);
一行绘制也就完成了，如果让它显示多行呢？这里我们可以利用drawText的第二和第三参数，通过查看源码我们会知道，这里的参数start 和end表示的是字符的开始和结束的下标。我们可以通过这个来循环绘制就可以了。
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);
}
运行看下结果：
但这里有个问题也就是图片被遮住了，跟我们想要显示的效果不一样。其实到这里差不多已经完成了，就差最后一步，我们只需要判断如果文字显示到图片区域边界时换行就可以了，我们可以使用Paint.FontMetrics来确定文字显示的边界像素。在定义一个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);
}
运行结果如下：
Canvas的几何变换
1.translate(x,y) ------- 平移
2.rotate(degree) ------- 旋转
3.scale(x,y) ------- 放缩
4.skew(x,y) ------- 错切
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轴内是正外是负
几何变换差不多就这些，接着来做个小栗子🌰
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做旋转，使用clipRect切图达到的一个折叠图片的效果，大家可以到我的github找到文字测量和几何变换的demo中看下效果，后面会针对该翻转做一个属性动画的翻转效果。
到这里差不多就写完了，源码已经上传
源码
