多元素布局的方法、装置、计算机设备和存储介质制造方法及图纸

技术编号:20424848 阅读:24 留言:0更新日期:2019-02-23 08:23
本发明专利技术涉及多元素布局的方法、装置、计算机设备和存储介质,应用于页面排版技术领域。所述方法包括:获取页面中被选中的多个类别的待布局元素,获取用户选中的推荐布局选项;将所述多个类别的待布局元素按照推荐布局选项进行布局,使得待布局元素按类别等距间隔的显示在页面中。本发明专利技术实施例解决了针对页面中多类别元素的布局效率低的问题,简化了用户操作,提高了页面元素布局效率。

【技术实现步骤摘要】
多元素布局的方法、装置、计算机设备和存储介质
本专利技术涉及页面排版
,特别是涉及多元素布局的方法、装置、计算机设备和存储介质。
技术介绍
随着计算机技术的发展,人们越来越多的通过计算机设备定制自己专属的课件、会议PPT等电子演示文件。在实现本专利技术的过程中,专利技术人发现现有技术中存在如下问题,在电子演示文件中经常会涉及图片、文本甚至音视频等元素,用户在定制文件页面时,为了兼具内容以及页面美观性,经常需要对页面中的多种元素进行布局调整,例如希望按照文本统一显示在页面上方,图片统一显示在页面下方的排版方式进行页面元素布局;然而为了实现期望的效果,用户需要逐一去调整元素,或者逐一类别的调整元素。因此,现有技术存在针对页面中多类别元素的布局效率低的问题。
技术实现思路
基于此,有必要针对现有方式针对页面中多类别元素的布局效率低的问题,提供一种多元素布局的方法、装置、计算机设备和存储介质。根据本专利技术的第一方面,提供一种多元素布局的方法,包括:接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素;所述待布局元素包含多个类别的元素;接收用于选择推荐布局选项的第二操作;将所述待布局元素按照目标布局样式进行显示,使得所述待布局元素按类别等距间隔的显示在页面中;所述目标布局样式为目标布局选项中元素样本的布局样式,所述目标布局选项为所述第二操作选中的推荐布局选项。在其中一个实施例中,所述接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素,包括:接收作用在页面中的区域选定操作,得到选定区域;将所述选定区域中的元素,作为待布局元素。在其中一个实施例中,所述使得待布局元素按类别等距间隔的显示在页面中,包括:使得所述待布局元素按类别等距间隔的显示在页面中的目标区域;所述目标区域为整个页面区域中的局部区域。在其中一个实施例中,所述目标区域为页面中待布局元素的最小外包矩形区域;或者,所述目标区域为所述选定区域。在其中一个实施例中,所述将所述待布局元素按照目标布局样式进行显示,使得待布局元素按类别等距间隔的显示在页面中,包括:若所述目标布局样式为左右布局/右左布局,则将所述待布局元素按照类别横向进行布局,布局后待布局元素按类别横向等距间隔的显示在页面中的目标区域;若所述目标布局样式为上下布局/下上布局,则将所述待布局元素按照类别竖向进行布局,布局后待布局元素按类别竖向等距间隔的显示在页面中的目标区域。在其中一个实施例中,所述将所述待布局元素按照类别横向进行布局,包括:将待布局元素中同一类别的待布局元素按列显示,得到同一类别对应的元素列;将多个类别对应的多个元素列,从左到右/从右到右等距间隔显示在页面中的目标区域。在其中一个实施例中,所述将待布局元素中同一类别的待布局元素按列显示,得到同一类别对应的元素列,包括:获取待布局元素中同一类别的待布局元素的数量;根据所述数量,计算同一类别的待布局元素占据的列数;将同一类别的待布局元素按列显示,得到元素列,所述元素列中包含对应列数的列。在其中一个实施例中,所述接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素,之后还包括:将不同类别的待布局元素存储至不同的数组中,同一类别的待布局元素存储至同一数组中;所述将待布局元素中同一类别的待布局元素按列显示,得到同一类别对应的元素列,包括:从所述数组中获取同一类别的待布局元素,将同一类别的待布局元素按列显示,得到同一类别对应的元素列。在其中一个实施例中,所述将多个类别对应的多个元素列,从左到右/从右到右等距间隔显示在页面中的目标区域,包括:获取元素列占据的列宽;所述列宽通过所述元素列包含的列数以及各列的宽度得出;根据所述列宽,将多个元素列从左到右/从右到右等距间隔显示在页面中的目标区域。在其中一个实施例中,所根据所述数量,计算同一类别的元素占据的列数,包括:获取目标区域的高度,作为第一高度;获取同一类别中各待布局元素的高度,作为第二高度;根据第一高度、第二高度得到同一类别的元素占据的列数。在其中一个实施例中,所述将同一类别的待布局元素按列显示,得到元素列,包括:将同一类别的待布局元素按列显示,在当前列显示结束时,获取当前列中元素的最大宽度,作为当前列的宽度;根据当前列的宽度确定下一列的起始位置,根据所述起始位置显示下一列;以此类推,直到得到元素列。在其中一个实施例中,还包括:在目标区域的高度方向上,将所述元素列以居中方式显示;和/或,在各列的宽度方向上,将元素列中的各列元素以居中方式显示。在其中一个实施例中,还包括:若同一类别的待布局元素占据的列数为1,将所述同一类别的待布局元素以等距间隔方式显示成一列。在其中一个实施例中,所述将所述待布局元素按类别竖向进行布局,包括:将待布局元素中同一类别的待布局元素按行显示,得到同一类别对应的元素行;将多个类别对应的多个元素行,从上到下/从下到上等距间隔显示在页面中的目标区域。在其中一个实施例中,所述将待布局元素中同一类别的元素按行显示,得到同一类别对应的元素行,包括:获取待布局元素中同一类别的待布局元素的数量;根据所述数量,计算同一类别的待布局元素占据的行数;将同一类别的待布局元素按行显示,得到元素行;所述元素行包含对应行数的行。在其中一个实施例中,所述接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素,之后还包括:将不同类别的待布局元素存储至不同的数组中,同一类别的待布局元素存储至同一数组中;所述将待布局元素中同一类别的待布局元素按行显示,得到同一类别对应的元素行,包括:从数组中获取同一类别的待布局元素,将同一类别的元素按行显示,得到同一类别对应的元素行。在其中一个实施例中,所述将多个类别对应的多个元素行,从上到下/从下到上等距间隔显示在页面中的目标区域,包括:获取元素行占据的行高;所述行高通过所述元素行包含的行数以及各行的高度得出;根据所述行高,将多个元素行从上到下/从下到上等距间隔显示在页面中的目标区域。在其中一个实施例中,所根据所述数量,计算同一类别的待布局元素占据的行数,包括:获取目标区域的宽度,作为第一宽度;获取同一类别的待布局元素中各元素的宽度,作为第二宽度;根据第一宽度、第二宽度得到同一类别的待布局元素占据的行数。在其中一个实施例中,所述将同一类别的待布局元素按行显示,得到元素行,包括:将同一类别的元素依次按行显示,在当前行显示结束时,获取当前行中元素的最大高度,作为当前行的高度;根据当前行的高度确定下一行的起始位置,根据所述起始位置显示下一行;以此类推,直到得到元素行。在其中一个实施例中,还包括:在目标区域的宽度方向上,将所述元素行以居中方式显示;和/或,在各行的高度方向上,将元素行中的各行元素以居中方式显示。在其中一个实施例中,还包括:若同一类别的待布局元素占据的行数为1,将所述同一类别的待布局元素以等距间隔方式显示成一行。在其中一个实施例中,所述接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素,之后还包括:显示布局窗口,所述布局窗口中包括多个可选的推荐布局选项。在其中一个实施例中,所述接收用于选择推荐布局选项的第二操作,将所述第二操作选中的推荐布局选项作为目标布局选项,之后还包括本文档来自技高网...

