一种基于Unity动态趋势图界面的展示方法

摘要

本发明公开了一种基于Unity动态趋势图界面的展示方法，包括准备一组二维数组数据，数组中第一个数为X轴，第二个数为Y轴；确定好X轴、Y轴的刻度值；再确定初始值、刻度间隔和刻度个数；确定X轴和Y轴的每个刻度的位置；然后绘制趋势线，准备一个趋势图的线段元素，组成一条趋势线条，确定每个线段的坐标位置；调整每个线段的角度，计算当前线段的角度、长度，通过进行调整线段的长度对每个线段对接，以此类推，形成一条完整的趋势线条。本发明通过将一组二维数据，以趋势图的形式完整的展现出来，不论数组的长度和数值大小，都可以自由的调整进行展示，本方法指引结果准确，趋势展示精准，界面美观，完美的解决了Unity开发中的趋势图界面展示的问题。

说明书

技术领域

本发明涉及三维模型技术领域，具体来说，涉及一种基于Unity动态趋势图界面的展示方法。

背景技术

Unity软件也叫Unity3d，是一款常用的、市场占有率很高的三维产品的开发软件，市面上很多手机游戏、三维应用程序、虚拟现实产品都是由Unity软件开发的。Unity也提供了强大的二维的UI界面功能，能够展示图片、按钮、文本等很多UI界面的元素。但是对于复杂一些的，例如数据趋势图这样的就没有直接提供了，如需使用就需要开发人员自己编写，目前Unity开发行业内还没有一个能供大家广泛使用的解决方案。

发明内容

针对相关技术中的上述技术问题，本发明提出一种基于Unity动态趋势图界面的展示方法，能够克服现有技术方法的上述不足。

为实现上述技术目的，本发明的技术方案是这样实现的：

一种基于Unity动态趋势图界面的展示方法，包括以下步骤：

S1：首先准备一组二维数组数据作为要展示的数据，每个数组中第一个数作为X轴数据，第二个数作为Y轴数据；

S2：然后通过计算确定好X轴、Y轴的刻度值；

S3：刻度值确定好以后，再通过计算确定初始值、刻度间隔和刻度个数；

S4：初始值、刻度间隔和刻度个数确定好后，在Unity中导入两个箭头的图片，作为X轴、Y轴,根据两个图片的长度尺寸和刻度个数，确定X轴和Y轴的每个刻度的位置；

S5：然后绘制趋势线，准备一个趋势图的线段元素，元素要包含一个圆点图片和一个线段图片，该元素可以以圆点图片为中心自由旋转，然后复制这个线段，通过调整复制出的每个线段的坐标，确定每个线段的坐标位置，如此拼接各个线段元素从而组成一条趋势线条；

S6：然后调整每个线段的角度，计算当前线段的角度；

S7：再计算当前线段的长度，将下一个线段的位置减去当前线段位置的距离，得出当前线段的长度；

S8：通过进行调整线段的长度对每个线段对接，以此类推，形成一条完整的趋势线条。

进一步地，X轴的数据在本发明中用于表示时间，Y轴的数据在本发明中用于表示具体数值。

进一步地，计算X轴、Y轴刻度值，X轴刻度值计算是通过将每个刻度增加1即可，Y轴刻度值计算根据二维数组的情况确定。

进一步地，调整文本的坐标，通过使用Unity的Text文本工具进行调整。

进一步地，所述复制线段，通过使用Unity的Instantiate方法复制线段，复制的个数是数据组的长度减1。

进一步地，调整复制出的线段的坐标通过使用Unity的RectTransform组件的anchoredPosition属性进行调整。

进一步地，计算线段角度通过将下一个线段的位置减去当前线段的位置得出向量V，使用Unity的Vector2.Angle方法计算出向量V和朝右的夹角，就是当前线段的角度。

本发明的有益效果：通过将一组二维数组数据，以趋势图的形式完整的展现出来，不论数组的长度和数值大小，都可以自由的调整进行展示，本方法指引结果准确，趋势展示精准，界面美观，完美的解决了Unity开发中的趋势图界面展示的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例所述的基于Unity动态趋势图界面的展示方法的线段元素旋转示意图。

图2是根据本发明实施例所述的基于Unity动态趋势图界面的展示方法的线段趋势示意图。

图3是根据本发明实施例所述的基于Unity动态趋势图界面的展示方法的直观线段趋势示意图。

图4是根据本发明实施例所述的基于Unity动态趋势图界面的展示方法的发明步骤流程示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本发明保护的范围，为了方便理解本发明的上述技术方案，以下通过具体使用方式上对本发明的上述技术方案进行详细说明。

