UGUI内核大探究（九）Image与RawImage

Image组件是UGUI里最常用的组件（可能没有之一），我们知道其实还有一个RawImage组件。那么二者的区别是什么呢？之前的文章UGUI内核大探究（八）MaskableGraphic中我们提到过，二者（连同Text）都继承自MaskableGraphic。但是同为图片组件，Image的代码有接近一千行之多，而RawImage却只有120行。

RawImage顾名思义，未加工的生肉图片，RawImage只为我们提供了修改UV的方法，除此之外都是继承自MaskableGraphic的方法。是一个清纯不做作的组件。

而Image提供了四种ImageType：Simple（普通）、Sliced（切割）、Tiled（平铺）、Filled（填充），而且它还是布局元素（ILayoutElement），可以被各种布局组（ILayoutGroup）所包含，将它和其他布局元素进行布局。

所以假如我们要在UI上添加图片的时候，不妨考虑一下你到底需要的是轻量级的RawImage还是功能丰富的Image。

按照惯例，附上UGUI源码下载地址。

那么既然RawImage代码只有120行，那本文就先介绍RawImage。

最重要的一个方法：

        protected override void OnPopulateMesh(VertexHelper vh)
        {
            Texture tex = mainTexture;
            vh.Clear();
            if (tex != null)
            {
                var r = GetPixelAdjustedRect();
                var v = new Vector4(r.x, r.y, r.x + r.width, r.y + r.height);

                {
                    var color32 = color;
                    vh.AddVert(new Vector3(v.x, v.y), color32, new Vector2(m_UVRect.xMin, m_UVRect.yMin));
                    vh.AddVert(new