CN117785351A - 一种可视化大屏页面布局配置方法、装置及电子设备 - Google Patents

Abstract

本发明提供一种可视化大屏页面布局配置方法、装置及电子设备，该方法包括：响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态。响应于用户在选中操作之后的移动操作，获取目标元素各顶点移动后的坐标位置。根据任一顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积。将重合面积最大的栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。本发明在基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化了栅格页面布局配置过程中用户的操作步骤，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

Description

一种可视化大屏页面布局配置方法、装置及电子设备

技术领域

本发明涉及页面布局配置技术领域，尤其涉及一种可视化大屏页面布局配置方法、装置及电子设备。

背景技术

可视化大屏可在一块屏幕上同时展示多种信息，广泛应用于业务展示、业务数据监控和业务数据决策等。可视化大屏页面布局方式包括flex布局、CSS grid布局。CSS grid布局，即栅格布局，是一种基于CSS(Cascading Style Sheets，层叠样式表)的二维布局，可适应较复杂的布局需求。栅格布局将显示界面划分为二维的栅格，同一显示界面上显示多个元素，每个元素占用n*m个栅格(n≥1，m≥1)。每个元素的栅格布局配置数据包括所在栅格的位置、所占栅格的数量等。

用户在页面布局时可基于CSS grid布局代码编程规则，根据业务需求编写代码、设置每个元素的页面配置参数，实现页面布局配置。为提高应用效率，用户也可以采用预设布局模板，实现快速页面布局配置。但是在实际使用过程中，业务需求不断变化，需要频繁地调整、修改页面布局配置。以上应用方式均需要用户熟练掌握CSS grid布局代码编程规则，调整布局操作步骤复杂繁琐，使用门槛高。

发明内容

本发明提供了一种可视化大屏页面布局配置方法、装置及电子设备，以解决现有栅格化页面布局配置方式操作复杂、对用户要求高的问题。

第一方面，本发明提供了一种可视化大屏页面布局配置方法，包括：响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态。响应于用户在所述选中操作之后的移动操作，获取所述目标元素各顶点移动后的坐标位置。根据任一所述顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积。将重合面积最大的栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

在一种可能的实现方式中，在所述响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态之后，还包括：响应于用户在所述选中操作之后的放大操作，获取所述目标元素放大后的宽度和高度。对所述目标元素的宽度与栅格宽度之比进行四舍五入取整，获得目标元素放大后宽度方向所占栅格数量。对所述目标元素的高度与栅格高度之比进行四舍五入取整，获得目标元素放大后高度方向所占栅格数量。基于所述宽度方向所占栅格数量、所述高度方向所占栅格数量，更新目标元素的页面布局配置。

在一种可能的实现方式中，在所述响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态之后，还包括：响应于用户在所述选中操作之后的缩小操作，获取所述目标元素缩小后的宽度和高度。若目标元素缩小后的宽度大于等于栅格宽度，则对所述目标元素的宽度与栅格宽度之比进行四舍五入取整，获得目标元素缩小后宽度方向所占栅格数量。若目标元素缩小后的高度大于等于栅格高度，则对所述目标元素的高度与栅格高度之比进行四舍五入取整，获得目标元素缩小后高度方向所占栅格数量。基于所述宽度方向所占栅格数量、所述高度方向所占栅格数量，更新目标元素的页面布局配置。

在一种可能的实现方式中，在获取所述目标元素缩小后的宽度和高度之后，还包括：若目标元素缩小后的宽度小于栅格宽度，则基于显示界面的宽度与目标元素缩小后的宽度之比，重新确定更新后的栅格宽度。基于更新后的栅格宽度，重新确定显示界面中各个元素宽度方向所占栅格数量。若目标元素缩小后的高度小于栅格高度，则基于显示界面的宽度与目标元素缩小后的高度之比，重新确定更新后的栅格高度。基于更新后的栅格高度，重新确定显示界面中各个元素高度方向所占栅格数量。

在一种可能的实现方式中，所述根据任一所述顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积包括：将目标元素的任一顶点作为目标顶点。根据目标顶点移动后的坐标位置，确定目标顶点所在栅格。在所述栅格的四个顶点中，确定与目标顶点方向相反的栅格顶点，并获取所述栅格顶点的坐标位置，其中，顶点的方向包括左上、左下、右上、右下。根据目标顶点移动后的坐标位置、所述栅格顶点的坐标位置，得到目标元素与目标顶点所在栅格的重合面积。

