CN108052662B - 基于网页的组件布局方法、装置、设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种基于网页的组件布局方法、装置、设备及存储介质。所述方法包括：当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；在所述布局区域中插入并显示所述目标组件。通过本发明的技术方案，能够实现组件的个性化布局，提升用户体验。

Description

基于网页的组件布局方法、装置、设备及存储介质

技术领域

本发明实施例涉及网页前端技术，尤其涉及一种基于网页的组件布局方法、装置、设备及存储介质。

背景技术

随着网页前端技术的快速发展，越来越多的web界面能够显示一些功能块，这些功能块既可以帮助人们实现类似对话框式的交流，又可以使人们实现实时的帮助，获取到想要了解的内容。

现有技术中由于这些功能块在web界面中的网页代码都是固定编写的，若想要改变这些功能块的布局，必须由网页开发者重新编写相应的功能代码，因此，这些功能块的布局方式无法由用户来随意改变，导致用户体验差。

发明内容

本发明实施例提供一种基于网页的组件布局方法、装置、设备及存储介质，以实现组件的个性化布局，提升用户体验。

第一方面，本发明实施例提供了一种基于网页的组件布局方法，包括：

当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；

根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；

在所述布局区域中插入并显示所述目标组件。

第二方面，本发明实施例还提供了一种基于网页的组件布局装置，该装置包括：

信息获取模块，用于当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；

区域绘制模块，用于根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；

组件插入模块，用于在所述布局区域中插入并显示所述目标组件。

第三方面，本发明实施例还提供了一种计算机设备，该设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明实施例中任一所述的基于网页的组件布局方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例中任一所述的基于网页的组件布局方法。

本发明实施例通过根据检测到的针对目标网页中的目标组件的布局操作获取布局区域的关键确定信息，根据该关键确定信息绘制预设形状的布局区域，在该布局区域中插入并显示目标组件，利用了在自定义布局中显示组件的优点，解决了现有技术中因web界面的网页代码是固定编写的，而导致的无法由用户随意改变布局方式，用户体验差的问题，实现了组件的个性化布局，提升了用户体验。

附图说明

图1是本发明实施例一提供的一种基于网页的组件布局方法的流程示意图；

图2是本发明实施例二提供的一种基于网页的组件布局方法的流程示意图；

图3是本发明实施例三提供的一种基于网页的组件布局方法的流程示意图；

图4a是本发明实施例四提供的一种基于网页的组件布局装置的结构示意图；

图4b是本发明实施例四提供的一种优选的基于网页的组件布局装置的结构示意图；

图5是本发明实施例五提供的一种计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1为本发明实施例一提供的一种基于网页的组件布局方法的流程示意图。该方法可适用于在网页中进行组件的自定义布局的情况，该方法可以由基于网页的组件布局装置来执行，该装置可由硬件和/或软件组成，并一般可集成在计算机以及所有包含网页组件布局功能的终端中。具体包括如下：

S110、当检测到针对目标网页中的目标组件的布局操作时，根据布局操作获取布局区域的关键确定信息，其中，布局区域具有预设形状。

可选的，布局操作可以是用户针对目标网页中的目标组件进行布局时所进行的操作，例如点击操作、拖拽操作等。其中，目标组件可以是具有特定功能的功能化组件，例如会话组件、视频组件等，布局区域的关键确定信息可以是能够唯一确定具有预设形状的布局区域的大小和位置的关键信息。可选的，预设形状可根据目标组件的形状进行设置，可以是预先设置的规则形状，例如圆形、矩形、平行四边形、等腰梯形等，也可以是预先设置的不规则形状，在此不作限制。

示例性的，当检测到用户在目标网页中进行的针对目标组件的布局操作，例如对于触屏的触控操作，或对于屏幕的鼠标操作，则提取该布局操作中的关键信息以获取目标组件进行布局时所在的布局区域的关键确定信息。获取该关键确定信息的目的在于用来确定布局区域的大小和位置，以在该区域中放置目标组件，实现组件的自定义布局。

优选的，布局区域的预设形状包括矩形，布局区域的关键确定信息包括：与矩形的一条对角线对应的第一对角顶点坐标以及第二对角顶点坐标。

示例性的，预先将布局区域的预设形状设置为矩形，也即最后显示出来的目标组件的布局形状为矩形，则可根据检测到的布局操作获取与矩形的一条对角线对应的第一对角顶点坐标以及第二对角顶点坐标，例如矩形的左上角顶点以及右下角顶点。

优选的，根据布局操作获取布局区域的关键确定信息，包括：

根据布局操作，确定至少一个布局参考坐标；

根据至少一个布局参考坐标以及与目标组件匹配的最小布局范围，获取布局区域的关键确定信息。

可选的，布局参考坐标可以是关键确定信息的候选坐标，也可以是用于确定关键确定信息的坐标，该坐标可根据布局操作获取，不同的布局操作可通过不同方式获取布局参考坐标。例如，若布局操作为点击操作，则布局参考坐标可以是至少一个点击位置处的坐标；若布局操作为拖拽操作，则布局参考坐标可以是拖拽轨迹上的至少一个轨迹点坐标。示例性的，为了解决自定义的布局区域可能不完全符合目标组件的布局要求的问题，可设置与目标组件匹配的最小布局范围，并结合确定的至少一个布局参考坐标来获取布局区域的关键确定信息。举一个具体例子，若根据布局操作获取的布局参考坐标所确定的区域小于与目标组件匹配的最小布局范围，则将该最小布局范围作为自定义布局区域的范围，以保证目标组件显示在该布局区域中时不会因过小而影响用户体验。

