CN110389810B

CN110389810B - 一种在虚拟画布上快速摆放ui控件的方法、装置及设备

Info

Publication number: CN110389810B
Application number: CN201910699000.8A
Authority: CN
Inventors: 吴钊
Original assignee: Advanced New Technologies Co Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2019-07-31
Filing date: 2019-07-31
Publication date: 2023-03-31
Anticipated expiration: 2039-07-31
Also published as: CN110389810A

Abstract

本申请公开了一种在虚拟画布上快速摆放UI控件的方法，所述方法包括：根据移动UI控件的摆放要求，在所述移动UI控件的周围设置特定距离的标识线，其中，所述移动UI控件静止时隐藏所述标识线，当所述移动UI控件移动时显示所述标识线，且所述标识线与所述移动UI控件同步移动；移动所述移动UI控件，直至所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线重合。本发明根据移动UI控件的摆放要求，在移动UI控件的周围设置特定距离的标识线，进而可以快速摆放移动UI控件，完成软件UI/Web UI设计，解决了现有技术中用户在虚拟画布上摆放UI控件时体验度较差的问题。

Description

一种在虚拟画布上快速摆放UI控件的方法、装置及设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种在虚拟画布上快速摆放UI控件的方法、装置及设备。

背景技术

在计算机图形化的虚拟画布上，通过添加和摆放各种UI控件完成软件UI/Web UI的设计。但软件UI/Web UI设计一般都有比较严格的设计规范，所以对UI控件的摆放会有严格的要求。而用户仅靠双眼目测来摆放UI控件时，很难判断一个像素之间的差异，最终给软件UI/Web UI设计造成不小的困难。

现有技术中，针对上述问题大都采用的是：先将UI控件摆放在差不多的位置，再逐个像素的微调，若是将UI控件摆放的位置偏差较大，则需要微调的次数也就比较多，且经过微调的UI控件也可能因一两个像素的误差而未被用户察觉，从而使得用户的体验度较差。

发明内容

有鉴于此，本申请实施例提供了一种在虚拟画布上快速摆放UI控件的方法、装置及设备，用于解决现有技术中用户在虚拟画布上摆放UI控件时体验度较差的问题。

本申请实施例采用下述技术方案：

本申请实施例提供一种在虚拟画布上快速摆放UI控件的方法，所述方法包括：

根据移动UI控件的摆放要求，在所述移动UI控件的周围设置特定距离的标识线，其中，所述移动UI控件静止时隐藏所述标识线，当所述移动UI控件移动时显示所述标识线，且所述标识线与所述移动UI控件同步移动；

移动所述移动UI控件，直至所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线重合，以完成所述移动UI控件的摆放。

可选的，当所述移动UI控件移动时显示所述标识线，具体包括：

当所述移动UI控件水平移动时，将在移动方向的前侧显示竖直的标识线；

当所述移动UI控件竖直移动时，将在移动方向的前侧显示水平的标识线；

当所述移动UI控件倾斜移动时，将在移动方向的前侧显示水平和竖直的标识线。

可选的，移动所述移动UI控件的过程中，所述方法还包括：

判断所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离是否小于预设距离；

若判断出所述标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离小于预设距离，则所述标识线沿着移动方向吸附至预先摆放的固定UI控件的特定边框线或预先设定的参考线。

可选的，当所述移动UI控件与多个固定UI控件存在摆放要求时，在所述移动UI控件的周围设置多条特定距离的标识线。

可选的，所述标识线为虚线。

本申请实施例还提供一种在虚拟画布上快速摆放UI控件的装置，所述装置包括：

设置单元，用于根据移动UI控件的摆放要求，在所述移动UI控件的周围设置特定距离的标识线，其中，所述移动UI控件静止时隐藏所述标识线，当所述移动UI控件移动时显示所述标识线，且所述标识线与所述移动UI控件同步移动；

移动单元，用于移动所述移动UI控件，直至所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线重合，以完成所述移动UI控件的摆放。

可选的，所述移动单元具体用于：

可选的，所述装置还包括：

判断单元，用于判断所述标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离是否小于预设距离；

