CN116301532A - 信息的显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请适用于计算机技术领域，提供了一种信息的显示方法、装置、电子设备及存储介质，该方法包括：获取操作体的总滑动距离，所述总滑动距离为所述操作体在组件所在的显示区域的Y轴方向上的移动距离；根据所述总滑动距离确定所述组件的待显示选项；根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率；控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项，因此，在画布进行平移和缩放的同时，组件上的选项同时也在平移和缩放，在视觉上可以实现组件的3D滚动效果，从而，可以提升用户使用体验。

Description

信息的显示方法、装置、电子设备及存储介质

技术领域

本申请属于计算机技术领域，尤其涉及一种信息的显示方法、装置、电子设备及存储介质。

背景技术

NumberPicker，也称数值选择组件。数值选择组件是用于选择一组预定义好数值的组件，用户既可以通过键盘输入数值，也可以通过滚动来选择数值。目前，NumberPicker组件在安卓系统上得到了广泛应用。

然而，现有的NumberPicker组件仍难以满足用户的需求，导致用户的体验感较差。

发明内容

本申请实施例提供了一种信息的显示方法、装置、电子设备及存储介质，可以解决因现有的组件仍难以满足用户的需求，导致用户的体验感较差的问题。

第一方面，本申请实施例提供了一种信息的显示方法，包括：

获取操作体的总滑动距离，所述总滑动距离为所述操作体在组件所在的显示区域的Y轴方向上的移动距离；

根据所述总滑动距离确定所述组件的待显示选项；

根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率；

控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项。

可选的，所述根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率，包括：

根据所述总滑动距离和所述待显示选项的高度确定所述待显示选项的弧度；

根据所述待显示选项的弧度和所述待显示选项的高度确定所述画布在Y轴方向上的移动距离；

根据所述待显示选项的弧度确定所述画布的缩放率。

可选的，所述根据所述总滑动距离和所述待显示选项的高度确定所述待显示选项的弧度，包括：

根据下述公式1确定所述待显示选项的弧度：

公式1：α＝(H*counter–totalScrollY％H)/(H*2/π)；

其中，α为所述待显示选项的弧度，H为所述待显示选项的高度，totalScrollY为所述操作体在所述组件所在的显示区域的Y轴方向上的总滑动距离，counter是绘制点的值。

可选的，所述根据所述待显示选项的弧度和所述待显示选项的高度确定所述画布在Y轴方向上的移动距离，包括：

根据下述公式2确定所述画布在Y轴方向上的移动距离：

公式2：ty＝R–aO–ba；

其中，ty为所述画布在Y轴方向上的移动距离，R＝H*2/π，ba＝sin(α)*textHight/2，aO＝cos(α)*R或者aO＝-cos(α)*R，textHight为所述待显示选项的文本高度。

可选的，所述根据所述待显示选项的弧度确定所述画布的缩放率，包括：

根据下述公式3确定所述画布的缩放率：

公式3：scaleY＝sin(α)；

其中，scaleY为所述画布的缩放率。

可选的，在所述控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项之后，还包括：

若监听到离开事件，则获取所述操作体离开所述组件所在的显示区域时在Y轴上的移动速度，所述离开事件用于指示所述操作体离开所述组件所在的显示区域；

以所述移动速度作为初始值，控制所述画布根据预设的递减速度进行平移，直至所述移动速度递减为0。

可选的，在所述以所述移动速度作为初始值，控制所述画布根据预设的递减速度进行平移，直至所述移动速度递减为0之后，还包括：

获取所述组件的当前选项的居中偏移量；

若所述居中偏移量大于所述组件的选项的高度的一半，则控制所述画布平移，直至所述组件的当前选项为下一选项，控制所述下一选项居中，并设置所述下一选项为选中项；

若所述居中偏移量小于或者等于所述组件的选项的高度的一半，则控制所述当前选项居中，并设置所述当前选项为选中项。

第二方面，本申请实施例提供了一种信息的显示装置，包括：

滑动距离获取模块，用于获取操作体的总滑动距离，所述总滑动距离为所述操作体在组件所在的显示区域的Y轴方向上的移动距离；

第一确定模块，用于根据所述总滑动距离确定所述组件的待显示选项；

第二确定模块，用于根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率；

显示模块，用于控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项。

可选的，所述第二确定模块，包括：

弧度确定单元，用于根据所述总滑动距离和所述待显示选项的高度确定所述待显示选项的弧度；