在一种可能的实现方式中，所述目标元素占用栅格数量为1。在响应于用户在所述选中操作之后的移动操作，获取所述目标元素各顶点移动后的坐标位置之后，还包括：根据目标元素各顶点移动后的坐标位置，确定目标元素中心的坐标位置。根据目标元素中心的坐标位置、各栅格的坐标位置，确定目标元素中心所在栅格。将目标元素中心所在栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

在一种可能的实现方式中，所述基于更新后的栅格宽度，重新确定显示界面中各个元素宽度方向所占栅格数量包括：将显示界面中任一元素作为目标元素。对所述目标元素的宽度与更新后的栅格宽度之比进行四舍五入取整，获得目标元素宽度方向所占栅格数量。

第二方面，本发明提供了一种可视化大屏页面布局配置装置，包括：选中模块，用于响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态。顶点坐标获取模块，用于响应于用户在所述选中操作之后的移动操作，获取所述目标元素各顶点移动后的坐标位置。重合面积确定模块，用于根据任一所述顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积。栅格位置确定模块，用于将重合面积最大的栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

第三方面，本发明提供了一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上第一方面或第一方面的任一种可能的实现方式所述方法的步骤。

第四方面，本发明提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上第一方面或第一方面的任一种可能的实现方式所述方法的步骤。

本发明提供一种可视化大屏页面布局配置方法、装置及电子设备，该方法包括：响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态。响应于用户在选中操作之后的移动操作，获取目标元素各顶点移动后的坐标位置。根据任一顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积。将重合面积最大的栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。本发明在用户移动目标元素后，基于目标元素与各顶点位置栅格的重合面积，将重合面积最大的栅格确定为目标元素移动后的栅格位置，即目标元素移动后占用的栅格位置。基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化了栅格页面布局配置过程中用户的操作步骤，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的可视化大屏页面布局配置方法的应用场景图；

图2是本发明实施例提供的可视化大屏页面布局配置方法的实现流程图；

图3是本发明实施例提供的目标元素与栅格重合面积的示意图；

图4是本发明实施例提供的另一种目标元素与栅格重合面积的示意图；

图5是本发明实施例提供的页面布局参数设置对话框的结构示意图；

图6是本发明实施例提供的另一种页面布局参数设置对话框的结构示意图；

图7是本发明实施例提供的目标元素放大操作后的示意图；

图8是本发明实施例提供的可视化大屏页面布局配置装置的结构示意图；

图9是本发明实施例提供的电子设备的示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本发明实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本发明。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本发明的描述。

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图通过具体实施例来进行说明。

图1为本发明实施例提供的可视化大屏页面布局配置方法的应用场景图。如图1所示，可视化大屏的显示界面可显示多个元素。例如，一种运营中心可视化大屏的显示界面可以显示客户数量、产能分析、能效分析、低碳工厂数量、行业分布、产能排名、项目概览或安全概览等元素。用户可基于具体的展示需求，调整元素的种类、数量、大小和位置，即调整显示界面的布局。

栅格布局将显示界面划分为二维的栅格，同一显示界面上显示多个元素，每个元素占用n*m个栅格(n≥1，m≥1)。现有栅格布局应用方式包括编写CSS grid代码和预设布局模板。现有栅格布局应用方式均需要用户熟练掌握CSS grid布局代码编程规则，调整布局操作步骤复杂繁琐，使用门槛高。

本发明实施例提供了一种可视化大屏页面布局配置方法，基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化栅格页面布局配置过程中用户的操作步骤，以解决现有栅格化页面布局配置方式操作复杂、对用户要求高的问题。

图2是本发明实施例提供的可视化大屏页面布局配置方法的实现流程图，参照图2，一种可视化大屏页面布局配置方法，包括：

在步骤201中、响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态。

示例性的，显示界面可以是可视化大屏的显示界面。

进一步示例性的，显示界面为栅格化布局。即，显示界面按照一定栅格大小划分为多行多列的二维栅格。显示界面中显示的元素占用n*m个栅格(n≥1，m≥1)。

例如，显示界面的大小为800px*600px，栅格大小设置为200*200，显示界面被划分为4行3列的二维栅格。可按照先行后列的方式对各个栅格进行编号。例如，将栅格编号设置为1至12。以显示界面的左上角为原点建立坐标系，自原点朝向显示界面的右侧为X轴的正轴方向，自原点朝向显示界面下方为Y轴的正轴方向。第1个栅格的位置范围可用顶点坐标表示为：左上顶点[0,0]、右上顶点[200,0]、左下顶点[0,200]、右下顶点[200,200]，其他栅格可依此类推。

