因为被问到之前有没有源代码，所以看了这个博客也不知道。 所以最近博主又把这个实现的代码简化了放在这里。 感兴趣的人请来看。 单击链接将其打开。
条形图、折线图经常用于数据可视化，但unity本身没有制作折线图的功能。 所以，我们需要自己写。 第一次遇到这个需求是我参加工作的时候，当时没有办法，只好选择做柱状图。 那个时候，条形图还是会用实例化的Image显示，设定他的高度。 想想300，400个数据同时被实例化，当时的设备怎么样了。 幸运的是，现在我找到了更好的更节约性能的方法。 如果你想在我这里复制代码来达到你的需求，就不用往下看了。 你只有了解了整个过程的原理，才能转发给你的项目。
首先放置效果图仔细看。 有点。
就像我之前写的那样，我很早就赶时间，没那么仔细，所以最近不忙就想细化装修。 因为unity的Image、Text等他们都继承自MaskableGraphic，所以我们写的这个类也继承自MaskableGraphic，例如：publicclasschart3360mm
其提供的函数onpopulatemesh(VertexHelperVH )负责渲染的功能。 要制作折线图，拼接需要矩形。 矩形由四个顶点组成，在下面粘贴渲染矩形的代码。 protectedoverridevoidonpopulatemesh (vertexhelpervh ) ) vertex[]verts=newuivertex ) 4； verts [0].position=new vector3(0，0 )； verts[0].color=Color.yellow； verts[0].uv0=Vector2.zero； verts [1].position=new vector3(0，10 )； verts[1].color=Color.yellow； verts[1].uv0=Vector2.zero； verts [2].position=new vector3(20，20 )； verts[2].color=Color.yellow； verts[2].uv0=Vector2.zero； verts [3].position=new vector3(20，0 )； verts[3].color=Color.yellow； verts[3].uv0=Vector2.zero； VH.adduivertexquad(verts； }VH.adduivertexquad(verts )； 为unity渲染在渲染数组中添加了矩形的四个顶点。 这是用于渲染unity提供的自定义大小矩形的核心代码。 谈谈我们实现自己需求的方法吧。 首先，必须在场景中创建canvas，然后在canvas下创建空物体。 然后，装载我们写的脚本以显示自绘制形状。 如下图所示设定这个物体的大小。 因为它以左下角为原点，所以物体的pivot为(0，0 )，锚点为左下角，即Anchors的min ) 0，0 ) max ) 0，0 )。 接下来我们开始我们的绘画工作。 进入我们画的温度曲线。 前两个数据值为38，25 (两个随机数字)。 如下图所示，两个黑点的位置可以画出顶点为1234的平行四边形。 倾斜的平行四边形会给人一种头部较宽、尾部较窄的不适感，而且倾斜程度不同，线条的粗细也会有很大的不同。 这在整体效果上非常差。 因此，我们必须设置线宽以保证整体视觉的和谐性。 这个计算公式很简单，首先在求出线的倾斜度k=(pos1.y-pos0.y )/(pos1.x-pos0.x )的图纸上画画看会更直观。 假设第一个点的坐标为[x0，y0]，设置线的宽度为m，k=0，则矩形的第一个点为[x0，y0-m/2，第二个点为[x0，y0m/2]，但由于通常k不是0，因此根据梯度定理h=)那么，我们的定制折线图完成了。 因为折线图是一次制作出来的，所以性能非常省。 真正的底层接口将为性能优化带来巨大的提高。
现在，我们可以画出我们自己想要的折线图。 唯一的缺陷是锯齿会稍微变大。 这还不能解决(如果有人知道可以提高画质，请在下面评论哦)。 今天在企划方面，出现了新的需求，即鼠标漂浮在数据上时会显示对应的值。 因为我们知道unity中包含的UI组件不支持这些功能，所以我们应该研究并定制UGUI公开的源代码。 首先，我们需要折断
线图上绘制出每个数据点，为了让更清晰可见，我们选择绘制白色的正方形。假设第一个数据点为38，我们测试矩形边长为3时大小合适，则代码如下： UIVertex[] verts = new UIVertex[4]; verts[0].position = new Vector3(10-1.5f,38-1.5f); verts[0].color = Color.white; verts[0].uv0 = Vector2.zero; verts[1].position = new Vector3(10-1.5f, 38+1.5f); verts[1].color = Color.white; verts[1].uv0 = Vector2.zero; verts[2].position = new Vector3(10+1.5f, 38+1.5f); verts[2].color = Color.white; verts[2].uv0 = Vector2.zero; verts[3].position = new Vector3(10+1.5f, 38-1.5f); verts[3].color = Color.white; verts[3].uv0 = Vector2.zero; vh.AddUIVertexQuad(verts); 这个是最基本的矩形绘制代码，很简单。接下来就是核心的自定义鼠标悬浮响应区域。在网上搜索一些相关知识以及看了UGUI 的Image代码后，我们可以确定，鼠标悬浮响应区域的设定和IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)这个函数有关，而这个函数是继承自ICanvasRaycastFilter接口。所以我们就在自己写的函数内加一个继承的接口，然后实现他的方法。我就试着使用Image提供的一些方法测试，很幸运我成功了。代码如下： public bool IsRaycastLocationValid(UnityEngine.Vector2 sp, UnityEngine.Camera eventCamera) { Vector2 local; //求出屏幕坐标在canvas下的2D坐标 RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, sp, eventCamera, out local); Rect rect = GetPixelAdjustedRect(); // Convert to have lower left corner as reference point. local.x += rectTransform.pivot.x * rect.width; //算出屏幕坐标在UI元素内的坐标 local.y += rectTransform.pivot.y * rect.height; //这里的数字是根据每个点来确定的，也就是以这个点为中心的自定义边长的正方形四个顶点。 if (local.x > 10 && local.x < 30 && local.y > 20 && local.y < 30) return true; else return false; } 在我们调用这个函数时，第一个参数就是Input.mousePosition，第二个参数为Camera cam = (canvas.renderMode == RenderMode.ScreenSpaceOverlay) ? null : canvas.worldCamera;。在Update函数里我们调用这个函数进行检测： private void Update() { bool lal= IsRaycastLocationValid(Input.mousePosition, null); //print(lal); } 如果返回true，我们就把提前设定好的Text给setactive true，并赋给相应的值。接下来的处理就很简单可以按照自己的想法来实现。我这个方法虽然可以实现现在的需求，但是有个很大的缺点，就是在数据有几百个的时候，每次都要计算鼠标是否在这几百个点的位置范围内，计算量很大。所以，接下来打算做点的选取设置。在被遮罩遮挡的区域点不被纳入对比计算范围。只将显示出来的数据纳入对比计算范围内。 最后的效果图。