CN112631703A - 一种图形边框生成方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种图形边框生成方法、装置、设备及存储介质，涉及计算机技术领域，进一步涉及图形处理技术领域，可应用于云平台技术，包括：获取基准边框图形；将所述基准边框图形划分为多个边框图形区域；根据所述基准边框图形、各所述边框图形区域和图形容器构建Web容器图形边框。本申请实施例能够提高Web端边框图形的开发效率、展示效果和可维护性。

Description

一种图形边框生成方法、装置、设备及存储介质

技术领域

本申请涉及计算机技术领域，具体涉及图形处理技术。

背景技术

Web(World Wide Web，万维网)服务运行于应用层，借助于应用层的协议，建立了客户端与服务器的对等层之间的联系，底层的硬件以及软件为其提供服务。Web服务与云平台技术存在密切联系。在Web服务中，Web客户端可以基于浏览器技术展现信息内容。在Web客户端中，部分特殊信息需要基于设定的图形边框进行展示。例如，通过绘制优惠券的图形边框展示优惠券信息，或通过绘制在线聊天图形对话框展示聊天信息等。因此，如何设置用于展示信息内容的图形边框，对于图形边框在Web客户端的开发效率、展示效果和后台维护等方面具有直接的影响。

发明内容

本申请实施例提供了一种图形边框生成方法、装置、设备及存储介质，以提高Web端边框图形的开发效率、展示效果和可维护性。

第一方面，本申请实施例提供了一种图形边框生成方法，包括：

获取基准边框图形；

将所述基准边框图形划分为多个边框图形区域；

根据所述基准边框图形、各所述边框图形区域和图形容器构建Web容器图形边框。

第二方面，本申请实施例提供了一种图形边框生成装置，包括：

基准边框图形获取模块，用于获取基准边框图形；

边框图形区域划分模块，用于将所述基准边框图形划分为多个边框图形区域；

Web容器图形边框构建模块，用于根据所述基准边框图形、各所述边框图形区域和图形容器构建Web容器图形边框。

第三方面，本申请实施例提供了一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面实施例所提供的图形边框生成方法。

第四方面，本申请实施例还提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行第一方面实施例所提供的图形边框生成方法。

第五方面，本申请实施例还提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现第一方面实施例所提供的图形边框生成方法。

本申请实施例通过将获取的基准边框图形划分为多个边框图形区域，以根据基准边框图形和划分得到的各边框图形区域构建Web容器图形边框，解决现有Web容器图形边框生成方法存在的开发效率低、展示效果差及可维护性较低等问题，从而提高Web端边框图形的开发效率、展示效果和可维护性。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是现有技术中Web客户端优惠券的图形边框的效果示意图；

图2是现有技术中利用容器技术生成形象化的Web端图形边框的效果示意图；

图3是本申请实施例提供的一种图形边框生成方法的流程图；

图4是本申请实施例提供的一种图形边框生成方法的流程图；

图5是本申请实施例提供的一种利用水平分割线和竖直分割线对基准边框图形进行分割的效果示意图；

图6是本申请实施例提供的一种利用固定容器边框分割线获取容器边框图形区域的效果示意图；

图7是本申请实施例提供的一种确定容器承载内容区域的效果示意图；

图8是本申请实施例提供的一种图形边框生成装置的结构图；

图9是用来实现本申请实施例的图形边框生成方法的电子设备的结构示意图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

现有技术中，Web客户端通常采用两种方式绘制图形边框。第一种方式是使用简单的线条绘制，第二种方式为采用形象的边框绘制。

图1是现有技术中Web客户端优惠券的图形边框的效果示意图。在一个具体的例子中，以优惠券的图形边框为例具体说明，如图1所示，标号为(1)的优惠券的Web端图形边框是采用第一种方式绘制生成。使用简单线条绘制图形边框技术实现较为简单，只需要给相应内容(如图1中满35减5的优惠券内容)的容器设置一个边框即可。这种方式绘制的Web端的图形边框容易扩展，当容器内容变化时，容器会随着内容伸缩。由于是设置的边框是矢量的，所以边框在伸缩的过程中整体效果也不会失真。但是，这种方式不够形象，用户对图形边框的感知不够，例如在使用该图形边框作为优惠券的边框时，用户很难在短时间内识别出这是一个优惠券。同时，这种图形边框展示的优惠券不容易和其它的Web标签区分，例如优惠券内容的图形边框和包邮样式的图形边框一样，从而增加了用户的认知负担，降低了图形边框的展示效果。

如图1所示，标号为(2)的优惠券的Web端图形边框是采用第二种方式绘制生成。使用形象化图形生成的图形边框较为形象，图形边框的展示效果较为理想，用户很容易根据图形边框快速识别边框内的内容。但是这种形象化的Web端图形边框技术实现相对复杂。在现有技术中，生成形象化的Web端图形边框通常需要多个容器组合实现。图2是现有技术中利用容器技术生成形象化的Web端图形边框的效果示意图。在一个具体的例子中，如图2所示，首先需要实现一个完整的带边框的主体容器，该主题容器的边框为实线边框。当带边框的主体容器确定之后，可以根据带边框的主体容器生成需要的花纹容器。如图1和图2所示，如果需要生成图1中标号为(2)的Web端图形边框，则需要两个花纹容器。以左侧的花纹容器为例说明，可以根据主体容器的左边框确定弧形花纹的大小，并根据弧形花纹的大小生成一个容纳花纹的长方形容器，以使弧形花纹的两个端点与长方形容器的左侧的两个端口重合。长方形容器可以隐藏边框并承载弧形花纹，从而构成一个花纹容器。最后，将图2所示的左侧的花纹容器定位在主体容器的左侧，让花纹正好覆盖在主体容器左侧边框的边缘。同理，右侧花纹也是类似的处理过程。