这里需要说明的是，在步骤201中，显示界面的页面布局状态可以是初次布局状态，也可以是修改布局状态。例如，在初次布局状态，用户向显示界面中添加了元素，并根据业务需求设置元素布局参数。再例如，在已完成布局的显示界面中，用户根据业务需求调整某一元素的布局参数。总而言之，显示界面中显示一个或多个元素，用户可在显示界面中看到需要调整布局的元素。

关于如何向显示界面中添加元素，可按预设布局模板显示用户需要布局的元素，也可以将用户需要布局的多个元素按一定顺序在显示界面中显示。添加元素的技术实现，不是本申请重点，这里不再赘述。向显示界面中添加元素的目的是使显示界面显示元素，以使用户可以看到元素在显示界面中的位置和所占用大小、以及与其他元素的布局关系。用户可根据实际的业务需求确定如何调整显示界面中所显示元素的布局。

示例性的，本申请中用户是获知可视化大屏展示业务需求的人员，可以是熟悉CSSgrid布局代码编程规则的操作人员，也可以是不熟悉CSS grid布局代码编程规则的终端用户。

示例性的，可视化大屏可以是触摸屏，用户可通过触控方式操作触摸屏中元素。进一步示例性的，可视化大屏可以是非触摸屏，用户可以通过鼠标操作屏幕中元素。关于如何操作显示界面，这里不作限定。以下仅以鼠标操作方式举例说明本方案。

在一些实施例中，用户可通过鼠标选中显示界面中的元素。

示例性的，用户移动鼠标并点击目标元素，完成选中操作。又一示例性的，用户移动鼠标至目标元素，点击目标元素并悬停预设时长后，完成选中操作。

进一步的，响应于选中操作，目标元素变更为选中状态。示例性的，可在选中状态改变目标元素的颜色、透明度或者添加文字提示，以提醒用户目标元素处于选中状态。

在步骤202中、响应于用户在选中操作之后的移动操作，获取目标元素各顶点移动后的坐标位置。

在一些实施例中，在目标元素变更为选中状态后，显示移动标识。当用户点击移动标识后，目标元素变更为移动状态。

进一步的，在一些实施例中，当目标元素变更为移动状态后，用户移动鼠标，目标元素的位置随之移动。由此，用户可基于鼠标的移动操控目标元素在显示界面中移动。当用户认为目标元素移动位置后的布局，符合实际业务需求时，可结束移动操作，例如，可释放鼠标左键结束移动操作。

示例性的，可通过目标元素js的鼠标move事件，实时获取鼠标坐标数据，并改变目标元素的实时位置。

进一步示例性的，可通过是否到达显示界面的边界来判断坐标是否在页面范围内。实时计算被拖拽元素在页面范围内的方式包括：实时判断元素拖拽过程中距离页面边界的大小，若<＝0，则判断鼠标位置不在页面范围内，且不再移动目标元素。示例性的，可通过clientX/clientY和offsetWidth/offsetHeight、getBoundingClientRect等方法计算距离页面边界的大小。

示例性的，目标元素移动过程中设置为预设透明度。由此，用户可透过目标元素观察到目标元素遮挡的其他元素，便于用户观察目标元素移动后的布局。

示例性的，目标元素包括4个顶点，例如包括左上顶点、左下顶点、右上顶点和右下顶点。目标元素移动时，其4个顶点的坐标位置随之变化。

在步骤203中、根据任一顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积。

图3是本发明实施例提供的目标元素与栅格重合面积的示意图。参照图3，示例性的，目标元素向右下方向移动后与四个栅格重合，其中，目标元素的左上顶点在左上栅格内，右上顶点在右上栅格内，左下顶点在左下栅格内，右下顶点在右下栅格内。以目标元素的左上顶点为例，基于目标元素的左上顶点与左上栅格的右下顶点可以确定目标元素与左上栅格的重合面积。由此，基于目标元素顶点的坐标、该顶点所在栅格的坐标，可以得到该顶点对应的重合面积。以上给出了四个顶点对应四个栅格的情况，为发生概率最大的情况。以下再说明下四个顶点对应两个栅格、一个栅格的特殊情况。

