CN106502542A - 一种指针旋转方法和装置 - Google Patents

Abstract

本发明提供了一种指针旋转方法和装置，该方法包括：将指针图片和刻度图片设置在图片容器中，所述指针图片中包括指针对象；利用旋钮工具创建旋钮图片，并将所述旋钮图片设置在旋钮容器中，所述旋钮图片中包括旋钮对象；将所述旋钮容器和所述图片容器叠加设置；监控所述旋钮对象的位置，根据旋钮对象的位置更新指针对象的位置。本发明还公开相应的指针旋转装置。

Description

一种指针旋转方法和装置

技术领域

本发明涉及一种指针旋转方法和装置。

背景技术

随着互联网Web前端技术的飞速发展，网页中人机交互的功能日益多样化。现有拖拽滑动交互方式有很多，如，滑动竿、滑动按钮、滑动块、旋钮等。目前，实现滑动按钮等拖曳旋转功能的算法比较容易实现，但实现指针拖拽旋转的功能需要大量高级算法，导致实现此功能非常不易，因此拖拽旋转指针功能的很少见。

因此，需要提供一种拖曳指针旋转的技术方案。

发明内容

有鉴于此，本发明的目的在于提供一种指针旋转方法和装置，以力图解决或者至少缓解上面存在的问题。

第一方面，本发明的实施例提供一种指针旋转方法，该方法包括：

将指针图片和刻度图片设置在图片容器中，所述指针图片中包括指针对象；

利用旋钮工具创建旋钮图片，并将所述旋钮图片设置在旋钮容器中，所述旋钮图片中包括旋钮对象；

将所述旋钮容器和所述图片容器叠加设置；

监控所述旋钮对象的位置，根据旋钮对象的位置更新指针对象的位置。

可选地，在根据本发明的方法中，所述将所述旋钮容器和所述图片容器叠加设置包括：

将所述旋钮对象与所述指针对象的位置重叠设置。

可选地，在根据本发明的方法中，所述旋钮图片中旋钮对象的旋转范围与所述刻度图片中的刻度范围一致。

可选地，在根据本发明的方法中，所述监控所述旋钮对象的位置，根据旋钮对象的位置更新指针对象的位置，包括：

监控旋钮对象的旋转值；

当监控到旋钮对象的旋转值发生变化时，将所述指针对象的旋转值更新为所述旋钮对象的变化后的旋转值。

可选地，在根据本发明的方法中，所述旋钮容器位于所述图片容器的上方，所述旋钮容器的透明度为100％。

第二方面，本发明的实施例提供一种指针旋转装置，该装置包括：

第一容器处理单元，用于将指针图片和刻度图片设置在图片容器中，所述指针图片中包括指针对象；

第二容器处理单元，用于利用旋钮工具创建旋钮图片，并将所述旋钮图片设置在旋钮容器中，所述旋钮图片中包括旋钮对象；

第三容器处理单元，用于将所述旋钮容器和所述图片容器叠加设置；

位置处理单元，用于监控所述旋钮对象的位置，根据旋钮对象的位置更新指针对象的位置。

可选地，在根据本发明的装置中，所述第三容器处理单元还用于：

将所述旋钮对象与所述指针对象的位置重叠设置。

可选地，在根据本发明的装置中，所述旋钮图片中旋钮对象的旋转范围与所述刻度图片中的刻度范围一致。

可选地，在根据本发明的装置中，所述位置处理单元还用于：

监控旋钮对象的旋转值；

当监控到旋钮对象的旋转值发生变化时，将所述指针对象的旋转值更新为所述旋钮对象的变化后的旋转值。

可选地，在根据本发明的装置中，所述旋钮容器位于所述图片容器的上方，所述旋钮容器的透明度为100％。

根据本发明的技术方案，能够简单、快捷地完成在背景图片上的旋转指针的功能，大大简化了开发难度，解决了研发成本，运行效率更高，用户体验更佳。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明的指针旋转装置的示例计算设备100的框图；

图2示出了本发明实施例所提供的一种指针旋转装置的结构图；

图3示出了本发明实施例所提供的一种指针旋转方法的流程图；

图4示出了本发明实施例所提供的一种指针图片的示意图；

图5示出了本发明实施例所提供的一种刻度图片的示意图；以及

图6示出了本发明实施例所提供的一种旋钮图片的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的指针旋转装置驻留在计算设备中，图1布置为实现根据本发明的指针旋转装置的示例计算设备100的框图。在基本的配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。

