概述

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

效果图

先贴下我实现的效果图：

思路

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

源码

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

最后

以上就是内向翅膀为你收集整理的TextView实现酷炫字体描边效果概述效果图思路具体实现源码的全部内容，希望文章能够帮你解决TextView实现酷炫字体描边效果概述效果图思路具体实现源码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。