CN105867803A - 利用圆环图形界面展示用户选择区间的方法和装置 - Google Patents

Abstract

本发明提供一种利用圆环图形界面展示用户选择区间的方法和装置，能够通过点击、滑动等移动端常见的交互方式去实现一种新型的状态选择的交互方式，提高交互的灵活性和趣味性。该利用圆环图形界面展示用户选择区间的方法包括：从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；根据圆环模型在用户终端的显示器绘制圆环图形界面，圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应可操作区间数据和不可操作区间数据；接收用户在用户触摸区的触摸事件，并根据触摸事件在用户触摸区绘制用户操作区间；在用户停止触摸后，把用户操作区间对应的用户选择区间数据显示在圆环图形界面的预定区域。

Description

利用圆环图形界面展示用户选择区间的方法和装置

技术领域

本发明涉及计算机及其软件技术领域，特别地涉及一种利用圆环图形界面展示用户选择区间的方法和装置。

背景技术

由于移动平台的交互特性及移动设备屏幕较小的硬件限制，以往对于时段或者具有较多状态的数据选择的交互方式常常使用系统控件来实现，现有的实现方案一般采用UISegmentedControl(分段控件)、UIPickerView(选择控件)、自定义简单的下拉菜单控件等。

UISegmentedControl(分段控件)适用于选择较少的情况的切换，如猫眼电影APP中影片类型的选择就采用此控件，优点是简单方便，但当选择多于5个时信息就会展示不全，就不再适用于此控件；UIPickerView(选择控件)多用于多种选择条件的展示，例如购买火车票的APP—“铁路12306”中，订票时段的选择是通过系统的控件“PickerView”来实现的。此控件适用于有更多条件的选择，但失于精致化和个性化。

基于以上，目前很多APP也采用了自定义的简单的下拉菜单控件来进行多状态、条件的选择和展示，例如美团APP中城市区域的选择采用了自定义的下拉菜单，虽简单方便但选择受限且应用范围较窄。

发明内容

有鉴于此，本发明提供一种利用圆环图形界面展示用户选择区间的方法和装置，能够模仿时钟展示，增强应用界面的友好度，通过点击、滑动等移动端常见的交互方式去实现一种新型的状态选择的交互方式，提高交互的灵活性和趣味性，提升用户体验。

为实现上述目的，根据本发明的一个方面，提供了一种利用圆环图形界面展示用户选择区间的方法。

一种利用圆环图形界面展示用户选择区间的方法，包括：从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；根据所述圆环模型在用户终端的显示器绘制圆环图形界面，所述圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应所述可操作区间数据和所述不可操作区间数据；接收用户在所述用户触摸区的触摸事件，并根据所述触摸事件在所述用户触摸区绘制用户操作区间；在用户停止触摸后，把所述用户操作区间对应的用户选择区间数据显示在所述圆环图形界面的预定区域。

可选地，所述用户选择区间数据经用户确认后提交给所述服务器。

可选地，所述圆环模型数据的数据集合的元素个数及各个元素的在所述数据集合中所占的比例为固定值。

可选地，所述圆环模型数据是时段数据格式，在所述绘制之前进行格式转换，把所述时段数据格式转换为弧度数据格式，并将所述时段数据和所述弧度数据分别按序存放在两个浮点型数组内。

可选地，所述绘制的步骤包括：以所述客户终端的显示器的显示屏幕的物理中心为圆心，以预定的R为外半径并且以预定的r为内半径绘制圆环，其中，R和r为正数，R>r，且R应小于圆心到显示屏幕边缘的距离；将所述圆环显示为可操作区域；从所述弧度数据中获取不可操作区域的数据，并以不同颜色的扇形在所述圆环中绘制不可操作区域。

可选地，用于显示所述用户选择区间数据的所述预定区域位于所述圆环的中央。

可选地，所述触摸事件包括点击事件和滑动事件。

可选地，当所述触摸事件为所述点击事件时，绘制用户操作区间包括：获取用户点击区域内的任一点，并计算当前点的弧度及其所在的弧度区间；将所述弧度区间绘制为所述用户操作区间。

可选地，计算当前点所在的弧度区间之前，还包括：确认所述当前点位于所述圆环上。

可选地，将所述弧度区间绘制为所述用户操作区间之前，还包括：确认所述当前点的弧度位于所述可操作区域内。