图4是本发明实施例提供的另一种目标元素与栅格重合面积的示意图。参照图4，示例性的，目标元素向右侧移动后与两个栅格重合，其中，左上顶点、左下顶点在左侧栅格内，右上顶点、右上栅格在右侧栅格内。同样，基于目标元素的左上顶点、左侧栅格的右下顶点，或者基于目标元素的左下顶点、左侧栅格的右上顶点，可确定目标元素与左侧栅格的重合面积。类似的，基于目标元素的右上顶点、右侧栅格的左下顶点，或者基于目标元素的右下顶点、右侧栅格的左上顶点，可确定目标元素与右侧栅格的重合面积。

示例性的，目标元素移动后，四个顶点刚好与栅格的顶点重合。此时，目标元素与顶点所在栅格的重合面积为0，即目标元素当前所占栅格即为目标元素的移动后的栅格位置。

这里需要说明的是，在用户的移动操作后，目标元素的顶点刚好落在栅格的边线、顶点上的概率较小。目标元素四个顶点落在四个栅格的情况发生概率最大。以下给出一个具体实施例，说明重合面积的具体计算过程。

在一种可能的实现方式中，根据任一顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积包括：

在步骤2031中、将目标元素的任一顶点作为目标顶点。

示例性的，目标元素的顶点包括左上顶点、左下顶点、右上顶点和右下顶点。例如，可将左上顶点作为目标顶点。

在步骤2032中、根据目标顶点移动后的坐标位置，确定目标顶点所在栅格。

例如，目标元素移动结束后顶点坐标位置为左上顶点[120,120]、右上顶点[320,120]、右下顶点[320,320]、左下顶点[120,320]。作为目标顶点的左上顶点[120,120]与各栅格坐标比较，落在第1个栅格内。

在步骤2033中、在栅格的四个顶点中，确定与目标顶点方向相反的栅格顶点，并获取栅格顶点的坐标位置，其中，顶点的方向包括左上、左下、右上、右下。

例如，针对目标顶点所在的第1个栅格，栅格顶点包括左上顶点、左下顶点、右上顶点和右下顶点，与目标顶点(即左上顶点)方向相反的为右下顶点。获取第1个栅格的右下顶点坐标为[200,200]。

在步骤2034中、根据目标顶点移动后的坐标位置、栅格顶点的坐标位置，得到目标元素与目标顶点所在栅格的重合面积。

例如，目标顶点(即左上顶点)的坐标为[120,120]，与目标顶点方向相反的栅格顶点(即右下顶点)的坐标为[200,200]。进一步，计算重合面积，(200-120)*(200-120)＝80*80＝6400。

示例性的，重复步骤2031-2034，得到目标元素的左上顶点、左下顶点、右上顶点、右下顶点分别对应的上述重合面积为6400、9600、9600、14400。由此，目标元素的右下顶点与右下栅格的重合面积最大。

在步骤204中、将重合面积最大的栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

示例性的，与目标元素的重合面积最大的栅格为右下栅格，则将右下栅格的编号作为目标元素的栅格位置，即目标元素占用的栅格。例如，将目标元素的栅格位置确定为编号为6。

进一步的，根据重新确定的目标元素移动后的栅格位置，基于CSS grid布局，可对显示界面更新页面布局配置。

CSS grid布局是专门为处理复杂的二维布局需求而设计的，允许在水平和垂直方向上同时定义网格，使得在实现复杂的布局时更加直观和便捷。

示例性的，将重合面积最大的栅格，确定为目标元素移动后的栅格位置，其中，目标元素与重合面积最大的栅格重合的角占用该栅格。

例如，目标元素占用栅格数量为多个，目标元素右下角与右下栅格的重合面积最大，则将右下栅格作为目标元素的栅格位置，且目标元素的右下角占用该右下栅格。再例如，目标元素左上角与左上栅格的重合面积最大，则将左上栅格作为目标元素的栅格位置，且目标元素的左上角占用该左上栅格。

下面对特殊情况进行说明。若目标元素向一侧水平或垂直移动后，与目标元素重合的栅格为左侧栅格和右侧栅格，则将重合面积最大的左侧或右侧栅格作为目标元素移动后的栅格位置。若目标元素向斜线方向移动后，与目标元素重合的栅格为四个，且重合面积最大的栅格有两个或四个，则将任一重合面积最大的栅格作为目标元素移动后的栅格位置。

本发明实施例在用户移动目标元素后，基于目标元素与各顶点位置栅格的重合面积，将重合面积最大的栅格确定为目标元素移动后的栅格位置，即目标元素移动后占用的栅格位置。基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化了栅格页面布局配置过程中用户的操作步骤，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