移动距离确定单元，用于根据所述待显示选项的弧度和所述待显示选项的高度确定所述画布在Y轴方向上的移动距离；

缩放率确定单元，用于根据所述待显示选项的弧度确定所述画布的缩放率。

可选的，所述弧度确定单元，包括：

弧度确定子单元，用于根据下述公式1确定所述待显示选项的弧度：

公式1：α＝(H*counter–totalScrollY％H)/(H*2/π)；

其中，α为所述待显示选项的弧度，H为所述待显示选项的高度，totalScrollY为所述操作体在所述组件所在的显示区域的Y轴方向上的总滑动距离，counter是绘制点的值。

可选的，所述移动距离确定单元，包括：

移动距离确定子单元，用于根据下述公式2确定所述画布在Y轴方向上的移动距离：

公式2：ty＝R–aO–ba；

其中，ty为所述画布在Y轴方向上的移动距离，R＝H*2/π，ba＝sin(α)*textHight/2，aO＝cos(α)*R或者aO＝-cos(α)*R，textHight为所述待显示选项的文本高度。

可选的，所述缩放率确定单元，包括：

缩放率确定子单元，用于根据下述公式3确定所述画布的缩放率：

公式3：scaleY＝sin(α)；

其中，scaleY为所述画布的缩放率。

可选的，所述信息的显示装置，还包括：

速度获取模块，用于若监听到离开事件，则获取所述操作体离开所述组件所在的显示区域时在Y轴上的移动速度，所述离开事件用于指示所述操作体离开所述组件所在的显示区域；

平移控制模块，用于以所述移动速度作为初始值，控制所述画布根据预设的递减速度进行平移，直至所述移动速度递减为0。

可选的，信息的显示装置，还包括：

偏移量获取模块，用于获取所述组件的当前选项的居中偏移量；

第一控制模块，用于若所述居中偏移量大于所述组件的选项的高度的一半，则控制所述画布平移，直至所述组件的当前选项为下一选项，控制所述下一选项居中，并设置所述下一选项为选中项；

第二控制模块，用于若所述居中偏移量小于或者等于所述组件的选项的高度的一半，则控制所述当前选项居中，并设置所述当前选项为选中项。

第三方面，本申请实施例提供了一种电子设备，包括：

存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述第一方面所述的信息的显示方法的步骤。

第四方面，本申请实施例提供了一种计算机可读存储介质，包括：所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述的信息的显示方法的步骤。

第五方面，本申请实施例提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行上述第一方面所述的信息的显示方法的步骤。

本申请实施例与现有技术相比存在的有益效果是：由于根据操作体的总滑动距离以及组件的待显示选项的高度确定画布在Y轴方向上的移动距离以及画布的缩放率后，可以控制画布根据上述移动距离进行平移的同时，根据上述缩放率对画布进行缩放，并在画布上进行组件的待显示选项的绘制和显示，因此，在画布进行平移和缩放的同时，组件上的选项同时也在平移和缩放，在视觉上可以实现组件的3D滚动效果，从而，可以提升用户使用体验，进而可以解决因现有的组件仍难以满足用户的需求，导致用户的体验感较差的问题。

附图说明

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

图1是本申请一实施例提供的信息的显示方法的流程示意图；

图2是本申请一实施例提供的控件中每个选项的高度H示意图；

图3中的(a)是本申请一实施例提供的用户手指未在NumberPicker控件所在的显示区域移动时，用户看到的NumberPicker控件的视觉效果示意图；

图3中的(b)是本申请一实施例提供的用户手指在NumberPicker控件所在的显示区域移动时，用户看到的NumberPicker控件的视觉效果示意图；

图4是本申请一实施例提供的圆和组件的高度之间的关系示意图；

图5是本申请一实施例提供的画布的平移距离的计算原理示意图；

图6是本申请一实施例提供的画布的平移距离的计算原理示意图；

图7是本申请另一实施例提供的画布的缩放率的计算原理示意图；

图8是本申请一实施例提供的三个组件联合显示的效果示意图；

图9是本申请一实施例提供的信息的显示装置的结构示意图；

图10是本申请实施例提供的电子设备的结构示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

应当理解，当在本申请说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

如在本申请说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

另外，在本申请说明书和所附权利要求书的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

当用户通过NumberPicker组件进行数值选择时，由于该NumberPicker组件的定制效果差，无法实现3D滚轮效果，因此，导致用户体验感差。

