Unity利用UGUI中Graphic绘制曲线图

最新推荐文章于 2025-06-19 20:46:12 发布

YiZhe0731

最新推荐文章于 2025-06-19 20:46:12 发布

阅读量6.6k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yizhe0731/article/details/94580020

我们在创建可视UI组件时，可以通过继承Graphic来实现一些UI上的绘制功能。官方案例中通过重写了 OnPopulateMesh 函数实现了一个绘制彩色四边形的效果。
利用该方法，结合一些对地形数据的处理，我们可以制作像下图这样的地形剖面图效果：

在这里插入图片描述

主要思路

Graphic 是UGUI的核心组件，附件画面的显示。关于其原理，可以参考大佬博客，这里我们只谈谈几个小细节与关键步骤。

首先， UIVertex是用来管理UI顶点的一个结构体，我们可以将我们计算所得的顶点的位置信息存在这个结构体中(它是以像素为单位的)。
其次，右上角的剖面图上显示的变化的线其实是由诸多小矩形组成。我们在计算好顶点位置，给UIVertex赋值完之后，便可调用VertexHelper.AddUIVertexQuad(UIVertexs) 来将一个矩形加入到渲染中。
最后，我们需要调用刷新函数，SetAllDirty() 是分别设置Layout布局、Vertices顶点和Material材质为Dirty。我们这里只需要调用SetVerticesDirty()即可(每次修改参数都要调用其刷新)。

这边提供一个顶点数据设置的函数实现，另外的坐标轴、刻度线、坐标轴箭头等的实现方式类似。


        [Header("坐标轴显示属性")]
        public float width = 200;
        public float height = 200;
        public float lineWidth = 5;
        public Vector2 offset = new Vector2(2, 2);
        
        [Header("坐标轴数据属性")]
        public Vector2 axleMaxValue = new Vector2(100, 100);
        public Vector2 axleMinValue = Vector3.zero;
        public List<Vector2[]> datas = new List<Vector2[]>();
   
        /// <summary>