需要说明的是，在现有技术中，用户也可以自定义元素的栅格位置实现调整页面布局。用户需要获知栅格划分标准，目标元素的当前栅格位置编号，需要移动到的栅格位置编号，或者需要移动的栅格距离，设置完成后基于CSS grid布局进行页面刷新。如果更新后的页面布局不符合用户的业务需求，则用户需要再获知需要移动到的栅格位置或者需要移动的栅格距离，再次设置参数、刷新页面，直到符合用户的业务需求，此方式过程步骤繁琐。本发明实施例中，用户将目标元素移动到布局相对合理的位置，进一步为用户在当前元素位置选择最接近的栅格位置、完成页面布局配置。用户并不需要知道当前栅格划分标准、以及元素移动过程中各种位置属性，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

为降低栅格布局应用难度，用户也可通过对话框实现页面布局参数设置。例如，图5是本发明实施例提供的页面布局参数设置对话框的结构示意图。参照图5，可通过对话框获取用户输入的页面行数、页面列数，以定义显示界面的栅格系统，定义栅格的行列数。

进一步的，也可通过display:grid:将显示界面设置为栅格布局，可通过grid-template-columns定义网格的列数和列宽度，可通过使用auto-fill和minmax实现自适应列数和列宽度，可通过grid-gap:设置元素之间的间距。

进一步的，可向显示界面中添加元素和并使用grid布局属性定位每个元素的位置。例如，grid-column指定元素在网格中的列位置，grid-row指定元素在网格中的行位置。

进一步的，可利用CSS grid的auto-fill和minmax功能，在更换屏幕时实现自适应布局。网格系统会根据屏幕宽度和元素尺寸自动调整列数和列宽度，以最大程度地利用可用空间。

进一步的，通过调整元素的grid-column和grid-row属性，可以实现不同位置的布局方式。

再例如，图6是本发明实施例提供的另一种页面布局参数设置对话框的结构示意图。参照图6，可通过对话框获取用户输入的某元素的栅格位置、栅格大小等。

在一种可能的实现方式中，在将重合面积最大的栅格，确定为目标元素移动后的栅格位置之后，还包括：若目标元素移动后的栅格位置存在其他元素，则将目标元素与其他元素重合的部分设置为预设透明度。

本发明实施例将目标元素与其他元素重合的部分设置为预设透明度，以使用户方便观察更新后的页面布局，便于用户进行下一步的布局调整。用户可以继续拖拽其他页面元素做布局调整。

在一种可能的实现方式中，在将重合面积最大的栅格，确定为目标元素移动后的栅格位置之后，还包括：若目标元素移动后的栅格位置存在其他元素，则将其他元素向无元素占用的栅格方向移动。

以上实施例说明了移动操作对应的页面布局配置方法，以下说明缩放操作对应的页面布局配置方法。

在一种可能的实现方式中，在响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态之后，还包括：

在步骤301中、响应于用户在选中操作之后的放大操作，获取目标元素放大后的宽度和高度。

图7是本发明实施例提供的目标元素放大操作后的示意图。参照图7，例如，目标元素的原始大小宽度和高度为100和100，放大操作之后宽度和高度为150和150。

示例性的，放大操作的拖动方向包括上、下、左、右、左上、左下、右上和右下。例如，在选中状态，可在目标元素上显示拖动方向的图案，以提醒用户可向上述方向拖动实现缩放。

进一步示例性的，向一个方向拖动放大时，相反方向的边线位置固定。例如，向右侧拖动放大时，左侧边线的位置固定。再例如，向右下方向拖动放大时，左上顶点位置固定。

相应的，在步骤304中重新确定了宽度方向、高度方向所占栅格数量后，向拖动方向拓展占用的栅格。

示例性的，缩放过程中可通过鼠标实时位置与开始缩放时的初始位置对比，计算得到目标元素的实时大小，并实时修改元素大小。例如，初始位置减去实时坐标得到鼠标移动的距离。实时坐标相对元素初始位置有可能为负，即向上或者向右，即拖拽元素变大。

在步骤302中、对目标元素的宽度与栅格宽度之比进行四舍五入取整，获得目标元素放大后宽度方向所占栅格数量。

例如，栅格宽度为100，目标元素放大后的宽度为260，260/100≈3，计算后得到目标元素放大后宽度方向所占栅格数量为3。

再例如，栅格宽度为100，目标元素放大后的宽度为140，140/100≈1，计算后得到目标元素放大后宽度方向所占栅格数量为1。

在步骤303中、对目标元素的高度与栅格高度之比进行四舍五入取整，获得目标元素放大后高度方向所占栅格数量。