为了提升用户的体验，本申请实施例提供了一种信息的显示方法。在该显示方法中，由于根据操作体的总滑动距离以及组件的待显示选项的高度确定画布在Y轴方向上的移动距离以及画布的缩放率后，可以控制画布根据上述移动距离进行平移的同时，根据上述缩放率对画布进行缩放，并在画布上进行组件的待显示选项的绘制和显示，因此，在画布进行平移和缩放的同时，组件上的选项同时也在平移和缩放，在视觉上可以实现组件的3D滚动效果，从而，可以提升用户使用体验。

下面结合附图对本申请实施例的信息的显示方法进行描述。

图1示出了本申请实施例提供的信息的显示方法的流程示意图，如图1所示，该方法包括步骤S110至S140。各个步骤的具体实现原理如下：

S110，获取操作体的总滑动距离，所述总滑动距离为上述操作体在组件所在的显示区域的Y轴方向上的移动距离。

操作体可以是用户的手指，也可以是触控笔或者鼠标等，在此不做限制。本申请实施例中，以用户的手指为例来进行说明。

组件可以显示在屏幕的相应显示区域。用户的手指在组件所在的显示区域操作时，信息的显示系统会自动生成与该操作对应的事件。比如，监听到用户的手指在按压组件所在的显示区域时，信息的显示系统会生成一个触控事件；监听到用户的手指在组件所在的显示区域移动时，信息的显示系统会生成一个移动事件；监听到用户的手指离开组件所在的显示区域时，信息的显示系统会生成一个离开事件。

在一些实施例中，信息的显示系统会对各种事件进行监听，当监听到触控事件时，信息的显示系统会获取该触控事件对应的坐标，并存储该坐标以备后续使用。

其中，该触控事件对应的坐标是用户的手指按压在组件所在的显示区域时手指中心所在的坐标，该坐标可以用X轴坐标表示，也可以用Y轴坐标表示，或者用X轴坐标和Y轴坐标两者同时表示，在此不做限制。

在本申请实施例中，因为手指是在组件所在的显示区域上下移动，实现组件上下滚动的效果，只与Y轴坐标有关，因此，为了简单起见，该坐标用Y轴坐标表示。

具体的，信息的显示系统获取到触控事件对应的Y轴坐标后，将该Y轴坐标记为第一坐标，并存储该第一坐标以备后续使用。

在一些实施例中，移动事件用于指示操作体在组件所在的显示区域的Y轴方向上移动。当监听到移动事件时，信息的显示系统会获取该移动事件对应的坐标，并将该坐标记为第二坐标。

在本申请实施例中，因为手指是在组件所在的显示区域上下移动，实现组件内的选项上下滚动的效果，因此，手指是在Y轴方向上进行移动，为了简单起见，该第二坐标也是用Y轴坐标表示。

获取到第二坐标后，信息的显示系统可以根据第二坐标和第一坐标确定用户手指在Y轴方向上的移动距离。

具体的，信息的显示系统可以用第二坐标减去第一坐标得到手指在组件所在的显示区域的Y轴方向上移动时产生的移动距离，将所有移动距离进行累加可以得到手指的总移动距离totalScrollY。

S120，根据上述总滑动距离确定上述组件的待显示选项。

在一些实施例中，组件中可以包含一些选项，该选项可以是数字、天气或者省份等等，在此不做限制。

本申请实施例中，该组件是包含数字选项的数值选择控件，即NumberPicker。本申请实施例中均以NumberPicker控件为例来进行说明。

根据用户的手指在NumberPicker控件所在的显示区域的Y轴方向上的总滑动距离，可以确定即将显示的待显示选项。

S130，根据上述总滑动距离以及上述待显示选项的高度确定上述组件的画布在Y轴方向上的移动距离以及上述画布的缩放率。

在一些实施例中，NumberPicker控件中每个数字选项的高度H是一致的，H由文本高度textHeight和文本间距lineSpacingMultiplier的乘积决定(如图2所示)，组件的宽度textWidth由设定值决定，在此不做限制。

获取到组件的待显示选项的高度H后，可以根据H以及步骤S120确定的totalScrollY，计算得到画布在Y轴方向上的移动距离ty以及画布的缩放率scaleY。

S140，控制上述画布根据上述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示上述待显示选项。

