敞开成长之旅！这是我参加「日新计划 12 月更文应战」的第26天，点击查看活动详情

为了说明代码逻辑，我挑选typescript进行的代码注解

xml解析

export default class RichText {
  initWithXML(xml: string) {
    let visitor: MyXMLVisitor = new MyXMLVisitor();
    visitor._richText = this;
    let parser: SAXParser = new SAXParser();
    parser._delegator = visitor;
    parser.parseIntrusive(xml);
  }
}

以上便是解析xml的入口，这块的解析逻辑是和SAX的规划密切关联，大概思路便是SAXParser会进行RapidXmlSaxHander的绑定注册，当解析tag事情触发后，由RapidXmlSaxHander进行转发到SAXParser，之后SAXParser通过delegator会再次转发到MyXMLVisitor，所以终究的事情逻辑是在MyXMLVisitor里边，代码逻辑稍微有点绕，详细的逻辑整理就不再展开。下图能够作为参阅，整个完成代码结构还是有点臃肿的。

接下来的要点便是MyXMLVisitor的callback逻辑

解析tag、attrs

class Attribute {
  face: string;
  color: string;
  // ... more
}
let _tagTables: Map<
  string,
  {
    isFontElement: boolean;
    handlerVisitEnter: Function;
  }
>;
export default class MyXMLVisitor extends SAXDelegator {
  startElement(tag: string, attr: string) {
    let tagAttrMap = {};
    let { handlerVisitEnter } = _tagTables[tag];
    // 这儿的handler来自setTagDescription，里边会解析tag的attr，并转换为RichText:KEY_XXX
    handlerVisitEnter(tagAttrMap);
    let attribute: Attribute = new Attribute();
    // 将handler的RichText:KEY_XXX特点转换为Attribute结构体
    // ... 省略这部分的代码
    // 将当前tag标签的特点结果保存起来
    this._fontElements.push(attribute);
  }
  static setTagDescription(
    tag: string,
    isFontElement: boolean,
    handler: Function
  ) {
    _tagTables[tag] = {
      isFontElement,
      handlerVisitEnter: handler,
    };
  }
}

startElement将每1个tag标签及其对应的特点，解析为Attribute结构体，并保存起来。

实例化tag的text

当tag，attr解析结束后，接下来就会回调到标签的内容了

export default class MyXMLVisitor extends SAXDelegator {
  textHandler(tag: string, attr: string) {
    // 生成对应的富文本元素，并推送给RichText
    let color = this.getColor();
    let richElement: RichElementText =
      new RichElementText(/*这儿省略了很多参数*/);
    this._richText._richElements.push(richElement);
  }
  getColor() {
    // 倒着查找最附近标签的颜色
    for (let i = this._fontElements.length - 1; i >= 0; i++) {
      let item = this._fontElements[i];
      if (item.hasColor) {
        return item.color;
      }
      return "white";
    }
  }
}

为啥getColor的逻辑那么古怪，直接从一切的标签中倒着查找？ 假如有以下的xml，成心写了很多font，可是我们看到RichText其实仅仅烘托了一个RichElementText？

由于只要发生了TextHandler调用时，才会收集拼装特点

<font face="Verdana" size="12" color="#ffffff"> <!-- startElement -->
	<font size="30">                            <!-- startElement -->
		<font color="#00ff00">                  <!-- startElement -->
            text1                               <!-- textHandler -->
        </font>                                 <!-- endElement -->
	</font>                                     <!-- endElement -->
     text2                                      <!-- textHandler -->
</font>                                         <!-- endElement -->

• 当构建text1特点的时分，此时:

let attributes = [
  {face:"Verdana", size:12, color="#fffff"},
  {size:30},
  {color="#00ff00"}
]

依照倒叙查找的规矩，color=”00ff00″, size=30, face=”Verdana”

• 当构建text2的时分，此时

let attributes = [
  {face:"Verdana", size:12, color="#fffff"},
]

依照倒叙查找的规矩，color=”ffffff”, size=12, face=”Verdana”

这样就完成了特点的继承，即子标签没有的特点，会从父标签获取。参阅css款式继承。

必定要对这个事情次序非常明晰，这也变相解释了为啥getColor的逻辑那么古怪，能够认为上边的三个font进行了attr兼并，而且以最靠近text的attr为基准。

扩展

了解了以上的规矩后，考虑：

• 比如1:

<font color='#ff0000' size='20'>
    <b>
      <i>
          <del>
            加粗倾斜下划线
          </del>
      </i>
      加粗
    </b>
    正常
</font>

烘托结果：

能够看到其实b、i、del标签，都能够了解为attr，尽管它们是标签。

• 比如2：

<font color='#ff0000' size='20'>
    <b color="#00ff00">
      加粗
    </b>
</font>

烘托结果：

b标签的color特点并未生效，由于代码中是没有解析b标签的color特点的

• 比如3：

<font color='#ff0000' size='20'>
    <font color="#00ff00"><!--这儿的color覆盖了之前的color-->
      绿色
    </font-error><!--没有影响烘托，是由于endElement没有校验配对联系-->
</font>

烘托结果：

希望以上的比如能让你愈加深入的了解富文本烘托的原理。

RichElement烘托

通过前几步的处理，现已将xml转换为了RichElementText，而且保存在_richElements