可选地，将所述弧度区间绘制为所述用户操作区间之后，还包括：存储所述弧度区间；以及若用户重复提交点击事件，则存储最后一个位于所述可操作区域内的弧度区间。

可选地，当所述触摸事件为所述滑动事件时，绘制所述用户操作区间包括：获取用户在所述用户触摸区中刚触摸到的点击区域内的任一点，并计算当前点的弧度；根据用户的滑动操作的范围绘制所述用户操作区间。

可选地，绘制所述用户操作区间之前，还包括：确认所述当前点的弧度位于所述可操作区域内。

可选地，将所述用户选择区间数据显示在所述预定区域之前，还包括：将所述用户操作区间对应的弧度数据转换为时段数据。

根据本发明的另一方面，提供了一种利用圆环图形界面展示用户选择区间的装置。

一种利用圆环图形界面展示用户选择区间的装置，包括：模型数据获取模块，用于从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；圆环模型绘制模块，用于根据所述圆环模型在用户终端的显示器绘制圆环图形界面，所述圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应所述可操作区间数据和所述不可操作区间数据；用户操作绘制模块，用于接收用户在所述用户触摸区的触摸事件，并根据所述触摸事件在所述用户触摸区绘制用户操作区间；区间数据显示模块，用于在用户停止触摸后，把所述用户操作区间对应的用户选择区间数据显示在所述圆环图形界面的预定区域。

根据本发明的又一方面，提供了一种利用圆环图形界面展示用户选择区间的装置。

一种利用圆环图形界面展示用户选择区间的装置，包括：用于存储指令的存储器；处理器，执行所述指令，用于：从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；根据所述圆环模型在用户终端的显示器绘制圆环图形界面，所述圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应所述可操作区间数据和所述不可操作区间数据；接收用户在所述用户触摸区的触摸事件，并根据所述触摸事件在所述用户触摸区绘制用户操作区间；在用户停止触摸后，把所述用户操作区间对应的用户选择区间数据显示在所述圆环图形界面的预定区域。

根据本发明的技术方案，通过在用户终端利用圆环图形界面来模拟用户的选择区间，并准确识别用户手势的开始点，根据用户手势点击、滑动去实时展示用户的选择及改变的范围，在可选与不可选择区间之间实时切换，从而实现了人机之间准确、流畅的交互。本发明通过数学的基本算法及iOS的Quartz 2D技术、响应者链及触摸事件来实现准确的数据对象范围选择和调整，从而提供了在移动平台上对此类操作的一种新的交互模式。通过在服务器端配置不同类型的数据，本发明可作为动态展示不同类型的多种状态展示、选择的装置。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是本发明实施例的利用圆环图形界面展示用户选择区间的系统的架构图；

图2是根据本发明实施例的一种利用圆环图形界面展示用户选择区间的方法的主要步骤示意图；

图3是本发明实施例的绘制过程示意图；

图4是本发明实施例的实现效果图；

图5是根据本发明一个实施例的利用圆环图形界面展示用户选择区间的装置的主要模块示意图；

图6是根据本发明另一实施例的利用圆环图形界面展示用户选择区间的装置的主要模块示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是本发明实施例的利用圆环图形界面展示用户选择区间的系统的架构图。如图1所示，本发明的利用圆环图形界面展示用户选择区间的系统主要包括：数据请求模块、数据处理模块、绘制模块、交互响应模块、数据转换模块和数据提交模块，共6个模块。以下分别介绍各个模块的功能。

数据请求模块，用户终端通过发起HTTP请求的形式从服务器端请求用于展示的数据，结合本发明的实施例，例如为时钟模型的数据。并在服务器响应之后，接收服务器端返回的用于展示的数据，然后，可通过通用的解析模块解析为对应的数据模型。

数据处理模块，主要用于处理从服务器端获取到的数据与用户终端可使用的绘制数据的数据格式的转化。主要操作内容是取出数据请求模块中得到的数据模型的时段数据(形如09：00-10：30)，并将时段数据转化为绘制所需的浮点型弧度数据，然后存储。

绘制模块，主要用于绘制时钟模型，即：时钟环形交互区域、不可操作与可操作的区域范围，并实时绘制用户选择时段及用于展示的字段。

交互响应模块，主要用于获取用户的输入数据，并响应用户的操作。