S120、根据布局区域的关键确定信息，绘制预设形状的布局区域。

可选的，当布局区域的关键确定信息确定以后，则可在目标网页上根据该关键确定信息绘制该具有预设形状的布局区域。例如，若预设形状为圆形，当作为关键确定信息的三个坐标点确定以后，则可在目标网页上根据该三个坐标点唯一确定一个圆形区域，并绘制在目标网页上用户进行布局操作的地方；又如，若预设形状为矩形，当作为关键确定信息的矩形对角线上的两个端点的坐标确定以后，则可在目标网页上根据该两个端点作为矩形的两个对角顶点，唯一确定一个矩形区域，并绘制在目标网页上用户进行布局操作的地方。示例性的，该布局区域可用于确定目标组件的显示范围，使得目标组件可根据用户定义的布局区域进行显示。

S130、在布局区域中插入并显示目标组件。

示例性的，当布局区域确定后，可将目标组件插入至布局区域中，并在布局区域中显示出来，可选的，可按照布局区域的大小确定目标组件的显示大小，即可以使目标组件填充整个布局区域，也可以使目标组件按照与布局区域的预设比例进行显示，在此不作限定。当然，在目标网页中可通过用户针对不同的目标组件确定不同的布局区域，并分别在用户自定义的布局区域中显示对应的目标组件，也即可实现目标网页下多个目标组件在不同布局区域中的同时显示。在用户自定义的布局区域中显示目标组件的好处在于，用户可根据自己的喜好或浏览和使用目标网页的习惯来确定目标组件的显示位置，实现了组件的个性化布局，提高了用户的网页使用体验。

本实施例的技术方案，通过根据检测到的针对目标网页中的目标组件的布局操作获取布局区域的关键确定信息，根据该关键确定信息绘制预设形状的布局区域，在该布局区域中插入并显示目标组件，利用了在自定义布局中显示组件的优点，解决了现有技术中因web界面的网页代码是固定编写的，而导致的无法由用户随意改变布局方式，用户体验差的问题，实现了组件的个性化布局，提升了用户体验。

优选的，目标组件包括会话组件。

可选的，会话组件中可以是目标网页中用于实现实时帮助的对话框，具有连接后台人工或非人工客服的功能，进而可实现与后台客服进行实时对话，以进行业务咨询或寻求帮助等。

优选的，在当检测到针对目标网页中的目标组件的布局操作时，根据布局操作获取布局区域的关键确定信息之前，还包括：

封装会话传入接口和数据获取接口；

将会话传入接口和数据获取接口组件化封装成会话组件；

在目标网页对应的项目文件中引用会话组件。

示例性的，可采用React开发web界面。以React开发的目标网页为例，首先，可通过封装Json接口类talkAPI.js，实现会话传入接口的封装和配置，并通过封装数据获取类Util.js，实现数据获取接口的封装，其中，可通过调用会话传入接口将用户输入的内容传输给服务器，还可通过调用数据获取接口从服务器获取请求内容：如果请求失败，返回失败信息；如果请求成功，返回请求数据即发送给用户的会话内容。然后，将封装完成的会话传入接口和数据获取接口进行组件化封装，生成会话组件talk.js。最后，可通过语句“importTalk from’./talk’”直接将会话组件插入到目标网页对应的React项目中，实现对会话组件的引用过程。

实施例二

图2为本发明实施例二提供的一种基于网页的组件布局方法的流程示意图。本实施例以上述实施例为基础进行优化，提供了优选的基于网页的组件布局方法，具体是，将布局操作进一步优化为包括：点击操作。具体步骤如下：

S210、当检测到针对目标网页中的目标组件的点击操作时，按照点击操作的点击顺序记录各点的坐标。

可选的，点击操作可以是对触控屏的触控点击操作，也可以是对显示屏的鼠标点击操作。示例性的，当检测到针对目标网页中的目标组件的点击操作时，按照点击操作的点击顺序记录至少一个点的坐标，也即每检测到一次点击操作，则记录一次点击位置的坐标。例如，可在目标网页中任意不同的位置点击一下，按照点击顺序记录为点的序列P[P1,P2,P3…]。

优选的，在按照点击操作的点击顺序记录各点的坐标之后，还包括：

按照预设顺序依次遍历各点的坐标；

删除与上一记录点的距离小于预设距离阈值的点的记录。

示例性的，在用户进行点击操作时可能会出现在同一位置处重复点击或点击位置相距很近，从而导致增加不必要的计算量，因此，可通过将位置相隔很近的点合并为一个点，来避免这个问题。具体的，可按照预设顺序(例如记录顺序)依次遍历记录的各点的坐标，计算当前点与上一记录点之间的距离，若该距离小于预设距离阈值，则确定该点为上一记录点的重合点或相近点，为了降低计算量，可删除该点的坐标记录，以上一记录点的位置为准，依次类推。特殊的，若当前遍历的点为第一记录点，则默认保留当前点的记录。

S220、判断记录的点的数量是否为1，若是，则执行S230；若否，则执行S260。

可选的，在确定点击操作完成后，可通过判断记录的点的数量是否为1，以选取适合的方式对与矩形的一条对角线对应的第一对角顶点坐标以及第二对角顶点坐标进行确定。