在一些实施例中，信息的显示系统可以控制画布根据步骤S130得到的移动距离进行平移的同时，根据步骤S130得到的缩放率对画布进行缩放，在画布上绘制并显示组件的待显示选项，实现NumberPicker控件的3D滚动效果。

其中，图3左示出了的用户手指未在组件所在的显示区域移动时，用户看到的NumberPicker控件的视觉效果示意图。

图3右示出了的用户手指在组件所在的显示区域上下移动时，用户看到的NumberPicker控件呈现的3D滚轮效果的平面显示效果示意图。图3右中，数字"5"所在位置比图3左中减小了ty，所以数字选项"5"在向上平移，同时scaleY缩放比加大了，图3右中的数字选项"5"看起来明显比图3左中的数字"5"小，整个NumberPicker控件的显示形成了3D视觉效果。

应理解，上述步骤S110至S140，由于根据操作体的总滑动距离以及组件的待显示选项的高度确定画布在Y轴方向上的移动距离以及画布的缩放率后，可以控制画布根据上述移动距离进行平移的同时，根据上述缩放率对画布进行缩放，并在画布上进行组件的待显示选项的绘制和显示，因此，在画布进行平移和缩放的同时，组件上的选项同时也在平移和缩放，在视觉上可以实现组件的3D滚动效果，从而，可以提升用户使用体验，进而可以解决因现有的组件仍难以满足用户的需求，导致用户的体验感较差的问题。

在一些实施例中，在上述图1所示的信息的显示方法的实施例的基础上，步骤S130根据上述总滑动距离以及上述待显示选项的高度确定上述组件的画布在Y轴方向上的移动距离以及上述画布的缩放率，可以通过下述步骤实现，各个步骤的具体实现原理如下：

步骤11、根据上述总滑动距离和上述待显示选项的高度确定上述待显示选项的弧度。

在一些实施例中，可以根据下述公式1确定待显示选项的弧度：

公式1：α＝(H*counter–totalScrollY％H)/(H*2/π)

其中，α为待显示选项的弧度，H为待显示选项的高度，totalScrollY为手指在Y轴方向上的总滑动距离，counter是绘制点的值，counter的值可以是0、1和2。

具体原理详述如下：

如图4所示，想象组件的侧面是一个圆，则组件上的数值绘制在圆弧上，将圆放置在一个直角坐标系中，圆心对准坐标系原点，屏幕视觉方向的可见区域为第一象限和第四象限。在可见区域内绘制三个数值选项，分别为绘制起点counter＝0，选中项counter＝1以及绘制终点counter＝2。如图2所示，一个数值选项的高度H由文字高度textheight和文字间距倍数lineSpacingMultiplier决定。文字间距倍数可由使用者直接设置，而文字高度则需要使用者设置字体大小后，通过系统的getTextBounds方法得出。设定四个数值选项的高度构成图4中圆的周长(C＝H*4)，则根据圆周长公式C＝πD，可推导出圆的直径D＝C/π＝H*4/π，半径R＝C/π/2＝H*2/π。

组件绘制的原理是3D圆弧运动，但在安卓系统中，自定义组件的绘制依旧是在二维平面的画布(canvas)上进行。

绘制的起点是在C点(x＝0，y＝0)上，为组件的左上角，C点的水平向右方向为x轴正方向，C点垂直向下方向为y轴的正方向。

从(0,0)开始绘制选项，每个选项都有一个在y轴上的偏移量ty，当静止状态时，起点选项(counter＝0)的ty值为0，因此起点从y＝0开始绘制，由于高度也缩小为0，因此在画布上并不能看到起点的选项。绘制完起点后，画布向下平移选中项(counter＝1)的y轴偏移量并绘制，最后画布向下平移终点选项(counter＝2)的y轴偏移量并绘制，终点选项的高度也缩小为0，因此在画布上也看不到。

手指在屏幕上滑动的y轴距离totalScrollY，实际上不等于选项在y轴上的移动距离，它们存在一个与角度α关联的关系。

如图5所示，当手指在屏幕上向上滑动了一段距离totalScrollY，其中，totalScrollY等于选项中点到x轴的圆弧长度，选中项在y轴上的偏移量ty减小(即cb间的距离)，选项的中点与y轴的角度，即为α。

计算α可计算出选项的ty值，ty值决定选项在画布上的绘制位置。