数据转换模块，将从交互响应模块中获取到的用户的输入数据转换为绘制数据，以用于绘制模块进行实时绘制作为响应；再将用户的输入数据转换为数据请求模块中获取的时段数据形式，以用于实时展示及数据提交模块使用。

数据提交模块，将用户输入的数据通过数据转换模块转换为与服务器约定好的时段数据格式并以HTTP请求的形式提交给服务器。

图2是根据本发明实施例的一种利用圆环图形界面展示用户选择区间的方法的主要步骤示意图。如图2所示，本发明的利用圆环图形界面展示用户选择区间的方法主要包括如下的步骤S21至步骤S24。

步骤S21：从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；

步骤S22：根据圆环模型在用户终端的显示器绘制圆环图形界面，圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应可操作区间数据和不可操作区间数据；

步骤S23：接收用户在用户触摸区的触摸事件，并根据触摸事件在用户触摸区绘制用户操作区间；

步骤S24：在用户停止触摸后，把用户操作区间对应的用户选择区间数据显示在圆环图形界面的预定区域。

其中，用户选择区间数据经用户确认后提交给所述服务器。

圆环模型数据的数据集合的元素个数及各个元素的在所述数据集合中所占的比例为固定值。例如：假设圆环模型数据的数据集合为当前城市的行政区域面积的集合，那么该数据集合中包含的元素个数(即：当前城市的行政区域个数)是固定值，且各个元素(当前城市的每个行政区域的面积)在该数据集合(当前城市的行政区域面积的集合)中所占的比例为固定值。

根据本发明优选实施例的技术方案，圆环模型例如为时钟模型，圆环模型数据是时段数据格式，在绘制之前进行格式转换，把时段数据格式转换为弧度数据格式，并将时段数据和弧度数据分别按序存放在两个浮点型数组内。以iOS操作系统为例，在进行时段数据格式与弧度数据格式的转换时，可以按照以下方法进行：

步骤A1：根据时段总数据的长度与数据步长确认绘制刻度范围及绘制单元弧长。如：可选时段总数据为09：00-21：00，以30分钟为步长，即可选项为24个，那么对应的刻度范围为[0，23]。单元弧长即步长为360度弧/24＝15度弧；若可选时段总数据为09：00-12：00，以20分钟为步长，则可选项为9个，那么对应的刻度范围为[0，8]。相应地，单元弧长即步长为360度弧/9＝40度弧；

步骤A2：转换服务端数据为绘制刻度数据。例如，可选时段总数据为09：00-21：00，以30分钟为步长，那么，09:00-10:30对应的刻度范围是[0，3]；

步骤A3：将刻度数据转化为绘制所需使用的弧度数据：

弧度＝π+刻度*(π/12.0)。由于iOS设备的坐标系与我们常用的数学坐标系不同，此处加π是为了绘制时从视觉展示上是顺时针从9点钟方向开始。如：刻度范围[0，3]对应的弧度范围为[π，π*5/4]。

根据本发明的技术方案，步骤S22中所述绘制的步骤可以包括：

以所述客户终端的显示器的显示屏幕的物理中心为圆心，以预定的R为外半径并且以预定的r为内半径绘制圆环，其中，R和r为正数，R>r，且R应小于圆心到显示屏幕边缘的距离；

将所述圆环显示为可操作区域；

从所述弧度数据中获取不可操作区域的数据，并以不同颜色的扇形在所述圆环中绘制不可操作区域。

其中，用于显示所述用户选择区间数据的所述预定区域位于所述圆环的中央。

根据用户对用户终端显示屏幕的不同操作，所述触摸事件可以包括点击事件和滑动事件。

根据本发明的技术方案，当所述触摸事件为所述点击事件时，绘制用户操作区间包括：获取用户点击区域内的任一点，并计算当前点的弧度及其所在的弧度区间；将所述弧度区间绘制为所述用户操作区间。其中，由于用户在进行点击屏幕时，会形成一个触控环形区域，因此在选择用户点击区域内的任一点时，优选为用户点击区域的中心位置。

并且，在计算当前点所在的弧度区间之前，还可以包括：确认所述当前点位于所述圆环上。若当前点不在所述圆环上，则不作处理，也不提示，相当于一次错误操作，只有在当前点位于圆环上时，即用户的操作在用户触摸区内时，才计算当前点的弧度及其所在的弧度区间。

在计算当前点的弧度及其所在的弧度区间时，可通过以下的方法来执行：