吸附单元，用于若判断出所述标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离小于预设距离，则所述标识线沿着移动方向吸附至预先摆放的固定UI控件的特定边框线或预先设定的参考线。

本申请实施例还提供一种在虚拟画布上快速摆放UI控件的设备，该设备包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该设备执行以下装置：

本说明书提供的一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行下述方法：

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：本发明根据移动UI控件的摆放要求，在移动UI控件的周围设置特定距离的标识线，进而可以快速摆放移动UI控件，以完成软件UI/Web UI的设计，解决了现有技术中用户在虚拟画布上摆放UI控件时体验度较差的问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为说明书实施例一提供的在虚拟画布上快速摆放UI控件的方法的流程示意图；

图2为说明书实施例二提供的在虚拟画布上快速摆放UI控件的方法的流程示意图；

图3为说明书实施例二提供的在虚拟画布上的第一个场景；

图4为说明书实施例二提供的在虚拟画布上的第二个场景；

图5为说明书实施例二提供的在虚拟画布上的第三个场景；

图6为说明书实施例二提供的在虚拟画布上的第四个场景；

图7为说明书实施例二提供的在虚拟画布上的第五个场景；

图8为说明书实施例二提供的在虚拟画布上的第六个场景；

图9为说明书实施例二提供的在虚拟画布上的第七个场景；

图10为说明书实施例二提供的在虚拟画布上的第八个场景；

图11为说明书实施例二提供的在虚拟画布上的第九个场景；

图12为说明书实施例三提供的在虚拟画布上快速摆放UI控件的装置的结构示意图。

具体实施方式

现有技术中，针对上述问题大都采用的是：先将UI控件摆放在差不多的位置，再逐个像素的微调，若是将UI控件摆放的位置偏差较大，则需要微调的次数也就比较多，且经过微调的UI控件也可能因一两个像素的误差而未被用户察觉，从而使得用户的体验度较差，比如，要求两个UI控件相隔8像素，现有技术可以先将两个UI控件贴在一起，然后通过逐个像素的调整摆放位置，期间需要操作9次(将两个UI控件贴在一起1次，微调8个像素8次)，虽然解决了可能造成一两个像素误差的问题，但期间需要操作9次，也是会使得用户在操作时过于繁琐，影响用户的体验度。

此外，现有技术中，针对上述问题还有采用的是：将虚拟画布上布满参考线，UI控件在摆放时依据参考线完成准确摆放。比如，针对上述的问题，可以在摆放两个UI控件之前，先将UI控件之间以像素为单位放置多条参考线，然后将两个UI控件摆放至相隔8个像素，如果有多个UI控件需要完成摆放，放置参考线可以节省很多时间，但如果没有大量的UI控件需要摆放，布置多条参考线将花费大量的时间，非但不能提高摆放UI控件的效率，反而会花费更多的时间，也会影响用户的体验度。

术语解释：

虚拟画布：在计算机显示器上呈现的虚拟画布，根据不同的软件服务或场景能够容纳各种类型的UI控件(又称UI元素)。比如：Photoshop上可以容纳各种规则的图形；PowerPoint上可以容纳支持范围内的UI控件；NetBeans可以容纳Java的UI控件。

UI：User Interface，用户界面，也称人机界面。

UI控件：用于构建用户界面(UI)的元素，比如：按钮、静态文本框、弹出式菜单等。

UI设计：是指对软件的人机交互、界面美观的整体设计。UI设计分为实体UI和虚拟UI，这里指的UI是虚拟UI。

参考线：在虚拟画布上精确对齐物体的辅助线。

吸附：在计算机和人机界面领域，吸附的意思是当元素或窗口互相靠近时，像磁铁一样贴合在一起。

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

以下结合附图，详细说明本申请各实施例提供的技术方案。

图1为本说明书实施例一提供的一种在虚拟画布上快速摆放UI控件的方法的流程示意图，该流程示意图包括：

步骤S101，根据移动UI控件的摆放要求，在移动UI控件的周围设置特定距离的标识线，其中，移动UI控件静止时隐藏标识线，当移动UI控件移动时显示标识线，且标识线与移动UI控件同步移动。

