LayaBox引擎源码阅读笔记（四、文本渲染原理相关）

-前言-

在此之前不是很清楚一般H5引擎是如何实现文本渲染的，正好LayaBox源码就放在那里，不如一起来研究研究是如何实现的。

-正文-

首先文本有两种设置内容的方式，第一种是调用changeText，第二种是直接赋值text属性。他们在渲染层面是存在一定差异的，这个放在最后来说。我们先来讨论一般的text属性是如何渲染的。

Text在Laya中的渲染类型

在Laya中每个被渲染到Canvas上的对象都有对应一种渲染函数，所有渲染函数都会被存储在RenderSprite中。

而Text所对应的是_graphics类型，也就是图形渲染类型。是通过Graphics进行渲染的。现在我们来到比较重要的函数。

TextRender->_fast_fillText函数

这个函数中会完成从文本数据的解析，生成，提交的所有步骤。函数内容就不贴上来的，同学们可以对照着源代码比对看着。

里面有一个很重要的执行就是去获取字符串渲染信息，去执行getCharRenderInfo方法。

这个方法会从文本图集TextAtlas获取字符串图形数据。如果没有存储对应key值的字符串数据，就会通过Canvas方式去生成一个对应的ImageData数据。下面简化一下生成字符串图形数据逻辑如下

_proto.getCharBmp = function(char,font,margin_left,margin_top){
    var ctx = this.ctx;//cavans绘图环境
    ctx.font = font;//设置字体
    var w = ctx.measureText(char).with;//字符串宽度
    ctx.clearRect(0,0,w,h);//清空需要绘制文本的区域
    ctx.save();
    ctx.fillText(char,margin_left,margin_top);//生成文本
    var imgData = ctx.getImageData(0,0,w,h);//获取文本区域图像数据
    return imgData;
}

在生成了文本内容的图像数据后，我们就可以提交数据，等待WebGL渲染了。

文本图像数据渲染

走到这一步，会将纹理数据添加到一个MeshQuadTexture之中，Laya通过一个imgID来区分纹理来源的图集，如果来源相同就可以使用相同同一个Submit函数，也就是在一个call函数中提交渲染。如果不是就需要新建一个提交函数单独渲染。所有文本都存储在一个个的图集中，而这些图集都是WebGlTexture对象，最终获取的都是纹理上的纹理坐标，我们下次需要绘制同样的文本内容时就可以直接获取纹理的坐标，直接绘制即可。

changeText与text的区别

首先我们先看看分别使用这两个方法的堆栈信息

                      （changeText堆栈信息）

                   （Text堆栈信息）

两个方法都最终会调用到_fast_filltext方法，但他们的data属性不一样，直接赋值text是WordText对象，而changeText直接就是一个字符串。

如果是WordText对象会按照一个整体一并渲染，每次我们更改文本，内容一般是不相同的，所以都会去创建字符串纹理数据。

而changeText是按照字符串数组，单个字符挨着获取纹理数据，到程序运行一段时间后，很多数据都是可以直接获取不需要创建。

因此一般我们建议在更改文本的时候使用changeText方法。不过也要视情况而定。