S230、确定该点的坐标为第一对角顶点坐标。

可选的，可在确定仅记录了一个点的坐标后，将该点的坐标确定为与矩形的一条对角线对应的第一对角顶点坐标，例如矩形左上角顶点的坐标。

S240、将第一对角顶点坐标中的横坐标和纵坐标分别按照与目标组件匹配的最小布局范围对应的边界长度进行移动。

可选的，当预设形状为矩形时，对应的可知与目标组件匹配的最小布局范围也为矩形，其对应的边界长度包括与屏幕水平坐标轴平行的最小宽度，还包括与屏幕垂直坐标轴平行的最小高度。

示例性的，对于第一对角顶点坐标中横坐标的移动，可选的，若确定的第一对角顶点坐标预设为矩形左上角(或左下角)顶点坐标，则可将横坐标按照与目标组件匹配的最小布局范围对应的最小宽度向右进行移动；若确定的第一对角顶点坐标预设为矩形右下角(或右上角)顶点坐标，则可将横坐标按照与目标组件匹配的最小布局范围对应的最小宽度向左进行移动。其中，移动距离的值与最小宽度的值相等。

示例性的，对于第一对角顶点坐标中纵坐标的移动，可选的，若确定的第一对角顶点坐标预设为矩形左上角(或右上角)顶点坐标，则可将纵坐标按照与目标组件匹配的最小布局范围对应的最小高度向下进行移动；若确定的第一对角顶点坐标预设为矩形右下角(或左下角)顶点坐标，则可将纵坐标按照与目标组件匹配的最小布局范围对应的最小高度向上进行移动。其中，移动距离的值与最小高度的值相等。

优选的，在将第一对角顶点坐标中的横坐标和纵坐标分别按照与目标组件匹配的最小布局范围对应的边界长度进行移动之后，还包括：

若经移动后得到的目标点的坐标在目标网页的显示边界之外，则改变移动方向，直至目标点的坐标在显示边界之内。

示例性的，可根据预定的第一对角顶点坐标的预设属性，确定第一对角顶点坐标中的横坐标与纵坐标的初始移动方向，也即不同的预设属性对应不同的初始移动方向。例如，对于第一对角顶点坐标中的横坐标的初始移动方向，若第一对角顶点坐标的预设属性是矩形左上角(或左下角)顶点坐标，则横坐标的初始移动方向为向右移动；若第一对角顶点坐标的预设属性是矩形右下角(或右上角)顶点坐标，则横坐标的初始移动方向为向左移动。又如，对于第一对角顶点坐标中的纵坐标的初始移动方向，若第一对角顶点坐标的预设属性是矩形左上角(或右上角)顶点坐标，则纵坐标的初始移动方向为向下移动；若第一对角顶点坐标的预设属性是矩形右下角(或左下角)顶点坐标，则纵坐标的初始移动方向为向上移动。

可选的，若按照初始移动方向进行移动后，得到的目标点的坐标在目标网页可显示的显示边界之外，则此时说明目标组件无法根据当前确定的第一对角顶点坐标的预设属性进行正常显示，因此，可通过改变第一对角顶点坐标的预设属性，也即通过改变第一对角顶点坐标的移动方向重新进行移动，直至移动后得到的目标点的坐标在显示边界之内。例如，若第一对角顶点坐标的预设属性是矩形左上角顶点坐标，则在确定经移动后得到的目标点的坐标在目标网页的显示边界之外后，按顺时针方向改变第一对角顶点坐标的预设属性，也即将第一对角顶点坐标的属性改为右上角顶点，进而改变第一对角顶点坐标对应的移动方向，也即改为横坐标向左移动，纵坐标向下移动，以此类推，直至移动后得到的目标点的坐标在显示边界之内。举一个实际例子：若预设的矩形布局区域的最小的长和宽均为100，且第一对角顶点坐标预设为该矩形区域的左上角顶点坐标，则该顶点坐标最初的移动方向可以是(x+100,y+100)；如果x+100大于整个网页的显示边界，则横坐标方向改为x-100；同理，如果y+100大于整个网页的显示边界，纵坐标方向也是改为y-100；如果横坐标的x+100,纵坐标的y+100，均超过网页的边界，则为移动方向为(x-100,y-100)。

这样设置的好处在于，可以保证移动后得到的目标点的坐标在目标网页的显示边界之内，从而保证目标组件能够在用户自定义的布局区域中正常显示。

S250、将经移动后得到的目标点的坐标确定为第二对角顶点坐标。

可选的，经移动后得到的目标点的坐标，确定为第一对角顶点坐标所在的对角线上的另一个端点，也即第二对角顶点坐标。例如，若当前第一对角顶点坐标的属性为矩形的左上角顶点坐标，则将移动后得到的目标点的坐标确定为矩形的右下角顶点坐标，也即第二对角顶点坐标对应于矩形的右下角顶点坐标。

S260、根据各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标。

可选的，可在确定记录了至少两个点的坐标后，根据各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标，其中，第二对角顶点参考坐标可以是用于确定第二对角顶点坐标的参考坐标。

示例性的，由各点的分布信息可确定各点之间的位置关系，根据不同的位置关系可选择采用不同的方式来确定第一对角顶点坐标和第二对角顶点参考坐标。

优选的，根据各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标，包括：

根据各点的坐标判断各点是否均排列在一条直线上；

若是，则获取各点组成的直线段的两个端点坐标，并根据两个端点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；

