今日头条文字渐变特效项目实战（一），阿里架构师经验分享

2. ascent：建议顶点线

3. center：中心线

4. baseline：基线

5. descent：建议底部线

6. bottom：底部线

这六条线分别起什么作用呢？

• 首先是top和bottom，这两条线很好理解，它分别是顶端和底端，绘制文字时肯定不会超过这两条线

• 然后是ascent和descent，这两条线是建议的顶点线和建议底端线，一般情况我们绘制文字是不会超过这两条线的，但是对于一些异形字（论坛中经常出现的跨楼层的字）是可以超出这两条线的

• 再则是center线，这条线也很好理解，它就是top和bottom的中心

• 最后就是基线了，这也是我们绘制文字时，传入的y坐标

1.1 基线的计算

解释了上面六条线的作用，接下来再说说这六条线是怎么计算的。

首先，我们要清楚，这六条线都是真实存在的，它们的值就保存在Paint.FontMetrics和Paint.FontMetricsInt中，这两个类的值基本相似，区别是一个是float，一个是int

如图

• Paint.FontMetrics

• Paint.FontMetricsInt

明确了这六条线值的位置，那它们是怎么计算得来的呢？

首先说明，计算着六条线的时候，是以基线为参照物的，计算方式如下

注：在以下计算推断中，ascent，desent之类的都表示距离，ascent.y，desent.y之类的表示坐标

top.y = top.y - baseline.y

bottom.y = bottom.y - baseline.y

ascent.y = ascent.y - baseline.y

desent.y = desent.y - baseline.y

center.y = (bottom.y - top.y) / 2

因为是以baseline为参照物，所以所有的距离都是它们的y坐标和baseline的y坐标相减，

但是Paint.FontMetrics中并没有baseline的值，那么我们要怎么得到它呢

baseline的计算如图所示（网上好多图都是错的，不得不自己画了一张，(╥﹏╥)）

首先，如果我们要绘制文本，那么我们可以拿到top和bottom的坐标，并且我们也知道center

• center.y = (bottom.y - top.y) / 2

看图，我们知道top.y到center.y的距离和bottom.y到center.y的距离相同，设定这个距离为a，那么center.y到baseline.y的距离就是：a - bottom

(没有.y时表示它到baseline的距离)

所以有:

• baseline.y - center.y = (bottom.y - top.y) / 2 - bottom.y

解得：

• baseline.y = center.y + (bottom.y - top.y) / 2 - bottom.y

当然，同样的推理，还可以得出baseline和ascent，desent之间的关系，这里就不展开了，原理都是一样的

1.2 如何绘制文字到中心

经历了前面的长篇大论，有的同学就要问了，知道baseline的计算有什么用呢？

回到最开始的api

Android开发除了flutter还有什么是必须掌握的吗？

相信大多数从事Android开发的朋友们越来越发现，找工作越来越难了，面试的要求越来越高了

除了基础扎实的java知识，数据结构算法，设计模式还要求会底层源码，NDK技术，性能调优，还有会些小程序和跨平台，比如说flutter，以思维脑图的方式展示在下图；

点击文档前往获取面试资料与视频教程；【阿里P7级别Android架构师技术脑图+全套视频】

%E4%BC%9A%E8%BF%99%E4%BA%9B%EF%BC%9F%E5%A6%82%E4%BD%95%E9%9D%A2%E8%AF%95%E6%8B%BF%E9%AB%98%E8%96%AA%EF%BC%81.md)**

[外链图片转存中…(img-k0TnPSCN-1644049364121)]