也即，现有技术需要通过多个容器的叠加来生成形象化的Web端图形边框。多容器的叠加方式虽然在一定程度上通过形象化的方式改观了图形边框的展示效果，但目前形象化的Web端图形边框的展示效果也存在明显的缺陷。如图1所示，由于不同容器相互覆盖时存在误差，导致花纹容器无法完整覆盖主体容器中一侧的部分边框，如图1中标号为(2)的优惠券的Web端图形边框左侧边缘有明显的细线露出。还可能导致花纹端点与边框无法重合，导致边框出现线条凸起现象，如图1中标号为(2)的优惠券的Web端图形边框右侧边缘弧形花纹端点明显露出。同时，由于主体容器两侧都需要花纹，当花纹不一致时，还容易导致花纹样式出现偏差。上述情况都会明显降低图形边框的展示效果。除此之外，由于图形边框通过多个容器生成，后期需要改变边框样式时，需要同时修改多个容器的参数，如修改边框颜色等，导致降低Web端图形边框的开发效率和维护效率。

在一个示例中，图3是本申请实施例提供的一种图形边框生成方法的流程图，本实施例可适用于利用基准边框图形和根据其划分得到的多个边框图形区域构建Web容器图形边框的情况，该方法可以由图形边框生成装置来执行，该装置可以由软件和/或硬件的方式来实现，并一般可集成在电子设备中。该电子设备可以是支持Web客户端的计算机设备或终端设备等。相应的，如图3所示，该方法包括如下操作：

S110、获取基准边框图形。

其中，基准边框图形可以是用于生成Web端图形边框的边框图形。

在本申请实施例中，在生成Web端图形边框之前，可以首先获取基准边框图形。基准边框图形可以作为Web端图形边框的基础，在基准边框图形的基础上，对其进行图形处理，可以生成最终的Web端图形边框。

可选的，基准边框图形可以利用图片制作工具生成，图片制作工具例如可以是Photoshop等，只要能够生成基准边框图形即可，本申请实施例并不对图片制作工具的具体工具类型进行限定。

需要说明的是，基准边框图形可以是形象化的边框图形，如优惠券样式的边框图形或各种生动形象的聊天对话框图形等，从而达到根据边框图形即可快速确认边框图形内承载内容的效果。也即，基准边框图形的形象程度可以在一定程度上影响Web端图形边框的展示效果。

S120、将所述基准边框图形划分为多个边框图形区域。

其中，边框图形区域可以是对基准边框图形进行划分后得到的各个图形区域，每个边框图形区域可以包括基准边框图形的一部分图形内容。

相应的，在得到基准边框图形之后，可以对基准边框图形进行切割、划分等图形处理操作，从而将基准边框图形划分为多个边框图形区域。

S130、根据所述基准边框图形、各所述边框图形区域和图形容器构建Web容器图形边框。

其中，图形容器可以是用于生成Web端图形边框的容器，Web容器图形边框即为Web端图形边框，可以通过展示形象的图形边框并承载一定的容器内容。

相应的，在得到基准边框图形对应的多个边框图形区域之后，即可根据基准边框图形和对基准边框图形划分得到的各个边框图形区域构建Web容器图形边框。具体的，可以将基准边框图形作为图形容器的边框，得到基准Web容器图形边框，并在基准Web容器图形边框的基础上，利用各个边框图形区域对其进行扩展，例如对基准Web容器图形边框的中间区域进行横向和/或纵向的填充延伸，从而生成最终的Web容器图形边框。Web容器图形边框具有基准边框图形的样式，且通过填充延伸等方式对边框图形进行扩展，不会导致最终生成的Web容器图形边框因端点覆盖误差问题出现图形失真现象。

由此可见，本申请实施例所提供的图形边框生成方法仅需要利用一个容器即可生成对应的Web端图形边框，不需要多个容器的相互叠加处理，可以有效避免因端点覆盖误差问题出现图形失真现象，从而有效提高Web端边框图形的展示效果。同时，一个容器的应用还可以有效降低开发难度，从而提高Web端边框图形的开发效率和可维护性。

本申请实施例通过将获取的基准边框图形划分为多个边框图形区域，以根据基准边框图形和划分得到的各边框图形区域构建Web容器图形边框，解决现有Web容器图形边框生成方法存在的开发效率低、展示效果差及可维护性较低等问题，从而提高Web端边框图形的开发效率、展示效果和可维护性。

在一个示例中，图4是本申请实施例提供的一种图形边框生成方法的流程图，本申请实施例在上述各实施例的技术方案的基础上，进行了优化改进，给出了将所述基准边框图形划分为多个边框图形区域，以及根据所述基准边框图形和各所述边框图形区域构建Web容器图形边框的多种具体可选的实现方式。