若否，则分别获取各点中横坐标的最大值点和最小值点对应的极值横坐标，以及纵坐标的最大值点和最小值点对应的极值纵坐标，根据极值横坐标以及极值纵坐标确定第一对角顶点坐标和第二对角顶点参考坐标。

示例性的，可通过判断出各点的坐标中的横坐标是否相等或纵坐标是否相等，或通过计算每两个点之间的直线斜率是否相等，来判断各点是否排列在一条直线上。

可选的，若通过各点的坐标中的横坐标均相等或纵坐标均相等，或者每两个点之间的直线斜率均相等，则确定各点均排列在一条直线上，特殊的，若只记录了两个点的坐标，则可直接确定该两点排列在一条直线上。具体的，当确定各点均排列在一条直线上时，可根据各点的坐标获取各点组成的直线段的两个端点坐标。

举一个具体例子，在屏幕默认坐标系中(横坐标为由左至右变大，纵坐标为由上至下变大)，若第一对角顶点坐标预设为矩形的左上角顶点坐标，且获取的两个端点分别为P1(x1,y1)，P2(x2,y2)，则当abs(x1-x2)＝0&&abs(y1-y2)！＝0时，该两个端点位于一竖直直线上，此时，如果y1<y2则P1的坐标(x1,y1)为第一对角顶点坐标，P2的坐标(x2,y2)为第二对角顶点参考坐标；否则P2的坐标(x2,y2)为第一对角顶点坐标，P1的坐标(x1,y1)为第二对角顶点参考坐标。同理，当abs(x1-x2)！＝0&&abs(y1-y2)＝0时，则两个端点位于一水平直线上，此时，如果x1<x2则P1的坐标(x1,y1)为第一对角顶点坐标，P2的坐标(x2,y2)为第二对角顶点参考坐标；否则P2的坐标(x2,y2)为第一对角顶点坐标，P1的坐标(x1,y1)为第二对角顶点参考坐标。再如，当abs(x1-x2)！＝0&&abs(y1-y2)！＝0时，则该两个端点位于为一倾斜的直线上，此时，如果(x2>x1&&y2>y1)，则P1的坐标(x1,y1)为第一对角顶点坐标，P2的坐标(x2,y2)为第二对角顶点参考坐标；如果(x2>x1&&y2<y1)，则第一对角顶点坐标为(x1,y2)，第二对角顶点参考坐标为(x2,y1)；如果(x1>x2&&y2>y1)，则第一对角顶点坐标为(x2,y1)，第二对角顶点参考坐标为(x1,y2)；如果(x1>x2&&y2<y1)，则P2的坐标(x2,y2)为第一对角顶点坐标，P1的坐标(x1,y1)为第二对角顶点参考坐标。

可选的，若通过各点的坐标中的横坐标不都相等或纵坐标不都相等，或者每两个点之间的直线斜率不都相等，则确定各点不都排列在一条直线上。具体的，当确定各点均排列在一条直线上时，可通过获取各点的横坐标和纵坐标的极值来确定第一对角顶点坐标和第二对角顶点参考坐标。

举一个具体例子，在屏幕默认坐标系中(横坐标为由左至右变大，纵坐标为由上至下变大)，若第一对角顶点坐标预设为矩形的左上角顶点坐标，且各点的坐标分别为P1(x1,y1)、P2(x2,y2)、P3(x3,y3)…Pn(xn,yn)。此时，可根据MAX(x1,x2,…,xn)，求横坐标中的最大的点Xmax，根据MIN(x1,x2,…,xn)，求横坐标中的最小的点Xmin；根据MAX(y1,y2,…,yn)，求纵坐标中的最大的点Ymax，根据MIN(y1,y2,…,yn)，求纵坐标中的最小的点Ymin。然后，确定(Xmin,Ymin)为第一对角顶点坐标，(Xmax,Ymax)为第二对角顶点参考坐标。

S270、根据第一对角顶点坐标与第二对角顶点参考坐标之间的距离，以及与目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。

示例性的，可通过预设的距离计算公式计算第一对角顶点坐标与第二对角顶点参考坐标之间的距离，例如，可计算第一对角顶点坐标与第二对角顶点参考坐标中的横坐标和纵坐标的差值，将该差值分别与目标组件匹配的最小布局范围对应的边界长度进行比较，从而确定第二对角顶点坐标。

S280、根据第一对角顶点坐标以及第二对角顶点坐标，绘制矩形布局区域。

其中，绘制的矩形布局区域的上下边为与屏幕的上下边框默认为平行设置，示例性的，当确定第一对角顶点坐标以及第二对角顶点坐标时，可根据第一对角顶点坐标以及第二对角顶点坐标获取矩形的另一条对角线上对应的两个对角顶点坐标，进而将该四个顶点用直线连接绘制一个封闭的矩形区域，作为矩形布局区域。

S290、在矩形布局区域中插入并显示目标组件。

本实施例的技术方案，首先通过检测针对目标网页中目标组件的点击操作，获取并记录各点的坐标，再根据记录点的数量采用不同的方式确定矩形布局区域的第一对角顶点坐标以及第二对角顶点坐标，最后，根据第一对角顶点坐标以及第二对角顶点坐标绘制矩形布局区域，并在矩形布局区域中插入并显示目标组件，以通过点击操作绘制矩形布局区域为例，可知，本实施例通过简单操作就能实现组件的个性化布局，提升了用户体验。