步骤B1：记由用户操作的点击区域内获取的触摸点为P，坐标为(x,y)，记圆心坐标为O(x0,y0)；

步骤B2：由从圆心到P点的连线获取到当前弧度与x轴正向的夹角。该夹角即可认为是P点的弧度值，则利用反正切函数即可得到：弧度＝atanf((y-y0)/(x-x0))，记弧度为：currentAngle。

步骤B3：由于反正切函数在数学象限上的取值区间为[-π，π]，而展示的区域为顺时针区域，需要将currentAngle按象限去加π的整数倍来得到绘制可用的弧度值。由点P与圆心O坐标的比较来获取当前点P位于数学象限的象限值，按下述规则进行加权：

P位于第四象限：currentAngle+＝π；

P位于第一、二象限：currentAngle+＝2*π；

P位于第三象限：currentAngle+＝3*π；

步骤B4：用户当前的弧度区间为包含当前弧度值的整15度弧度区间。如用户选择的时段范围为9：00-9：50。9：00整时段，恰好落在0刻度上，则弧度范围的左区间为π，以30分钟为步长的基础上，9：50分的刻度更接近10点的刻度(前一个刻度时间为9：30)。10点的弧度为(π+π/6)，则9：00-9：50所在的弧度区间为：[π，π+π/6]。

另外，在将所述弧度区间绘制为所述用户操作区间之前，还可以包括：确认所述当前点的弧度位于所述可操作区域内。若当前点的弧度位于可操作区域内，则将所述弧度区间绘制为所述用户操作区间，否则，提示此次用户操作的时段区间为不可操作区域。在判断当前点的弧度是否位于可操作区域内时，可通过以下的步骤来实现：

步骤C1：将服务器端获取到的不可操作的时段数据数组按步骤A1至步骤A3所述的方法转换为不可操作的弧度区间数组，并分别按序存储于两个浮点型数组中；然后，计算当前点的弧度currentAngle；

步骤C2：折半查找，从弧度区间数组中找出第2*i个元素的值大于currentAngle，且第2*(i+1)个元素值小于currentAngle的i值。若此i值不存在，则表示当前点为可操作时段；否则，判断第2*i+1个数组元素是否大于currentAngle，如果第2*i+1个数组元素大于currentAngle，则表明当前点落在了下标为(2*i，2*i+1)这段不可操作的弧度范围，否则视为当前点落在可操作时段。

并且，在将所述弧度区间绘制为所述用户操作区间之后，还可以包括：存储所述弧度区间；以及若用户重复提交点击事件，则存储最后一个位于所述可操作区域内的弧度区间。

根据本发明的技术方案，当所述触摸事件为所述滑动事件时，绘制所述用户操作区间包括：获取用户在所述用户触摸区中刚触摸到的点击区域内的任一点，并计算当前点的弧度；根据用户的滑动操作的范围绘制所述用户操作区间。同样地，这里的“任一点”在选取时，优选为用户点击区域的中心位置。

在本发明中，滑动事件与点击事件的处理不同，点击事件中用户松开即操作结束，但是滑动事件中，用户点击后还可以再继续滑动以选择相应的时间区间，且用户可以向当前点的两端滑动。例如：设定每次可选的时间区间为两个小时，假设用户欲选择9:00-11:00的时段，用户点击9:40后，可以向左滑动至9:00的位置，以及向右滑动至11:00的位置，只要总时间范围在两个小时之内即可。在处理滑动事件时，如果用户点击的是9:40这个时间点，其对应的时段为9:30-10:00。那么此时用户就有两个可操作的端点，一端为9:30处，一端为10：00处，如果滑动9：30这个端点，滑至9：00，那么此处用户选择的范围就是9：00-10：00；如果用户之后再次向右滑动，即向10：00方向滑动，那么如果滑动到11：00，那么该用户的选择时段为10：00-11：00。即可认为，当处理滑动事件时，用户滑动可操作的端点是在改变该时段的起点或终点，最终用户选定的时段为两个端点之间的区域。

并且，在绘制所述用户操作区间之前，还可以包括：确认所述当前点的弧度位于所述可操作区域内。如果当前点的弧度落在了不可操作区域内，则无论用户继续向不可操作区域滑动还是向可操作区域滑动，均以不可操作区域的开始端点为端点，结束实时绘制；否则，如果当前点的弧度落在可操作区域内，则将当前弧度currentAngle确认为新的端点，绘制出用户在可操作区域内的操作区间，使视觉上用户的操作的区间长度随用户的滑动手势而增大或缩小。