如图4所示的一种图形边框生成方法，包括：

S210、获取基准边框图形。

S220、确定所述基准边框图形的水平分割线和竖直分割线。

S230、根据所述水平分割线对所述基准边框图形进行水平分割，并根据所述竖直分割线对所述基准边框图形进行竖直分割，得到各所述边框图形区域。

其中，水平分割线可以是水平方向的分割线，竖直分割线可以是竖直方向的分割线。可选的，水平分割线和竖直分割线的数量可以是至少一个，本申请实施例并不对水平分割线和竖直分割线的数量和分割线的线型进行限定。水平分割也即利用水平分割线对基准边框图形在水平方向进行分割，竖直分割也即利用竖直分割线对基准边框图形在竖直方向进行分割。

在本申请实施例中，当获取基准边框图形之后，可以进一步确定基准边框图形的水平分割线和竖直分割线，以根据确定的水平分割线对基准边框图形进行水平分割，并根据竖直分割线对所述基准边框图形进行竖直分割。根据水平分割线和竖直分割线对基准边框图形进行分割后，即可得到多个边框图形区域。可选的，可以利用水平分割线和竖直分割线对基准边框图形中需要保护的图形区域进行分割，以保证最终生成的Web容器图形边框不会产生图形变形失真的情况。

在本申请的一个可选实施例中，所述确定所述基准边框图形的水平分割线和竖直分割线，可以包括：确定所述基准边框图形在竖直方向的第一固定子边框图形；根据所述第一固定子边框图形确定所述水平分割线；确定所述基准边框图形在水平方向的第二固定子边框图形；根据所述第二固定子边框图形确定所述竖直分割线。

其中，第一固定子边框图形可以是基准边框图形中需要在竖直方向被固定保护的部分边框图形，第二固定子边框图形可以是基准边框图形中需要在水平方向被固定保护的部分边框图形。

相应的，在确定基准边框图形的水平分割线和竖直分割线时，可以对基准边框图形确定水平方向和竖直方向需要被固定保护的第一固定子边框图形和第二固定子边框图形，以根据第一固定子边框图形和第二固定子边框图形进一步确定水平分割线和竖直分割线。

图5是本申请实施例提供的一种利用水平分割线和竖直分割线对基准边框图形进行分割的效果示意图。在一个具体的例子中，如图5所示，以形象模拟优惠券图案的优惠券图形作为基准边框图形。可以理解的是，在Web客户端中，优惠券内容不同，其对应的Web容器图形边框的长度和高度也不同，因此需要根据优惠券的内容长度和高度具体设置优惠券对应的Web容器图形边框的长度和高度，但是始终需要保证Web容器图形边框的优惠券形象不变。具体的，可以将图5中的1、2、3、7、8和9四个区域包括的部分边框图形可以作为第一固定子边框图形，1、4、7、3、6和9四个区域包括的部分边框图形可以作为第二固定子边框图形，因此，需要两条水平分割线和两条竖直分割线分别按照第一固定子边框图形和第二固定子边框图形的分布情况对基准边框图形进行分割，得到1-9共9个边框图形区域。需要说明的是，图5中的虚线框为标识线条，用于对各个区域进行标识或对边框进行标注，并不属于水平分割线或竖直分割线。

由此可见，在图5中，通过两条水平分割线和两条竖直分割线对基准边框图形分割得到的9个边框图形区域中，除了第5个边框图形区域，其他的边框图形区域均包括基准边框图形的部分边框，需要被固定保护或重复利用，防止变形失真。

上述技术方案，通过确定第一固定子边框图形和第二固定子边框图形确定水平分割线和竖直分割线，可以利用确定的分割线将基准边框图形中的边框所在的边框图形区域分割出来，从而实现对基准边框图形中边框的定位分割。

S240、根据各所述边框图形区域确定固定边框图形区域和动态边框图形区域。

其中，固定边框图形区域可以是需要固定保护的边框图形区域。动态边框图形区域可以是能够重复利用的边框图形区域。

相应的，在得到基准边框图形对应的多个边框图形区域之后，可以对各边框图形区域进行分析，以确定其中需要被固定保护的固定边框图形区域，并确定其中需要被重复利用的动态边框图形区域。

S250、根据所述基准边框图形、所述固定边框图形区域、所述动态边框图形区域和所述图形容器构建所述Web容器图形边框。

相应的，在根据各边框图形区域确定了固定边框图形区域和动态边框图形区域之后，即可根据基准边框图形、固定边框图形区域、动态边框图形区域和图形容器共同构建Web容器图形边框。

上述技术方案，通过对各边框图形区域确定固定边框图形区域和动态边框图形区域，可以明确各边框图形区域可以被重复利用的动态边框图形区域，并根据动态边框图形区域和图形边框的扩展需求利用动态边框图形区域进行扩展，并最终结合固定边框图形区域形成最终的Web容器图形边框，使得Web容器图形边框能够根据实际需求进行调整，提高了Web容器图形边框的可扩展性和兼容性。