取决于期望的配置，处理器104可以是任何类型的处理，包括但不限于：微处理器((μP)、微控制器(μC)、数字信息处理器(DSP)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器118可以是处理器104的一个内部部分。

取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如RAM)、非易失性存储器(诸如ROM、闪存等)或者它们的任何组合。系统存储器106可以包括操作系统120、一个或者多个应用122以及程序数据124。应用122可以包括被配置为订单分拣系统200。程序数据124可以包括可用于如此处所述的第一打印列表和第二打印列表。在一些实施方式中，应用122可以布置为在操作系统上利用程序数据124进行操作。

计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个A/V端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个I/O端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、点击输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(RF)、微波、红外(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。

计算设备100可以实现为小尺寸便携(或者移动)电子设备的一部分，这些电子设备可以是诸如个人数字助理(PDA)、个人媒体播放器设备、无线网络浏览设备、个人头戴设备、应用专用设备、或者可以包括上面任何功能的混合设备。计算设备100还可以实现为包括桌面计算机和笔记本计算机配置的个人计算机。

本发明提供的指针旋转装置可以是但不限于插件，例如，jQuery Knob插件。不过应当理解，本发明的指针旋转装置不受具体实施形式的限制。具体实施过程以下进行详细描述。

图2示出了根据本发明一个实施例的指针旋转装置的结构图。如图2所示，该装置驻留在计算设备中，包括：第一容器处理单元210、第二容器处理单元220、第三容器处理单元230和位置处理单元240。

第一容器处理单元210将事先准备好的指针图片和刻度图片设置在图片容器中，指针图片和刻度图片的大小一致，可以作为背景图片，上述图片可参考图4和图5。指针图片中包括有指针对象，刻度图片可显示刻度范围，指针对象的旋转范围和刻度图片中刻度范围一致，例如，刻度图片中的刻度范围可以为0度到360度，指针的旋转角度范围也为0度到360度。在设置指针图片和刻度图片时，指针图片位于刻度图片的上方，指针对象的位置可以设置在刻度图片上的任意刻度位置。其中，图片容器可以是但不限于图层(Division，简称DIV)容器，容器是用来存储数据的，数据可以是用户自定义类型，也可以是预定义类型。在设置DIV容器时，只需要让DIV容器的宽高设置成为固定的宽高，如，设定容器宽度为100％，高度为100％，图片可自动适应DIV容器的大小。不过应当理解，上述容器仅仅是示意性的，所有可以实现上述图片容器的功能的容器都在本发明的保护范围内。

第二容器处理单元220利用旋钮工具创建与指针图片大小一致的旋钮图片，并将上述旋钮图片设置在旋钮容器中。旋钮图片的显示形式可以参考图4，旋钮图片中包括有旋钮对象，旋钮对象可以为任意的标识，例如，图示中的矩形条。其中，旋钮工具可以是knob插件，旋钮容器可以是但不限于DIV容器、deque容器、vector容器等。不过应当理解，上述容器和旋钮工具仅仅是示意性的，所有可以实现上述旋钮容器、旋钮工具的功能的容器和工具都在本发明的保护范围内。创建旋钮图片的代码如下：

第三容器处理单元230将上述旋钮容器和图片容器叠加设置，在进行叠加设置时，通过外围容器包裹旋钮容器和图片容器，将旋钮图片中的旋钮对象和指针图片中指针对象的位置重叠，如，参考图4和6，保持旋钮对象如矩形条和指针对象如指针中的圆圈中心的坐标一致，旋钮对象的旋转值和指针对象的旋转值相同。将旋钮容器设置在图片容器的上方，即旋钮图片位于指针图片的上方，并将旋钮容器的透明度设置为100％。将旋钮容器和图片容器进行叠加设置的代码如下：

位置处理单元240能够监控旋钮对象的位置变化情况，根据旋钮对象的位置变化情况更新指针对象的位置。在一个实施方式中，位置处理单元240可以监控旋钮对象的旋转值，当监控到旋钮对象的旋转值发生变化后，将所述指针对象的旋转值更新为旋钮对象的变化后的旋转值。指针对象和旋钮的旋转值可以通过层叠样式表(CSS3)中的属性值(如transform:rotate)记录。例如，默认指针对象和旋钮对应的初始旋转值为0，当用户利用鼠标拖动旋钮图片中旋钮进行旋转时，如，旋钮对象逆时针旋转90度，本发明的装置会监控到旋钮对象的旋转值发生的变化，同时更新指针对象的旋转值，如，逆时针旋转90度，使得指针对象的旋转值和旋钮对象的旋转值一致。这样可以方便快捷的完成指针旋转，大大简化了研发过程并缩减了研发成本。

根据本发明的技术方案，能够简单、快捷地完成在背景图片上的旋转指针的功能，大大简化了开发难度，解决了研发成本，运行效率更高，用户体验更佳。

图3示出了根据本发明一个实施例的指针旋转方法的流程图。如图3所示，该方法在计算设备中执行，始于步骤S310。

在步骤S310中，将指针图片和刻度图片设置在图片容器中。其中，指针图片中包括指针对象。

在步骤S320中，利用旋钮工具创建旋钮图片，并将旋钮图片设置在旋钮容器中。其中，旋钮图片中包括旋钮对象。

根据一种实施方式，旋钮图片中旋钮对象的旋转范围与刻度图片中的刻度范围一致。

在步骤S330中，将旋钮容器和图片容器叠加设置。

根据一种实施方式，将旋钮对象与指针对象的位置重叠设置，即旋钮对象和指针对象的坐标相同

在步骤S340中，监控旋钮对象的位置，根据旋钮对象的位置更新指针对象的位置。

根据一种实施方式，监控旋钮对象的旋转值。当监控到旋钮对象的旋转值发生变化时，将指针对象的旋转值更新为旋钮对象的变化后的旋转值。

根据本发明的技术方案，能够简单、快捷地完成在背景图片上的旋转指针的功能，大大简化了开发难度，解决了研发成本，运行效率更高，用户体验更佳。

本发明实施例所提供的一种指针旋转装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本发明实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

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

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

另外，在本发明提供的实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种指针旋转方法，其特征在于，该方法包括：

将指针图片和刻度图片设置在图片容器中，所述指针图片中包括指针对象；

利用旋钮工具创建旋钮图片，并将所述旋钮图片设置在旋钮容器中，所述旋钮图片中包括旋钮对象；

将所述旋钮容器和所述图片容器叠加设置；

监控所述旋钮对象的位置，根据旋钮对象的位置更新指针对象的位置。

2.如权利要求1所述的方法，其特征在于，所述将所述旋钮容器和所述图片容器叠加设置包括：

将所述旋钮对象与所述指针对象的位置重叠设置。

3.如权利要求1所述的方法，其特征在于，所述旋钮图片中旋钮对象的旋转范围与所述刻度图片中的刻度范围一致。

4.如权利要求1或2所述的方法，其特征在于，所述监控所述旋钮对象的位置，根据旋钮对象的位置更新指针对象的位置，包括：

监控旋钮对象的旋转值；

当监控到旋钮对象的旋转值发生变化时，将所述指针对象的旋转值更新为所述旋钮对象的变化后的旋转值。

5.如权利要求1所述的方法，其特征在于，所述旋钮容器位于所述图片容器的上方，所述旋钮容器的透明度为100％。

6.一种指针旋转装置，其特征在于，该装置包括：

第一容器处理单元，用于将指针图片和刻度图片设置在图片容器中，所述指针图片中包括指针对象；

第二容器处理单元，用于利用旋钮工具创建旋钮图片，并将所述旋钮图片设置在旋钮容器中，所述旋钮图片中包括旋钮对象；

第三容器处理单元，用于将所述旋钮容器和所述图片容器叠加设置；

位置处理单元，用于监控所述旋钮对象的位置，根据旋钮对象的位置更新指针对象的位置。

7.如权利要求6所述的装置，其特征在于，所述第三容器处理单元还用于：

将所述旋钮对象与所述指针对象的位置重叠设置。

8.如权利要求6所述的装置，其特征在于，所述旋钮图片中旋钮对象的旋转范围与所述刻度图片中的刻度范围一致。

9.如权利要求6或7所述的装置，其特征在于，所述位置处理单元还用于：

监控旋钮对象的旋转值；

当监控到旋钮对象的旋转值发生变化时，将所述指针对象的旋转值更新为所述旋钮对象的变化后的旋转值。

10.如权利要求6所述的装置，其特征在于，所述旋钮容器位于所述图片容器的上方，所述旋钮容器的透明度为100％。