步骤S102，移动移动UI控件，直至移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线重合，以完成所述移动UI控件的摆放。

图2为本说明书实施例二提供的一种在虚拟画布上快速摆放UI控件的方法的流程示意图，该流程示意图包括：

步骤S201，在虚拟画布的合适位置摆放第一个移动UI控件。

在本说明书实施例步骤S201中，参见图3，在虚拟画布上，根据需求将第一个移动UI控件放置在合适的位置，当第一移动UI控件摆放完成时，该移动UI控件变为固定UI控件，但固定UI控件并非永远固定不动，若是有其他摆放要求时，固定UI控件也是可以移动的。其中，第一个移动UI控件可以由操作人员选择，若是虚拟画布的设计区域足够大，该移动UI控件可以摆放在任何位置，当第一个移动UI控件摆放完毕后，则该UI控件变为固定UI控件，下一个移动UI控件在摆放时，需要参照虚拟画布上已有的固定UI控件来摆放，以此类推，以后的每一个移动UI控件在摆放时，需要参照某个或某几个固定UI控件来确定该移动UI控件的摆放位置。

任意一个移动UI控件在摆放结束皆会变为固定UI控件，但固定UI控件需要再次移动时也可以变为移动UI控件。移动UI控件为需要被摆放的UI控件。固定UI控件为已经摆放好的UI控件。

步骤S202，根据移动UI控件的摆放要求，在移动UI控件的周围设置特定距离的标识线，其中，移动UI控件静止时隐藏标识线，当移动UI控件移动时显示标识线，且标识线与移动UI控件同步移动。

在本说明书实施例步骤S202中，当移动UI控件移动时显示标识线，具体包括：

参见图4，在虚拟画布上，移动UI控件水平移动时，将在移动方向的前侧显示竖直的标识线，该竖直的标识线与移动UI控件的距离是根据摆放要求进行设定的，在本图中该距离为移动UI控件与固定UI控件的摆放距离，但该距离也可以为移动UI控件与预先设定的参考线的摆放距离。其中，参考线为在虚拟画布上精确对齐物体的辅助线，参考线设置于虚拟画布上用于辅助定位移动UI控件。

参见图5，在虚拟画布上，移动UI控件竖直移动时，将在移动方向的前侧显示水平的标识线，该水平的标识线与移动UI控件的距离是根据摆放要求进行设定的，在本图中该距离为移动UI控件与固定UI控件的摆放距离，但该距离也可以为移动UI控件与预先设定的参考线的摆放距离。

参见图6，在虚拟画布上，移动UI控件倾斜移动时，将在移动方向的前侧显示水平和竖直的标识线，该水平和竖直的标识线与移动UI控件的距离相等，该距离是根据摆放要求进行设定的，在本图中该距离为移动UI控件与固定UI控件的竖直摆放距离或水平摆放距离，该距离也可以为移动UI控件与预先设定的参考线的竖直摆放距离或水平摆放距离(若参考线为竖直方向，则该距离可以为移动UI控件与参考线的水平摆放距离；若参考线为水平方向，则该距离可以为移动UI控件与参考线的竖直摆放距离)。参见图7，若是倾斜移动时偏向水平方向，则竖直的标识线的长度大于水平的标识线；参见图8，若是倾斜移动时偏向竖直方向，则竖直的标识线的长度小于水平的标识线。倾斜移动的角度可以根据固定UI控件所处的位置来移动所述移动UI控件，当移动所述移动UI控件的角度不同，所出现的标识线的形态各不相同，可以帮助用户辨识倾斜移动的角度，方便用户来调整移动的角度，提高用户的体验度。

步骤S203，移动移动UI控件，直至移动UI控件对应的标识线与固定UI控件的特定边框线或预先设定的参考线重合，以完成所述移动UI控件的摆放。