在本申请的一个可选实施例中，所述根据所述基准边框图形、所述固定边框图形区域、所述动态边框图形区域和所述图形容器构建所述Web容器图形边框，可以包括：将所述基准边框图形作为所述图形容器的基准容器图形边框；根据目标固定边框图形区域的边长像素数量确定所述基准容器图形边框的固定容器边框分割线；根据各所述固定容器边框分割线对所述基准容器图形边框进行分割，得到多个容器边框图形区域；根据所述动态边框图形区域对目标容器边框图形区域进行填充，得到所述Web容器图形边框。

其中，基准容器图形边框可以是图形容器的边框。固定容器边框分割线可以是用于对基准容器图形边框进行分割的水平方向和竖直方向的分割线。容器边框图形区域可以是利用固定容器边框分割线对基准容器图形边框进行分割得到的各个图形区域。目标固定边框图形区域可以是用于确定固定容器边框分割线的固定边框图形区域。边长像素数量可以是目标固定边框图形区域中包括的各边框的长度和高度上的像素数量。目标容器边框图形区域可以是各容器边框图形区域中需要重复利用动态边框图形区域进行填充的容器边框图形区域。

可选的，可以直接将基准边框图形设置为图形容器的边框，也即将基准边框图形作为图形容器的基准容器图形边框。此时，图形容器的边框被基准边框图形所替换，也即，基准边框图形会覆盖图形容器的边框，生成的基准容器图形边框的边框样式、边框宽度和边框颜色等各种边框属于均和基准边框图形一致。同时，还需要设置基准边框图形的背景色与图形容器的背景色一致。为了确保对固定边框图形区域的保护，可以根据各固定边框图形区域的边长像素数量确定基准容器图形边框的固定容器边框分割线，以根据固定容器边框分割线对基准容器图形边框进行分割，得到Web容器图形边框对应的多个容器边框图形区域。相应的，在得到容器边框图形区域后，可以对各容器边框图形区域中的目标容器边框图形区域进行填充，以得到最终的Web容器图形边框。

图6是本申请实施例提供的一种利用固定容器边框分割线获取容器边框图形区域的效果示意图。在一个具体的例子中，如图5和图6所示，在利用水平分割线和竖直分割线对基准边框图形进行分割得到各边框图形区域之后，对各边框图形区域进行分析。示例性的，如果优惠券的图形不需要在高度方向扩展，只需要在水平方向扩展，则可以将1、3、4、6、7和9对应的边框图形区域作为固定边框图形区域，将2、5和8对应的边框图形区域作为动态边框图形区域，并将1、3、7和9对应的固定边框图形区域作为目标固定边框图形区域。在确定目标固定边框图形区域之后，分别对目标固定边框图形区域中包括的各个部分边框长度进行标注。如图5所示，由于基准边框图形为轴对称图形，各个目标固定边框图形区域中的边框长度和高度均相同，长度方向的边长像素数量为19个像素，高度方向的边长像素数量为24个像素。

相应的，在得到目标固定边框图形区域的边长像素数量之后，可以根据目标固定边框图形区域的边长像素数量确定基准容器图形边框的固定容器边框分割线。如图6所示，根据长度19个像素和高度24个像素的基准，确定四条固定容器边框分割线。可以理解的是，四条固定容器边框分割线相对于基准容器图形边框的位置，与图5中的水平分割线和竖直分割线相对于就自边框图形的位置是相同的。如图6所示，确定了固定容器边框分割线之后，即可利用各固定容器边框分割线对基准容器图形边框进行分割，总共可以得到9个容器边框图形区域。在各容器边框图形区域中，中间的(2)、(5)和(8)区域可以作为目标容器边框图形区域，并利用图5中的2、5和8对应的动态边框图形区域对目标容器边框图形区域进行填充，即可得到完整的Web容器图形边框。

上述技术方案，通过对基准容器图形边框进行分割以确定需要填充的目标容器边框图形区域，可以对目标容器边框图形区域实现按需填充扩展。

在本申请的一个可选实施例中，在所述根据所述动态边框图形区域对目标容器边框图形区域进行填充之前，还可以包括：获取所述Web容器图形边框的容器承载内容；根据所述容器承载内容从各所述容器边框图形区域中确定所述目标容器边框图形区域。

其中，容器承载内容也即Web容器图形边框需要承载的内容，可以是文字或图片等，本申请实施例并不对容器承载内容的内容类型进行限定。

在本申请实施例中，若想实现对目标容器边框图形区域按需填充扩展，则需要首先获取Web容器图形边框的容器承载内容，示例性的，如图6所示，假设Web容器图形边框为优惠券图形边框，则该Web容器图形边框的容器承载内容可以为“满35减5”或“每满400打八折”等优惠券内容。可以理解的是，容器承载内容不同，基准容器图形边框中需要扩展填充的目标容器边框图形区域也不同。因此需要根据容器承载内容确定目标容器边框图形区域。

上述示例中，如果只需要对基准容器图形边框在水平方向进行扩展，则可以在各容器边框图形区域中，将(2)、(5)和(8)区域可以作为目标容器边框图形区域。相应的，如果只需要对基准容器图形边框在竖直方向进行扩展，则可以在各容器边框图形区域中，将(4)、(5)和(6)区域可以作为目标容器边框图形区域。以此类推，如果需要对基准容器图形边框在水平方向和竖直方向同时进行扩展，则可以在各容器边框图形区域中，将(2)、(4)、(5)、(6)和(8)区域可以作为目标容器边框图形区域。

