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

一、文字绘制的基础知识

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

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

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

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

//        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

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

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

源码传送门

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


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