自定义控件那些事儿 ----- 五【绘制文字】

一、文字绘制的基础知识

还记得小时候学习写字的时候，老使用四线格。当初就是理解说有一个区域，上下两根线确定了整个书写范围，而第三根线就像是排排坐的人，所有的重心都在这个上面。如今，用到绘制文字的时候，需要对文字绘制有一个全新的认识。上下两根确定了范围，没错！那个标识“重心”的线也就是基线！

对于这个详细的解读，大神已经做了很好的描述。

这也就有了我们所需要的五基线！

借此，也正好记忆清楚，各个关键计算的关系：

//        ascent = ascent线的y坐标 - baseline线的y坐标；//        descent = descent线的y坐标 - baseline线的y坐标；//        top = top线的y坐标 - baseline线的y坐标；//        bottom = bottom线的y坐标 - baseline线的y坐标；

并为在之后的应用Paint.FontMetrics计算出来各个基线的位置奠定基础。

1，自定义控件，绘制文字

public class TextDrawView extends View {    /**     * 写字笔     */    private Paint textPaint;    public TextDrawView(Context context) {        super(context);    }    public TextDrawView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);    }    public TextDrawView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        int baseLineX = MainApplication.getApplication().getWidth() / 4;//内容绘制在偏中间，便于观察        int baseLineY = 200;        //画基线        textPaint = new Paint();        textPaint.setColor(getResources().getColor(R.color.chocolate));//        canvas.drawLine(baseLineX, baseLineY, 3000, baseLineY, textPaint);        canvas.drawLine(0, baseLineY, 3000, baseLineY, textPaint);        textPaint.setColor(getResources().getColor(R.color.chocolate));        canvas.drawLine(baseLineX, 0, baseLineX, 2000, textPaint);        //写文字        textPaint.setColor(Color.GREEN);        textPaint.setTextSize(160); //以px为单位        textPaint.setTextAlign(Paint.Align.LEFT);        canvas.drawText("HelloWorld！You're Special,good good study", baseLineX, baseLineY, textPaint);    }}

2，使用自定义控件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.future.drawtextdemo.MainActivity">    <com.future.drawtextdemo.view.TextDrawView        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></LinearLayout>

其他则是新建默认项目即可！

3，添加量屏工具

public class MainApplication extends Application {    private static MainApplication application;    // 屏幕的宽高    private int width = 0;    private int height = 0;    public static MainApplication getApplication() {        return application;    }    @Override    public void onCreate() {        super.onCreate();        application = this;    }    public int getWidth() {        if (width == 0) {            // 获取屏幕的宽高            WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);            width = wm.getDefaultDisplay().getWidth();// 屏幕宽度            height = wm.getDefaultDisplay().getHeight();// 屏幕高度        }        return width;    }    public int getHeight() {        if (height == 0) {            WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);            width = wm.getDefaultDisplay().getWidth();// 屏幕宽度            height = wm.getDefaultDisplay().getHeight();// 屏幕高度        }        return height;    }}

记得在清单文件中添加Application。

4，展示效果

以两线交点为基准点。当前设置setTextAlign()为LEFT。已下分别是设置Right、Center的效果。

二、文字绘制：五基线及常用属性设置

依据前言介绍FontMetrics计算文字绘制五基线，在onDraw()中添加：

