drawText

很久之前的笔记

一.基线

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)