实施例三

图3为本发明实施例三提供的一种基于网页的组件布局方法的流程示意图。本实施例以上述实施例为基础进行优化，提供了优选的基于网页的组件布局方法，具体是，将布局操作进一步优化为包括：拖拽操作。具体步骤如下：

S310、当检测到针对目标网页中的目标组件的拖拽操作时，根据拖拽操作获取拖拽轨迹的起点坐标和终点坐标。

可选的，拖拽操作可以是手指在触控屏上的滑屏触摸操作，也可以是鼠标在显示屏上的鼠标拖动操作。示例性的，当检测到在网页中的显示区域拖动鼠标时，则获取鼠标的拖拽轨迹，并提取拖拽轨迹中的起点坐标和终点坐标。

获取拖拽轨迹的起点坐标和终点坐标的目的在于，作为矩形布局区域的关键确定信息，以确定自定义矩形布局区域的位置和大小，其中，矩形布局区域的上下边与屏幕的上下边框默认为平行的。

S320、根据起点坐标和终点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标。

示例性的，可通过判断起点坐标和终点坐标的横坐标和纵坐标之间的大小，来确定起点坐标和终点坐标之间的位置关系，再根据该位置关系确定第一对角顶点坐标和第二对角顶点参考坐标。

举一个具体例子，在屏幕默认坐标系中(横坐标为由左至右变大，纵坐标为由上至下变大)，若第一对角顶点坐标预设为矩形的左上角顶点坐标，且获取的起点坐标为P1(x1,y1)，终点坐标为P2(x2,y2)，则当abs(x1-x2)＝0&&abs(y1-y2)！＝0时，该两点位于一竖直直线上，此时，如果y1<y2，则起点坐标P1(x1,y1)为第一对角顶点坐标，终点坐标P2(x2,y2)为第二对角顶点参考坐标；否则终点坐标P2(x2,y2)为第一对角顶点坐标，起点坐标P1(x1,y1)为第二对角顶点参考坐标。同理，当abs(x1-x2)！＝0&&abs(y1-y2)＝0时，则两点位于一水平直线上，此时，如果x1<x2，则起点坐标P1(x1,y1)为第一对角顶点坐标，终点坐标P2(x2,y2)为第二对角顶点参考坐标；否则终点坐标P2(x2,y2)为第一对角顶点坐标，起点坐标P1(x1,y1)为第二对角顶点参考坐标。再如，当abs(x1-x2)！＝0&&abs(y1-y2)！＝0时，则该两个端点位于为一倾斜的直线上，此时，如果(x2>x1&&y2>y1)，则起点坐标P1(x1,y1)为第一对角顶点坐标，终点坐标P2(x2,y2)为第二对角顶点参考坐标；如果(x2>x1&&y2<y1)，则第一对角顶点坐标为(x1,y2)，第二对角顶点参考坐标为(x2,y1)；如果(x1>x2&&y2>y1)，则第一对角顶点坐标为(x2,y1)，第二对角顶点参考坐标为(x1,y2)；如果(x1>x2&&y2<y1)，则终点坐标P2(x2,y2)为第一对角顶点坐标，起点坐标P1(x1,y1)为第二对角顶点参考坐标。

S330、根据第一对角顶点坐标与第二对角顶点参考坐标之间的距离，以及与目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。

针对本实施例以及上述各实施例中提到的与目标组件匹配的最小布局范围对应的边界长度，优选的，该边界长度包括横向最小边界长度和纵向最小边界长度；

相应的，根据第一对角顶点坐标与第二对角顶点参考坐标之间的距离，以及与目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标，包括：

确定第一对角顶点坐标与第二对角顶点参考坐标之间的横向距离和纵向距离；

若横向距离大于横向最小边界长度，则将第二对角顶点参考坐标的横坐标值确定为第二对角顶点坐标的横坐标值；否则，将第一对角顶点坐标的横坐标移动横向最小边界长度后的值确定为第二对角顶点坐标的横坐标值；

若纵向距离大于纵向最小边界长度，则将第二对角顶点参考坐标的纵坐标值确定为第二对角顶点坐标的纵坐标值；否则，将第一对角顶点坐标的纵坐标移动纵向最小边界长度后的值确定为第二对角顶点坐标的纵坐标值。

示例性的，以第一对角顶点坐标为(x1,y1)，第二对角顶点参考坐标为(x2,y2)为例，可通过abs(x1-x2)计算第一对角顶点坐标(x1,y1)与第二对角顶点参考坐标(x2,y2)之间的横向距离；同理，可通过abs(y1-y2)计算第一对角顶点坐标(x1,y1)与第二对角顶点参考坐标(x2,y2)之间的纵向距离。在此基础上，若横向距离大于横向最小边界长度(例如100)且纵向距离大于纵向最小边界长度(例如150)，也即如果abs(x1-x2)>100&&abs(y1-y2)>150，则第二对角顶点坐标的坐标为(x2,y2)；若横向距离不大于横向最小边界长度(例如100)且纵向距离不大于纵向最小边界长度(例如150)，也即如果abs(x1-x2)≤100&&abs(y1-y2)≤150，则第二对角顶点坐标的横坐标值为(x1+100)，纵坐标值为(y1+150)；若横向距离大于横向最小边界长度(例如100)且纵向距离不大于纵向最小边界长度(例如150)，也即如果abs(x1-x2)＞100&&abs(y1-y2)≤150，则第二对角顶点坐标的横坐标值为x2，纵坐标值为(y1+150)；若横向距离不大于横向最小边界长度(例如100)且纵向距离大于纵向最小边界长度(例如150)，也即如果abs(x1-x2)≤100&&abs(y1-y2)＞150，则第二对角顶点坐标的横坐标值为(x1+100)，纵坐标值为y2。

