一种元素一键布局方法及装置与流程

1.本发明涉及图像处理技术领域，尤其涉及一种元素一键布局方法及装置。


背景技术：

2.用户在使用画布类产品时往往存在排列多元素的场景，其中，元素可以为设计图或者文字卡片，比如，将多张设计图按状态或模块排成多行，需要将设计图按x轴和y轴均均匀分布并且对齐，以达到更好的展示效果。
3.画布类产品会提供一维分布或对齐的方法，帮助用户对齐x轴或y轴的设计图，多行设计图需要对齐场景下，用户需要手动输入列数后点击「重排」重新排布设计图，上述的布局过程，需要多次操作才能实现。


技术实现要素：

4.有鉴于此，本发明提供了一种元素一键布局方法及装置，用来解决画布类产品会提供一维分布或对齐的方法，帮助用户对齐x轴或y轴的设计图，多行设计图需要对齐场景下，用户需要手动输入列数后点击「重排」重新排布设计图，上述的布局过程，需要多次操作才能实现的问题。具体方案如下：
5.一种元素一键布局方法，包括：
6.在接收到对当前画布中各个已选定元素的布局指令的情况下，确定与所述各个已选定元素对应的起点；
7.基于所述起点确定所述各个已选定元素所在行同时计算每行的行间距；
8.确定所述各个已选定元素的列间距；
9.基于所述行间距和所述列间距对所述各个已选定的元素的所处行列进行更新。
10.上述的方法，可选的，确定与所述各个已选定元素对应的起点，包括：
11.自上而下遍历所述当前画布，记录检测首个已选定元素的上边缘；
12.自左而右遍历所述当前画布，记录检测首个已选定元素的左边缘；
13.确定所述上边缘和所述左边缘的交点，将所述交点作为所述各个与选定元素的起点。
14.上述的方法，可选的，基于所述起点确定所述各个已选定元素所在行同时计算每行的行间距，包括：
15.针对所述起点，将所述各个已选定元素中沿y轴自上而下取横向延伸后不重合的已选定元素或者重合度小于预设重合度阈值的元素的数量作为所述各个已选定元素的行数；
16.针对各个行，将所述各个已选定元素划分至移动距离最短的当前行中；
17.计算每行的行间距。
18.上述的方法，可选的，计算每行的行间距，包括：
19.获取所述各个行之间的当前行间距，基于各个当前行间距计算平均行间距；
20.将所述平均行间距与预设行间距阈值进行比较；
21.当所述平均行间距小于等于所述预设行间距阈值的情况下，所述行间距为所述预设行间距阈值，反之，所述行间距为所述平均行间距。
22.上述的方法，可选的，确定所述各个已选定元素的列间距，包括：
23.识别所述各个已选定元素的目标行，其中，所述目标行为所述各个已选定元素中包含已选定元素最多的行；
24.获取所述目标行中相邻已选定元素的当前列间距；
25.计算各个当前列间距的平均列间距；
26.一种元素一键布局装置，包括：
27.第一确定模块，用于在接收到对当前画布中各个已选定元素的布局指令的情况下，确定与所述各个已选定元素对应的起点；
28.确定和计算模块，用于基于所述起点确定所述各个已选定元素所在行同时计算每行的行间距；
29.第二确定模块，用于确定所述各个已选定元素的列间距；
30.更新模块，用于基于所述行间距和所述列间距对所述各个已选定的元素的所处行列进行更新。
31.上述的装置，可选的，所述第一确定模块包括：
32.第一记录单元，用于自上而下遍历所述当前画布，记录检测首个已选定元素的上边缘；
33.第二记录单元，用于自左而右遍历所述当前画布，记录检测首个已选定元素的左边缘；
34.第一确定单元，用于确定所述上边缘和所述左边缘的交点，将所述交点作为所述各个与选定元素的起点。
35.上述的装置，可选的，所述确定和计算模块包括：
36.第二确定单元，用于针对所述起点，将所述各个已选定元素中沿y轴自上而下取横向延伸后不重合的已选定元素或者重合度小于预设重合度阈值的元素的数量作为所述各个已选定元素的行数；
37.划分单元，用于针对各个行，将所述各个已选定元素划分至移动距离最短的当前行中；
38.第一计算单元，用于计算每行的行间距。
39.上述的装置，可选的，所述第一计算单元包括：
40.获取和计算子单元，用于获取所述各个行之间的当前行间距，基于各个当前行间距计算平均行间距；
41.比较子单元，用于将所述平均行间距与预设行间距阈值进行比较；
42.确定子单元，用于当所述平均行间距小于等于所述预设行间距阈值的情况下，所述行间距为所述预设行间距阈值，反之，所述行间距为所述平均行间距。
43.上述的装置，可选的，所述第二确定模块包括：
44.识别单元，用于识别所述各个已选定元素的目标行，其中，所述目标行为所述各个已选定元素中包含已选定元素最多的行；
45.获取单元，用于获取所述目标行中相邻已选定元素的当前列间距；
46.第二计算单元，用于计算各个当前列间距的平均列间距；
47.判定单元，用于将所述平均列间距与预设列间距阈值进行比较，若所述平均列间距小于等于所述预设列间距阈值的情况下，所述列间距为所述预设列间距阈值，反之，所述列间距为所述平均列间距。
48.与现有技术相比，本发明包括以下优点：
49.本发明公开了一种元素一键布局方法及装置，包括：在接收到对当前画布中各个已选定元素的布局指令的情况下，确定与所述各个已选定元素对应的起点；基于所述起点确定所述各个已选定元素所在行同时计算每行的行间距；确定所述各个已选定元素的列间距；基于所述行间距和所述列间距对所述各个已选定的元素的所处行列进行更新。上述过程中，在多个已选定元素需要布局的情况下，首先确定各个已选定元素的起点，基于该起点直接确定各个已选定元素的行间距，确定各个选定元素的列间距，基于行间距和列间距通过一次操作就可以实现对各个已选定元素的布局，减少了操作的次数。
附图说明
50.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
51.图1为本技术实施例公开的一种元素一键布局方法流程图；
52.图2为本技术实施例公开的一种起点确定方法示意图；
53.图3为本技术实施例公开的一种确定行数和确定已选定元素所在行的方法示意图；
54.图4为本技术实施例公开的行间距计算方法示意图；
55.图5为本技术实施例公开的一种列间距计算方法示意图；
56.图6-1为本技术实施例公开的一种已选定元素布局前示意图；
57.图6-2为本技术实施例公开的一种已选定元素布局后示意图；
58.图7为本技术实施例公开的一种行排布示意图；
59.图8为本技术实施例公开的一种元素一键布局装置结构框图。
具体实施方式
60.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
61.对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一
致的最宽的范围。
62.本发明公开了一种元素一键布局方法及装置，应用于对多个已选定元素进行布局的过程中，最终实现二维分布对齐，其中，已选定元素可以为设计图或者文字卡片等，二维分布对齐指按x轴和y周都均匀分布的对齐，现有技术中，选中多个元素后可选择“左对齐”“居中对齐”“横向均匀分布”等，在一维(x轴或y轴)对齐或均匀分布。或输入列数后，点击“重排”将设计图按所选列数重新排序，若需要实现多个已选定元素在x轴和y轴均需要对齐的场景，则需要多次操作。为了解决上述问题，本发明提供了一种元素一键布局的方法，所述方法的执行流程如图1所示，包括步骤：
63.s101、在接收到对当前画布中各个已选定元素的布局指令的情况下，确定与所述各个已选定元素对应的起点；
64.本发明实施例中，在接收到对当前画布中各个已选定元素的布局指令的情况下，将所述当前画布中的各个已选定元素作为一个整体，可以自上而下遍历所述当前画布，记录检测首个已选定元素的上边缘，自左而右遍历所述当前画布，记录检测首个已选定元素的左边缘，也可以自左而右遍历所述当前画布，记录检测首个已选定元素的左边缘，自上而下遍历所述当前画布，记录检测首个已选定元素的上边缘，将所述上边缘和所述左边缘延长，确定所述上边缘和所述左边缘的交点，将所述焦点作为所述各个已选定元素的起点。如图2所示，对所述各个已选定元素按由1到6的顺序进行编号，有上述方法可知，编号1的已选定元素的上边缘为自上而下遍历所述当前画布的上边缘，编号2的已选定元素为的左边缘为自左而右遍历所述当前画布的左边缘，两者的交点p作为所述起点。
65.s102、基于所述起点确定所述各个已选定元素所在行同时计算每行的行间距；
66.本发明实施例中，针对所述起点，将所述各个已选定元素中沿y轴自上而下取横向延伸后不重合的已选定元素或者重合度小于预设重合度阈值的元素的数量作为所述各个已选定元素的行数，所述预设重合度阈值可以基于经验或者具体情况进行设定，本发明实施例中不进行具体限定，优选的，本发明实施例中，所述预设重合度阈值为20％。进一步的，若所述各个已选定元素有多个元素顶对齐，则取左侧已选定元素作为“行数判断元素0”。
67.针对各个行，分别计算每个已选定元素到所述各个行的移动距离，将所述各个已选定元素划分至移动距离最短的当前行中。
68.如图3所示，编号为1的已选定元素和编号为2的已选定元素为不重合元素，划分为不同的行，编号为3的已选定元素和编号为4的已选定元素重合度小于20％划分为不同行，编号为5的已选定元素和编号为6的已选定元素重合度超过20％划分在同一行。
69.进一步的，计算每行的行间距，获取所述各个行之间的当前行间距，计算各个当前行间距的平均行间距，其中，重叠已选定元素的当前行间距为0，将所述平均行间距与预设行间距阈值进行比较，当所述平均行间距小于等于所述预设行间距阈值的情况下，所述行间距为所述预设行间距阈值，反之，所述行间距为所述平均行间距。其中，所述预设行间距阈值可以基于经验或者具体情况进行设定，本发明实施例中不进行具体限定。
70.优选的，本发明实施例中，所述预设行间距阈值为40px为例进行说明，如图4所示，第一行和第二行的当前行间距为a1，第二行和第三行的当前行间距为a2，第三行和第四行的当前行间距为a3，假设行间距为a。则a＝(a1+
71.a2+a3)/3，若a＜40px则行间距取40px。
72.s103、确定所述各个已选定元素的列间距；
73.本发明实施例中，识别所述各个已选定元素的目标行，其中，所述目标行为所述各个已选定元素中包含已选定元素最多的行，获取所述目标行中相邻已选定元素的当前列间距，计算各个当前列间距的平均列间距，将所述平均列间距与预设列间距阈值进行比较，若所述平均列间距小于等于所述预设列间距阈值的情况下，所述列间距为所述预设列间距阈值，反之，所述列间距为所述平均列间距，其中，所述预设列间距阈值可以基于经验或者具体情况进行设定，本发明实施例中不进行具体限定，优选的，本发明实施例中以所述预设列间距阈值为40px为例进行说明，如图5所示，取元素最多的一行的左右间距平均值b作为列间距(重叠元素间距为0)，所述各个已选定元素的第一行为元素最多的一行，针对第一行元素，相邻已选定元素之间的当前列间距分别为b1，b2和b3，则所述b＝(b1+b2+b3)/3，若b＜40px，则列间距取40px。
74.s104、基于所述行间距和所述列间距对所述各个已选定的元素的所处行列进行更新。
75.本发明实施例中，在接收到对所述各个已选定元素的布局指令的情况下，基于所述行间距和所述列间距对所述各个已选定的元素的所处行列进行更新，具体更新过程如下：
76.进一步的，针对列排布，最左侧元素为每行首个已选定元素，左对齐每行首个已选定元素，其余已选定元素沿x轴从左到右按列间距依次排开；针对行排布，顶对齐每行的已选定元素，自上而下按行间距依次排开，如图6-1所示为布局前的示意图，布局前编号为1、2、3、4和5已选定元素如图6-1所示，如图6-2所述为布局后的示意图，布局后编号为1、2、3、4和5已选定元素如图6-2所示。
77.本发明公开了一种元素一键布局方法及装置，包括：在接收到对当前画布中各个已选定元素的布局指令的情况下，确定与所述各个已选定元素对应的起点；基于所述起点确定所述各个已选定元素所在行同时计算每行的行间距；确定所述各个已选定元素的列间距；基于所述行间距和所述列间距对所述各个已选定的元素的所处行列进行更新。上述过程中，在多个已选定元素需要布局的情况下，首先确定各个已选定元素的起点，基于该起点直接确定各个已选定元素的行间距，确定各个选定元素的列间距，基于行间距和列间距通过一次操作就可以实现对各个已选定元素的布局，减少了操作的次数。
78.进一步的，如图7所示，针对行排布，按行间距最小为40px排序，保证所述各个已选定元素不重叠排布，获取所述各个已选定元素的长度，当存在已选定元素的长度超过预设长度阈值的情况下，超长的已选定元素与下一行元素的间距为40px，其中，所述预设长度阈值可以基于经验或者具体情况进行设定，本发明实施例中不进行具体限定。
79.基于上述的一种元素一键布局方法，本发明实施例中，还提供了一种元素一键布局装置，所述装置的结构框图如图8所示，包括：
80.第一确定模块201、确定和计算模块202、第二确定模块203和更新模块204。
81.其中，
82.所述第一确定模块201，用于在接收到对当前画布中各个已选定元素的布局指令的情况下，确定与所述各个已选定元素对应的起点；
83.所述确定和计算模块202，用于基于所述起点确定所述各个已选定元素所在行同
时计算每行的行间距；
84.所述第二确定模块203，用于确定所述各个已选定元素的列间距；
85.所述更新模块204，用于基于所述行间距和所述列间距对所述各个已选定的元素的所处行列进行更新。
86.本发明公开了一种元素一键布局装置，包括：在接收到对当前画布中各个已选定元素的布局指令的情况下，确定与所述各个已选定元素对应的起点；基于所述起点确定所述各个已选定元素所在行同时计算每行的行间距；确定所述各个已选定元素的列间距；基于所述行间距和所述列间距对所述各个已选定的元素的所处行列进行更新。上述过程中，在多个已选定元素需要布局的情况下，首先确定各个已选定元素的起点，基于该起点直接确定各个已选定元素的行间距，确定各个选定元素的列间距，基于行间距和列间距通过一次操作就可以实现对各个已选定元素的布局，减少了操作的次数。
87.本发明实施例中，所述第一确定模块201包括：
88.第一记录单元205、第二记录单元206和第一确定单元207。
89.其中，
90.所述第一记录单元205，用于自上而下遍历所述当前画布，记录检测首个已选定元素的上边缘；
91.所述第二记录单元206，用于自左而右遍历所述当前画布，记录检测首个已选定元素的左边缘；
92.所述第一确定单元207，用于确定所述上边缘和所述左边缘的交点，将所述交点作为所述各个与选定元素的起点。
93.本发明实施例中，所述确定和计算模块202包括：
94.第二确定单元208、划分单元209和第一计算单元210。
95.其中，
96.所述第二确定单元208，用于针对所述起点，将所述各个已选定元素中沿y轴自上而下取横向延伸后不重合的已选定元素或者重合度小于预设重合度阈值的元素的数量作为所述各个已选定元素的行数；
97.所述划分单元209，用于针对各个行，将所述各个已选定元素划分至移动距离最短的当前行中；
98.所述第一计算单元210，用于计算每行的行间距。
99.本发明实施例中，所述第一计算单元210包括：
100.获取和计算子单元211，比较子单元212和确定子单元213。
101.其中，
102.所述获取和计算子单元211，用于获取所述各个行之间的当前行间距，基于各个当前行间距计算平均行间距；
103.所述比较子单元212，用于将所述平均行间距与预设行间距阈值进行比较；
104.所述确定子单元213，用于当所述平均行间距小于等于所述预设行间距阈值的情况下，所述行间距为所述预设行间距阈值，反之，所述行间距为所述平均行间距。
105.本发明实施例中，所述第二确定模块203包括：
106.识别单元214、获取单元215、第二计算单元216和判定单元217。
107.其中，
108.所述识别单元214，用于识别所述各个已选定元素的目标行，其中，所述目标行为所述各个已选定元素中包含已选定元素最多的行；
109.所述获取单元215，用于获取所述目标行中相邻已选定元素的当前列间距；
110.所述第二计算单元216，用于计算各个当前列间距的平均列间距；
111.所述判定单元217，用于将所述平均列间距与预设列间距阈值进行比较，若所述平均列间距小于等于所述预设列间距阈值的情况下，所述列间距为所述预设列间距阈值，反之，所述列间距为所述平均列间距。
112.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
113.本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
114.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
115.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
116.在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
117.存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。存储器是计算机可读介质的示例。
118.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算
机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
119.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
120.本领域技术人员应明白，本技术的实施例可提供为方法、系统或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
121.以上仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。