例如，计算图5中选中项(counter＝1)的ty值(即cb间的距离)，根据弧度的计算公式α＝L/R(弧长/半径)，α所在的弧长等于1/4圆弧长减去totalScrollY的长度，前面说四个选项的高度H构成这个圆，所以1/4圆弧的长度等于一个H，因此α所在的弧长L＝H*counter–totalScrollY。

已知半径R＝H*2/π，所以α＝(H*counter–totalScrollY)/(H*2/π)。

步骤12、根据上述待显示选项的弧度和上述待显示选项的高度确定上述画布在Y轴方向上的移动距离。

在一些实施例中，对于图5所示情况，根据三角函数公式计算出aO间的距离：aO＝cos(α)*R。计算出ba间的距离：ba＝sin(α)*textHight/2。因此计算出ty的值(即cb)：ty＝R–aO–ba。

可以根据下述公式2确定上述画布在Y轴方向上的移动距离：

公式2：ty＝R–aO–ba

其中，ty为上述画布在Y轴方向上的移动距离，其中，aO＝cos(α)*R，ba＝sin(α)*textHight/2，textHight为待显示选项的文本高度。

对于图6所示的情况，计算图6中终点选项(counter＝2)的ty值(即cb)，得到α，再根据三角函数公式计算出aO间的距离：aO＝cos(π-α)*R＝-cos(α)*R，最后计算出ba＝sin(π-α)*textHight/2＝sin(α)*textHight/2，因此计算出ty的值(即cb)：ty＝R–aO–ba。

也可以根据下述公式2确定上述画布在Y轴方向上的移动距离：

公式2：ty＝R–aO–ba

其中，ty为上述画布在Y轴方向上的移动距离，其中，aO＝-cos(α)*R，ba＝sin(α)*textHight/2，textHight为待显示选项的文本高度。

步骤13、根据上述待显示选项的弧度确定上述画布的缩放率。

在一些实施例中，计算出ty值就可以得知每个选项在画布上的位置，手指在屏幕上滑动的距离产生totalScrollY，从而得出α，根据α计算ty，刷新选项的位置重新进行绘制，形成向上滑动的视觉。但这只是3D滚轮效果的选项平移视觉，真正要做到3D效果，还需要将文字进行高度缩放。如图7，缩放的比例为ab/ac，即scaleY＝sin(α)，使用系统提供的画布缩放方法：canvas.scale(1,y)即可使得选项高度缩放。

因此，可以根据下述公式3确定画布的缩放率：

公式3：scaleY＝sin(α)

其中，scaleY为画布的缩放率。

具体的，如图7所示，ab点的距离为选项在可见区域某一点时的Y轴高度，ab点的距离与textHight的比值即为画布的缩放率scaleY。

在一些实施例中，在上述图1所示的信息的显示方法的实施例的基础上，在步骤S140控制上述画布根据上述移动距离进行平移的同时，根据上述缩放率对上述画布进行缩放，在上述画布上绘制并显示上述待显示选项之后，还可以包括下述步骤：

步骤21、若监听到离开事件，则获取操作体离开上述组件所在的显示区域时在Y轴方向上的移动速度，上述离开事件用于指示上述操作体离开上述组件所在的显示区域。

步骤22、以上述移动速度作为初始值，控制上述画布根据预设的递减速度进行平移，直至上述移动速度递减为0。

在本申请实施例中，获取手指离开组件所在的显示区域时在Y轴方向上的移动速度，并将该移动速度作为初始值，控制画布根据预设的递减速度进行平移，比如以每20毫秒40像素递减，使组件继续惯性滑动一段距离。

应理解，步骤21至步骤22可以控制组件做惯性滑动，手指离开组件所在的显示区域时，组件不会立即停止滑动，可以提升用户的视觉体验。

在一些实施例中，在上述图1所示的信息的显示方法的实施例的基础上，在步骤22之后，还可以包括下述步骤：

步骤31、获取上述组件的当前选项的居中偏移量；

步骤32、若上述居中偏移量大于上述组件的选项的高度的一半，则控制上述画布平移，直至上述组件的当前选项为下一选项，控制上述下一选项居中，并设置上述下一选项为选中项；

步骤33、若上述居中偏移量小于或者等于上述组件的选项的高度的一半，则控制上述当前选项居中，并设置上述当前选项为选中项。

应理解，当移动速度递减到0时，组件惯性滑动停止，此时当前选项可能不居中，这时可以通过步骤31至33，将当前选项居中，并将当前选项设置为选中项，以进一步提升用户体验。