S340、根据第一对角顶点坐标以及第二对角顶点坐标，绘制矩形布局区域。

S350、在矩形布局区域中插入并显示目标组件。

本实施例的技术方案，首先通过检测针对目标网页中目标组件的拖拽操作，获取拖拽轨迹的起点坐标和终点坐标，再根据起点坐标和终点坐标和终点坐标之间的位置关系确定矩形布局区域的第一对角顶点坐标以及第二对角顶点坐标，最后，根据第一对角顶点坐标以及第二对角顶点坐标绘制矩形布局区域，并在矩形布局区域中插入并显示目标组件，以通过拖拽操作绘制矩形布局区域为例，可知，本实施例通过简单操作就能实现组件的个性化布局，提升了用户体验。

实施例四

图4a为本发明实施例四提供的一种基于网页的组件布局装置的结构示意图。参考图4a，基于网页的组件布局装置包括：信息获取模块41、区域绘制模块42以及组件插入模块43，下面对各模块进行具体说明。

信息获取模块41，用于当检测到针对目标网页中的目标组件的布局操作时，根据布局操作获取布局区域的关键确定信息，其中，布局区域具有预设形状；

区域绘制模块42，用于根据布局区域的关键确定信息，绘制预设形状的布局区域；

组件插入模块43，用于在布局区域中插入并显示目标组件。

本实施例提供的基于网页的组件布局装置，通过根据检测到的针对目标网页中的目标组件的布局操作获取布局区域的关键确定信息，根据该关键确定信息绘制预设形状的布局区域，在该布局区域中插入并显示目标组件，利用了在自定义布局中显示组件的优点，解决了现有技术中因web界面的网页代码是固定编写的，而导致的无法由用户随意改变布局方式，用户体验差的问题，实现了组件的个性化布局，提升了用户体验。

如图4b所示，一种优选的基于网页的组件布局装置包括：信息获取模块41、区域绘制模块42以及组件插入模块43，可选的，布局区域的预设形状可以包括矩形，布局区域的关键确定信息可以包括：与矩形的一条对角线对应的第一对角顶点坐标以及第二对角顶点坐标。

可选的，信息获取模块41可以包括：

参考坐标确定子模块411，用于根据布局操作，确定至少一个布局参考坐标；

关键信息获取子模块412，用于根据至少一个布局参考坐标以及与目标组件匹配的最小布局范围，获取布局区域的关键确定信息。

可选的，布局操作可以包括：点击操作；

参考坐标确定子模块411具体用于：

按照点击操作的点击顺序记录各点的坐标。

可选的，关键信息获取子模块具体可以用于：

若记录的点的数量为1，则确定点的坐标为第一对角顶点坐标；

将第一对角顶点坐标中的横坐标和纵坐标分别按照与目标组件匹配的最小布局范围对应的边界长度进行移动；

将经移动后得到的目标点的坐标确定为第二对角顶点坐标。

可选的，关键信息获取子模块412具体还可以用于：

在将第一对角顶点坐标中的横坐标和纵坐标分别按照与目标组件匹配的最小布局范围对应的边界长度进行移动之后，若经移动后得到的目标点的坐标在目标网页的显示边界之外，则改变移动方向，直至目标点的坐标在显示边界之内。

可选的，关键信息获取子模块412可以包括：

第一坐标确定单元4121，用于若记录的点的数量大于1，则根据各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标；

第二坐标确定单元4122，根据第一对角顶点坐标与第二对角顶点参考坐标之间的距离，以及与目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。

可选的，第一坐标确定单元4121具体可以用于：

根据各点的坐标判断各点是否均排列在一条直线上；

若是，则获取各点组成的直线段的两个端点坐标，并根据两个端点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；

若否，则分别获取各点中横坐标的最大值点和最小值点对应的极值横坐标，以及纵坐标的最大值点和最小值点对应的极值纵坐标，根据极值横坐标以及极值纵坐标确定第一对角顶点坐标和第二对角顶点参考坐标。

可选的，参考坐标确定子模块411具体还可以用于：

在按照点击操作的点击顺序记录各点的坐标之后，按照预设顺序依次遍历各点的坐标；

删除与上一记录点的距离小于预设距离阈值的点的记录。

可选的，布局操作可以包括：拖拽操作；

参考坐标确定子模块411具体用于：

根据拖拽操作获取拖拽轨迹的起点坐标和终点坐标。

可选的，关键信息获取子模块412可以包括：

第三坐标确定单元4123，用于根据起点坐标和终点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；

第二坐标确定单元4122，用于根据第一对角顶点坐标与第二对角顶点参考坐标之间的距离，以及与目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。

可选的，与目标组件匹配的最小布局范围对应的边界长度可以包括横向最小边界长度和纵向最小边界长度；

第二坐标确定单元4122具体可以用于：

确定第一对角顶点坐标与第二对角顶点参考坐标之间的横向距离和纵向距离；

