Cocos2d-x的UI是按照树形结构组织的。

大家学过数据结构的话 就知道 什么是树了。

树只有一个 根节点，根节点没有父节点，其他节点都有父节点和子节点，而叶子节点没有子节点，叶子节点就是指没有子节点的节点。

在这里父和子 都是相对的。

我们知道树结构的遍历有3种方式，说是遍历 就是把每个节点找个遍的意思，前序遍历，中序遍历，后序遍历。

所谓的前，中，后指的是根节点，先遍历根节点就是前，后遍历就是最后查找根节点，中序遍历就是中间遍历。

所以 前序遍历的话 就是 0,-1， -3,3,2，-4， 4

中序遍历的话就是-3，-1,0，-4， 2， 4

后序遍历就是-3， 3， -1 -4， 4， 2， 0

而我们cocos2dx采取的是中序遍历。

绘制UI的时候需要UI的坐标，颜色，弯曲等。

绘制UI需要的坐标是世界坐标。但我们提供的是本地坐标系，所以要转换成世界坐标系。要使用变换矩阵。提供给shader。

这里绘制使用的是visit函数。

void Node::visit()
{
auto renderer = Director::getInstance()->getRenderer(); //获得渲染器
Mat4 parentTransform = Director::getInstance()->getMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); //获得世界坐标系的变换矩阵
visit(renderer,parentTransform,true); //渲染
}

void Node::visit(Renderer* renderer,const Mat4 &parentTransform,uint32_t parentFlags)
{
// quick return if not visible. children won't be drawn.
if (!_visible)
{
return;
}


uint32_t flags = processParentFlags(parentTransform,parentFlags); //这里把processParentFlags当做参数传入了函数，肯定要处理，看到红色参数，在这里处理了。


// IMPORTANT:
// To ease the migration to v3.0,we still support the Mat4 stack,
// but it is deprecated and your code should not rely on it
Director* director = Director::getInstance();
director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); //push
director->loadMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW,_modelViewTransform);

bool visibleByCamera = isVisitableByVisitingCamera();


int i = 0;


if(!_children.empty())
{
sortAllChildren();
// draw children zOrder < 0
for( ; i < _children.size(); i++ )
{
auto node = _children.at(i);


if ( node && node->_localZOrder < 0 )
node->visit(renderer,_modelViewTransform,flags); //递归
else
break;
}
// self draw
if (visibleByCamera)
this->draw(renderer,flags);


for(auto it=_children.cbegin()+i; it != _children.cend(); ++it)
(*it)->visit(renderer,_modelViewTransform,flags); //递归
}
else if (visibleByCamera)
{
this->draw(renderer,flags);
}


director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); //pop

// FIX ME: Why need to set _orderOfArrival to 0??
// Please refer to https://github.com/cocos2d/cocos2d-x/pull/6920
// reset for next frame
// _orderOfArrival = 0;
}

uint32_t Node::processParentFlags(const Mat4& parentTransform,uint32_t parentFlags)
{
if(_usingNormalizedPosition) {
CCASSERT(_parent,"setNormalizedPosition() doesn't work with orphan nodes");
if ((parentFlags & FLAGS_CONTENT_SIZE_DIRTY) || _normalizedPositionDirty) {
auto s = _parent->getContentSize();
_position.x = _normalizedPosition.x * s.width;
_position.y = _normalizedPosition.y * s.height;
_transformUpdated = _transformDirty = _inverseDirty = true;
_normalizedPositionDirty = false;
}
}

uint32_t flags = parentFlags;
flags |= (_transformUpdated ? FLAGS_TRANSFORM_DIRTY : 0);
flags |= (_contentSizeDirty ? FLAGS_CONTENT_SIZE_DIRTY : 0);



if(flags & FLAGS_DIRTY_MASK)
_modelViewTransform = this->transform(parentTransform); //转换


_transformUpdated = false;
_contentSizeDirty = false;


return flags;
}

Mat4 Node::transform(const Mat4& parentTransform)
{
Mat4 ret = this->getNodeToParentTransform();
ret = parentTransform * ret;
return ret;
}

这里没有涉及颜色和弯曲效果，只与位置有关。