在本申请实施例中，为了让用户能清楚地看到当前选项是否居中，可以将两条分割线固定在组件上，它们之间的距离为H，可以计算出第一条分割线的位置等于(D-H)/2，第二条分割线的位置等于(D+H)/2，可参见图4。

另外，在本申请实施例中，可以将多个数值选择组件组合在一起时，即变成一个多位数的组合组件，它们两两可以进行绑定和数值联动。

例如，数字电源的设定电压范围为250-750V，个位数最小精度为5V。

给组合组件设置最小值为：250，最大值为：750。则第一个组件可选择的数值为2-7，第二个组件可选择的数值为0-9，第三个组件可选择的数值为0或5。

当选择250V，第一个组件选择数值为2时，第二个组件只能选择5-9中的数值；当第二个组件选择数值为5时，则第三个组件仅能选择0，且不可滑动。

同理选择750V，第一个组件选择数值为7时，第二个组件只能选择0-5中的数值；当第二个组件选择数值为5时，则第三个组件仅能选择0，且不可滑动。

其他情况则复位第二、三个组件的可选项。

具体显示效果如图8所示。

对应于上述图1所示的信息的显示方法，图9示出的是本申请实施例提供的一种信息的显示装置M100，包括：

滑动距离获取模块M110，用于获取操作体的总滑动距离，所述总滑动距离为所述操作体在组件所在的显示区域的Y轴方向上的移动距离；

第一确定模块M120，用于根据所述总滑动距离确定所述组件的待显示选项；

第二确定模块M130，用于根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率；

显示模块M140，用于控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项。

可选的，所述第二确定模块M130，包括：

弧度确定单元，用于根据所述总滑动距离和所述待显示选项的高度确定所述待显示选项的弧度；

移动距离确定单元，用于根据所述待显示选项的弧度和所述待显示选项的高度确定所述画布在Y轴方向上的移动距离；

缩放率确定单元，用于根据所述待显示选项的弧度确定所述画布的缩放率。

可选的，所述弧度确定单元，包括：

弧度确定子单元，用于根据下述公式1确定所述待显示选项的弧度：

公式1：α＝(H*counter–totalScrollY％H)/(H*2/π)；

其中，α为所述待显示选项的弧度，H为所述待显示选项的高度，totalScrollY为所述操作体在所述组件所在的显示区域的Y轴方向上的总滑动距离，counter是绘制点的值。

可选的，所述移动距离确定单元，包括：

移动距离确定子单元，用于根据下述公式2确定所述画布在Y轴方向上的移动距离：

公式2：ty＝R–aO–ba；

其中，ty为所述画布在Y轴方向上的移动距离，R＝H*2/π，ba＝sin(α)*textHight/2，aO＝cos(α)*R或者aO＝-cos(α)*R，textHight为所述待显示选项的文本高度。

可选的，所述缩放率确定单元，包括：

缩放率确定子单元，用于根据下述公式3确定所述画布的缩放率：

公式3：scaleY＝sin(α)；

其中，scaleY为所述画布的缩放率。

可选的，所述信息的显示装置M100，还包括：

速度获取模块，用于若监听到离开事件，则获取所述操作体离开所述组件所在的显示区域时在Y轴上的移动速度，所述离开事件用于指示所述操作体离开所述组件所在的显示区域；

平移控制模块，用于以所述移动速度作为初始值，控制所述画布根据预设的递减速度进行平移，直至所述移动速度递减为0。

可选的，信息的显示装置M100，还包括：

偏移量获取模块，用于获取所述组件的当前选项的居中偏移量；

第一控制模块，用于若所述居中偏移量大于所述组件的选项的高度的一半，则控制所述画布平移，直至所述组件的当前选项为下一选项，控制所述下一选项居中，并设置所述下一选项为选中项；

第二控制模块，用于若所述居中偏移量小于或者等于所述组件的选项的高度的一半，则控制所述当前选项居中，并设置所述当前选项为选中项。

可以理解的是，以上实施例中的各种实施方式和实施方式组合及其有益效果同样适用于本实施例，这里不再赘述。