若横向距离大于横向最小边界长度，则将第二对角顶点参考坐标的横坐标值确定为第二对角顶点坐标的横坐标值；否则，将第一对角顶点坐标的横坐标移动横向最小边界长度后的值确定为第二对角顶点坐标的横坐标值；

若纵向距离大于纵向最小边界长度，则将第二对角顶点参考坐标的纵坐标值确定为第二对角顶点坐标的纵坐标值；否则，将第一对角顶点坐标的纵坐标移动纵向最小边界长度后的值确定为第二对角顶点坐标的纵坐标值。

可选的，目标组件可以包括会话组件。

可选的，还可以包括：

接口封装模块44，用于在当检测到针对目标网页中的目标组件的布局操作时，根据布局操作获取布局区域的关键确定信息之前，封装会话传入接口和数据获取接口；

组件封装模块45，用于将会话传入接口和数据获取接口组件化封装成会话组件；

组件引用模块46，用于在目标网页对应的项目文件中引用会话组件。

上述产品可执行本发明任意实施例所提供的方法，具备执行方法相应的功能模块和有益效果。

实施例五

图5为本发明实施例四提供的一种计算机设备的结构示意图，如图5所示，本实施例提供的一种计算机设备，包括：处理器51和存储器52。该计算机设备中的处理器可以是一个或多个，图5中以一个处理器51为例，所述计算机设备中的处理器51和存储器52可以通过总线或其他方式连接，图5中以通过总线连接为例。

本实施例中计算机设备的处理器51中集成了上述实施例提供的基于网页的组件布局装置。此外，该计算机设备中的存储器52作为一种计算机可读存储介质，可用于存储一个或多个程序，所述程序可以是软件程序、计算机可执行程序以及模块，如本发明实施例中基于网页的组件布局方法对应的程序指令/模块(例如，附图4所示的基于网页的组件布局装置中的模块，包括：信息获取模块41、区域绘制模块42以及组件插入模块43)。处理器51通过运行存储在存储器52中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述方法实施例中基于网页的组件布局方法。

存储器52可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据设备的使用所创建的数据等。此外，存储器52可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器52可进一步包括相对于处理器51远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

并且，当上述计算机设备所包括一个或者多个程序被所述一个或者多个处理器51执行时，程序进行如下操作：

当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；在所述布局区域中插入并显示所述目标组件。

实施例六

本发明实施例六还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被基于网页的组件布局装置执行时实现如本发明实施例一提供的基于网页的组件布局方法，该方法包括：当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；在所述布局区域中插入并显示所述目标组件。

当然,本发明实施例所提供的一种计算机可读存储介质,其上存储的计算机程序被执行时不限于实现如上所述的方法操作,还可以实现本发明任意实施例所提供的基于网页的组件布局方法中的相关操作。

通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

值得注意的是，上述基于网页的组件布局装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (22)

1.一种基于网页的组件布局方法，其特征在于，包括：

当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；

根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；

在所述布局区域中插入并显示所述目标组件；

所述根据所述布局操作获取布局区域的关键确定信息，包括：

根据所述布局操作，确定至少一个布局参考坐标；

根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息；

所述布局操作包括：点击操作；

所述根据所述布局操作，确定至少一个布局参考坐标包括：

按照所述点击操作的点击顺序记录各点的坐标；

在所述按照所述点击操作的点击顺序记录各点的坐标之后，还包括：

按照预设顺序依次遍历各点的坐标；

删除与上一记录点的距离小于预设距离阈值的点的记录。

2.根据权利要求1所述的方法，其特征在于，所述布局区域的所述预设形状包括矩形，所述布局区域的关键确定信息包括：与矩形的一条对角线对应的第一对角顶点坐标以及第二对角顶点坐标。

3.根据权利要求1所述的方法，其特征在于，所述根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息，包括：

若记录的点的数量为1，则确定所述点的坐标为第一对角顶点坐标；

将所述第一对角顶点坐标中的横坐标和纵坐标分别按照与所述目标组件匹配的最小布局范围对应的边界长度进行移动；

将经移动后得到的目标点的坐标确定为第二对角顶点坐标。

4.根据权利要求3所述的方法，其特征在于，在将所述第一对角顶点坐标中的横坐标和纵坐标分别按照与所述目标组件匹配的最小布局范围对应的边界长度进行移动之后，还包括：

若经移动后得到的目标点的坐标在所述目标网页的显示边界之外，则改变移动方向，直至所述目标点的坐标在所述显示边界之内。

5.根据权利要求1所述的方法，其特征在于，所述根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息，包括：

若记录的点的数量大于1，则根据所述各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标；

根据所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的距离，以及与所述目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。

6.根据权利要求5所述的方法，其特征在于，所述根据所述各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标，包括：

根据所述各点的坐标判断所述各点是否均排列在一条直线上；

若是，则获取所述各点组成的直线段的两个端点坐标，并根据所述两个端点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；

若否，则分别获取所述各点中横坐标的最大值点和最小值点对应的极值横坐标，以及纵坐标的最大值点和最小值点对应的极值纵坐标，根据所述极值横坐标以及所述极值纵坐标确定第一对角顶点坐标和第二对角顶点参考坐标。

7.根据权利要求1所述的方法，其特征在于，所述布局操作包括：拖拽操作；

所述根据所述布局操作，确定至少一个布局参考坐标包括：

根据所述拖拽操作获取拖拽轨迹的起点坐标和终点坐标。

8.根据权利要求7所述的方法，其特征在于，所述根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息，包括：