如图4所示，根据本发明实施例所述的基于Unity动态趋势图界面的展示方法，包括制定一个趋势图，首先要先准备一组二维数组数据作为要展示的数据，例如：[{1,55},{2,80},{3,132},{4,21},{5,34},{6,99}]，那么其中每个数据里面的第一个数是X轴的数据，实际应用一般用于表示时间或者序号，本发明中用于表示时间，第二个数据是Y轴，实际应用一般用于表示具体的数值，本发明中同样用于表示数值。

然后，要确认好X轴、Y轴的刻度值，因为本发明方法是可以满足任何数值的展示，所以刻度值就需要每次计算得出，并不是固定的。X轴的刻度值计算就是通过将每个刻度增加1即可，一共6个刻度；Y轴刻度值计算是根据二维数组的情况定的，一般使用5个刻度则足够使用。然后需要考虑每个刻度的间隔为多少，一般来说，刻度的间隔会使用5或10这样的整数，比较美观且方便观察，因此要将间隔数值取整数，但是这个数值是千变万化的，调整起来需要分别判断。

调整的方法是先将Y轴上最大数和最小的数相减，再除以4(Y轴有5个刻度也就是4个间隔），得到数值N，如果N是整数，就看首位数字的大小，大于5就直接进一位取整数，例如664直接变成1000。如果首位数字大于2小于5，将第首位变为5，后面的取整数，例如444直接变成500。如果首位数字小于2就将首位数变为2，后面的取整数，例如144直接变成200。如果N不是整数，分两种情况，当N大于1时，参照上面整数的方法即可。例如66.66变成100，36.66变成50，11.66变成20。当N小于1时，参照的就不是首位数的大小，而是小数点后第一个非0的数字，取整的方式还是参照上述方法，例如0.006变成0.01，0.04变成0.05，0.11111变成0.2。这样调整下来，Y轴的刻度间隔就变成了整数了。以上面的数组为例，最大的一个值是132，最小的一个是21，(132-21)÷4就是27.25，取整后是50。

刻度间隔确定好了后，再确定初始值，因为Y轴的值有可能很大，不一定是从0开始，计算方法是以最小的值除以间隔，然后向下取整，例如上面21÷50是0.42，向下取整刚好是0。

初始值、刻度间隔、刻度个数都确定好了之后，在Unity中导入两个箭头的图片，一个作为X轴，一个作为Y轴，将它们呈直角拼好，图片的长度是已知的，根据两个图片的长度尺寸和刻度的个数，就可以确定好X轴和Y轴的每个刻度的位置，使用Unity的Text文本工具，来调整文本的坐标，在相应位置标好数字。然后，就是绘制趋势线的工作。

首先准备好一个趋势图的线段元素，Unity里面叫做预制体(Prefab)，这个元素包含一个圆点图片和一个线段图片，如图1所示，该元素可以以圆点图片为中心点自由旋转。通过将若干个线段元素拼接，即可组成一条趋势线条。使用Unity的Instantiate方法复制这个线段，复制的个数是数据组的长度减1，按照上面的数据就是复制5个。通过使用Unity的RectTransform组件的anchoredPosition属性可以调整每个线段的坐标，横向的坐标值就是趋势图的X轴的每个刻度的坐标，纵向的坐标值就是(Y轴的值-Y轴初始值)÷Y轴刻度值*Y轴的每个刻度的长度，这样每个线段的坐标位置就确定了。

然后是调整每个线段的角度，线段是以圆点为中心点旋转的，朝向右边就是0度，通过将下一个线段的位置减去当前线段的位置得出向量V，使用Unity的Vector2.Angle方法就可以计算出向量V和朝右的夹角，这样就计算出了当前线段的角度。

再通过使用Unity的Vector2.distance方法计算下一个线段的位置减去当前线段位置的距离，得出当前线段的长度，使用Unity的RectTransform组件的sizedelta方法调整好线段的长度即可完成每个线段的完美对接，以此类推，这样就形成了一条完整的趋势线条。

最后一个点不能用线段来展示，只能用一个圆点表示，才能完成收尾。通过上述方法，最终出现的结果如图2所示。

如图3所示，还可以使用Unity的VertexHelper.AddUIVertexQuad方法，可以根据趋势线条的坐标绘制一个多边形，使用一张渐变效果的图片作为底图，可以实现一个符合趋势图边缘的多边形渐变图，这样会增加界面的美观度。

综上所述，借助于本发明的上述技术方案，通过将一组二维数据，以趋势图的形式完整的展现出来，不论数组的长度和数值大小，都可以自由的调整进行展示，本方法指引结果准确，趋势展示精准，界面美观，完美的解决了Unity开发中的趋势图界面展示的问题。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。