本发明中，在将所述用户选择区间数据显示在所述预定区域之前，还可以包括：将所述用户操作区间对应的弧度数据转换为时段数据。在将弧度数据转换为时段数据时，可按照如下的步骤进行：

步骤D1：由用户触摸点得到当前的触摸点所在的弧度区间；

步骤D2：根据前述步骤A3中的公式：弧度＝π+刻度*(π/12.0)，将弧度区间转换为刻度区间；

步骤D3：根据步骤A1、步骤A2进行逆推，即可得到时段，即服务端使用的数据，也是友好的、可被用户直观读取的数据。

通过上述的方法，即可实现利用圆环图形界面显示用户选择区间。下面将结合具体的实施例介绍本发明的具体实现步骤。本实施例中以用户点击选中第一区域后，又滑动选取第二区域为例进行说明。

步骤E1：用户终端从服务器获取时钟模型数据，并从数据模型中提取出可操作和不可操作时段数据。

步骤E2：将步骤E1中获取的数据从时段格式hh:mm-hh:mm(例如9：00-9：30)转为弧度数值范围(如[π，π+π/12])，并分别按序存放在两个浮点型数组内，如时段数组为(9.0，9.5…)、浮点数组为(π，π+π/12…)。

步骤E3：绘制时钟模型。如图3所示的本发明实施例的绘制过程示意图，以客户终端的显示器的显示屏幕的物理中心为圆心，以R为半径顺时针画大圆，以r为半径逆时针画小圆(R>r，差值为环形宽度)，两圆相交取余画出圆环部分，并保存该路径。将圆环部分整体绘制为表示可操作的颜色(图中以不同的形状来表示)。从步骤E2中获取到的不可操作数据的浮点型数组中按序成对取出数组元素，记元素下标能被2整除的数值为起始弧度，该下标+1的数值为终止弧度。以客户终端的显示器的显示屏幕的物理中心为圆心，分别以R和r为半径，开始弧度和结束弧度画扇形相交取余，绘制出不可操作的区域范围。

步骤E4：用户点击用户终端的屏幕形成触控环形区域视为用户输入的一个操作。首先根据响应链(是一个响应者对象的连接序列，事件或动作消息依次传递)来获取用户触控区域的任一点P(优选为触控环形区域的中心位置)，根据步骤E3中绘制的环形路径来判断用户的触摸区域是否位于圆环之上。若当前触摸点P在圆环外本模块不做处理；若当前触摸点P落在圆环上，则计算用户当前触摸点P的弧度及弧度区间。

步骤E5：判断步骤E4中得到的当前触摸点P的弧度是否为可操作时段，如果用户触摸点P的弧度在不可操作区域内则显示用户当前所选时段，并提示为不可操作的区域。如果用户触摸点P的弧度为可操作区域则将该弧度区间绘制为表示正在操作的颜色(也可以不同的形状来表示)，并将该弧度转换为服务器端可识别的数据，显示在圆环中央，以便用户可直观读取到当前操作的时间区段。

步骤E6：将步骤E5中获取的可操作的弧度区间存储起来。结合图3可知，可操作的弧度区间即为整个圆环上除了用户不可操作区域及当前用户的正在操作区域(第一区域)之外的部分。如果用户重复点击动作，则存储最后一个可操作的弧度区间，丢弃之前的值。

步骤E7：若用户点击操作完成后又滑动手势选取第二区域，touchMove将实时获取用户滑动位置区域内一点(优选为用户刚触摸到用户终端显示屏时的那个触控区域的中心位置)，获取当前点的弧度currentAngle，弧度值currentAngle与步骤E6中保存的可操作区间端点比较，将相近值确认为用户操作端，由此可知用户当前操作的是哪一端，便于绘制实时展现和确认边界。

步骤E8：根据步骤E7中获取的弧度值currentAngle，实时判断弧度值currentAngle是否落在不可操作的区域内，如果落在了不可操作区域内，用户继续向不可操作区域滑动则以不可操作区域的开始端点为端点，结束实时绘制；否则将当前弧度currentAngle确认为新的端点，绘制出用户操作区间，使视觉上用户的操作的区间长度随用户的滑动手势而增大或缩小。