在本说明书实施例步骤S201中，若是需要将移动UI控件摆放至固定UI控件的特定边框线时，参见图9，在虚拟画布上，根据摆放要求需将移动控件摆放在固定UI控件的下侧，需要提前将标识线与移动UI控件的距离设定为移动UI控件与固定UI控件需要摆放的距离，用户在摆放移动UI控件时，只需将移动UI控件对应的标识线与固定UI控件的下边框重合即可。图9可以表明通过标识线来定位移动UI控件的位置(在该场景中可以预先定位移动UI控件的水平位置，再由在该图中用来定位移动UI控件的竖直位置)。

此外，若是需要将移动UI控件摆放至预先设定的参考线时，参见图10，在虚拟画布上，根据摆放要求将移动控件摆放在固定UI控件的下侧，需要提前将标识线(图10中的实线)与移动UI控件的距离设定为移动UI控件与预先设定的参考线(图10中的虚线)需要摆放的距离，在摆放移动UI控件时只需将移动UI控件对应的标识线与预先设定的标识线重合即可，图10可以表明通过标识线来定位移动UI控件的位置(在该场景中可以预先定位移动UI控件的竖直位置，再由该图确定移动UI控件的水平位置)。

在本说明书实施例步骤S203中，移动所述移动UI控件的过程中，判断移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离是否小于预设距离；若判断出移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离小于预设距离，则标识线沿着移动方向吸附至预先摆放的固定UI控件的特定边框线或预先设定的参考线，吸附是指在计算机和人机界面领域，吸附的意思是当移动UI控件对应的标识线与参考线，或者移动UI控件对应的标识线与固定UI控件的边框线互相靠近时，像磁铁一样贴合在一起；若判断出移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离不小于预设距离，则按照原方向继续移动所述移动UI控件。

当移动UI控件与多个固定UI控件存在摆放要求时，在移动UI控件的周围可以设置多条特定距离的标识线。参见图11，在虚拟画布上，移动UI控件与两个固定UI控件存在摆放要求，根据摆放要求，图中的标识线1与移动UI控件的距离为第一固定UI控件与移动UI控件的规定距离，图中的标识线2与移动UI控件的距离为第二固定UI控件与移动UI控件的规定距离。

进一步的，标识线可以为虚线。

假设有移动UI控件A，该移动控件A左上角的坐标为[X,Y]，该移动控件A的宽度W，高度H；此时有标记线规则是：在控件移动方向显示显示标记线，距离控件D(distance)。

当移动UI控件A往正左方向移动时，将在左边出现一条标记线，标记线的两点坐标与移动UI控件A的关系如下：

[X-D,Y]

[X-D,Y+H]

当移动UI控件A往正上方向移动时，将在上方出现一条标记线，标记线的两点坐标与控件关系如下：

[X,Y-D]

[X+W,Y-D]

当移动UI控件A往左上方向移动时，将在上方出现水平和竖直的标记线，两条线的两点坐标与控件关系分别如下：

水平的标识线：

[X-D,Y-D]

[X+W,Y-D]

竖直的标识线：

[X-D,Y-D]

[X-D,Y+H]

...其他情况这里省略，可以通过上述规则推导出来，也可以参考下方代码。

/>

/>

/>

本申请中吸附的触发方式

规定标记线距离为D(distance)，吸附阈值是T(threshold)，假设有两个UI控件分别是A和B，当拖动A(A是移动UI控件)接近B的时候，计算返回A的新的位置(X和Y坐标)。

当A往左移动时，吸附发生的范围是：

水平方向：B.X+B.W-T<A.X-D<B.X+B.W+T

当A往上移动时，吸附发生的范围是：

水平方向：B.Y+B.H-T<A.Y-D<B.Y+B.H+T

当A往右移动时，吸附发生的范围是：

水平方向：B.X-T<A.X+A.W+D<B.X+T

当A往下移动时，吸附发生的范围是：

水平方向：B.Y-T<A.Y+A.H+D<B.Y+T

其中，B.X为UI控件B的坐标，B.W为UI控件B的宽度，A.X为移动UI控件A的坐标，A.H为移动UI控件A的高度，以此类推。

补充：当下图被移动控件被向左移动时，箭头显示为控件移动方向。

实现这个效果，有如下代码逻辑(JavaScript)：

/>

