NGUI所见即所得之UIWidget , UIGeometry & UIDrawCall
UIWidget是所有UI组件的抽象基类，作为基类当然定义了必须的成员变量和函数，接触过MFC或其他UI组件开发，想必都知道有一堆参数设置，尤其是Visual Studio的可视化界面，简直太丰富了，UIWidget要当UI组件的爹就必须得具备这些，下面就一一介绍：
Pivot
Pivot，这个枚举，其实定义了GameObject中心坐标在整个组件的位置，这个跟UIStretch很类似，只不过UIStretch说的是组件相对于屏幕的位置。
public enum Pivot
{
TopLeft,
Top,
TopRight,
Left,
Center,
Right,
BottomLeft,
Bottom,
BottomRight,
}
Pivot可以提供开发者更多的定位模式，可以方便实现组件对齐，如对个UILabel组件的文本居中对齐。当然这样，在计算组件的四个角的顶点坐标（localCorners）就得考虑Pivot。
localCorners，worldCorners & innerWorldCorners
这三个变量都是四个角的顶点坐标，只是localCorners是计算局部的（相对gameObject的中心而言）坐标，worldCorners只是将localCorners作为世界坐标空间的坐标，innerWorlCorners则考虑了边框Border。
public virtual Vector3[] localCorners
{
get
{
Vector2 offset = pivotOffset;
float x0 = -offset.x * mWidth;
float y0 = -offset.y * mHeight;
float x1 = x0 + mWidth;
float y1 = y0 + mHeight;
mCorners[0] = new Vector3(x0, y0, 0f);
mCorners[1] = new Vector3(x0, y1, 0f);
mCorners[2] = new Vector3(x1, y1, 0f);
mCorners[3] = new Vector3(x1, y0, 0f);
return mCorners;
}
}
上面代码中的pivotOffset的计算就考虑了Pivot：
static public Vector2 GetPivotOffset (UIWidget.Pivot pv)
{
Vector2 v = Vector2.zero;
if (pv == UIWidget.Pivot.Top || pv == UIWidget.Pivot.Center || pv == UIWidget.Pivot.Bottom) v.x = 0.5f;
else if (pv == UIWidget.Pivot.TopRight || pv == UIWidget.Pivot.Right || pv == UIWidget.Pivot.BottomRight) v.x = 1f;
else v.x = 0f;
if (pv == UIWidget.Pivot.Left || pv == UIWidget.Pivot.Center || pv == UIWidget.Pivot.Right) v.y = 0.5f;
else if (pv == UIWidget.Pivot.TopLeft || pv == UIWidget.Pivot.Top || pv == UIWidget.Pivot.TopRight) v.y = 1f;
else v.y = 0f;
return v;
}
发现pivotOffset是一个由0,0.5,1组成的二维向量，所以前面计算localCorners的原理就可想而知了。
当然还有诸如width(minWidth),height(minHeight),depth(raycastDepth),alpha(finalAlpha)，看了代码就自然一目了然了。rayCastDepth和finalAlpha都考虑了UIPanel的因素，所以有时表层看着没问题，可能就要去看下底层的实现。
两大基石：UIDrawCall和UIGeometry
根据我有限的3D知识（其实没有学过），隐约觉得3D呈现出来的东西都是由顶点（vertice）构成的Mesh通过纹理贴图构成的材质渲染出来的。
但是NGUI所有组件都没有看到Mesh Render，只有transform信息和脚本，查看UIWidget：
////// Internal usage -- draw call that's drawing the widget. /// public UIDrawCall drawCall { get; set; } // Widget's generated geometry UIGeometry mGeom = new UIGeometry();
这就是UIDrawCall和UIGeometry神一般的存在。
UIGeometry
UIGeometry其实是UI组件的数据仓库，存储UI组件的Vertices，UVs和Colors，以及相对UIPanel的顶点Vertices，法向量和切线：
////// Widget's vertices (before they get transformed). /// public BetterListverts = new BetterList (); /// /// Widget's texture coordinates for the geometry's vertices. /// public BetterListuvs = new BetterList (); /// /// Array of colors for the geometry's vertices. /// public BetterListcols = new BetterList (); // Relative-to-panel vertices, normal, and tangent BetterList mRtpVerts = new BetterList (); Vector3 mRtpNormal; Vector4 mRtpTan;
UIGeometry为此提供了三个函数，也可以说是为渲染绘制做的三个步骤：
Step 1: Clear() 情况存储的信息
Step 2: ApplyTransform() 将verts转化为相对UIPanel的顶点坐标mRtpVerts
Step 3: WriteToBuffers() 将数据仓库缓存的数据添加到UIPanel的缓存数据队列中去。
UIWidget分别用UpdateGeometry和WriteToBuffers对UIGeometry的ApplyTransform和WriteToBuffers进行封装调用，ApplyTransform是根据UIPanel的坐标调整Vertices的坐标，WriteToBuffers将UIGeometry的Vertices，UVs和Colors添加进UIPanel的Vertices，UVs和Colors的BetterList中。
这里还有一个细节就是：UIGeometry中的Vertices，UVs和Colors的BetterList的buffer什么时候得到，因为这些都是UIWidget或其子类的信息，所以在UIWidget的子类UILabel，UISprite和UITexture中OnFill函数生成UIGeometry的BetterList的buffer。
UIDrawCall
如果是UIGeometry为了渲染绘制准备数据，那么UIDrawCall其实是定义了渲染绘制需要的基本组件。这里拿煮菜做个比喻帮助理解：UIGeometry好比为煮菜准备食材，UIDrawCall好比是煮菜的工具（锅，炉子等），UIPanel就是大厨了决定着什么时候该煮菜，UIWidget（UILabel，UISprite和UITexture）是这道菜怎么样的最终呈现。会不会很好理解呢？
下面就直接看下Set函数：
if (mFilter == null) mFilter = gameObject.AddComponent(); if (mRen == null) mRen = gameObject.GetComponent ();
在Set函数中就给gameObjdect添加了MeshFilter和MeshRenderer组件，当然还做了其他辅助的工作。
此外，在UpdateMaterials惊奇的发现了UIPanel clipView的AlphaClip和SoftClip的实现，其实就是更换了Material的Shader，这也体现了Shader强大，不得不学呀，DSQiu在后面也会对Unity的Shader编程做一个整理。
回放细节，回笼锻造
看了上面就会觉得写得的确是所见即所得——D.S.Qiu好像都没有看到什么要害，都说学武功就要学习上次心法，一点皮毛总是会惹来耻笑。
还是回到UIWidget这个脚本中的两个函数：WriteToBuffers，OnFill，UpdateGeometry。
WriteToBuffers和OnFill这两个函数都是将Vertices，UVs和Colors等add进参数的List中去，查看WriteToBuffers的调用出发现其参数是UIPanel的Vertices，UVs和Colors，而OnFill的参数是UIGeometry的Vertices，UVs和Colors。
WriteToBuffers只是对UIGeometry的封装调用，也就是说将UIGeometry的Vertices，UVs和Colors等信息add进UIPanel的对应List中。
在看UIGeometry的脚本，一直有一个疑问：UIGeometry的Vertices，UVs和Colors的List没有看到add方法的执行，只有在WriteToBuffers被add。直到看到了OnFill才恍然大悟，虽然UIWidget的OnFill是虚函数，没有具体实现，看了下UISprite重写的OnFill函数，就是把Vertices，UVs和Colors 添加到UIGeometry的Vertices，UVs和Colors中。
转了一大圈，发现最后所有UI组件的Vertices，UVs和Colors都汇集到UIPanel的Vertices，UVs和Colors去了，然后UIPanel指定给UIDrawCall渲染就行了，具体细节还要等攻克UIPanel就明白了。
其他细节
到这里差不多把本文的内容都掏干净了，剩下的就是看下UIWidget的一些实现细节，MakePixelPerfect():对gameObject的localPosition和locaScale进行微调和纠正。
SetDirty():调用UIPanel的SetDirty()对组件的变更进行重建（rebuilt)。
CreatPanel():这个函数可以得知，所有UI组件一定是放在UIPanel的子节点上的，从前面的分析也可以知道：因为是UIPanel对统一对组件进行渲染绘制的，所以如果没有UIPanel有点“皮之不存，毛将附焉”的意思。
这也越发激发D.S.Qiu 去啃UIPanel这个主心骨。
小结：
总算对UIWidget，UIGeomerty 和UIDrawCall有了一个清晰的认识，这三个组件可以说是NGUI的背后无名英雄（平时使用都不会接触者三个脚本），功能很强大但很简单，真的很佩服NGUI的设计思路。
但我也有点小微词：UIWidget都被定义成长方形的，要是能提供自定义UI的接口（如我想画一个圆形UI），那将会更强大；底层缓存了很多数据，这个是内存和开发者的代码逻辑也是要考虑到的。
最后附上①画的NGUI框架图：
如果您对D.S.Qiu有任何建议或意见可以在文章后面评论，或者发邮件（[email protected])交流，您的鼓励和支持是我前进的动力，希望能有更多更好的分享。
转载请在文首注明出处：http://dsqiu.iteye.com/blog/1965340
更多精彩请关注D.S.Qiu的博客和微博（ID：静水逐风）
参考：
①dujimache：http://www.unitymanual.com/forum.php?mod=viewthread&tid=5579&highlight=NGUI%E6%A1%86%E6%9E%B6