步骤E9：跟随用户滑动手势获取的新的操作区间，由弧度数据转换为用户能够读取的时段数据展示出来。

步骤E10：用户结束操作，将步骤E9中获取的用户可读数据即服务器数据提交给服务器。

图4是本发明实施例的实现效果图。如图4，当用户选定操作区域后，将会用不同的颜色或者形状等标示在时钟区域内，并在圆环的中央部分显示用户选定的时间范围。

图5是根据本发明一个实施例的利用圆环图形界面展示用户选择区间的装置的主要模块示意图。如图5所示，本发明的利用圆环图形界面展示用户选择区间的装置50主要包括模型数据获取模块51、圆环模型绘制模块52、用户操作绘制模块53和区间数据显示模块54。

模型数据获取模块51用于从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；圆环模型绘制模块52用于根据所述圆环模型在用户终端的显示器绘制圆环图形界面，所述圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应所述可操作区间数据和所述不可操作区间数据；用户操作绘制模块53用于接收用户在所述用户触摸区的触摸事件，并根据所述触摸事件在所述用户触摸区绘制用户操作区间；区间数据显示模块54用于在用户停止触摸后，把所述用户操作区间对应的用户选择区间数据显示在所述圆环图形界面的预定区域。

图6是根据本发明另一实施例的利用圆环图形界面展示用户选择区间的装置的主要模块示意图。如图6所示，本发明的利用圆环图形界面展示用户选择区间的装置60主要包括处理器61和用于存储指令的存储器62。

其中，处理器61执行所述指令，用于：从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；根据所述圆环模型在用户终端的显示器绘制圆环图形界面，所述圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应所述可操作区间数据和所述不可操作区间数据；接收用户在所述用户触摸区的触摸事件，并根据所述触摸事件在所述用户触摸区绘制用户操作区间；在用户停止触摸后，把所述用户操作区间对应的用户选择区间数据显示在所述圆环图形界面的预定区域。

根据本发明实施例的技术方案，通过在用户终端利用时钟式图形界面来模拟用户的选择时段，并准确识别用户手势的开始点，根据用户手势点击、滑动去实时展示用户的选择及改变的范围，在可选与不可选择区间之间实时切换，从而实现了人机之间准确、流畅的交互。本发明通过数学的基本算法及iOS的Quartz 2D技术、响应者链及触摸事件来实现准确的数据对象范围选择和调整，从而提供了在移动平台上对此类操作的一种新的交互模式。通过在服务器端配置不同类型的数据，本发明可作为动态展示不同类型的多种状态展示、选择的装置。

例如，根据本发明的技术方案，若服务端获取的为非时段的其他类型的数据，只需简单修改服务端数据格式与绘制的刻度格式的互转算法即可实现同效果的展示和交互。例如，LBS(基于位置服务，是指通过电信移动运营商的无线电通讯网络或外部定位方式，获取移动终端用户的位置信息，在地理信息系统平台的支持下，为用户提供相应服务的一种增值业务)应用中多地理位置区域(例如当前城市的行政区域划分)展示的选择、项目周期管理的状态和工期的展示和调整、理财类APP中资产配比的展示调整、多选项类目的展示等都可以采用本装置进行显示和设置。

以LBS应用中多地理位置区域(例如当前城市的行政区域划分)展示选择为例，主要实现步骤如下：

步骤F1：请求模块将用户地理信息发送服务器，服务器将用户当前所在城市的行政区域名称及行政区域面积返回给客户端；

步骤F2：数据处理模块获取到当前行政区域名称、总数、总的行政区域面积以及各个行政区域的面积占总面积的比例(rate)。行政区域对应的弧长计算为：弧长＝2*rate*π，并存放于数组中。数组中弧长数组顺序与行政区域数组顺序一一对应；

步骤F3：绘制模块将不同的行政区域按照对应的弧长绘制出来，并填充不同的颜色；

步骤F4：用户触摸圆环交互区域，用户交互模块识别到用户的触摸点。计算出该点弧度，通过弧度判断出该点属于哪一行政区域，将该行政区域名称作为用户选择的行政区域显示。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (16)

1.一种利用圆环图形界面展示用户选择区间的方法，其特征在于，包括：

从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；

根据所述圆环模型在用户终端的显示器绘制圆环图形界面，所述圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应所述可操作区间数据和所述不可操作区间数据；

