menu 首页 主站 标签 归档 关于
search more_vert
UGUI源码分析-RawImage(2)

一言加载中...

换一种解读源码的模式吧，自己实现一个Image组件，从简到难，先拿RawImage开刀：

注：下面图片显示左侧为UGUI提供的RawImage组件，右侧为我们自己写的组件。

先在屏幕中显示一张图片

  1. 创建一个组件MyImage,继承自MaskableGraphic，暴露在Inspector面板一张贴图，可以手动赋值，重写下mainTexture属性，用来覆盖默认的白色贴图。 代码如下：
1
2
3
4
5
6
public class MyImage : MaskableGraphic
{
    [SerializeField] Texture m_Texture;

    public override Texture mainTexture => base.mainTexture;
}

此时挂载到一个空的GameObject上，给贴图赋值后的效果如下：
1

  1. 可以看到MyImage只是渲染出默认的白色，并没有显示我们想要的效果。毕竟我们并没有设置贴图…下面重写下mainTexture属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public override Texture mainTexture
{
    get
    {
        //如果贴图是空的
        if (m_Texture == null)
        {
            //首先从材质球里看看有没有贴图，有的话就用
            if(material!=null && material.mainTexture != null)
                return material.mainTexture;

            //材质球里也没有，那就还显示上面的“白图”吧
            return s_WhiteTexture;
        }
        //将我们指定的贴图返回
        return m_Texture;
    }
}

//顺便也给 m_Texture(privite类型)封装一下，在其他地方可以直接赋值
public Texture texture
{
    get { return m_Texture; }
    set
    {
        //如果新贴图和原来的比较没变化，就不做处理
        if (m_Texture == value) return;

        //有变化要更新m_Texture,然后标记 Material和Vert为Dirty
        //标记Dirty的作用是，标记下次渲染要重新绘制。
        m_Texture = value;
        SetMaterialDirty();
        SetVerticesDirty();
    }
}

看图，已经可以将图片显示出来了：

  1. RawImage还有一个改变UV偏移的功能，UV值的改变对显示的影响，直接看图吧，比较直观：

uv_xy
uv_wh

坐标系:

uv

下面也尝试实现这个功能：先加上UV字段，然后封装一波：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class MyImage : MaskableGraphic
{
    [SerializeField] Texture m_Texture;
    [SerializeField] Rect m_UV;

    public Rect UV_Rect
    {
        get { return m_UV; }
        set
        {
            //
            if (m_UV == value) return;
            m_UV = value;
            //更新顶点
            SetVerticesDirty();
        }
    }
    // .... 省略
}

重新绘制顶点也少不了，安排上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
protected override void OnPopulateMesh(VertexHelper vh)
{
    //清空一波顶点
    vh.Clear();
    if (m_Texture == null) return;

    //通过调用基类中GetPixelAdjustedRect方法获取绘制范围
    //下面可以看到他包含的数据，xy坐标，宽高等信息
    Rect info = GetPixelAdjustedRect();
    float x_width = info.x + info.width;
    float y_heigh = info.y + info.height;

    //添加顶点
    //参数：坐标点，颜色，UV
    //Image的Color属性就是这里设置起作用的
    vh.AddVert(new Vector3(info.x, info.y), color, new Vector2(m_UV.xMin, m_UV.yMin));
    vh.AddVert(new Vector3(info.x, y_heigh), color, new Vector2(m_UV.xMin, m_UV.yMax));
    vh.AddVert(new Vector3(x_width, y_heigh), color, new Vector2(m_UV.xMax, m_UV.yMax));
    vh.AddVert(new Vector3(x_width, info.y), color, new Vector2(m_UV.xMax, m_UV.yMin));

    //添加两个三角面
    vh.AddTriangle(0, 1, 2);
    vh.AddTriangle(2, 3, 0);
}

原理图：

draw

GetPixelAdjustedRect中存储的信息：

GetPixelAdjustedRect