class Node {
  visit() {} // 每帧都会拜访
}
class Widget extends Node {
  adaptRenderers() {}
  visit(): void {
    this.adaptRenderers();// 继承widget的烘托适配接口
  }
}
export class RichElement {}
export class RichElementText extends RichElement {}
export class RichElementImage extends RichElement {}
export class RichElementCustomNode extends RichElement {}
export class RichElementNewLine extends RichElement {}
export default class RichText extends Widget {
  _richElements: Array<RichElement> = [];
  adaptRenderers() {
    this.formatText(); // RichText的烘托逻辑入口
  }
  formatText() {
    for (let element in this._richElements) {
        // 将收集到的元素实例化为label，而且核算出每一行的详细label信息
    }
  }
}

元素布局

formarRenderers之前，现已将每一行元素的个数都现已核算好了 _elementRenders是一个二维数组，存放着每一行的元素 接下来便是要进行排版的作业，排版大致流程

• 先核算出来每一行的高度，在这一步，之前设置的行间距会参加核算

        float newContentSizeHeight = 0.0f;
        float newContentSizeWidth = 0.0f;
        std::vector<float> maxHeights(_elementRenders.size());
        for (size_t i = 0, size = _elementRenders.size(); i < size; i++)
        {
            Vector<Node*>& row = _elementRenders[i];
            float maxHeight = 0.0f;
            float maxWidth = 0.0f;
            for (auto& iter : row)
            {
                maxHeight = MAX(iter->getContentSize().height, maxHeight);
                maxWidth += iter->getContentSize().width;
            }
            if (i > 0) {
                // 行间距对最大高度的影响
                maxHeight += _defaults.at(KEY_VERTICAL_SPACE).asFloat();
            }
            maxHeights[i] = maxHeight;
            newContentSizeHeight += maxHeights[i];
            newContentSizeWidth = MAX(maxWidth, newContentSizeWidth);
        }

• 将每一行元素锚点设置为左下角(0,0)，x方向从起点依次摆放，y方向从底部往顶部摆放，为啥？由于富文本的(0,0)点在左下角

     float nextPosY = _customSize.height;
        for (size_t i = 0, size = _elementRenders.size(); i < size; i++)
        {
            Vector<Node*>& row = _elementRenders[i];
            float nextPosX = 0.0f;
            nextPosY -= maxHeights[i];
            for (auto& iter : row)
            {
                iter->setAnchorPoint(Vec2::ZERO);
                iter->setPosition(nextPosX, nextPosY);
                if (iter->getComponent(ListenerComponent::COMPONENT_NAME)) {
                    tag++;
                    this->addChild(iter, 1, tag);
                }
                else {
                    tag++;
                    this->addProtectedChild(iter, 1, tag);
                }
                nextPosX += iter->getContentSize().width;
            }
            doHorizontalAlignment(row, nextPosX);
        }
      // 这儿的renderSize方便笔直布局核算使用
     this->setRenderSize(Size(newContentSizeWidth, newContentSizeHeight)); 

每摆放好一行之后，都会进行对齐核算doHorizontalAlignment

void RichText::doHorizontalAlignment(const Vector<cocos2d::Node*>& row, float rowWidth) {
    const auto alignment = static_cast<HorizontalAlignment>(_defaults.at(KEY_HORIZONTAL_ALIGNMENT).asInt());
    if (alignment != HorizontalAlignment::LEFT) {
        // 将空白字符串截取掉，核算相差的宽度
        const auto diff = stripTrailingWhitespace(row); 
        // rowWidth+diff为截取空白字符串的宽度
        // leftOver便是剩余空间的尺度
        const auto leftOver = getContentSize().width - (rowWidth + diff);
        // 根据不同的对齐方法，对leftOver进行再核算
        const float leftPadding = getPaddingAmount(alignment, leftOver);
        const Vec2 offset(leftPadding, 0.f);
        for (auto& node : row) {
            // 将一切元素X进行平移指定的距离，就完成了水平对齐的作用
            node->setPosition(node->getPosition() + offset);
        }
    }
}
float getPaddingAmount(const RichText::HorizontalAlignment alignment, const float leftOver) {
    switch (alignment) {
    case RichText::HorizontalAlignment::CENTER:
        return leftOver / 2.f;
    case RichText::HorizontalAlignment::RIGHT:
        return leftOver;
    default:
        CCASSERT(false, "invalid horizontal alignment!");
        return 0.f;
    }
}

• 最后处理笔直对齐

void RichText::doVerticalAlignment() {
    const auto alignment = static_cast<VerticalAlignment>(_defaults.at(KEY_VERTICAL_ALIGNMENT).asInt());
    if (alignment != VerticalAlignment::TOP) {
        float off = 0;
        // renderSize-contentSize
        if (alignment == VerticalAlignment::CENTER) {
            off = (getRenderSize().height - getContentSize().height) * 0.5;
        }
        else if (alignment == VerticalAlignment::BOTTOM) {
            off = getRenderSize().height - getContentSize().height;
        }
        for (auto& element : _elementRenders)
        {
            for (auto& iter : element)
            {
                iter->setPositionY(iter->getPositionY() + off);
            }
        }
    }
}

这儿的处理思路比较相似，不同的是offset=renderSize–contentSize

疑问

为什么最外层要再加一层

当输入xml数据为<font size="30">text</font>时，终究得到的结果是：

<font face="Verdana" size="12" color="#ffffff">
	<font size="30">
		text
	</font>
</font>

也便是在最外层从头包了一层<font></font>，为什么要这姿态呢?

假如我们输入的xml数据为test，其实这并不符合xml格式，发现RichText也能正确烘托，便是由于外层追加的这个<font></font>使终究xml数据格式正确。

其他收获

tag	原理
getFontSize() * 0.8f;
getFontSize() * 1.25f;