TextView实现酷炫字体描边效果

概述

最近抖音出现了不少带有描边字体的视频和图片，效果看上去很不错，今天就讲讲其中的实现原理。

效果图

先贴下我实现的效果图：

思路

一开始看到这个功能其实我还真摸不着头脑，不过仔细想想后发现其实现思路并不复杂。我们观察其效果，发现描边的路径基本是跟着文字轮廓走的，那么是不是可以这样来实现，先用粗点的画笔按照文字的路径绘制背景，然后再在上面绘制文字。因为绘制背景和文字的path是一样的，只不过绘制背景的画笔比较粗，所以就呈现出了描边的效果。

具体实现

这里我就直接贴下关键代码，解释看注释。

先声明画笔：

 		mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setStrokeWidth(SizeUtils.dp2px(mStrokeWidth));

描边的粗细取决于你设置的StrokePaint的宽度大小。

绘制背景：

	private void drawStrokeBorder(Canvas canvas){
        Layout layout = getLayout();
        if(layout!=null){
            String text = getText().toString();
            int lineCount = getLineCount();
            //第一行文字顶部与控件顶部的距离
            int totalPaddingTop = getTotalPaddingTop();
            for (int i = 0; i < lineCount; i++) {
                int start = layout.getLineStart(i);
                int end = layout.getLineEnd(i);
                String rowStr = text.substring(start, end);

                float x = layout.getLineLeft(i)+getPaddingLeft();
                int y = totalPaddingTop + getBaseLine(i);

                Path textPath = new Path();
                getPaint().getTextPath(rowStr,0,rowStr.length(),x,y,textPath);
                mBorderPaint.setColor(mBorderColor);
                canvas.drawPath(textPath,mBorderPaint);
            }
        }
    }

	private int getBaseLine(int line){
        int lbottom = getLayout().getLineTop(line + 1);
        int lbaseline = lbottom - getLayout().getLineDescent(line);
        return lbaseline;
	}

这里需要注意的是getTextPath需要传TextView每行文本绘制的起点坐标（x，y）。x的值我们可以很简单通过layout.getLineLeft(i)得到，但是y值就复杂一点了，首先先获取文本第一行文字顶部和控件顶部的距离getTotalPaddingTop()，然后再获取每行文本绘制的基线baseLine，两个值相加即得到y值。baseLine的获取，可以参考Layout的drawText方法，这里简单贴下源码位置：

实现光滑描边：
加上下面的代码就可以实现光滑描边：

	//设置path的连接处为圆弧，实现光滑描边
    mBorderPaint.setStrokeJoin(Paint.Join.ROUND);

源码

最后贴下源码地址啦，如果觉得对你有帮助麻烦点个赞支持下
伸手党福利