另外还需说明的是，在图5和图6中，基准容器图形边框的上边框和下边框为直线，因此可以直接利用动态边框图形区域对目标容器边框图形区域进行填充。如果基准容器图形边框的上边框和下边框不是直线，则需要包括上边框和下边框可以为重复利用的基准边框单元。所谓基准边框单元也即各基准边框单元相连接时，可以实现连续连接。示例性的，如果基准容器图形边框的上边框和下边框为波浪线，则单个边框的两个端点需要同时为波峰点或波谷点，使得两个单个边框相连接时，可以形成一条完整的波浪线。

上述技术方案，通过容器承载内容可以确定基准容器图形边框需要扩展的方向，从而根据基准容器图形边框需要扩展的方向准确确定目标容器边框图形区域。

在本申请的一个可选实施例中，所述根据所述动态边框图形区域对目标容器边框图形区域进行填充，可以包括：根据所述容器承载内容和所述基准容器图形边框确定所述目标容器边框图形区域的水平填充区域和/或竖直填充区域；根据所述目标容器边框图形区域的水平填充区域和/或竖直填充区域确定所述动态边框图形区域的图形填充数量；根据所述图形填充数量在所述目标容器边框图形区域的水平填充区域和/或竖直填充区域填充所述动态边框图形区域。

其中，水平填充区域可以是目标容器边框图形区域在水平方向需要扩展的区域，竖直填充区域可以是目标容器边框图形区域在竖直方向需要扩展的区域。图形填充数量可以是动态边框图形区域需要被重复利用的数量。

可选的，可以根据容器承载内容和基准容器图形边框确定目标容器边框图形区域的水平填充区域和/或竖直填充区域，进一步根据水平填充区域和/或竖直填充区域的边长与目标容器边框图形区域的边长之间的倍数关系确定动态边框图形区域的图形填充数量，从而将图形填充数量对应的动态边框图形区域对水平填充区域和/或竖直填充区域进行填充。

示例性的，如图5和图6所示，假设容器承载内容为“满35减5”，其对应的长度为100个像素，高度为20个像素，基准容器图形边框的第5个容器边框图形区域对应的长度为50个像素，高度为40个像素，则可以仅对基准容器图形边框进行水平方向的扩展，因此可以将(2)、(5)和(8)区域可以作为目标容器边框图形区域，并确定目标容器边框图形区域的水平填充区域的长度为100个像素，则动态边框图形区域在水平填充区域的图形填充数量为2。相应的，可以在目标容器边框图形区域的水平方向上填充2组2、5和8对应的动态边框图形区域。

上述技术方案，通过确定目标容器边框图形区域的水平填充区域和/或竖直填充区域，并确定动态边框图形区域的图形填充数量，可以精确确定目标容器边框图形区域的扩展方式。

在本申请的一个可选实施例中，所述根据所述图形填充数量在所述待填充容器边框图形区域的水平填充区域和/或竖直填充区域填充所述动态边框图形区域，可以包括：在确定所述图形填充数量为整数的情况下，根据各所述动态边框图形区域填充所述水平填充区域和/或所述竖直填充区域；在确定所述图形填充数量为非整数的情况下，根据所述图形填充数量确定目标图形填充数量和剩余填充区域；对所述水平填充区域和/或所述竖直填充区域填充所述目标图形填充数量的动态边框图形区域；对所述剩余填充区域进行图形拉伸处理或留白处理。

其中，目标图形填充数量可以是在确定图形填充数量为非整数的情况下，对图形填充数量进行向下取整处理得到的数量。剩余填充区域则为水平填充区域和/或竖直填充区域刨除目标图形填充数量的动态边框图形区域后剩余的填充区域。

可以理解的是，水平填充区域和/或竖直填充区域的边长与目标容器边框图形区域的边长之间的倍数可能是整数，也可能是非整数。相应的，如果图形填充数量为整数，则可以直接在水平填充区域和/或竖直填充区域重复填充图形填充数量的动态边框图形区域。如果图形填充数量为非整数，则可以根据图形填充数量确定目标图形填充数量和剩余填充区域，并直接利用目标图形填充数量的动态边框图形区域对水平填充区域和/或竖直填充区域后，对剩余填充区域进行图形拉伸处理或留白处理。

示例性的，如图5和图6所示，假设容器承载内容为“满35减5”，其对应的长度为130个像素，高度为20个像素，基准容器图形边框的第5个容器边框图形区域对应的长度为50个像素，高度为40个像素，则可以仅对基准容器图形边框进行水平方向的扩展，因此可以将(2)、(5)和(8)区域可以作为目标容器边框图形区域，并确定目标容器边框图形区域的水平填充区域的长度为130个像素，则动态边框图形区域在水平填充区域的图形填充数量为2.6。相应的，目标图形填充数量为2，并在水平填充区域填充2组2、5和8对应的动态边框图形区域之后，对剩余填充区域进行图形拉伸处理或留白处理。例如，根据最后一组动态边框图形区域进行图形拉伸处理，直至拉伸至碎片填充区域的边缘。或者，由于基准容器图形边框的背景色和图形容器的背景色一致，还可以直接对剩余填充区域进行留白处理，同样可以在视觉上产生区域扩展的效果。