        //绘制四条线//        ascent = ascent线的y坐标 - baseline线的y坐标；//        descent = descent线的y坐标 - baseline线的y坐标；//        top = top线的y坐标 - baseline线的y坐标；//        bottom = bottom线的y坐标 - baseline线的y坐标；        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();        int ascentY = (int) fontMetrics.ascent + baseLineY;        int descentY = (int) fontMetrics.descent + baseLineY;        int topY = (int) fontMetrics.top + baseLineY;        int bottomY = (int) fontMetrics.bottom + baseLineY;        textPaint.setTextSize(40);        textPaint.setColor(getResources().getColor(R.color.cyan));        canvas.drawLine(0, ascentY, 3000, ascentY, textPaint);        canvas.drawText("ascent", baseLineX - 300, ascentY, textPaint);        textPaint.setColor(getResources().getColor(R.color.red));        canvas.drawLine(0, descentY, 3000, descentY, textPaint);        canvas.drawText("descent", baseLineX - 200, descentY, textPaint);        textPaint.setColor(getResources().getColor(R.color.black));        canvas.drawLine(0, topY, 3000, topY, textPaint);        canvas.drawText("top", baseLineX - 100, topY, textPaint);        textPaint.setColor(getResources().getColor(R.color.mediumvioletred));        canvas.drawLine(0, bottomY, 3000, bottomY, textPaint);        canvas.drawText("bottom", baseLineX + 100, bottomY, textPaint);

展示效果：

线条比较密集，设置文字大小更大，展示效果：

三、文字绘制最小区域及按照路径绘制

经过以上的努力，能够正常绘制文字。整个文字占用区域也是相对会有用的。在控制自定义控件中，需要量测文字占用区域。FontMetrics的获取帮助下，能够获取文字占用区域的整体高度。通过paint.measureText(content)的方式可以量测文字占用宽度。基于此，可以绘制出当前文案占用的最小区域和最大区域。

public class TextDraw1View extends View {    /**     * 写字笔     */    private Paint textPaint;    public TextDraw1View(Context context) {        super(context);    }    public TextDraw1View(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);    }    public TextDraw1View(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        String content = "good study";        int baseLineX = MainApplication.getApplication().getWidth() / 4;//内容绘制在偏中间，便于观察        int baseLineY = 200;        //画基线        textPaint = new Paint();        textPaint.setColor(getResources().getColor(R.color.chocolate));//        canvas.drawLine(baseLineX, baseLineY, 3000, baseLineY, textPaint);        canvas.drawLine(0, baseLineY, 3000, baseLineY, textPaint);        textPaint.setColor(getResources().getColor(R.color.chocolate));        canvas.drawLine(baseLineX, 0, baseLineX, 2000, textPaint);        textPaint.setTextSize(160); //以px为单位        //绘制占据大小区域        Paint.FontMetricsInt fontMetricsInt = textPaint.getFontMetricsInt();        int top = fontMetricsInt.top + baseLineY;        int bottom = fontMetricsInt.bottom + baseLineY;        int width = (int) textPaint.measureText(content);        Rect textRec = new Rect(baseLineX, top, baseLineX + width, bottom);        textPaint.setColor(getResources().getColor(R.color.chartreuse));        canvas.drawRect(textRec, textPaint);        //绘制文字最小矩形        int asent = fontMetricsInt.ascent + baseLineY;        int desent = fontMetricsInt.descent + baseLineY;        Rect minRec = new Rect(baseLineX, asent, baseLineX + width, desent);        textPaint.setColor(getResources().getColor(R.color.cyan));        canvas.drawRect(minRec, textPaint);        //写文字        textPaint.setColor(Color.GREEN);        textPaint.setTextAlign(Paint.Align.LEFT);        canvas.drawText(content, baseLineX, baseLineY, textPaint);    }}

展示效果：

文本绘制也可以依据路径来绘制，示例如下：onDraw()中添加以下代码：

        //沿路径书写文字        textPaint.setTextSize(60); //以px为单位        textPaint.setColor(Color.DKGRAY);        textPaint.setAlpha(50);        textPaint.setStyle(Paint.Style.STROKE);        Path path = new Path();        path.addCircle(baseLineX, baseLineY, 100, Path.Direction.CCW);        canvas.drawPath(path, textPaint);        canvas.drawTextOnPath("天下武功，唯快不破！", path, 50, 40, textPaint);        canvas.drawTextOnPath("天下武功，唯快不破！", path, 0, 0, textPaint);

【为了展示效果较好，将之前的文案绘制和大小区域绘制注释掉】
展示效果：

将同样的内容绘制了两遍，因为设置参数的不同，他们并没有重合。

（1）path的设置是有方向的

当前设置路径为圆形，Path.Direction.CCW为逆时针，Path.Direction.CW为顺时针。很明显，当前path方向为逆时针。

（2）hoffset和voffset

表示在路径上的水平偏移和纵向偏移。当前展示效果中，位于内圈的是没有设置偏移量的效果。这是偏移量后，“天”离基线位置远了，整体离中心点远了！

以上就是文本绘制的全部内容了。。。。。

源码传送门

如今我终于明白，我渡得过万里狂风，渡得过千条性命，渡得过诗酒年华，却渡不过，你不顾而去的目光。


天生微凉的手心，少了你的温度，如何是好。