例如，栅格高度为100，目标元素放大后的高度为160，160/100≈2，计算后得到目标元素放大后高度方向所占栅格数量为2。

例如，栅格高度为100，目标元素放大后的高度为140，140/100≈1，计算后得到目标元素放大后高度方向所占栅格数量为1。

在步骤304中、基于宽度方向所占栅格数量、高度方向所占栅格数量，更新目标元素的页面布局配置。

示例性的，将目标元素的宽度方向所占栅格设置为2，将目标元素的高度方向所占栅格设置为2，基于CSS grid布局，可对显示界面更新页面布局配置。

本发明实施例在用户放大目标元素后，基于目标元素的宽度、高度与栅格的宽度、高度，重新确定放大后目标元素在宽度方向、高度方向所占栅格数量，即目标元素放大后占用的栅格大小。基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化了栅格页面布局配置过程中用户的操作步骤，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

在一种可能的实现方式中，在响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态之后，还包括：

在步骤401中、响应于用户在选中操作之后的缩小操作，获取目标元素缩小后的宽度和高度。

示例性的，可以通过缩放操作后目标元素大小与原始大小对比，确定具体是放大操作还是缩小操作。

在步骤402中、若目标元素缩小后的宽度大于等于栅格宽度，则对目标元素的宽度与栅格宽度之比进行四舍五入取整，获得目标元素缩小后宽度方向所占栅格数量。

例如，栅格宽度为100，目标元素的原始宽度为200，目标元素缩小后的宽度为100，100/100≈1，计算后得到目标元素放大后宽度方向所占栅格数量为1。

再例如，栅格宽度为100，目标元素的原始宽度为200，目标元素缩小后的宽度为140，140/100≈1，计算后得到目标元素放大后宽度方向所占栅格数量为1。

示例性的，步骤402还可以为：若目标元素缩小后的宽度大于等于栅格宽度，则对目标元素的缩小后与缩小前宽度乘以缩小前宽度方向栅格占用数量，并进行四舍五入取整，获得目标元素缩小后宽度方向所占栅格数量。

例如，栅格宽度为100，目标元素的原始宽度为200，目标元素缩小后的宽度为100，100/200*2≈1，计算后得到目标元素放大后宽度方向所占栅格数量为1。

在步骤403中、若目标元素缩小后的高度大于等于栅格高度，则对目标元素的高度与栅格高度之比进行四舍五入取整，获得目标元素缩小后高度方向所占栅格数量。

例如，栅格高度为100，目标元素的原始高度为200，目标元素缩小后的高度为100，100/100≈1，计算后得到目标元素放大后高度方向所占栅格数量为1。

再例如，栅格高度为100，目标元素的原始高度为200，目标元素缩小后的高度为140，140/100≈1，计算后得到目标元素放大后高度方向所占栅格数量为1。

示例性的，步骤403还可以为：若目标元素缩小后的高度大于等于栅格高度，则对目标元素的缩小后与缩小前高度乘以缩小前高度方向栅格占用数量，并进行四舍五入取整，获得目标元素缩小后高度方向所占栅格数量。

例如，栅格高度为100，目标元素的原始高度为200，目标元素缩小后的高度为100，100/200*2≈1，计算后得到目标元素放大后高度方向所占栅格数量为1。

在步骤404中、基于宽度方向所占栅格数量、高度方向所占栅格数量，更新目标元素的页面布局配置。

本发明实施例在用户缩小目标元素后，缩小后目标元素大于等于栅格的情况下，基于目标元素的宽度、高度与栅格的宽度、高度，重新确定缩小后目标元素在宽度方向、高度方向所占栅格数量，即目标元素缩小后占用的栅格大小。基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化了栅格页面布局配置过程中用户的操作步骤，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

在一种可能的实现方式中，在获取目标元素缩小后的宽度和高度之后，还包括：

在步骤501中、若目标元素缩小后的宽度小于栅格宽度，则基于显示界面的宽度与目标元素缩小后的宽度之比，重新确定更新后的栅格宽度。

例如，显示界面的宽高尺寸为800*600，原始栅格宽高尺寸为200*200，显示界面被划分为4列3行的栅格。目标元素缩小后的宽度为100，显示界面的宽度与目标元素缩小后的宽度之比四舍五入取整后为8，即800/100≈8，则更新后显示界面宽度方向的栅格数量为8，更新后的栅格宽度为100。

在步骤502中、基于更新后的栅格宽度，重新确定显示界面中各个元素宽度方向所占栅格数量。