上述技术方案，通过根据图形填充数量的不同类型对水平填充区域和/或竖直填充区域进行填充，可以进一步精确确定目标容器边框图形区域的扩展方式。

需要说明的是，在对目标容器边框图形区域进行填充时，由于动态边框图形区域与目标容器边框图形区域实际为包括相同图形边框内容的区域，因此，也可以直接利用目标容器边框图形区域作为动态边框图形区域自行填充，得到完整的Web容器图形边框。

在本申请的一个可选实施例中，图形边框生成方法还可以包括：根据所述固定容器边框分割线确定容器承载内容分割线；根据所述容器承载内容分割线从所述Web容器图形边框中分割容器承载内容区域。

其中，容器承载内容分割线可以是用于确定容器承载内容边界的分割线。容器承载内容区域可以是由各容器承载内容分割线构成的，用于承载容器承载内容的区域。

在本申请实施例中，在根据动态边框图形区域对目标容器边框图形区域进行填充之前，还可以首先根据固定容器边框分割线确定容器承载内容分割线。容器承载内容分割线与固定容器边框分割线一一对应。可选的，为了避免容器承载内容与Web容器图形边框重叠，可以将固定容器边框分割线相对于边框的尺寸，比固定容器边框分割线相对于边框的尺寸设置地较大一些。示例性的，当某一固定容器边框分割线相对于边框的尺寸为19像素时，对应该固定容器边框分割线的容器承载内容分割线相对于边框的尺寸可以设置为25像素。最终各个容器承载内容分割线构成的封闭区域即可作为从Web容器图形边框中分割得到的容器承载内容区域。

图7是本申请实施例提供的一种确定容器承载内容区域的效果示意图，如图7所示，中间虚线矩形框区域即为根据各容器承载内容分割线构成的容器承载内容区域。对Web容器图形边框设置容器承载内容区域可以有效避免容器承载内容与Web容器图形边框重叠，从而提高Web容器图形边框的展示效果。

需要说明的是，考虑到容器承载内容区域的限制，因此在确定目标容器边框图形区域的水平填充区域和/或竖直填充区域时，可以适当考虑容器承载内容区域的限制问题，对图形填充数量进行适当增大，以避免水平填充区域和/或竖直填充区域无法分割出容器承载内容区域。

上述技术方案，通过根据基准边框图形、固定边框图形区域、动态边框图形区域和图形容器构建所述容器图形边框，可以提高Web端边框图形的开发效率、展示效果和可维护性。

在一个示例中，图8是本申请实施例提供的一种图形边框生成装置的结构图，本申请实施例可适用于利用基准边框图形和根据其划分得到的多个边框图形区域构建Web容器图形边框的情况，该装置通过软件和/或硬件实现，并具体配置于电子设备中。该电子设备可以是支持Web客户端的计算机设备或终端设备等。

如图8所示的一种图形边框生成装置300，包括：基准边框图形获取模块310、边框图形区域划分模块320和Web容器图形边框构建模块330。其中，

基准边框图形获取模块310，用于获取基准边框图形；

边框图形区域划分模块320，用于将所述基准边框图形划分为多个边框图形区域；

Web容器图形边框构建模块330，用于根据所述基准边框图形、各所述边框图形区域和图形容器构建Web容器图形边框Web。

本申请实施例通过将获取的基准边框图形划分为多个边框图形区域，以根据基准边框图形和划分得到的各边框图形区域构建Web容器图形边框，解决现有Web容器图形边框生成方法存在的开发效率低、展示效果差及可维护性较低等问题，从而提高Web端边框图形的开发效率、展示效果和可维护性。

可选的，边框图形区域划分模块320具体用于：确定所述基准边框图形的水平分割线和竖直分割线；根据所述水平分割线对所述基准边框图形进行水平分割，并根据所述竖直分割线对所述基准边框图形进行竖直分割，得到各所述边框图形区域。

可选的，边框图形区域划分模块320具体用于：确定所述基准边框图形在竖直方向的第一固定子边框图形；根据所述第一固定子边框图形确定所述水平分割线；确定所述基准边框图形在水平方向的第二固定子边框图形；根据所述第二固定子边框图形确定所述竖直分割线。

可选的，Web容器图形边框构建模块330具体用于：根据各所述边框图形区域确定固定边框图形区域和动态边框图形区域；根据所述基准边框图形、所述固定边框图形区域、所述动态边框图形区域和所述图形容器构建所述Web容器图形边框。

可选的，Web容器图形边框构建模块330具体用于：将所述基准边框图形作为所述图形容器的基准容器图形边框；根据目标固定边框图形区域的边长像素数量确定所述基准容器图形边框的固定容器边框分割线；根据各所述固定容器边框分割线对所述基准容器图形边框进行分割，得到多个容器边框图形区域；根据所述动态边框图形区域对目标容器边框图形区域进行填充，得到所述Web容器图形边框。

可选的，Web容器图形边框构建模块330还用于：获取所述Web容器图形边框的容器承载内容；根据所述容器承载内容从各所述容器边框图形区域中确定所述目标容器边框图形区域。