【技术保护点】
1.一种多元素布局的方法,其特征在于,包括:接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素,所述待布局元素包含多个类别的元素;接收用于选择推荐布局选项的第二操作;将所述待布局元素按照目标布局样式进行显示,使得所述待布局元素按类别等距间隔的显示在页面中;所述目标布局样式为目标布局选项中元素样本的布局样式,所述目标布局选项为所述第二操作选中的推荐布局选项。

【技术特征摘要】
1.一种多元素布局的方法,其特征在于,包括:接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素,所述待布局元素包含多个类别的元素;接收用于选择推荐布局选项的第二操作;将所述待布局元素按照目标布局样式进行显示,使得所述待布局元素按类别等距间隔的显示在页面中;所述目标布局样式为目标布局选项中元素样本的布局样式,所述目标布局选项为所述第二操作选中的推荐布局选项。2.根据权利要求1所述的方法,其特征在于,所述接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素,包括:接收作用在页面中的区域选定操作,得到选定区域;将所述选定区域中的元素,作为待布局元素。3.根据权利要求1所述的方法,其特征在于,所述使得所述待布局元素按类别等距间隔的显示在页面中,包括:使得所述待布局元素按类别等距间隔的显示在页面中的目标区域;所述目标区域为整个页面区域中的局部区域。4.根据权利要求3所述的方法,其特征在于,所述目标区域为页面中待布局元素的最小外包矩形区域;或者,所述目标区域为所述选定区域。5.根据权利要求3所述的方法,其特征在于,所述将所述待布局元素按照目标布局样式进行显示,使得待布局元素按类别等距间隔的显示在页面中,包括:若所述目标布局样式为左右布局/右左布局,则将所述待布局元素按照类别横向进行布局,布局后所述待布局元素按类别横向等距间隔的显示在所述目标区域;若所述目标布局样式为上下布局/下上布局,则将所述待布局元素按照类别竖向进行布局,布局后所述待布局元素按类别竖向等距间隔的显示在所述目标区域。6.根据权利要求5所述的方法,其特征在于,所述将所述待布局元素按照类别横向进行布局,包括:将所述待布局元素中同一类别的待布局元素按列显示,得到所述同一类别对应的元素列;将多个类别对应的多个所述元素列,从左到右/从右到右等距间隔显示在所述目标区域。7.根据权利要求6所述的方法,其特征在于,所述将所述待布局元素中同一类别的待布局元素按列显示,得到所述同一类别对应的元素列,包括:获取所述待布局元素中同一类别的待布局元素的数量;根据所述数量,计算所述同一类别的待布局元素占据的列数;将所述同一类别的待布局元素按列显示,得到元素列,所述元素列中包含对应列数的列。8.根据权利要求6所述的方法,其特征在于,所述接收用于选择页面中元素的第一操作,将所述第一操作选中的元素作为待布局元素,之后还包括:将不同类别的待布局元素存储至不同的数组中,同一类别的待布局元素存储至同一数组中;所述将待布局元素中同一类别的待布局元素按列显示,得到所述同一类别对应的元素列,包括:从所述数组中获取同一类别的待布局元素,将所述同一类别的待布局元素按列显示,得到所述同一类别对应的元素列。9.根据权利要求6所述的方法,其特征在于,所述将多个类别对应的多个所述元素列,从左到右/从右到右等距间隔显示在所述目标区域,包括:获取所述元素列占据的列宽;所述列宽通过所述元素列包含的列数以及各列的宽度得出;根据所述列宽,将多个所述元素列从左到右/从右到右等距间隔显示在页面中的目标区域。10.根据权利要求7所述的方法,其特征在于,所根据所述数量,计算所述同一类别的待布局元素占据的列数,包括:获取所述目标区域的高度,作为第一高度;获取所述同一类别的待布局元素中各元素的高度,作为第二高度;根据第一高度、第二高度得到所述同一类别的待布局元素占据的列数。11.根据权利要求7所述的方法,其特征在于,所述将所述同一类别的待布局元素按列显示,得到元素列,包括:将所述同一类别的待布局元素按列显示,在当前列显示结束时,获取当前列中元素的最大宽度,作为当前列的宽度;根据所述当前列的宽度确定下一列的起始位置,根据所述起始位置显示下一列;以此类推,直到得到元素列。12.根据权利要求10所述的方法,其特征在于,还包括:在所述目标区域的高度方向上,将所述元素列以居中方式显示;和/或,在各列的宽度方向上,将所述元素列中的各列元素以居中方式显示。13.根据权利要求11所述的方法,其特征在于,还包括:若所述同一类别的待布局元素占据的列数为1,将所述同一类别的待布局元素以等距间隔方式显示成一列。14.根据权利要求5所述的方法,其特征在于,所述将所述待布局元素按类别竖向进行布局,包括:将所述待布局元素中同一类别的待布局元素按行显示,得到所述同一类别对应的元素行;将多个类别对应的多个所述元素行,从上到下/从下到上等距间隔显示在页面中的目标区域。15.根据权利要求14所述的方法,其特征在于,所述将所述待布局元素中同一类别的待布局元素按行显示,得到所述同一类别对应的元素行,包括:获取所述待布局元素中同一类别的待布局元素的数量;根据所述数量,计算所述同一类别的待布局元素占据的行数;将所述同一类别的待布局元素按行显示,得到元素行;所述元素行包含对应行数的行。16.根据权利要求14所述的方法,其特征在于,所述接收用于选择页面中元素的...

【专利技术属性】
技术研发人员:张强
申请(专利权)人:广州视源电子科技股份有限公司广州视睿电子科技有限公司
类型:发明
国别省市:广东,44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1