根据所述起点坐标和所述终点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；

根据所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的距离，以及与所述目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。

9.根据权利要求5或8所述的方法，其特征在于，所述与所述目标组件匹配的最小布局范围对应的边界长度包括横向最小边界长度和纵向最小边界长度；

所述根据所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的距离，以及与所述目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标，包括：

确定所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的横向距离和纵向距离；

若所述横向距离大于所述横向最小边界长度，则将所述第二对角顶点参考坐标的横坐标值确定为第二对角顶点坐标的横坐标值；否则，将所述第一对角顶点坐标的横坐标移动所述横向最小边界长度后的值确定为第二对角顶点坐标的横坐标值；

若所述纵向距离大于所述纵向最小边界长度，则将所述第二对角顶点参考坐标的纵坐标值确定为第二对角顶点坐标的纵坐标值；否则，将所述第一对角顶点坐标的纵坐标移动所述纵向最小边界长度后的值确定为第二对角顶点坐标的纵坐标值。

10.根据权利要求1所述的方法，其特征在于，所述目标组件包括会话组件。

11.根据权利要求10所述的方法，其特征在于，在当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息之前，还包括：

封装会话传入接口和数据获取接口；

将所述会话传入接口和所述数据获取接口组件化封装成所述会话组件；

在所述目标网页对应的项目文件中引用所述会话组件。

12.一种基于网页的组件布局装置，其特征在于，包括：

信息获取模块，用于当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；

区域绘制模块，用于根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；

组件插入模块，用于在所述布局区域中插入并显示所述目标组件；

所述信息获取模块包括：

参考坐标确定子模块，用于根据所述布局操作，确定至少一个布局参考坐标；

关键信息获取子模块，用于根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息

所述布局操作包括：点击操作；

所述参考坐标确定子模块具体用于：

按照所述点击操作的点击顺序记录各点的坐标；

所述参考坐标确定子模块具体还用于：

在所述按照所述点击操作的点击顺序记录各点的坐标之后，按照预设顺序依次遍历各点的坐标；

删除与上一记录点的距离小于预设距离阈值的点的记录。

13.根据权利要求12所述的装置，其特征在于，所述布局区域的所述预设形状包括矩形，所述布局区域的关键确定信息包括：与矩形的一条对角线对应的第一对角顶点坐标以及第二对角顶点坐标。

14.根据权利要求12所述的装置，其特征在于，所述关键信息获取子模块具体用于：

若记录的点的数量为1，则确定所述点的坐标为第一对角顶点坐标；

将所述第一对角顶点坐标中的横坐标和纵坐标分别按照与所述目标组件匹配的最小布局范围对应的边界长度进行移动；

将经移动后得到的目标点的坐标确定为第二对角顶点坐标。

15.根据权利要求14所述的装置，其特征在于，所述关键信息获取子模块具体还用于：

在将所述第一对角顶点坐标中的横坐标和纵坐标分别按照与所述目标组件匹配的最小布局范围对应的边界长度进行移动之后，若经移动后得到的目标点的坐标在所述目标网页的显示边界之外，则改变移动方向，直至所述目标点的坐标在所述显示边界之内。

16.根据权利要求12所述的装置，其特征在于，所述关键信息获取子模块包括：

第一坐标确定单元，用于若记录的点的数量大于1，则根据所述各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标；

第二坐标确定单元，根据所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的距离，以及与所述目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。

17.根据权利要求16所述的装置，其特征在于，所述第一坐标确定单元具体用于：

根据所述各点的坐标判断所述各点是否均排列在一条直线上；

若是，则获取所述各点组成的直线段的两个端点坐标，并根据所述两个端点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；

若否，则分别获取所述各点中横坐标的最大值点和最小值点对应的极值横坐标，以及纵坐标的最大值点和最小值点对应的极值纵坐标，根据所述极值横坐标以及所述极值纵坐标确定第一对角顶点坐标和第二对角顶点参考坐标。

18.根据权利要求12所述的装置，其特征在于，所述布局操作包括：拖拽操作；

所述参考坐标确定子模块具体用于：

根据所述拖拽操作获取拖拽轨迹的起点坐标和终点坐标。

19.根据权利要求18所述的装置，其特征在于，所述关键信息获取子模块，包括：

第三坐标确定单元，用于根据所述起点坐标和所述终点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；

第二坐标确定单元，用于根据所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的距离，以及与所述目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。

20.根据权利要求16或19所述的装置，其特征在于，所述与所述目标组件匹配的最小布局范围对应的边界长度包括横向最小边界长度和纵向最小边界长度；

所述第二坐标确定单元具体用于：

确定所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的横向距离和纵向距离；

若所述横向距离大于所述横向最小边界长度，则将所述第二对角顶点参考坐标的横坐标值确定为第二对角顶点坐标的横坐标值；否则，将所述第一对角顶点坐标的横坐标移动所述横向最小边界长度后的值确定为第二对角顶点坐标的横坐标值；

若所述纵向距离大于所述纵向最小边界长度，则将所述第二对角顶点参考坐标的纵坐标值确定为第二对角顶点坐标的纵坐标值；否则，将所述第一对角顶点坐标的纵坐标移动所述纵向最小边界长度后的值确定为第二对角顶点坐标的纵坐标值。

21.一种计算机设备，其特征在于，所述设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-11中任一所述的基于网页的组件布局方法。

22.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-11中任一所述的基于网页的组件布局方法。

Images