接收用户在所述用户触摸区的触摸事件，并根据所述触摸事件在所述用户触摸区绘制用户操作区间；

在用户停止触摸后，把所述用户操作区间对应的用户选择区间数据显示在所述圆环图形界面的预定区域。

2.根据权利要求1所述的方法，其特征在于，所述用户选择区间数据经用户确认后提交给所述服务器。

3.根据权利要求1所述的方法，其特征在于，所述圆环模型数据的数据集合的元素个数及各个元素的在所述数据集合中所占的比例为固定值。

4.根据权利要求1所述的方法，其特征在于，

所述圆环模型数据是时段数据格式，在所述绘制之前进行格式转换，把所述时段数据格式转换为弧度数据格式，并将所述时段数据和所述弧度数据分别按序存放在两个浮点型数组内。

5.根据权利要求1所述的方法，其特征在于，所述绘制的步骤包括：

以所述客户终端的显示器的显示屏幕的物理中心为圆心，以预定的R为外半径并且以预定的r为内半径绘制圆环，其中，R和r为正数，R>r，且R应小于圆心到显示屏幕边缘的距离；

将所述圆环显示为可操作区域；

从所述弧度数据中获取不可操作区域的数据，并以不同颜色的扇形在所述圆环中绘制不可操作区域。

6.根据权利要求1所述的方法，其特征在于，用于显示所述用户选择区间数据的所述预定区域位于所述圆环的中央。

7.根据权利要求1所述的方法，其特征在于，所述触摸事件包括点击事件和滑动事件。

8.根据权利要求7所述的方法，其特征在于，当所述触摸事件为所述点击事件时，绘制用户操作区间包括：

获取用户点击区域内的任一点，并计算当前点的弧度及其所在的弧度区间；

将所述弧度区间绘制为所述用户操作区间。

9.根据权利要求8所述的方法，其特征在于，计算当前点所在的弧度区间之前，还包括：

确认所述当前点位于所述圆环上。

10.根据权利要求8所述的方法，其特征在于，将所述弧度区间绘制为所述用户操作区间之前，还包括：

确认所述当前点的弧度位于所述可操作区域内。

11.根据权利要求8所述的方法，其特征在于，将所述弧度区间绘制为所述用户操作区间之后，还包括：

存储所述弧度区间；以及

若用户重复提交点击事件，则存储最后一个位于所述可操作区域内的弧度区间。

12.根据权利要求7所述的方法，其特征在于，当所述触摸事件为所述滑动事件时，绘制所述用户操作区间包括：

获取用户在所述用户触摸区中刚触摸到的点击区域内的任一点，并计算当前点的弧度；

根据用户的滑动操作的范围绘制所述用户操作区间。

13.根据权利要求12所述的方法，其特征在于，绘制所述用户操作区间之前，还包括：

确认所述当前点的弧度位于所述可操作区域内。

14.根据权利要求1所述的方法，其特征在于，将所述用户选择区间数据显示在所述预定区域之前，还包括：

将所述用户操作区间对应的弧度数据转换为时段数据。

15.一种利用圆环图形界面展示用户选择区间的装置，其特征在于，包括：

模型数据获取模块，用于从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；

圆环模型绘制模块，用于根据所述圆环模型在用户终端的显示器绘制圆环图形界面，所述圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应所述可操作区间数据和所述不可操作区间数据；

用户操作绘制模块，用于接收用户在所述用户触摸区的触摸事件，并根据所述触摸事件在所述用户触摸区绘制用户操作区间；

区间数据显示模块，用于在用户停止触摸后，把所述用户操作区间对应的用户选择区间数据显示在所述圆环图形界面的预定区域。

16.一种利用圆环图形界面展示用户选择区间的装置，其特征在于，包括：

用于存储指令的存储器；

处理器，执行所述指令，用于：

从服务器获取圆环模型数据，所述数据包括可操作区间数据和不可操作区间数据；

根据所述圆环模型在用户终端的显示器绘制圆环图形界面，所述圆环图形界面的用户触摸区包括可操作区域和不可操作区域，分别对应所述可操作区间数据和所述不可操作区间数据；

接收用户在所述用户触摸区的触摸事件，并根据所述触摸事件在所述用户触摸区绘制用户操作区间；

在用户停止触摸后，把所述用户操作区间对应的用户选择区间数据显示在所述圆环图形界面的预定区域。