在一些实施例中，基于更新后的栅格宽度，重新确定显示界面中各个元素宽度方向所占栅格数量包括：将显示界面中任一元素作为目标元素。对目标元素的宽度与更新后的栅格宽度之比进行四舍五入取整，获得目标元素宽度方向所占栅格数量。

在步骤503中、若目标元素缩小后的高度小于栅格高度，则基于显示界面的宽度与目标元素缩小后的高度之比，重新确定更新后的栅格高度。

例如，显示界面的宽高尺寸为800*600，原始栅格宽高尺寸为200*200，显示界面被划分为4列3行的栅格。目标元素缩小后的高度为80，显示界面的高度与目标元素缩小后的高度之比四舍五入取整后为8，即600/80＝7.5≈8，则更新后显示界面高度方向的栅格数量为8，更新后的栅格高度为75。

在步骤504中、基于更新后的栅格高度，重新确定显示界面中各个元素高度方向所占栅格数量。

在一些实施例中，基于更新后的栅格高度，重新确定显示界面中各个元素高度方向所占栅格数量包括：将显示界面中任一元素作为目标元素。对目标元素的高度与更新后的栅格高度之比进行四舍五入取整，获得目标元素高度方向所占栅格数量。

本发明实施例在用户缩小目标元素后，缩小后目标元素小于栅格的情况下，基于缩小后目标元素的大小、显示界面的大小重新确定栅格的大小。基于重新确定的栅格大小，重新确定显示界面中各个元素所占栅格数量。基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化了栅格页面布局配置过程中用户的操作步骤，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

在一种可能的实现方式中，目标元素占用栅格数量为1。在响应于用户在选中操作之后的移动操作，获取目标元素各顶点移动后的坐标位置之后，还包括：

在步骤601中、根据目标元素各顶点移动后的坐标位置，确定目标元素中心的坐标位置。

在步骤602中、根据目标元素中心的坐标位置、各栅格的坐标位置，确定目标元素中心所在栅格。

在步骤603中、将目标元素中心所在栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

本发明实施例在用户移动目标元素后，基于目标元素移动后中心坐标位置确定目标元素移动后的栅格位置。基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化了栅格页面布局配置过程中用户的操作步骤，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

以下为本发明的装置实施例，对于其中未详尽描述的细节，可以参考上述对应的方法实施例。

图8是本发明实施例提供的可视化大屏页面布局配置装置的结构示意图，为了便于说明，仅示出了与本发明实施例相关的部分，参照图8，可视化大屏页面布局配置装置8包括：

选中模块81，用于响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态。

顶点坐标获取模块82，用于响应于用户在选中操作之后的移动操作，获取目标元素各顶点移动后的坐标位置。

重合面积确定模块83，用于根据任一顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积。

栅格位置确定模块84，用于将重合面积最大的栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

本发明实施例通过在用户移动目标元素后，基于目标元素与各顶点位置栅格的重合面积，将重合面积最大的栅格确定为目标元素移动后的栅格位置，即目标元素移动后占用的栅格位置。基于用户的可视化操作，得到适应用户操作的最优页面布局配置参数，简化了栅格页面布局配置过程中用户的操作步骤，降低了页面布局配置操作难度、降低了配置操作对用户的要求。

图9是本发明实施例提供的电子设备的示意图。如图9所示，该实施例的电子设备9包括：处理器90、存储器91以及存储在存储器91中并可在处理器90上运行的计算机程序92。所述处理器90执行所述计算机程序92时实现上述各个可视化大屏页面布局配置方法实施例中的步骤，例如图2所示的步骤201至步骤204。或者，所述处理器90执行所述计算机程序92时实现上述各装置实施例中各模块/单元的功能，例如图8所示模块81至84的功能。

示例性的，所述计算机程序92可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器91中，并由所述处理器90执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序92在所述电子设备9中的执行过程。例如，所述计算机程序92可以被分割成图8所示的模块81至84。

所述电子设备9可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述电子设备9可包括，但不仅限于，处理器90、存储器91。本领域技术人员可以理解，图9仅是电子设备9的示例，并不构成对电子设备9的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述电子设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器90可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器91可以是所述电子设备9的内部存储单元，例如电子设备9的硬盘或内存。所述存储器91也可以是所述电子设备9的外部存储设备，例如所述电子设备9上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器91还可以既包括所述电子设备9的内部存储单元也包括外部存储设备。所述存储器91用于存储所述计算机程序以及所述电子设备所需的其他程序和数据。所述存储器91还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

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

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

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个可视化大屏页面布局配置方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、电载波信号、电信信号以及软件分发介质等。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (10)