可选的，Web容器图形边框构建模块330具体用于：根据所述容器承载内容和所述基准容器图形边框确定所述目标容器边框图形区域的水平填充区域和/或竖直填充区域；根据所述目标容器边框图形区域的水平填充区域和/或竖直填充区域确定所述动态边框图形区域的图形填充数量；根据所述图形填充数量在所述目标容器边框图形区域的水平填充区域和/或竖直填充区域填充所述动态边框图形区域。

可选的，Web容器图形边框构建模块330具体用于：在确定所述图形填充数量为整数的情况下，根据各所述动态边框图形区域填充所述水平填充区域和/或所述竖直填充区域；在确定所述图形填充数量为非整数的情况下，根据所述图形填充数量确定目标图形填充数量和剩余填充区域；对所述水平填充区域和/或所述竖直填充区域填充所述目标图形填充数量的动态边框图形区域；对所述剩余填充区域进行图形拉伸处理或留白处理。

可选的，Web容器图形边框构建模块330还用于：根据所述固定容器边框分割线确定容器承载内容分割线；根据所述容器承载内容分割线从所述Web容器图形边框中分割容器承载内容区域。

上述图形边框生成装置可执行本申请任意实施例所提供的图形边框生成方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本申请任意实施例提供的图形边框生成方法。

由于上述所介绍的图形边框生成装置为可以执行本申请实施例中的图形边框生成方法的装置，故而基于本申请实施例中所介绍的图形边框生成方法，本领域所属技术人员能够了解本实施例的图形边框生成装置的具体实施方式以及其各种变化形式，所以在此对于该图形边框生成装置如何实现本申请实施例中的图形边框生成方法不再详细介绍。只要本领域所属技术人员实施本申请实施例中图形边框生成方法所采用的装置，都属于本申请所欲保护的范围。

在一个示例中，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

图9示出了可以用来实施本公开的实施例的示例电子设备400的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图9所示，设备400包括计算单元401，其可以根据存储在只读存储器(ROM)402中的计算机程序或者从存储单元408加载到随机访问存储器(RAM)403中的计算机程序，来执行各种适当的动作和处理。在RAM 403中，还可存储设备400操作所需的各种程序和数据。计算单元401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

设备400中的多个部件连接至I/O接口405，包括：输入单元406，例如键盘、鼠标等；输出单元407，例如各种类型的显示器、扬声器等；存储单元408，例如磁盘、光盘等；以及通信单元409，例如网卡、调制解调器、无线通信收发机等。通信单元409允许设备400通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元401可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元401的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元401执行上文所描述的各个方法和处理，例如图形边框生成方法。例如，在一些实施例中，图形边框生成方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元408。在一些实施例中，计算机程序的部分或者全部可以经由ROM 402和/或通信单元409而被载入和/或安装到设备400上。当计算机程序加载到RAM 403并由计算单元401执行时，可以执行上文描述的图形边框生成方法的一个或多个步骤。备选地，在其他实施例中，计算单元401可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行图形边框生成方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、区块链网络和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务中，存在的管理难度大，业务扩展性弱的缺陷。

本申请实施例通过将获取的基准边框图形划分为多个边框图形区域，以根据基准边框图形和划分得到的各边框图形区域构建Web容器图形边框，解决现有Web容器图形边框生成方法存在的开发效率低、展示效果差及可维护性较低等问题，从而提高Web端边框图形的开发效率、展示效果和可维护性。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (21)

1.一种图形边框生成方法，包括：

获取基准边框图形；

将所述基准边框图形划分为多个边框图形区域；

根据所述基准边框图形、各所述边框图形区域和图形容器构建万维网Web容器图形边框。

2.根据权利要求1所述的方法，其中，所述将所述基准边框图形划分为多个边框图形区域，包括：

确定所述基准边框图形的水平分割线和竖直分割线；

根据所述水平分割线对所述基准边框图形进行水平分割，并根据所述竖直分割线对所述基准边框图形进行竖直分割，得到各所述边框图形区域。

3.根据权利要求2所述的方法，其中，所述确定所述基准边框图形的水平分割线和竖直分割线，包括：

确定所述基准边框图形在竖直方向的第一固定子边框图形；

根据所述第一固定子边框图形确定所述水平分割线；

确定所述基准边框图形在水平方向的第二固定子边框图形；

根据所述第二固定子边框图形确定所述竖直分割线。

4.根据权利要求1所述的方法，其中，所述根据所述基准边框图形、各所述边框图形区域和图形容器构建万维网Web容器图形边框，包括：

根据各所述边框图形区域确定固定边框图形区域和动态边框图形区域；

根据所述基准边框图形、所述固定边框图形区域、所述动态边框图形区域和所述图形容器构建所述Web容器图形边框。

5.根据权利要求4所述的方法，其中，所述根据所述基准边框图形、所述固定边框图形区域、所述动态边框图形区域和所述图形容器构建所述Web容器图形边框，包括：

将所述基准边框图形作为所述图形容器的基准容器图形边框；

根据目标固定边框图形区域的边长像素数量确定所述基准容器图形边框的固定容器边框分割线；

根据各所述固定容器边框分割线对所述基准容器图形边框进行分割，得到多个容器边框图形区域；