这样一个差不多的RawImage所包含的功能就实现了。

  • Material是怎么改变?

    答：
    在materialForRendering字段中，通过IMaterialModifier.GetModifiedMaterial获取发生改变的Material,然后在UpdateMaterial的时候，调用CanvasRenderer.SetMaterial进行设置。
  1. Color是怎样实现改变的？

    答：上面OnPopulateMesh中在添加顶点时就设置了Color。

最后再完善下Editor界面,完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// MyRawImage.cs
namespace UnityEngine.UI
{
    public class MyRawImage : MaskableGraphic
    {
        [SerializeField] Texture m_Texture;
        [SerializeField] Rect m_UV = new Rect(0, 0, 1, 1);

        public Texture texture
        {
            get { return m_Texture; }
            set
            {
                //如果新贴图和原来的比较没变化，就不做处理
                if (m_Texture == value) return;

                //有变化要更新m_Texture,然后标记 Material和Vert为Dirty
                //标记Dirty的作用是，标记下次渲染要重新绘制。
                m_Texture = value;
                SetMaterialDirty();
                SetVerticesDirty();
            }
        }
        public Rect UV_Rect
        {
            get { return m_UV; }
            set
            {
                //
                if (m_UV == value) return;
                m_UV = value;
                //更新顶点
                SetVerticesDirty();
            }
        }

        protected override void OnPopulateMesh(VertexHelper vh)
        {
            //清空一波
            vh.Clear();
            if (m_Texture == null) return;

            //通过调用基类中GetPixelAdjustedRect方法获取绘制范围
            //下面可以看到他包含的数据，xy坐标，宽高等信息
            Rect info = GetPixelAdjustedRect();
            float x_width = info.x + info.width;
            float y_heigh = info.y + info.height;

            //添加顶点
            vh.AddVert(new Vector3(info.x, info.y), color, new Vector2(m_UV.xMin, m_UV.yMin));
            vh.AddVert(new Vector3(info.x, y_heigh), color, new Vector2(m_UV.xMin, m_UV.yMax));
            vh.AddVert(new Vector3(x_width, y_heigh), color, new Vector2(m_UV.xMax, m_UV.yMax));
            vh.AddVert(new Vector3(x_width, info.y), color, new Vector2(m_UV.xMax, m_UV.yMin));

            //添加三角面
            vh.AddTriangle(0, 1, 2);
            vh.AddTriangle(2, 3, 0);
        }

        public override Texture mainTexture
        {
            get
            {
                //如果贴图是空的
                if (m_Texture == null)
                {
                    //首先从材质球里看看有没有贴图，有的话就用
                    if (material != null && material.mainTexture != null)
                        return material.mainTexture;

                    //材质球里也没有，那就还显示上面的“白图”吧
                    return s_WhiteTexture;
                }
                //将我们指定的贴图返回
                return m_Texture;
            }
        }

        // 设置为贴图的大小
        public override void SetNativeSize()
        {
            if (m_Texture == null) return;

            float width = m_Texture.width;
            float height = m_Texture.height;
            rectTransform.sizeDelta = new Vector2(width * m_UV.width, height + m_UV.height);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//MyRawImageEditor.cs
using UnityEngine;
using UnityEngine.UI;

namespace UnityEditor.UI
{
    [CustomEditor(typeof(MyRawImage), true)]
    [CanEditMultipleObjects]
    public class MyRawImageEditor : GraphicEditor
    {
        SerializedProperty m_Texture;
        SerializedProperty m_UV;

        protected override void OnEnable()
        {
            base.OnEnable();
            m_Texture = serializedObject.FindProperty("m_Texture");
            m_UV = serializedObject.FindProperty("m_UV");
        }
        public override void OnInspectorGUI()
        {
            serializedObject.Update();
            base.OnInspectorGUI();
            EditorGUILayout.PropertyField(m_Texture);
            EditorGUILayout.PropertyField(m_UV);
            if (GUILayout.Button("Set Native Size"))
            {
                (target as Graphic).SetNativeSize();
            }
            serializedObject.ApplyModifiedProperties();
        }
    }
}

好啦，RawImage的基本功能已经完成了。之后开始UGUI-Image组件相关的源码分析。

写博客不易，请我喝杯咖啡？

评论

arrow_upward