页面处理方法及装置与流程

文档序号:31708912发布日期:2022-10-01 14:04阅读:68来源:国知局
页面处理方法及装置与流程

1.本技术涉及页面设计技术领域,特别涉及页面处理方法。本技术同时涉及页面处理装置,一种计算设备,以及一种计算机可读存储介质。


背景技术:

2.随着互联网技术的发展与应用,产品的视觉设计越来越多地受到重视,在产品开发过程中,设计师会为产品设计出一个视觉稿件,称为设计稿。但是许多设计师们在进行设计时,往往过多关注设计稿的视觉体验,而忽略设计稿的层次结构,使得后续在对设计稿进行分割、布局设计稿中的元素时更为困难。
3.现有技术中通过人工标注海量数据,并采用深度学习技术通过大数据的方式实现设计稿布局分割,这种方法依赖于大量数据,需要大量的人力进行标注,人工成本非常高。因此,如何方便快捷的实现设计稿的布局分割,获得设计稿的层级结构是目前亟需解决的问题。


技术实现要素:

4.有鉴于此,本技术实施例提供了页面处理方法。本技术同时涉及页面处理装置,一种计算设备,以及一种计算机可读存储介质,以解决现有技术中存在的设计稿布局分割耗费大量人力、时间的问题。
5.根据本技术实施例的第一方面,提供了一种页面处理方法,包括:
6.根据目标页面的布局示意图,确定所述目标页面对应的元素集合;
7.根据所述元素集合中每个元素的属性信息绘制每个元素对应的元素块,并根据每个元素对应的元素块生成元素块分布图;
8.对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域;
9.根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构。
10.根据本技术实施例的第二方面,提供了一种页面处理装置,包括:
11.确定模块,被配置为根据目标页面的布局示意图,确定所述目标页面对应的元素集合;
12.绘制模块,被配置为根据所述元素集合中每个元素的属性信息绘制每个元素对应的元素块,并根据每个元素对应的元素块生成元素块分布图;
13.分割模块,被配置为对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域;
14.构建模块,被配置为根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构。
15.根据本技术实施例的第三方面,提供了一种计算设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令,所述处理器执行所述计算机指令时实现所
述页面处理方法的步骤。
16.根据本技术实施例的第四方面,提供了一种计算机可读存储介质,其存储有计算机指令,该计算机指令被处理器执行时实现所述页面处理方法的步骤。
17.本技术提供的页面处理方法,根据目标页面的布局示意图,确定所述目标页面对应的元素集合;根据所述元素集合中每个元素的属性信息绘制每个元素对应的元素块,并根据每个元素对应的元素块生成元素块分布图;对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域;根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构。
18.本技术一实施例通过根据目标页面的布局示意图绘制对应的元素块分布图,再对元素块分布图进行迭代分割处理,获得每个迭代分割周期对应的目标分割区域,从而根据每个目标分割区域的生成顺序,构建目标页面的页面布局树状结构,无需依赖人工对目标页面进行分割,提高分割效率。
附图说明
19.图1是本技术一实施例提供的一种页面处理方法的流程图;
20.图2是本技术一实施例提供的一种元素块分布示意图;
21.图3是本技术一实施例提供的一种去重元素块分布示意图;
22.图4是本技术一实施例提供的一种去重元素块分布图的分割示意图;
23.图5是本技术一实施例提供的一种页面布局树树状结构示意图;
24.图6是本技术一实施例提供的一种应用于分割页面的页面处理方法的处理流程图;
25.图7是本技术一实施例提供的一种页面处理装置的结构示意图;
26.图8是本技术一实施例提供的一种计算设备的结构框图。
具体实施方式
27.在下面的描述中阐述了很多具体细节以便于充分理解本技术。但是本技术能够以很多不同于在此描述的其它方式来实施,本领域技术人员可以在不违背本技术内涵的情况下做类似推广,因此本技术不受下面公开的具体实施的限制。
28.在本技术一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本技术一个或多个实施例。在本技术一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。还应当理解,本技术一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
29.应当理解,尽管在本技术一个或多个实施例中可能采用术语第一、第二等来描述各种信息,但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如,在不脱离本技术一个或多个实施例范围的情况下,第一也可以被称为第二,类似地,第二也可以被称为第一。取决于语境,如在此所使用的词语“如果”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”。
30.首先,对本技术一个或多个实施例涉及的名词术语进行解释。
31.设计稿:在产品开发过程中,设计师为产品设计的视觉稿件,由一系列不同的组件按照自定义的布局排版组成。
32.基础元素:构成设计稿基础的元素,比如矩形框、文本等。
33.布局树:设计师们在设计页面时,会根据元素之间的关系,对元素进行打组操作,比如把商品名称文本和商品价格文本打组为商品条目,按照打组关系,可以把设计稿或组件抽象成一颗多叉树。
34.现有技术中,设计师在设计页面时会根据元素之间的关系对元素进行打组操作,例如将商品名称文本和商品价格文本打组为商品条目。元素打组操作对于规范设计稿层次结构至关重要,比如根据设计稿生成代码,就非常依赖于设计稿的层次结构。但是由于设计稿中的元素打组操作仅仅是隐式地约束了元素之间的关系,在视觉上是不可见的操作,从而设计师在进行设计时更注重视觉体验,忽略了设计稿的层次结构,在后续生成代码时较为困难。为了解决上述问题,通常采用训练好的模型对设计稿进行布局分割,获得页面布局的布局树,从而确定页面布局对应的层次结构,但是这种方法需要人工标注海量数据,训练模型的成本高,数据收集难度大。
35.基于此,在本技术中,提供了页面处理方法,本技术同时涉及页面处理装置,一种计算设备,以及一种计算机可读存储介质,在下面的实施例中逐一进行详细说明。
36.图1示出了根据本技术一实施例提供的一种页面处理方法的流程图,具体包括以下步骤:
37.步骤102:根据目标页面的布局示意图,确定所述目标页面对应的元素集合。
38.其中,目标页面可以理解为网页设计稿或者海报设计稿等页面设计稿,目标页面的布局示意图可以理解为设计目标页面时生成的元素布局示意图,布局示意图中包括每个元素在目标页面中的具体位置,因此可以根据目标页面的布局示意图确定出目标页面对应的元素集合。
39.在实际应用中,布局示意图可以携带有对应的元素信息,可以根据元素信息确定目标页面对应的元素集合,由于布局示意图在设计时已经生成有对应的层级结构,因此在本技术提供的页面处理方法中,在获得布局示意图时会舍弃原先的层级结构,将布局示意图中的元素进行整合,获得一个基础元素列表,即元素集合,元素集合中包括目标页面的布局示意图中包含的所有元素,元素集合中的每个元素之间没有关联关系。
40.在本技术一具体实施例中,获得目标页面的布局示意图,布局示意图中携带有对应的元素信息,根据元素信息确定目标页面对应的元素集合。
41.在另一种可实现的方式中,也可通过对布局示意图进行图像识别,识别布局示意图中的元素,从而确定出目标页面对应的元素集合。
42.具体的,根据目标页面的布局示意图,确定所述目标页面对应的元素集合,包括:
43.通过对目标页面的布局示意图进行识别,根据识别结果生成所述目标页面对应的元素集合。
44.在实际应用中,图像识别技术可以是基于已经训练好的图像识别模型实现,通过将布局示意图输入至图像识别模型,获得图像识别模型输出的布局示意图中的每个元素,从而生成目标页面对应的元素集合。
45.在本技术一具体实施例中,获得目标页面的布局示意图,对布局示意图进行图像
识别,根据识别结果确定目标页面对应的元素集合。
46.综上,通过图像识别技术获得布局示意图中的元素,可以提高元素获取准确率与获取效率。
47.步骤104:根据所述元素集合中每个元素的属性信息绘制每个元素对应的元素块,并根据每个元素对应的元素块生成元素块分布图。
48.具体的,获得元素集合之后,为了体现元素集合中每个元素在布局示意图中的位置关系,还可以基于元素集合中的每个元素及每个元素对应的属性信息,绘制出布局示意图对应的元素块分布图。
49.其中,每个元素的属性信息可以是每个元素在布局示意图中的位置信息、每个元素的大小,在实际应用中元素的属性信息包括元素在布局示意图中的坐标信息、每个元素的面积信息、以及边长坐标区间等信息。每个元素对应的元素块可以理解为根据元素的属性信息绘制出的区域块,参见图2,图2是本技术一实施例中提供的一种元素块分布示意图,在图2中包括4个元素块,可知,根据每个元素在布局示意图中的坐标信息以及大小信息,可以绘制出每个元素对应的元素块。在实际应用中,元素块分布图中每个元素块的位置关联于每个元素在布局示意图中的位置。
50.在本技术一具体实施例中,根据元素集合中每个元素的坐标信息以及每个元素的边长信息,绘制出每个元素对应的元素块,并根据每个元素对应的元素块组合生成元素块分布图。
51.综上,根据每个元素在布局示意图中的坐标信息以及大小信息,可以准确的绘制出每个元素对应的元素块,并基于每个元素块生成布局示意图对应的元素块分布图,便于后续对元素块分布图进行分割处理,以实现布局示意图的布局分割。
52.步骤106:对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域。
53.具体的,通过上述方法获得布局示意图对应的元素块分布图之后,可以对元素块分布图执行迭代分割处理,并确定出每个迭代分割周期的分割处理结果生成的目标分割区域,其中,目标分割区域中包括一个元素块。
54.其中,迭代分割处理可以理解为对元素块分布图进行分割处理,获得第一次分割处理结果对应的两个分割区域,在上述两个分割区域还可以进行分割处理的情况下,进行第二次分割处理,并获得第二次分割处理结果对应的两个分割区域,并判断是否可以进行下一次分割,直至获得目标分割区域,即目标分割区域无法再次进行分割为止。
55.在实际应用中,经过每个迭代分割周期的分割处理结果之后都可以获得对应的分割区域,在分割区域中仅包含一个元素块时,则表征为该分割区域无法继续进行分割,则该分割区域被称为目标分割区域,通过对元素块分布图进行迭代分割处理,可以获得每个迭代分割周期的分割处理结果对应的目标分割区域,并且在经过最后一个迭代分割周期的分割处理之后,元素块分布图被分割成多个只包含一个元素块的分割区域。该分割过程可以理解为页面布局树状图中的根节点被一直分叉,直至分叉至叶子节点,从而实现对目标页面的布局示意图的布局分割,并构建出页面布局树状结构。
56.在本技术一具体实施例中,对元素块分布图进行迭代分割处理,每经过以此迭代分割周期的分割处理之后,对分割处理结果获得的分割区域进行元素块数量进行判断,在
分割区域中包括至少两个元素块的情况下,对该分割区域继续进行迭代分割,在分割区域中包括一个元素块的情况下,将该分割区域作为目标分割区域。
57.在实际应用中,为了减少迭代分割次数,在对元素块分布图进行迭代分割处理之前,可以先对元素块分布图的元素块进行冗余元素块删除处理,具体的对所述元素块分布图进行迭代分割处理之前,所述方法还包括:
58.通过对所述元素块分布图中的元素块进行冗余元素块删除处理,根据删除结果获得目标元素块分布图;
59.相应的,所述对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域,包括:
60.对所述目标元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域。
61.其中,冗余元素块可以理解为在元素块分布图中可以提前简化的元素块,例如元素块1和元素块2在元素分布图中的大小一致,且在垂直方向或水平方向上平行,则元素块2可以被作为冗余元素块进行删除,仅保留元素块1即可。
62.在实际应用中,经过冗余元素块删除处理之后的元素块分布图,在结构上更加简单,后续在进行分割处理时,能够减少分割次数,提高分割效率。
63.在本技术一具体实施例中,对元素块分布图中的元素块进行冗余元素块删除处理,根据删除结果获得目标元素块分布图,后续对目标元素块进行迭代分割处理,并确定每个迭代分割周期的分割处理结果生成的目标分割区域。
64.在另一种可选方式中,也可以选择不进行冗余元素块的删除处理,直接对元素块分布图进行迭代分割处理,但是在这种方式中,每个迭代分割周期中均包括去重处理,根据去重结果获得去重元素块分布图,并对去重元素块分布图进行分割处理,具体的,任意一个迭代分割周期的目标分割区域通过以下方式获得,包括:
65.确定目标迭代分割周期,在所述目标迭代分割周期中对所述元素块分布图进行迭代去重处理,根据迭代去重处理结果获得去重元素块分布图;
66.对所述去重元素块分布图进行分割处理,并根据分割处理结果获得所述目标迭代分割周期对应的目标分割区域。
67.其中,目标迭代分割周期可以理解为在多个迭代分割周期确定出的一个迭代分割周期,每个迭代分割周期中的分割处理步骤相同,均包括去重处理以及分割处理。去重元素块分布图可以理解为经过去重后的元素块分布图,参见图3,图3是本技术一实施例提供的一种去重元素块分布示意图,其中,图3(a)为初始的元素块分布图,图3(b)为去重后的去重元素块分布图,在图3(b)中,以虚线表示的元素块即为去重删除的元素块。需要注意的是,图3(b)是垂直方向上进行去重后的去重元素块分布图,图3(c)是水平方向上进行去重后的去重元素块分布图。
68.在实际应用中,去重处理的规则可以是对于任意一对元素(ei,ej),如果满足ei在垂直/水平方向上完全包含ej,则丢弃ej。每个迭代分割周期中对会对元素块分布图进行迭代去重处理,迭代去重处理可以理解为对元素块分布图进行去重处理获得去重后的初始元素块分布图,在初始元素块分布图中的元素块还可以进行去重处理时,则进入下一个迭代去重周期的去重处理,直至最后获得的去重元素块分布图中无法对元素块再进行去重。
69.在本技术一具体实施例中,确定目标迭代分割周期为第一个迭代分割周期,在目标迭代分割周期中对元素块分布图进行迭代去重处理,获得去重元素块分布图,去重元素块分布图中的元素块无法再进行去重,此时对去重元素块分布图进行分割处理,根据分割处理结果获得目标迭代分割周期对应的目标分割区域。
70.通过在每个迭代分割周期中增加迭代去重处理,使得每个迭代分割周期中的分割处理的分割点更少,提高每次分割的准确性,也能减少迭代分割周期,提高分割效率。
71.在实际应用中,迭代分割处理过程中,可以根据预设去重策略进行去重处理,具体的,在所述目标迭代分割周期中对所述元素块分布图进行迭代去重处理,根据迭代去重处理结果获得去重元素块分布图,包括:
72.根据预设去重策略确定所述元素块分布图中每个元素块的坐标信息;
73.根据每个元素块的坐标信息对所述元素块分布图中包含的元素块进行迭代去重,根据迭代去重结果获得去重元素块分布图。
74.其中,预设去重策略可以理解为去重规则,预设去重策略包括垂直去重策略和水平去重策略,根据不同的去重策略对元素块分布图中的元素块进行去重,并且每次迭代分割周期中都可以选择不同的去重策略进行去重。例如,在第一次迭代分割周期中选择垂直去重策略进行去重,在第二迭代分割周期中选择水平去重策略进行去重。
75.在实际应用中,可以执行两种去重策略,并基于两种去重策略分别进行分割处理,根据分割效果确定最终的去重策略。在选择预设去重策略之后,则可以根据预设去重策略,获得每个元素块对应的坐标信息,基于每个元素块的坐标信息进行去重,每个元素块的坐标信息可以理解为元素块的边长坐标区间信息,例如,元素块的长在元素块分布图中的坐标,或者元素块的宽在元素块分布图中的坐标,依据元素块的坐标信息进行元素块之间是否包含的判定,从而实现对元素块的去重处理。
76.在一种可实现的方式中,所述预设去重策略包括垂直去重策略;
77.根据预设去重策略确定所述元素块分布图中每个元素块的坐标信息,包括:
78.在所述预设去重策略为垂直去重策略的情况下,根据垂直去重策略确定所述元素块分布图中每个元素块的垂直坐标信息。
79.在实际应用中,当选择预设去重策略为垂直去重策略时,需要确定每个元素块的垂直坐标信息,垂直坐标信息可以理解为元素块的宽在元素分布图中的坐标区间信息,比较每个元素块的垂直坐标信息,即可确定出需要被去重的元素块。参见图3,图3(b)是垂直方向上去重的示意图,左下的元素块的垂直坐标信息完全包含右下虚线元素块的垂直坐标信息,则可以确定该虚线元素块可以进行去重。
80.在另一种可实现的方式中,所述预设去重策略包括水平去重策略;
81.根据预设去重策略确定所述元素块分布图中每个元素块的坐标信息,包括:
82.在所述预设去重策略为水平去重策略的情况下,根据水平去重策略确定所述元素块分布图中每个元素块的水平坐标信息。
83.在实际应用中,当选择预设去重策略为水平去重策略时,需要确定每个元素块的水平坐标信息,水平坐标信息可以理解为元素块的长在元素分布图中的坐标区间信息,比较每个元素块的水平坐标信息,即可确定出需要被去重的元素块。参见图3,图3(c)是水平方向上去重的示意图,左下的元素块的水平坐标信息完全包含左上两个虚线元素块的水平
坐标信息,则可以确定这两个虚线元素块在水平方向上可以进行去重。
84.每种预设去重策略中的去重处理可通过以下方式进行,具体的,任意一个迭代去重周期的去重元素块分布图可通过以下方式获得,包括:
85.在所述元素块分布图中确定第一元素块与第二元素块;
86.比较所述第一元素块与所述第二元素块的坐标信息;
87.在所述第一元素块的坐标信息大于或等于所述第二元素块的坐标信息的情况下,保留所述第一元素块并删除所述第二元素块,并获得去重元素块分布图;
88.在所述第一元素块的坐标信息小于所述第二元素块的坐标信息的情况下,保留所述第一元素块与所述第二元素块,并获得去重元素块分布图。
89.其中,第一元素块和第二元素块可以理解为需要进行比较的元素块,根据比较结果确定出需要进行去重的元素块。坐标信息可以理解为元素块在元素分布图中的坐标区间信息,当预设去重策略为垂直去重策略时,比较的即为元素块的垂直坐标信息,当预设去重策略为水平去重策略时,比较的即为元素块的水平坐标信息。
90.在实际应用中,当第一元素块的坐标信息大于或等于第二元素块的坐标信息的情况下,即第一元素块在垂直方向或水平方向上的坐标区间完全包含第二元素块的坐标区间,则第二元素块被确定为待去重元素块,在本次分割处理周期中不考虑第二元素块,也可以理解为在本次周期中删除第二元素块。当第一元素块的坐标信息小于第二元素块的坐标信息的情况下,表征为第一元素块在垂直方向或水平方向上的坐标区间没有完全包含第二元素块的坐标区间,则两个元素块都不可以进行去重,保留两个元素块。
91.在本技术一具体实施例中,确定第一元素块和第二元素块,预设去重策略为垂直去重策略,比较第一元素块与第二元素块的垂直坐标信息,第一元素块的垂直坐标信息为[1,10],第二元素块的垂直坐标信息为[2,5],则第一元素块的坐标信息大于第二元素块的坐标信息,保留第一元素块并删除第二元素块,获得去重后的去重元素块分布图。
[0092]
在每个迭代分割周期中加入去重处理,获得去重元素块分布图,从而使得后续对去重元素块分布图进行分割时,能够减少分割点数量,提高分割效率。
[0093]
具体的,对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域,包括:
[0094]
在第i次分割周期中对所述元素块分布图进行分割处理,获得至少两个初始分割区域;
[0095]
判断所述至少两个目标分割区域中每个初始分割区域是否包含至少两个的元素块;
[0096]
若是,i自增1,将包含至少两个的元素块的初始分割区域作为元素块分布图,并执行在第i次分割周期中对所述元素块分布图进行分割处理;
[0097]
若否,确定每个迭代分割周期的分割处理结果生成的目标分割区域。
[0098]
其中,迭代分割处理包括对元素分布图进行多周期的分割,例如,经过第一次迭代分割周期之后获得第一分割区域,在第一分割区域还可以进行分割的情况下,第二次迭代分割周期可以对第一分割区域再次进行分割,直至最后获得的每个分割区域都不可以进行分割。
[0099]
在实际应用中,当分割区域中包含至少两个元素块时,此时分割区域还可以进行
分割,只有当分割区域中仅包含一个元素块时,该分割区域才无法继续被分割。需要注意的是,在分割区域包含两个元素块并被作为下一次迭代分割周期中的元素块分布图时,在下一次迭代分割周期中还可以继续对该元素块分布图进行去重处理,再进行分割处理,通过对元素块分布图的迭代分割处理,使得获得的目标分割区域中包含一个元素块,实现对元素块分布图的自动向下方式的迭代切割。
[0100]
在本技术一具体实施例中,确定目标迭代分割周期为第1次分割周期,对去重元素块分布图进行分割处理,获得至少两个初始分割区域,参见图4,图4是本技术一实施例提供的一种去重元素块分布图的分割示意图,其中,图4(a)为在垂直去重策略下,进行垂直分割的示意图,图4(b)为水平去重策略下,进行水平分割的示意图。在图4(a)中,对垂直去重元素块分布图进行垂直分割,获得三个初始分割区域,上面两个初始分割区域中仅包含一个元素块,则上面两个初始分割区域可以作为目标分割区域,下面一个初始分割区域中包含两个元素块,则可以将下面这个初始分割区域作为第二次迭代分割周期的去重元素块分布图,并进行分割处理。在图4(b)中,对水平去重元素块分布图进行水平分割,获得两个初始分割区域,左边的初始分割区域中包含三个元素块,则该初始分割区域可以作为下一次迭代分割周期的去重元素块分布图进行分割,右边的初始分割区域中仅包含一个元素块,则该初始分割区域可以作为目标分割区域。
[0101]
在基于不同的预设去重策略进行去重的情况下,后续的分割处理也要按照预设去重策略的去重方向进行分割,具体的,对所述去重元素块分布图进行分割处理,获得至少两个初始分割区域,包括:
[0102]
在所述预设去重策略为垂直去重策略的情况下,对所述去重元素块分布图进行垂直分割处理,根据垂直分割处理结果获得至少两个初始垂直分割区域;
[0103]
在所述预设去重策略为水平去重策略的情况下,对所述去重元素块分布图进行水平分割处理,根据水平分割处理结果获得至少两个初始水平分割区域;
[0104]
将所述至少两个初始垂直分割区域作为所述至少两个初始分割区域,或者,将所述至少两个初始水平分割区域中作为所述至少两个初始分割区域。
[0105]
在实际应用中,当预设去重策略为垂直去重策略时,在后续进行分割时也应该按照垂直方向进行分割,当预设去重策略为水平去重策略时,在后续进行分割时也应该按照水平方向进行分割,获得两种方向分割后的元素块分布图,具体实施时,还需计算按照两种不同分割方向分割的分割权重,选择出分割效果最好的方式作为最终的分割结果。
[0106]
具体的,在所述至少两个初始垂直分割区域和所述至少两个初始水平分割区域中选择,根据选择结果确定至少两个初始分割区域,包括:
[0107]
根据所述至少两个初始垂直分割区域中的元素块计算垂直分割权重,根据所述至少两个初始水平分割区域中的元素块计算水平分割权重;
[0108]
比较所述垂直分割权重和所述水平分割权重;
[0109]
在所述垂直分割权重大于所述水平分割权重的情况下,确定所述至少两个初始垂直分割区域为所述至少两个初始分割区域;
[0110]
在所述垂直分割权重小于所述分割权重的情况下,确定所述至少两个初始水平分割区域为所述至少两个初始分割区域。
[0111]
其中,垂直分割权重可以理解为按照垂直方向进行分割的权重值,水平分割权重
可以理解为按照水平方向进行分割权重值,分割权重实际意义上为按照分割方向获得的分割区域中元素块的对齐分数,分割权重越高,则表征为分割区域中元素块的对齐分数越高,说明按照该分割方向进行分割的效果越好,选择分割权重较高的分割方向进行分割。
[0112]
在实际应用中,按照分割方向进行分割之后获得分割区域,每个分割区域包含至少一个基础元素,以这些元素的边界计算对齐分数,即分割权重。设按照垂直方向进行分割,获得m个分割区域,则以这些元素的上边界坐标t={t1,t2,

}和下边界坐标b={b1,b2,

}计算对齐分数,垂直对齐分数可通过公式1计算获得,公式1如下:
[0113][0114]
其中,scorev为垂直对齐分数,即垂直分割权重;t为分割区域中元素块的上边界坐标,b为分割区域中元素块的下边界坐标,std为坐标标准差。
[0115]
设按照水平方向进行分割,获得n个分割区域,则以则以这些元素的左边界坐标l={l1,l2,

}和右边界坐标r={r1,r2,

}计算对齐分数,水平对齐分数可通过公式2计算获得,公式2如下:
[0116][0117]
其中,scoreh为水平对齐分数,即水平分割权重;l为元素块的左边界坐标,r为元素块的右边界坐标,std为坐标标准差。
[0118]
通过以上两个公式分别计算垂直分割和水平分割对应的分割权重,并基于分割权重选择初始分割区域,从而选择出分割效果更好的分割方向,并继续进行下一次的迭代分割处理。
[0119]
在本技术一具体实施例中,根据初始垂直分割区域中的元素块计算垂直分割权重为0.6,根据水平分割区域中的元素块计算水平分割权重为0.5,确定垂直分割的效果更好,以垂直分割下的处置分割区域作为初始分割区域,并继续执行后续的迭代分割处理。
[0120]
步骤108:根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构。
[0121]
在完成迭代分割处理之后,会获得多个目标分割区域,每个目标分割区域的生成顺序不同,则可以基于每个目标分割区域的生成顺序,构建目标页面的页面布局树状态结构,具体的,根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构,包括:
[0122]
根据每个目标分割区域创建对应的树状节点;
[0123]
根据每个目标分割区域的生成顺序确定每个树状节点对应的树状父节点;
[0124]
根据每个树状节点对应的树状父节点确定每个树状节点的连接关系;
[0125]
基于每个树状节点的连接关系构建所述目标页面的页面布局树状结构。
[0126]
其中,树状节点可以理解为每个目标分割区域在页面布局树状结构中的表示,根据每个目标分割区域的生成顺序可以确定出每个树状节点对应的树状父节点,例如,目标分割区域a是由目标分割区域b分割获得,目标分割区域c是由目标分割区域a分割获得,则可以确定目标分割区域b是目标分割区域a的树状父节点,目标分割区域a是目标分割区域c的树状父节点,当确定出每个树状节点对应的树状父节点之后,则可以确定每个树状节点
之间的连接关系,从而构建页面布局树状结构。参见图5,图5是本技术一实施例提供的一种页面布局树树状结构示意图,其中,每个叶子节点代表一个目标分割区域,例如图5中的c节点,根据页面布局树状结构,则可以清楚的获得目标页面的层级结构,从而便于后续设计师基于该页面布局树状结构进行目标页面的代码生成。
[0127]
本技术提供的一种页面处理方法,包括:根据目标页面的布局示意图,确定所述目标页面对应的元素集合;根据所述元素集合中每个元素的属性信息绘制每个元素对应的元素块,并根据每个元素对应的元素块生成元素块分布图;对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域;根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构。通过根据目标页面的布局示意图绘制对应的元素块分布图,再对元素块分布图进行迭代分割处理,获得每个迭代分割周期对应的目标分割区域,从而根据每个目标分割区域的生成顺序,构建目标页面的页面布局树状结构,无需依赖人工对目标页面进行分割,提高分割效率。并且获得的页面布局树状结构还可以作为布局分割模型的训练数据,扩充训练数据。
[0128]
下述结合附图6,以本技术提供的页面处理方法在分割页面的应用为例,对所述页面处理方法进行进一步说明。其中,图6示出了本技术一实施例提供的一种应用于分割页面的页面处理方法的处理流程图,具体包括以下步骤:
[0129]
步骤602:通过对目标页面的布局示意图进行识别,根据识别结果生成所述目标页面对应的元素集合。
[0130]
步骤604:根据元素集合中每个元素的属性信息绘制每个元素对应的元素块。
[0131]
其中,每个元素的属性信息包括元素的坐标信息以及边长信息。
[0132]
步骤606:根据每个元素对应的元素块生成元素块分布图。
[0133]
步骤608:根据垂直去重策略确定元素块分布图中每个元素块的垂直坐标信息,根据每个元素块的垂直坐标信息对元素块分布图中包含的元素块进行迭代去重,根据迭代去重结果获得垂直去重元素块分布图。
[0134]
步骤610:根据水平去重策略确定元素块分布图中每个元素块的水平坐标信息,根据每个元素块的水平坐标信息对所述元素块分布图中包含的元素块进行迭代去重,根据迭代去重结果获得水平去重元素块分布图。
[0135]
步骤612:对垂直去重元素块分布图进行垂直分割处理,根据垂直分割处理结果获得,两个初始垂直分割区域。
[0136]
步骤614:对水平去重元素块分布图进行水平分割处理,根据水平分割处理结果获得两个初始水平分割区域。
[0137]
步骤616:根据两个初始垂直分割区域中的元素块计算垂直分割权重,根据两个初始水平分割区域中的元素块计算水平分割权重。
[0138]
其中,垂直分割权重为0.8,水平分割权重为0.3。
[0139]
步骤618:比较所述垂直分割权重和所述水平分割权重,基于比较结果确定目标分割区域,并继续执行迭代分割处理,直至每个分割区域中仅包括一个元素块。
[0140]
其中,目标分割区域为垂直分割区域。
[0141]
步骤620:根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构。
[0142]
本技术提供的一种应用于布局分割的页面处理方法,通过根据目标页面的布局示意图绘制对应的元素块分布图,再对元素块分布图进行迭代分割处理,在每次迭代分割处理中都分别进行垂直方向和水平方向的分割,并基于分割权重的计算,选择分割效果更好的分割方向,后续根据每个目标分割区域的生成顺序,构建目标页面的页面布局树状结构,实现对目标页面的自动分割布局,提高布局分割的效率。
[0143]
与上述方法实施例相对应,本技术还提供了页面处理装置实施例,图7示出了本技术一实施例提供的一种页面处理装置的结构示意图。如图7所示,该装置包括:
[0144]
确定模块702,被配置为根据目标页面的布局示意图,确定所述目标页面对应的元素集合;
[0145]
绘制模块704,被配置为根据所述元素集合中每个元素的属性信息绘制每个元素对应的元素块,并根据每个元素对应的元素块生成元素块分布图;
[0146]
分割模块706,被配置为对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域;
[0147]
构建模块708,被配置为根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构。
[0148]
可选地,所述确定模块702,进一步被配置为:
[0149]
通过对目标页面的布局示意图进行识别,根据识别结果生成所述目标页面对应的元素集合。
[0150]
可选地,所述分割模块706,进一步被配置为:
[0151]
确定目标迭代分割周期,在所述目标迭代分割周期中对所述元素块分布图进行迭代去重处理,根据迭代去重处理结果获得去重元素块分布图;
[0152]
对所述去重元素块分布图进行分割处理,并根据分割处理结果获得所述目标迭代分割周期对应的目标分割区域。
[0153]
可选地,所述分割模块706,进一步被配置为:
[0154]
根据预设去重策略确定所述元素块分布图中每个元素块的坐标信息;
[0155]
根据每个元素块的坐标信息对所述元素块分布图中包含的元素块进行迭代去重,根据迭代去重结果获得去重元素块分布图。
[0156]
可选地,所述分割模块706,进一步被配置为:
[0157]
在所述预设去重策略为垂直去重策略的情况下,根据垂直去重策略确定所述元素块分布图中每个元素块的垂直坐标信息;
[0158]
在所述预设去重策略为水平去重策略的情况下,根据水平去重策略确定所述元素块分布图中每个元素块的水平坐标信息。
[0159]
可选地,所述分割模块706,进一步被配置为:
[0160]
在所述元素块分布图中确定第一元素块与第二元素块;
[0161]
比较所述第一元素块与所述第二元素块的坐标信息;
[0162]
在所述第一元素块的坐标信息大于或等于所述第二元素块的坐标信息的情况下,保留所述第一元素块并删除所述第二元素块,并获得去重元素块分布图;
[0163]
在所述第一元素块的坐标信息小于所述第二元素块的坐标信息的情况下,保留所述第一元素块与所述第二元素块,并获得去重元素块分布图。
[0164]
可选地,所述分割模块706,进一步被配置为:
[0165]
在第i次分割周期中对所述元素块分布图进行分割处理,获得至少两个初始分割区域;
[0166]
判断所述至少两个目标分割区域中每个初始分割区域是否包含至少两个的元素块;
[0167]
若是,i自增1,将包含至少两个的元素块的初始分割区域作为元素块分布图,并执行在第i次分割周期中对所述元素块分布图进行分割处理;
[0168]
若否,确定每个迭代分割周期的分割处理结果生成的目标分割区域。
[0169]
可选地,所述分割模块706,进一步被配置为:
[0170]
在所述预设去重策略为垂直去重策略的情况下,对所述去重元素块分布图进行垂直分割处理,根据垂直分割处理结果获得至少两个初始垂直分割区域;
[0171]
在所述预设去重策略为水平去重策略的情况下,对所述去重元素块分布图进行水平分割处理,根据水平分割处理结果获得至少两个初始水平分割区域;
[0172]
将所述至少两个初始垂直分割区域作为所述至少两个初始分割区域,或者,将所述至少两个初始水平分割区域中作为所述至少两个初始分割区域。
[0173]
可选地,所述分割模块706,进一步被配置为:
[0174]
根据所述至少两个初始垂直分割区域中的元素块计算垂直分割权重,根据所述至少两个初始水平分割区域中的元素块计算水平分割权重;
[0175]
比较所述垂直分割权重和所述水平分割权重;
[0176]
在所述垂直分割权重大于所述水平分割权重的情况下,确定所述至少两个初始垂直分割区域为所述至少两个初始分割区域;
[0177]
在所述垂直分割权重小于所述分割权重的情况下,确定所述至少两个初始水平分割区域为所述至少两个初始分割区域。
[0178]
可选地,所述构建模块708,进一步被配置为:
[0179]
根据每个目标分割区域创建对应的树状节点;
[0180]
根据每个目标分割区域的生成顺序确定每个树状节点对应的树状父节点;
[0181]
根据每个树状节点对应的树状父节点确定每个树状节点的连接关系;
[0182]
基于每个树状节点的连接关系构建所述目标页面的页面布局树状结构。
[0183]
可选地,所述装置还包括删除模块,被配置为:
[0184]
通过对所述元素块分布图中的元素块进行冗余元素块删除处理,根据删除结果获得目标元素块分布图。
[0185]
本技术提供的一种页面处理装置,包括确定模块,被配置为根据目标页面的布局示意图,确定所述目标页面对应的元素集合;绘制模块,被配置为根据所述元素集合中每个元素的属性信息绘制每个元素对应的元素块,并根据每个元素对应的元素块生成元素块分布图;分割模块,被配置为对所述元素块分布图进行迭代分割处理,确定每个迭代分割周期的分割处理结果生成的目标分割区域;构建模块,被配置为根据每个目标分割区域的生成顺序,构建所述目标页面的页面布局树状结构。通过根据目标页面的布局示意图绘制对应的元素块分布图,再对元素块分布图进行迭代分割处理,获得每个迭代分割周期对应的目标分割区域,从而根据每个目标分割区域的生成顺序,构建目标页面的页面布局树状结构,
无需依赖人工对目标页面进行分割,提高分割效率。
[0186]
上述为本实施例的一种页面处理装置的示意性方案。需要说明的是,该页面处理装置的技术方案与上述的页面处理方法的技术方案属于同一构思,页面处理装置的技术方案未详细描述的细节内容,均可以参见上述页面处理方法的技术方案的描述。
[0187]
图8示出了根据本技术一实施例提供的一种计算设备800的结构框图。该计算设备800的部件包括但不限于存储器810和处理器820。处理器820与存储器810通过总线830相连接,数据库850用于保存数据。
[0188]
计算设备800还包括接入设备840,接入设备840使得计算设备800能够经由一个或多个网络860通信。这些网络的示例包括公用交换电话网(pstn)、局域网(lan)、广域网(wan)、个域网(pan)或诸如因特网的通信网络的组合。接入设备840可以包括有线或无线的任何类型的网络接口(例如,网络接口卡(nic))中的一个或多个,诸如ieee802.11无线局域网(wlan)无线接口、全球微波互联接入(wi-max)接口、以太网接口、通用串行总线(usb)接口、蜂窝网络接口、蓝牙接口、近场通信(nfc)接口,等等。
[0189]
在本技术的一个实施例中,计算设备800的上述部件以及图8中未示出的其他部件也可以彼此相连接,例如通过总线。应当理解,图8所示的计算设备结构框图仅仅是出于示例的目的,而不是对本技术范围的限制。本领域技术人员可以根据需要,增添或替换其他部件。
[0190]
计算设备800可以是任何类型的静止或移动计算设备,包括移动计算机或移动计算设备(例如,平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如,智能手机)、可佩戴的计算设备(例如,智能手表、智能眼镜等)或其他类型的移动设备,或者诸如台式计算机或pc的静止计算设备。计算设备800还可以是移动式或静止式的服务器。
[0191]
其中,处理器820执行所述计算机指令时实现所述的页面处理方法的步骤。
[0192]
上述为本实施例的一种计算设备的示意性方案。需要说明的是,该计算设备的技术方案与上述的页面处理方法的技术方案属于同一构思,计算设备的技术方案未详细描述的细节内容,均可以参见上述页面处理方法的技术方案的描述。
[0193]
本技术一实施例还提供一种计算机可读存储介质,其存储有计算机指令,该计算机指令被处理器执行时实现如前所述页面处理方法的步骤。
[0194]
上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是,该存储介质的技术方案与上述的页面处理方法的技术方案属于同一构思,存储介质的技术方案未详细描述的细节内容,均可以参见上述页面处理方法的技术方案的描述。
[0195]
上述对本技术特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下,在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外,在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中,多任务处理和并行处理也是可以的或者可能是有利的。
[0196]
所述计算机指令包括计算机程序代码,所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括:能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储
器、只读存储器(rom,read-only memory)、随机存取存储器(ram,random access memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是,所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减,例如在某些司法管辖区,根据立法和专利实践,计算机可读介质不包括电载波信号和电信信号。
[0197]
需要说明的是,对于前述的各方法实施例,为了简便描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本技术并不受所描述的动作顺序的限制,因为依据本技术,某些步骤可以采用其它顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定都是本技术所必须的。
[0198]
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其它实施例的相关描述。
[0199]
以上公开的本技术优选实施例只是用于帮助阐述本技术。可选实施例并没有详尽叙述所有的细节,也不限制该发明仅为所述的具体实施方式。显然,根据本技术的内容,可作很多的修改和变化。本技术选取并具体描述这些实施例,是为了更好地解释本技术的原理和实际应用,从而使所属技术领域技术人员能很好地理解和利用本技术。本技术仅受权利要求书及其全部范围和等效物的限制。
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1