根据所述动态边框图形区域对目标容器边框图形区域进行填充，得到所述Web容器图形边框。

6.根据权利要求5所述的方法，还包括：

获取所述Web容器图形边框的容器承载内容；

根据所述容器承载内容从各所述容器边框图形区域中确定所述目标容器边框图形区域。

7.根据权利要求6所述的方法，其中，所述根据所述动态边框图形区域对目标容器边框图形区域进行填充，包括：

根据所述容器承载内容和所述基准容器图形边框确定所述目标容器边框图形区域的水平填充区域和/或竖直填充区域；

根据所述目标容器边框图形区域的水平填充区域和/或竖直填充区域确定所述动态边框图形区域的图形填充数量；

根据所述图形填充数量在所述目标容器边框图形区域的水平填充区域和/或竖直填充区域填充所述动态边框图形区域。

8.根据权利要求7所述的方法，其中，所述根据所述图形填充数量在所述目标容器边框图形区域的水平填充区域和/或竖直填充区域填充所述动态边框图形区域，包括：

在确定所述图形填充数量为整数的情况下，根据各所述动态边框图形区域填充所述水平填充区域和/或所述竖直填充区域；

在确定所述图形填充数量为非整数的情况下，根据所述图形填充数量确定目标图形填充数量和剩余填充区域；

对所述水平填充区域和/或所述竖直填充区域填充所述目标图形填充数量的动态边框图形区域；

对所述剩余填充区域进行图形拉伸处理或留白处理。

9.根据权利要求5所述的方法，还包括：

根据所述固定容器边框分割线确定容器承载内容分割线；

根据所述容器承载内容分割线从所述Web容器图形边框中分割容器承载内容区域。

10.一种图形边框生成装置，包括：

基准边框图形获取模块，用于获取基准边框图形；

边框图形区域划分模块，用于将所述基准边框图形划分为多个边框图形区域；

Web容器图形边框构建模块，用于根据所述基准边框图形、各所述边框图形区域和图形容器构建Web容器图形边框Web。

11.根据权利要求10所述的装置，其中，所述边框图形区域划分模块具体用于：

确定所述基准边框图形的水平分割线和竖直分割线；

根据所述水平分割线对所述基准边框图形进行水平分割，并根据所述竖直分割线对所述基准边框图形进行竖直分割，得到各所述边框图形区域。

12.根据权利要求11所述的装置，其中，所述边框图形区域划分模块具体用于：

确定所述基准边框图形在竖直方向的第一固定子边框图形；

根据所述第一固定子边框图形确定所述水平分割线；

确定所述基准边框图形在水平方向的第二固定子边框图形；

根据所述第二固定子边框图形确定所述竖直分割线。

13.根据权利要求10所述的装置，其中，所述Web容器图形边框构建模块具体用于：

根据各所述边框图形区域确定固定边框图形区域和动态边框图形区域；

根据所述基准边框图形、所述固定边框图形区域、所述动态边框图形区域和所述图形容器构建所述Web容器图形边框。

14.根据权利要求13所述的装置，其中，所述Web容器图形边框构建模块具体用于：

将所述基准边框图形作为所述图形容器的基准容器图形边框；

根据目标固定边框图形区域的边长像素数量确定所述基准容器图形边框的固定容器边框分割线；

根据各所述固定容器边框分割线对所述基准容器图形边框进行分割，得到多个容器边框图形区域；

根据所述动态边框图形区域对目标容器边框图形区域进行填充，得到所述Web容器图形边框。

15.根据权利要求14所述的装置，其中，所述Web容器图形边框构建模块还用于：

获取所述Web容器图形边框的容器承载内容；

根据所述容器承载内容从各所述容器边框图形区域中确定所述目标容器边框图形区域。

16.根据权利要求15所述的装置，其中，所述Web容器图形边框构建模块具体用于：

根据所述容器承载内容和所述基准容器图形边框确定所述目标容器边框图形区域的水平填充区域和/或竖直填充区域；

根据所述目标容器边框图形区域的水平填充区域和/或竖直填充区域确定所述动态边框图形区域的图形填充数量；

根据所述图形填充数量在所述目标容器边框图形区域的水平填充区域和/或竖直填充区域填充所述动态边框图形区域。

17.根据权利要求16所述的装置，其中，所述Web容器图形边框构建模块具体用于：

在确定所述图形填充数量为整数的情况下，根据各所述动态边框图形区域填充所述水平填充区域和/或所述竖直填充区域；

在确定所述图形填充数量为非整数的情况下，根据所述图形填充数量确定目标图形填充数量和剩余填充区域；

对所述水平填充区域和/或所述竖直填充区域填充所述目标图形填充数量的动态边框图形区域；

对所述剩余填充区域进行图形拉伸处理或留白处理。

18.根据权利要求14所述的装置，其中，所述Web容器图形边框构建模块还用于：

根据所述固定容器边框分割线确定容器承载内容分割线；

根据所述容器承载内容分割线从所述Web容器图形边框中分割容器承载内容区域。

19.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-9中任一项所述的图形边框生成方法。

20.一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使计算机执行权利要求1-9中任一项所述的图形边框生成方法。

21.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1-9中任一项所述的图形边框生成方法。

Images