很久之前的笔记
一.基线
1.概述
在本子上写字母时,总是要写在四格线内,如下图
image.png
而绘制文本时,也是需要规则的,这个规则就是基线,如下图,基线即四格线中的第三条线
image.png
2.canvas.drawText()
/**
* text：要绘制的文字
* x：绘制原点x坐标
* y：绘制原点y坐标,代表的是基线所处y点
* paint：用来做画的画笔
**/
public void drawText(String text, float x, float y, Paint paint)
2.1.setTextAlign()
设置x坐标位于text矩形的位置
/**
* align：相对位置
* LEFT：x坐标位于矩形的左边
* CENTER：x坐标位于矩形的中间
* RIGHT坐标位于矩形的右边
**/
public void setTextAlign(Align align)
二.四格线与FontMetrics
1.概述
image.png
- ascent: 系统建议的，绘制单个字符时，字符应当的最高高度所在线
- descent:系统建议的，绘制单个字符时，字符应当的最低高度所在线
- top: 可绘制的最高高度所在线
- bottom: 可绘制的最低高度所在线
2.FontMetrics
2.1.概述
Android提供的一个类,用于获取四格线的位置,内部有四个变量,分别对应四格线
四条线都是以基线baseline为基准,在基线的基础上进行运算得到真正的四格线
计算方式如下,
ascent线的y坐标 = FontMetrics::ascent + baseline线的y坐标；
descent线的y坐标 = FontMetrics::descent + baseline线的y坐标；
top线的y坐标 = FontMetrics::top + baseline线的y坐标；
bottom线的y坐标 = FontMetrics::bottom + baseline线的y坐标；
2.2.获取FontMetrics
Paint paint = new Paint();
// 四格线的值为float类型
Paint.FontMetrics fm = paint.getFontMetrics();
// 四格线的值为int类型
Paint.FontMetricsInt fmInt = paint.getFontMetricsInt();
2.3.获取各线的y坐标
int baseLineY = 200;
//计算各线在位置
Paint.FontMetrics fm = paint.getFontMetrics();
float ascent = baseLineY + fm.ascent;
float descent = baseLineY + fm.descent;
float top = baseLineY + fm.top;
float bottom = baseLineY + fm.bottom;
三.文字宽高与最小矩形
1.字符串所占宽高
1.1.高度
通过可绘制最底线 - 可绘制最高线可得
Paint.FontMetrics fm = paint.getFontMetrics();
int height = fm.bottom - fm.top;
1.2.宽度
通过画笔测量获得
// 测量字符串宽度
int width = paint.measureText(String text);
1.3.最小矩形
通过画笔测量获得
/**
* 获取指定字符串所对应的最小矩形，以（0，0）点所在位置为基线
* @param text 要测量最小矩形的字符串
* @param start 要测量起始字符在字符串中的索引
* @param end 所要测量的字符的长度
* @param bounds 接收测量结果
*/
public void getTextBounds(String text, int start, int end, Rect bounds);
1.4.划出各个位置
val text = "hello,I'm Android Developer! good!"
val baseLineY = 200f
val baseLineX = 20f
val fontMetrics = pathPaint.fontMetrics
val top = fontMetrics.top + baseLineY
val bottom = fontMetrics.bottom + baseLineY
val ascent = fontMetrics.ascent + baseLineY
val descent = fontMetrics.descent + baseLineY
val textWidth = pathPaint.measureText(text)
val textHeight = fontMetrics.bottom - fontMetrics.top
val rect = Rect()
pathPaint.getTextBounds(text,0,text.length,rect)
pathPaint.color = Color.BLACK
pathPaint.style = Paint.Style.FILL
canvas.drawRect(baseLineX,top,baseLineX + textWidth,bottom,pathPaint)
pathPaint.color = Color.GRAY
val textRect = Rect((rect.left + baseLineX).toInt(), (rect.top + baseLineY).toInt(), (rect.right + baseLineX).toInt(),(rect.bottom + baseLineY).toInt())
canvas.drawRect(textRect,pathPaint)
pathPaint.color = Color.BLUE
canvas.drawLine(baseLineX,baseLineY,3000f,baseLineY,pathPaint)
pathPaint.color = Color.RED
canvas.drawLine(baseLineX,top,3000f,top,pathPaint)
pathPaint.color = Color.GREEN
canvas.drawLine(baseLineX,bottom,3000f,bottom,pathPaint)
pathPaint.color = Color.YELLOW
canvas.drawLine(baseLineX,ascent,3000f,ascent,pathPaint)
pathPaint.color = Color.MAGENTA
canvas.drawLine(baseLineX,descent,3000f,descent,pathPaint)
pathPaint.color = Color.WHITE
canvas.drawText(text,baseLineX,baseLineY,pathPaint)
四.写字
1.给定左上角,绘制文字
1.1.过程
1.已知left,top的坐标
2.fontMetrics.top = top - baseLine,故 baseLine = top - fontMetrics.top
1.2.示例
val text = "hello,I'm Android Developer! good!"
val left = 0f
val top = 100f
val fontMetrics = paint.fontMetrics
val baseLine = top - fontMetrics.top
canvas.drawText(text, left, baseLine,paint)
2.给定中间线,绘制文字
1.1过程
image.png
1.已知中间线centerY,到 top 和 bottom的 距离a,b是相同的
a = b = (bottom - top)/2
2.公式
top = baseLine + fontMetrics.top
bottom = baseLine + fontMetrics.bottom
3.带入得
a = b = (fontMetrics.bottom - fontMetrics.top)/2
4.可知
c = b - (bottom - baseLine)
5.带入得
c = (fontMetrics.bottom - fontMetrics.top)/2 - (baseLine + fontMetrics.bottom - baseLine)
c = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom
6.且
baseLine = centerY + c
7.故得出
baseLine = centerY + (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom
1.2.示例
val text = "Aa Bb Cc Gg"
val left = 0f
val centerY = 100f
val fontMetrics = paint.fontMetrics
val baseLine = centerY + (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom
paint.color = Color.WHITE
canvas.drawText(text, left, baseLine,paint)
paint.color = Color.GREEN
canvas.drawLine(left,baseLine,3000f,baseLine,paint)