图10为本申请一实施例提供的电子设备的结构示意图。如图10所示，该实施例的电子设备D10包括：至少一个处理器D100(图10中仅示出一个)处理器、存储器D101以及存储在所述存储器D101中并可在所述至少一个处理器D100上运行的计算机程序D102，所述处理器D100执行所述计算机程序D102时实现上述任意各个方法实施例中的步骤。或者，所述处理器D100执行所述计算机程序D102时实现上述各装置实施例中各模块/单元的功能，例如图9所示模块M110至M140的功能。

在一些实施例中，所述处理器D100执行所述计算机程序D102时实现如下步骤：

获取操作体的总滑动距离，所述总滑动距离为所述操作体在组件所在的显示区域的Y轴方向上的移动距离；

根据所述总滑动距离确定所述组件的待显示选项；

根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率；

控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项。

优选的，所述处理器D100执行所述计算机程序D102，实现所述根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率时，还可以执行下述步骤：

根据所述总滑动距离和所述待显示选项的高度确定所述待显示选项的弧度；

根据所述待显示选项的弧度和所述待显示选项的高度确定所述画布在Y轴方向上的移动距离；

根据所述待显示选项的弧度确定所述画布的缩放率。

优选的，所述处理器D100执行所述计算机程序D102，实现所述根据所述总滑动距离和所述待显示选项的高度确定所述待显示选项的弧度时，还可以执行下述步骤：

根据下述公式1确定所述待显示选项的弧度：

公式1：α＝(H*counter–totalScrollY％H)/(H*2/π)；

其中，α为所述待显示选项的弧度，H为所述待显示选项的高度，totalScrollY为所述操作体在所述组件所在的显示区域的Y轴方向上的总滑动距离，counter是绘制点的值。

优选的，所述处理器D100执行所述计算机程序D102，实现所述根据所述待显示选项的弧度和所述待显示选项的高度确定所述画布在Y轴方向上的移动距离时，还可以执行下述步骤：

根据下述公式2确定所述画布在Y轴方向上的移动距离：

公式2：ty＝R–aO–ba；

其中，ty为所述画布在Y轴方向上的移动距离，R＝H*2/π，ba＝sin(α)*textHight/2，aO＝cos(α)*R或者aO＝-cos(α)*R，textHight为所述待显示选项的文本高度。

优选的，所述处理器D100执行所述计算机程序D102，实现所述根据所述待显示选项的弧度确定所述画布的缩放率时，还可以执行下述步骤：

根据下述公式3确定所述画布的缩放率：

公式3：scaleY＝sin(α)；

其中，scaleY为所述画布的缩放率。

优选的，所述处理器D100执行所述计算机程序D102，在实现所述控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项之后，还可以执行下述步骤：

若监听到离开事件，则获取所述操作体离开所述组件所在的显示区域时在Y轴上的移动速度，所述离开事件用于指示所述操作体离开所述组件所在的显示区域；

以所述移动速度作为初始值，控制所述画布根据预设的递减速度进行平移，直至所述移动速度递减为0。

优选的，所述处理器D100执行所述计算机程序D102，在实现所述以所述移动速度作为初始值，控制所述画布根据预设的递减速度进行平移，直至所述移动速度递减为0之后，还可以执行下述步骤：

获取所述组件的当前选项的居中偏移量；

若所述居中偏移量大于所述组件的选项的高度的一半，则控制所述画布平移，直至所述组件的当前选项为下一选项，控制所述下一选项居中，并设置所述下一选项为选中项；

若所述居中偏移量小于或者等于所述组件的选项的高度的一半，则控制所述当前选项居中，并设置所述当前选项为选中项。

所述电子设备D10可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。该电子设备可包括，但不仅限于，处理器D100、存储器D101。本领域技术人员可以理解，图10仅仅是电子设备D10的举例，并不构成对电子设备D10的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如还可以包括输入输出设备、网络接入设备等。

所称处理器D100可以是中央处理单元(Central Processing Unit，CPU)，该处理器D100还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器D101在一些实施例中可以是所述电子设备D10的内部存储单元，例如电子设备D10的硬盘或内存。所述存储器D101在另一些实施例中也可以是所述电子设备D10的外部存储设备，例如所述电子设备D10上配备的插接式硬盘，智能存储卡(Smart MediaCard,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器D101还可以既包括所述电子设备D10的内部存储单元也包括外部存储设备。所述存储器D101用于存储操作系统、应用程序、引导装载程序(BootLoader)、数据以及其他程序等，例如所述计算机程序的程序代码等。所述存储器D101还可以用于暂时地存储已经输出或者将要输出的数据。

需要说明的是，上述装置/单元之间的信息交互、执行过程等内容，由于与本申请方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时可实现上述各个方法实施例中的步骤。

本申请实施例提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行时可实现上述各个方法实施例中的步骤。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质至少可以包括：能够将计算机程序代码携带到拍照装置/终端设备的任何实体或装置、记录介质、计算机存储器、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random AccessMemory，RAM)、电载波信号、电信信号以及软件分发介质。例如U盘、移动硬盘、磁碟或者光盘等。在某些司法管辖区，根据立法和专利实践，计算机可读介质不可以是电载波信号和电信信号。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