与上述实施例一对应的，图12为本说明书实施例三提供的一种在虚拟画布上快速摆放UI控件的装置的结构示意图，该结构示意图包括：设置单元1、移动单元2、判断单元3以及吸附单元4。

设置单元1用于根据移动UI控件的摆放要求，在所述移动UI控件的周围设置特定距离的标识线，其中，所述移动UI控件静止时隐藏所述标识线，当所述移动UI控件移动时显示所述标识线，且所述标识线与所述移动UI控件同步移动；

移动单元2用于移动所述移动UI控件，直至所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线重合，以完成所述移动UI控件的摆放。

移动单元2具体用于：

判断单元3用于判断所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离是否小于预设距离；

吸附单元4用于若判断出所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离小于预设距离，则所述标识线沿着移动方向吸附至预先摆放的固定UI控件的特定边框线或预先设定的参考线。

当所述移动UI控件与多个固定UI控件存在摆放要求时，在所述移动UI控件的周围设置多条特定距离的标识线。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device，PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims

1.一种在虚拟画布上快速摆放UI控件的方法，所述方法包括：

根据移动UI控件的摆放要求，在所述移动UI控件的周围设置特定距离的标识线，其中，所述移动UI控件静止时隐藏所述标识线，当所述移动UI控件移动时在移动方向的前侧显示所述标识线，且所述标识线与所述移动UI控件同步移动；

移动所述移动UI控件，直至所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线重合，以完成所述移动UI控件的摆放；

在移动所述移动UI控件的过程中，若所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离小于预设距离，则所述标识线沿着移动方向吸附至预先摆放的固定UI控件的特定边框线或预先设定的参考线；

其中，所述特定距离大于零。

2.根据权利要求1所述的在虚拟画布上快速摆放UI控件的方法，当所述移动UI控件移动时显示所述标识线，具体包括：

3.根据权利要求1所述的在虚拟画布上快速摆放UI控件的方法，移动所述移动UI控件的过程中，所述方法还包括：

若判断出所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离小于预设距离，则所述标识线沿着移动方向吸附至预先摆放的固定UI控件的特定边框线或预先设定的参考线。

4.根据权利要求1所述的在虚拟画布上快速摆放UI控件的方法，当所述移动UI控件与多个固定UI控件存在摆放要求时，在所述移动UI控件的周围设置多条特定距离的标识线。

5.根据权利要求1所述的在虚拟画布上快速摆放UI控件的方法，所述标识线为虚线。

6.一种在虚拟画布上快速摆放UI控件的装置，所述装置包括：

设置单元，用于根据移动UI控件的摆放要求，在所述移动UI控件的周围设置特定距离的标识线，其中，所述移动UI控件静止时隐藏所述标识线，当所述移动UI控件移动时在移动方向的前侧显示所述标识线，且所述标识线与所述移动UI控件同步移动；

移动单元，用于移动所述移动UI控件，直至所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线重合，以完成所述移动UI控件的摆放；

吸附单元，用于在移动所述移动UI控件的过程中，若所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离小于预设距离，则所述标识线沿着移动方向吸附至预先摆放的固定UI控件的特定边框线或预先设定的参考线；

其中，所述特定距离大于零。

7.根据权利要求6所述的在虚拟画布上快速摆放UI控件的装置，所述移动单元具体用于：

8.根据权利要求6所述的在虚拟画布上快速摆放UI控件的装置，所述装置还包括：

判断单元，用于判断所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离是否小于预设距离；

吸附单元，用于若判断出所述移动UI控件对应的标识线与预先摆放的固定UI控件的特定边框线或预先设定的参考线的距离小于预设距离，则所述标识线沿着移动方向吸附至预先摆放的固定UI控件的特定边框线或预先设定的参考线。

9.根据权利要求6所述的在虚拟画布上快速摆放UI控件的装置，当所述移动UI控件与多个固定UI控件存在摆放要求时，在所述移动UI控件的周围设置多条特定距离的标识线。

10.一种在虚拟画布上快速摆放UI控件的设备，该设备包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该设备执行权利要求6至9中任一项所述的装置。