1.一种可视化大屏页面布局配置方法，其特征在于，包括：

响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态；

响应于用户在所述选中操作之后的移动操作，获取所述目标元素各顶点移动后的坐标位置；

根据任一所述顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积；

将重合面积最大的栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

2.根据权利要求1所述的可视化大屏页面布局配置方法，其特征在于，在所述响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态之后，还包括：

响应于用户在所述选中操作之后的放大操作，获取所述目标元素放大后的宽度和高度；

对所述目标元素的宽度与栅格宽度之比进行四舍五入取整，获得目标元素放大后宽度方向所占栅格数量；

对所述目标元素的高度与栅格高度之比进行四舍五入取整，获得目标元素放大后高度方向所占栅格数量；

基于所述宽度方向所占栅格数量、所述高度方向所占栅格数量，更新目标元素的页面布局配置。

3.根据权利要求1所述的可视化大屏页面布局配置方法，其特征在于，在所述响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态之后，还包括：

响应于用户在所述选中操作之后的缩小操作，获取所述目标元素缩小后的宽度和高度；

若目标元素缩小后的宽度大于等于栅格宽度，则对所述目标元素的宽度与栅格宽度之比进行四舍五入取整，获得目标元素缩小后宽度方向所占栅格数量；

若目标元素缩小后的高度大于等于栅格高度，则对所述目标元素的高度与栅格高度之比进行四舍五入取整，获得目标元素缩小后高度方向所占栅格数量；

基于所述宽度方向所占栅格数量、所述高度方向所占栅格数量，更新目标元素的页面布局配置。

4.根据权利要求3所述的可视化大屏页面布局配置方法，其特征在于，在获取所述目标元素缩小后的宽度和高度之后，还包括：

若目标元素缩小后的宽度小于栅格宽度，则基于显示界面的宽度与目标元素缩小后的宽度之比，重新确定更新后的栅格宽度；

基于更新后的栅格宽度，重新确定显示界面中各个元素宽度方向所占栅格数量；

若目标元素缩小后的高度小于栅格高度，则基于显示界面的宽度与目标元素缩小后的高度之比，重新确定更新后的栅格高度；

基于更新后的栅格高度，重新确定显示界面中各个元素高度方向所占栅格数量。

5.根据权利要求1所述的可视化大屏页面布局配置方法，其特征在于，所述根据任一所述顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积包括：

将目标元素的任一顶点作为目标顶点；

根据目标顶点移动后的坐标位置，确定目标顶点所在栅格；

在所述栅格的四个顶点中，确定与目标顶点方向相反的栅格顶点，并获取所述栅格顶点的坐标位置，其中，顶点的方向包括左上、左下、右上、右下；

根据目标顶点移动后的坐标位置、所述栅格顶点的坐标位置，得到目标元素与目标顶点所在栅格的重合面积。

6.根据权利要求1所述的可视化大屏页面布局配置方法，其特征在于，所述目标元素占用栅格数量为1；

在响应于用户在所述选中操作之后的移动操作，获取所述目标元素各顶点移动后的坐标位置之后，还包括：

根据目标元素各顶点移动后的坐标位置，确定目标元素中心的坐标位置；

根据目标元素中心的坐标位置、各栅格的坐标位置，确定目标元素中心所在栅格；

将目标元素中心所在栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

7.根据权利要求4所述的可视化大屏页面布局配置方法，其特征在于，所述基于更新后的栅格宽度，重新确定显示界面中各个元素宽度方向所占栅格数量包括：

将显示界面中任一元素作为目标元素；

对所述目标元素的宽度与更新后的栅格宽度之比进行四舍五入取整，获得目标元素宽度方向所占栅格数量。

8.一种可视化大屏页面布局配置装置，其特征在于，包括：

选中模块，用于响应于用户的选中操作，将栅格布局的显示界面中某一目标元素变更为选中状态；

顶点坐标获取模块，用于响应于用户在所述选中操作之后的移动操作，获取所述目标元素各顶点移动后的坐标位置；

重合面积确定模块，用于根据任一所述顶点移动后的坐标位置、该顶点所在栅格的坐标位置，得到目标元素与该顶点所在栅格的重合面积；

栅格位置确定模块，用于将重合面积最大的栅格，确定为目标元素移动后的栅格位置，并更新页面布局配置。

9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如上的权利要求1至7中任一项所述可视化大屏页面布局配置方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如上的权利要求1至7中任一项所述可视化大屏页面布局配置方法的步骤。