在本申请所提供的实施例中，应该理解到，所揭露的装置/网络设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/网络设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (10)

1.一种信息的显示方法，其特征在于，所述信息的显示方法包括：

获取操作体的总滑动距离，所述总滑动距离为所述操作体在组件所在的显示区域的Y轴方向上的移动距离；

根据所述总滑动距离确定所述组件的待显示选项；

根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率；

控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项。

2.如权利要求1所述的信息的显示方法，其特征在于，所述根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率，包括：

根据所述总滑动距离和所述待显示选项的高度确定所述待显示选项的弧度；

根据所述待显示选项的弧度和所述待显示选项的高度确定所述画布在Y轴方向上的移动距离；

根据所述待显示选项的弧度确定所述画布的缩放率。

3.如权利要求2所述的信息的显示方法，其特征在于，所述根据所述总滑动距离和所述待显示选项的高度确定所述待显示选项的弧度，包括：

根据下述公式1确定所述待显示选项的弧度：

公式1：α＝(H*counter–totalScrollY％H)/(H*2/π)；

其中，α为所述待显示选项的弧度，H为所述待显示选项的高度，totalScrollY为所述操作体在所述组件所在的显示区域的Y轴方向上的总滑动距离，counter是绘制点的值。

4.如权利要求3所述的信息的显示方法，其特征在于，所述根据所述待显示选项的弧度和所述待显示选项的高度确定所述画布在Y轴方向上的移动距离，包括：

根据下述公式2确定所述画布在Y轴方向上的移动距离：

公式2：ty＝R–aO–ba；

其中，ty为所述画布在Y轴方向上的移动距离，R＝H*2/π，ba＝sin(α)*textHight/2，aO＝cos(α)*R或者aO＝-cos(α)*R，textHight为所述待显示选项的文本高度。

5.如权利要求4所述的信息的显示方法，其特征在于，所述根据所述待显示选项的弧度确定所述画布的缩放率，包括：

根据下述公式3确定所述画布的缩放率：

公式3：scaleY＝sin(α)；

其中，scaleY为所述画布的缩放率。

6.如权利要求5所述的信息的显示方法，其特征在于，在所述控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项之后，还包括：

若监听到离开事件，则获取所述操作体离开所述组件所在的显示区域时在Y轴上的移动速度，所述离开事件用于指示所述操作体离开所述组件所在的显示区域；

以所述移动速度作为初始值，控制所述画布根据预设的递减速度进行平移，直至所述移动速度递减为0。

7.如权利要求6所述的信息的显示方法，其特征在于，在所述以所述移动速度作为初始值，控制所述画布根据预设的递减速度进行平移，直至所述移动速度递减为0之后，还包括：

获取所述组件的当前选项的居中偏移量；

若所述居中偏移量大于所述组件的选项的高度的一半，则控制所述画布平移，直至所述组件的当前选项为下一选项，控制所述下一选项居中，并设置所述下一选项为选中项；

若所述居中偏移量小于或者等于所述组件的选项的高度的一半，则控制所述当前选项居中，并设置所述当前选项为选中项。

8.一种信息的显示装置，其特征在于，包括：

滑动距离获取模块，用于获取操作体的总滑动距离，所述总滑动距离为所述操作体在组件所在的显示区域的Y轴方向上的移动距离；

第一确定模块，用于根据所述总滑动距离确定所述组件的待显示选项；

第二确定模块，用于根据所述总滑动距离和所述待显示选项的高度确定所述组件的画布在Y轴方向上的移动距离以及所述画布的缩放率；

显示模块，用于控制所述画布根据所述移动距离进行平移的同时，根据所述缩放率对所述画布进行缩放，在所述画布上绘制并显示所述待显示选项。

9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并能够在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的信息的显示方法。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的信息的显示方法。

Images