CN114677382A - 界面显示的方法及装置 - Google Patents

Abstract

本发明公开了一种界面显示的方法及装置。其中，通过终端设备的屏幕提供图形用户界面，该方法包括：获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，第一面积由第一宽度和第一高度组成，第二面积由第二宽度和第二高度组成；当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域，目标区域用于表征图形用户界面显示于屏幕的中心位置时，图形用户界面的边缘至可视区域的边缘的区域；确定每个待填充区域对应的填充图像；将填充图像和图形用户界面进行组合，生成目标图像；通过屏幕显示目标图像。本发明解决了现有的界面显示的方法的视觉效果差，不适用于通屏界面的技术问题。

Description

界面显示的方法及装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种界面显示的方法及装置。

背景技术

超宽屏手机的出现，导致现有设计的图形用户界面的尺寸无法满足所有机型。如图1、图2所示，目前应对超宽屏的界面填充适配方案是在图形用户界面的底部填充一张可拉伸或者可循环复制的图片。但是，上述的超宽屏背景适配方案在视觉表现方面较差，切割感非常强，不适用于通屏弹窗界面。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种界面显示的方法及装置，以至少解决现有的界面显示的方法的视觉效果差，不适用于通屏界面的技术问题。

根据本发明其中一实施例，提供了一种界面显示的方法，通过终端设备的屏幕提供图形用户界面，该方法包括：获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，其中，第一面积由第一宽度和第一高度组成，第二面积由第二宽度和第二高度组成；当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域，其中，目标区域用于表征图形用户界面显示于屏幕的中心位置时，图形用户界面的边缘至可视区域的边缘的区域；确定每个待填充区域对应的填充图像；将填充图像和图形用户界面进行组合，生成目标图像；通过屏幕显示目标图像。

可选地，对屏幕的目标区域进行切割，得到多个待填充区域包括：当第一高度大于第二高度时，在垂直方向上对目标区域进行切割，得到上方区域和下方区域；当第一宽度大于第二宽度时，在水平方向上对目标区域进行切割，得到左侧区域和右侧区域。

可选地，确定每个待填充区域对应的填充图像包括：获取每个待填充区域相对于图形用户界面的相对位置；基于相对位置，确定填充图像，其中，填充图像包括如下至少之一：预设颜色的色块和预设元素。

可选地，基于相对位置，确定填充图像包括：在相对位置为第一预设位置的情况下，确定填充图像包括预设颜色的色块；在相对位置为第二预设位置的情况下，确定填充图像包括预设颜色的色块，并基于相应的待填充区域的第三高度和预设元素的第四高度的比较结果，确定填充图像是否包括预设元素。

可选地，基于相应的待填充区域的第三高度和预设元素的第四高度的比较结果，确定填充图像是否包括预设元素包括：在比较结果为第三高度大于第四高度的情况下，确定填充图像包括预设元素；在比较结果为第三高度小于或等于第四高度的情况下，确定填充图像不包括预设元素。

可选地，预设元素的显示区域与图形用户界面存在部分重叠，且，预设元素的图层位于预设颜色的色块的图层的上方。

可选地，将填充图像和图形用户界面进行组合，生成目标图像包括：对填充图像进行拉伸，得到拉伸后的图像，其中，拉伸后的图像的面积与对应的待填充区域的面积相同；基于每个待填充区域相对于图形用户界面的相对位置，确定拉伸后的图像和图形用户界面分别对应的目标图层；按照目标图层将拉伸后的图像与图形用户界面进行叠加，生成目标图像。

根据本发明其中一实施例，还提供了一种界面显示的装置，通过终端设备的屏幕提供图形用户界面，该装置包括：获取模块，用于获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，其中，第一面积由第一宽度和第一高度组成，第二面积由第二宽度和第二高度组成；切割模块，用于当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域，其中，目标区域用于表征图形用户界面显示于屏幕的中心位置时，图形用户界面的边缘至可视区域的边缘的区域；确定模块，用于确定每个待填充区域对应的填充图像；组合模块，用于将填充图像和图形用户界面进行组合，生成目标图像；显示模块，用于通过屏幕显示目标图像。

可选地，切割模块还用于当第一高度大于第二高度时，在垂直方向上对目标区域进行切割，得到上方区域和下方区域；当第一宽度大于第二宽度时，在水平方向上对目标区域进行切割，得到左侧区域和右侧区域。

可选地，确定模块包括：位置获取单元，用于获取每个待填充区域相对于图形用户界面的相对位置；图像确定单元，用于基于相对位置，确定填充图像，其中，填充图像包括如下至少之一：预设颜色的色块和预设元素。

可选地，图像确定单元还用于在相对位置为第一预设位置的情况下，确定填充图像包括预设颜色的色块；在相对位置为第二预设位置的情况下，确定填充图像包括预设颜色的色块，并基于相应的待填充区域的第三高度和预设元素的第四高度的比较结果，确定填充图像是否包括预设元素。

可选地，图像确定单元还用于：在比较结果为第三高度大于第四高度的情况下，确定填充图像包括预设元素；在比较结果为第三高度小于或等于第四高度的情况下，确定填充图像不包括预设元素。

可选地，预设元素的显示区域与图形用户界面存在部分重叠，且，预设元素的图层位于预设颜色的色块的图层的上方。

可选地，组合模块包括：拉伸单元，用于对填充图像进行拉伸，得到拉伸后的图像，其中，拉伸后的图像的面积与对应的待填充区域的面积相同；图层确定单元，用于基于每个待填充区域相对于图形用户界面的相对位置，确定拉伸后的图像和图形用户界面分别对应的目标图层；叠加单元，用于按照目标图层将拉伸后的图像与图形用户界面进行叠加，生成目标图像。

根据本发明其中一实施例，还提供了一种非易失性存储介质，非易失性存储介质中存储有计算机程序，其中，计算机程序被设置为运行时执行上述的界面显示的方法。

根据本发明其中一实施例，还提供了一种处理器，处理器用于运行程序，其中，程序被设置为运行时执行上述的界面显示的方法。

根据本发明其中一实施例，还提供了一种电子装置，包括存储器和处理器，存储器中存储有计算机程序，处理器被设置为运行计算机程序以执行上述的界面显示的方法。

在本发明实施例中，采用获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积；当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域；确定每个待填充区域对应的填充图像；将填充图像和图形用户界面进行组合，生成目标图像；通过屏幕显示目标图像，达到了对屏幕可视区域进行填充的目的，容易注意到的是，可以将图形用户界面的边缘至可视区域边缘的区域切割成多个待填充区域，并在不同待填充区域内填充相应的图像，使得不同待填充区域内填充的图像可以不同，从而实现了提高显示的图形用户界面的视觉效果，提升用户体验感和好感度的技术效果，进而解决了现有的界面显示的方法的视觉效果差，不适用于通屏界面的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是现有技术的一种界面显示的方法的界面示意图；

图2是现有技术的另一种界面显示的方法的界面示意图；

图3是本发明实施例的一种界面显示的方法的移动终端的硬件结构框图；

图4是根据本发明其中一实施例的界面显示的方法的流程图；

图5是根据本发明实施例的一种可选的对图形用户界面周围的区域进行切割的界面效果图；

图6所示为根据本发明实施例的一种可选的左右填充的效果图；

图7所示为根据本发明实施例的一种可选的上下填充的效果图；

图8所示为根据本发明实施例的一种可选的装饰元素的效果图；

图9所示为根据本发明实施例的一种可选的对填充图像进行拉伸填充的效果图；

图10是根据本发明其中一实施例的图像填充装置的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本发明其中一实施例，提供了一种界面显示的方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

该方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。以运行在移动终端上为例，该移动终端可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile Internet Devices，简称为MID)、PAD、游戏机等终端设备。图3是本发明实施例的一种界面显示的方法的移动终端的硬件结构框图。如图3所示，移动终端可以包括一个或多个(图3中仅示出一个)处理器302(处理器302可以包括但不限于中央处理器(CPU)、图形处理器(GPU)、数字信号处理(DSP)芯片、微处理器(MCU)、可编程逻辑器件(FPGA)、神经网络处理器(NPU)、张量处理器(TPU)、人工智能(AI)类型处理器等的处理装置)和用于存储数据的存储器304。可选地，上述移动终端还可以包括用于通信功能的传输设备306、输入输出设备308以及显示设备310。本领域普通技术人员可以理解，图3所示的结构仅为示意，其并不对上述移动终端的结构造成限定。例如，移动终端还可包括比图3中所示更多或者更少的组件，或者具有与图3所示不同的配置。

存储器304可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本发明实施例中的界面显示的方法对应的计算机程序，处理器302通过运行存储在存储器304内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的界面显示的方法。存储器304可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器304可进一步包括相对于处理器302远程设置的存储器，这些远程存储器可以通过网络连接至移动终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输设备306用于经由一个网络接收或者发送数据。上述的网络具体实例可包括移动终端的通信供应商提供的无线网络。在一个实例中，传输设备306包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备306可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

输入输出设备308中的输入可以来自多个人体学接口设备(Human InterfaceDevice，简称为HID)。例如：键盘和鼠标、游戏手柄、其他专用游戏控制器(如：方向盘、鱼竿、跳舞毯、遥控器等)。部分人体学接口设备除了提供输入功能之外，还可以提供输出功能，例如：游戏手柄的力反馈与震动、控制器的音频输出等。

显示设备310可以例如平视显示器(HUD)、触摸屏式的液晶显示器(LCD)和触摸显示器(也被称为“触摸屏”或“触摸显示屏”)。该液晶显示器可使得用户能够与移动终端的用户界面进行交互。在一些实施例中，上述移动终端具有图形用户界面(GUI)，用户可以通过触摸触敏表面上的手指接触和/或手势来与GUI进行人机交互，此处的人机交互功能可选的包括如下交互：创建网页、绘图、文字处理、制作电子文档、游戏、视频会议、即时通信、收发电子邮件、通话界面、播放数字视频、播放数字音乐和/或网络浏览等、用于执行上述人机交互功能的可执行指令被配置/存储在一个或多个处理器可执行的计算机程序产品或可读存储介质中。

在本公开其中一种实施例中的界面显示的方法可以运行于本地终端设备或者是服务器。当界面显示的方法运行于服务器时，该方法则可以基于云交互系统来实现与执行，其中，云交互系统包括服务器和客户端设备。

在一可选的实施方式中，云交互系统下可以运行各种云应用，例如：云游戏。以云游戏为例，云游戏是指以云计算为基础的游戏方式。在云游戏的运行模式下，游戏程序的运行主体和游戏画面呈现主体是分离的，界面显示的方法的储存与运行是在云游戏服务器上完成的，客户端设备的作用用于数据的接收、发送以及游戏画面的呈现，举例而言，客户端设备可以是靠近用户侧的具有数据传输功能的显示设备，如，移动终端、电视机、计算机、掌上电脑等；但是进行信息处理的为云端的云游戏服务器。在进行游戏时，玩家操作客户端设备向云游戏服务器发送操作指令，云游戏服务器根据操作指令运行游戏，将游戏画面等数据进行编码压缩，通过网络返回客户端设备，最后，通过客户端设备进行解码并输出游戏画面。

在一可选的实施方式中，以游戏为例，本地终端设备存储有游戏程序并用于呈现游戏画面。本地终端设备用于通过图形用户界面与玩家进行交互，即，常规的通过电子设备下载安装游戏程序并运行。该本地终端设备将图形用户界面提供给玩家的方式可以包括多种，例如，可以渲染显示在终端的显示屏上，或者，通过全息投影提供给玩家。举例而言，本地终端设备可以包括显示屏和处理器，该显示屏用于呈现图形用户界面，该图形用户界面包括游戏画面，该处理器用于运行该游戏、生成图形用户界面以及控制图形用户界面在显示屏上的显示。

在一种可能的实施方式中，本发明实施例提供了一种界面显示的方法，通过终端设备提供图形用户界面，其中，终端设备可以是前述提到的本地终端设备，也可以是前述提到的云交互系统中的客户端设备。图4是根据本发明其中一实施例的界面显示的方法的流程图，通过终端设备的屏幕提供图形用户界面，如图4所示，该方法包括如下步骤：

步骤S402，获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，其中，第一面积由第一宽度和第一高度组成，第二面积由第二宽度和第二高度组成。

上述步骤中的屏幕可以是上述终端设备的屏幕，该屏幕可以是普通尺寸的屏幕，也可以是超宽屏屏幕；上述步骤中的第一面积可以是终端设备的屏幕所能显示出画面的最大面积，包括宽和高，该画面显示在屏幕的可视化区域中，因此，可以是可视化区域的面积；上述步骤中的第二面积可以是需要显示的图形用户界面的最大面积，同样包括宽和高。

在一种可选的实施例中，对于不同的终端设备，第一面积的大小不同，但是第一面积是已知参数，可以直接查询终端设备的具体参数来确定。在游戏开发完成之后，图形用户界面的第二面积同样是已知参数，可以直接查询游戏开发信息来确定。

步骤S404，当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域，其中，目标区域用于表征图形用户界面显示于屏幕的中心位置时，图形用户界面的边缘至可视区域的边缘的区域。

上述步骤中的目标区域，可以是相比于图形用户界面，屏幕中多余的且与图形用户界面相邻的区域，在图形用户界面显示在屏幕的中心位置时，目标区域可以包括但不限于图形用户界面的上、下、左、右、左上、左下、右上和右下中的一个或多个方向的区域。

在一种可选的实施例中，如图5所示，当屏幕可视区域(外侧方框)的宽和高均超过图形用户界面(中心方框)的宽和高时，可以将图形用户界面边缘之外一周的区域切割为8个待填充区域，分别用数字1-8表示。

在另一种可选的实施例中，如图6所示，当屏幕可视区域(外侧方框)的宽超过图形用户界面(中心方框)的宽时，可以将屏幕超出图形用户界面边缘之外的左右两侧区域切割为左右两个待填充区域。

在又一种可选的实施例中，如图7所示，当屏幕可视区域(外侧方框)的高超过图形用户界面(中心方框)的高时，可以将屏幕超出图形用户界面边缘之外的上下两侧区域切割为上下两个待填充区域。

步骤S406，确定每个待填充区域对应的填充图像。

上述步骤中的填充图像包括但不限于填充元素和装饰元素中的一个或多个，不同待填充区域对应的填充图像可以均是填充元素，也可以均是装饰元素，还可以是填充元素和装饰元素的任意组合。其中，填充元素可以是纯色的色块，数量不限制，也可以是回型色块，中间往四周有50px的渐变；装饰元素可以是带有装饰性的元素，例如，半透镂空元素，如图8所示，也可以是带有标志性的元素，例如，可以是游戏的logo，也可以是公司的logo。并且，填充图像可以根据用户的需求进行更改。

需要说明的是，为了提高得填充区域的视觉表现方式，可以针对不同游戏，甚至不同的图形用户界面，预先设定不同的填充图像集合，从而可以基于当前需要显示的图形用户界面，确定相应的填充图像集合，进而从该填充图像集合中筛选出每个待填充区域对应的填充图像。

在一种可选的实施例中，如图5所示，对于待填充区域1、2、3、5、6和7，相应的填充图像可以是填充元素，并且不同待填充区域对应的填充元素的颜色可以不同，例如，待填充区域1、2和3对应的填充元素的颜色为黑色，待填充区域5、6和7对应的填充原色的颜色为红色，但不仅限于此；对于待填充区域4和8，相应的填充图像可以是两个填充元素和装饰元素，并且不同待填充区域对应的填充元素的颜色可以不同，装饰元素也可以不同，例如，两个填充元素的颜色可以分别为黑色和红色，并且两个填充元素之间存在过度区域。

步骤S408，将填充图像和图形用户界面进行组合，生成目标图像。

上述步骤中的目标图像为将填充图像填充至对应的待填充区域后，最终展示在图形用户界面中的画面。

通过一定的填充方式将填充图像填充至对应的待填充区域，也即，按照不同填充图像对应的图层关系，将填充图像填充至响应的图层中，并通过将所有图层进行叠加的方式生成目标图像。填充方式可以根据需求或者屏幕的大小进行更改，包括但不限于：填充元素向上和向下填满屏幕、装饰元素向左和向右填满屏幕、上下填充的图层位于左右装饰的图层下方等。

在一种可选的实施例中，如图5所示，当屏幕的宽和高均超过图形用户界面的宽和高时，对于待填充区域1、2、3、5、6、7可以直接将填充元素拉伸铺满整个待填充区域，对于待填充区域4和8，可以将装饰元素向画面内叠进50px，并反向填满宽度，填充元素拉伸铺满整个待填充区域。

在另一种可选的实施例中，如图6所示，当屏幕的宽超过图形用户界面的宽时，可以将装饰元素向画面内叠进50px，并反向填满宽度，填充元素上下拉伸铺满整个待填充区域。

在又一种可选的实施例中，如图7所示，当屏幕的高超过图形用户界面的高时，可以将填充元素左右拉伸填满屏幕的高度。

步骤S410，通过屏幕显示目标图像。

在一种可选的实施例中，通过屏幕将填充了填充图像的目标图像进行显示，从而用户在游戏过程中可以看到填充效果。

在本发明实施例中，采用获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积；当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域；确定每个待填充区域对应的填充图像；将填充图像和图形用户界面进行组合，生成目标图像；通过屏幕显示目标图像，容易注意到的是，可以将图形用户界面的边缘至可视区域边缘的区域切割成多个待填充区域，并在不同待填充区域内填充相应的图像，使得不同待填充区域内填充的图像可以不同，从而实现了提高显示的填充后的图形用户界面的视觉效果，提升用户体验感和好感度的技术效果，进而解决了现有的界面显示的方法的视觉效果差，不适用于通屏界面的技术问题。

可选地，对屏幕的目标区域进行切割，得到多个待填充区域包括：当第一高度大于第二高度时，在垂直方向上对目标区域进行切割，得到上方区域和下方区域；当第一宽度大于第二宽度时，在水平方向上对目标区域进行切割，得到左侧区域和右侧区域。

此处的垂直方向和水平方向是相对于屏幕所确定的，垂直方向对应于高，水平方向对应于宽。在此基础上，当屏幕的宽和高均超过图形用户界面的宽和高时，可以同时在水平方向和垂直方向上对图形用户界面周围的区域进行切割；当屏幕的长度超过图形用户界面的长度时，可以在水平方向上对图形用户界面周围的区域进行切割；当屏幕的宽度超过图形用户界面的宽度时，可以在垂直方向上对图形用户界面周围的区域进行切割。

在一种可选的实施例中，对于如图5所示的屏幕，当屏幕的宽和高均超过图形用户界面的宽和高时，可以同时在水平方向和垂直方向上对图形用户界面周围的区域进行切割，得到左侧区域8、右侧区域4、上方区域2、下方区域6、左上角区域1、右上角区域3、左下角区域7和右下角区域5。

在另一种可选的实施例中，对于如图6所示的屏幕，当屏幕的宽超过图形用户界面的宽时，可以在水平方向上对图形用户界面周围的区域进行切割，得到左侧区域1和右侧区域2。

在又一种可选的实施例中，对于如图7所示的屏幕，当屏幕的高超过图形用户界面的高时，可以在垂直方向上对图形用户界面周围的区域进行切割，得到上方区域1和下方区域2。

可选地，确定每个待填充区域对应的填充图像包括：获取每个待填充区域相对于图形用户界面的相对位置；基于相对位置，确定填充图像，其中，填充图像包括如下至少之一：预设颜色的色块和预设元素。

在一种可选的实施例中，可以基于每个待填充区域左上角的坐标与图形用户界面左上角的坐标进行比较，确定每个待填充区域相对于图形用户界面的相对位置，进一步可以根据美观学或者用户的审美角度，确定在不同的相对位置的待填充区域中填充不同的填充图像。

可选地，基于相对位置，确定填充图像包括：在相对位置为第一预设位置的情况下，确定填充图像包括预设颜色的色块；在相对位置为第二预设位置的情况下，确定填充图像包括预设颜色的色块，并基于相应的待填充区域的第三高度和预设元素的第四高度的比较结果，确定填充图像是否包括预设元素。

上述步骤中的第一预设位置可以是在垂直方向上的位置，如上方、下方、左上方、左下方、右上方、右下方等，第二预设位置可以是水平方向上的位置，如左侧、右侧、左上方、左下方、右上方、右下方等，但不仅限于此。预设元素可以是指上述的装饰元素。

在一种可选的实施例中，为了避免填充图像过于单调，可以针对不同位置的待填充区域，填充不同类型的填充图像，例如，对于第一预设位置的待填充区域，填充图像可以仅仅是填充元素，对于第二预设位置的待填充区域，填充图像可以是填充元素和装饰元素。但是，由于装饰元素需要一定的显示区域，因此，只有在待填充区域的高度大于装饰元素的高度的情况下，才可以将装置元素填充至该区域中，在此基础上，可以基于第三高度和第四高度的比较结果，确定填充图像是否还包含装饰元素。

可选地，基于相应的待填充区域的第三高度和预设元素的第四高度的比较结果，确定填充图像是否包括预设元素包括：在比较结果为第三高度大于第四高度的情况下，确定填充图像包括预设元素；在比较结果为第三高度小于或等于第四高度的情况下，确定填充图像不包括预设元素。

在一种可选的实施例中，当第三高度大于第四高度时，表明待填充区域内可以完整显示装饰元素，因此，可以确定填充图像不仅仅包括填充元素，还包括装饰元素；当第三高度小于第四高度时，表明待填充区域内无法完整显示装饰元素，因此，可以确定填充图像仅仅包括填充元素而不包括装饰元素。

可选地，预设元素的显示区域与图形用户界面存在部分重叠，且，预设元素的图层位于预设颜色的色块的图层的上方。

在一种可选的实施例中，在填充装饰元素的过程中，可以将装饰元素向图形用户界面内叠进，使得预设元素的显示区域可以与图形用户界面存在部分重叠，使得界面显示更加的具有缓冲性，给用户的画面感更加的舒适。在待填充区域内既需要填充填充元素，又需要填充装饰元素的情况下，为了确保填充后的填充元素不会遮挡装饰元素，可以设置预设元素的图层在填充元素的图层的上方，也即，将装饰元素填充在填充元素的上层。

可选地，将填充图像和图形用户界面进行组合，生成目标图像包括：对填充图像进行拉伸，得到拉伸后的图像，其中，拉伸后的图像的面积与对应的待填充区域的面积相同；基于每个待填充区域相对于图形用户界面的相对位置，确定拉伸后的图像和图形用户界面分别对应的目标图层；按照目标图层将拉伸后的图像与图形用户界面进行叠加，生成目标图像。

通过将填充图像的面积拉伸到与对应的待填充区域的面积相同使得将拉伸后的图像正好显示在对应的待填充区域，使得视觉效果更好，降低了隔断感，给用户到来的视觉体验更好。

在一种可选地实施例中，可以先将原有的图形用户界面按着一定比例进行拉伸，再用填充图像进行不同图层的叠加，图形用户界面所在图层的上方图层中拉伸填充装饰元素，正好框住图形用户界面的尺寸靠中心区域50px，图形用户界面所在图层的下方图层中拉伸填充元素铺满整个屏幕。可选的，如图9所示，在主题制作中，可以将图片划分为9个区域，每个区域都有其参数，制作者可以通过对虚线方框所示的区域的参数进行不同设置，使图片排列出不同的效果，具体实现方式以及应用场景与上述步骤相同，此处不做赘述。

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

根据本发明其中一实施例，还提供了一种界面显示的装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“单元”、“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图10是根据本发明其中一实施例的图像填充装置的结构框图，通过终端设备的屏幕提供图形用户界面，如图10所示，该装置包括：获取模块1002，用于获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，其中，第一面积由第一宽度和第一高度组成，第二面积由第二宽度和第二高度组成；切割模块1004，用于当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域，其中，目标区域用于表征图形用户界面显示于屏幕的中心位置时，图形用户界面的边缘至可视区域的边缘的区域；确定模块1006，用于确定每个待填充区域对应的填充图像；组合模块1008，用于将填充图像和图形用户界面进行组合，生成目标图像；显示模块1010，用于通过屏幕显示目标图像。

可选地，切割模块1004还用于当第一高度大于第二高度时，在垂直方向上对目标区域进行切割，得到上方区域和下方区域；当第一宽度大于第二宽度时，在水平方向上对目标区域进行切割，得到左侧区域和右侧区域。

可选地，确定模块1006包括：位置获取单元，用于获取每个待填充区域相对于图形用户界面的相对位置；图像确定单元，用于基于相对位置，确定填充图像，其中，填充图像包括如下至少之一：预设颜色的色块和预设元素。

可选地，图像确定单元还用于在相对位置为第一预设位置的情况下，确定填充图像包括预设颜色的色块；在相对位置为第二预设位置的情况下，确定填充图像包括预设颜色的色块，并基于相应的待填充区域的第三高度和预设元素的第四高度的比较结果，确定填充图像是否包括预设元素。

可选地，图像确定单元还用于：在比较结果为第三高度大于第四高度的情况下，确定填充图像包括预设元素；在比较结果为第三高度小于或等于第四高度的情况下，确定填充图像不包括预设元素。

可选地，预设元素的显示区域与图形用户界面存在部分重叠，且，预设元素的图层位于预设颜色的色块的图层的上方。

可选地，组合模块1008包括：拉伸单元，用于对填充图像进行拉伸，得到拉伸后的图像，其中，拉伸后的图像的面积与对应的待填充区域的面积相同；图层确定单元，用于基于每个待填充区域相对于图形用户界面的相对位置，确定拉伸后的图像和图形用户界面分别对应的目标图层；叠加单元，用于按照目标图层将拉伸后的图像与图形用户界面进行叠加，生成目标图像。

需要说明的是，上述各个单元、模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述单元、模块均位于同一处理器中；或者，上述各个单元、模块以任意组合的形式分别位于不同的处理器中。

本发明的实施例还提供了一种非易失性存储介质，该非易失性存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

可选地，在本实施例中，上述非易失性存储介质可以被设置为存储用于执行以下步骤的计算机程序：

S1，获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，其中，第一面积由第一宽度和第一高度组成，第二面积由第二宽度和第二高度组成；

S2，当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域，其中，目标区域用于表征图形用户界面显示于屏幕的中心位置时，图形用户界面的边缘至可视区域的边缘的区域；

S3，确定每个待填充区域对应的填充图像；

S4，将填充图像和图形用户界面进行组合，生成目标图像；

S5，通过屏幕显示目标图像。

可选地，在本实施例中，上述非易失性存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。

本发明的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，获取屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，其中，第一面积由第一宽度和第一高度组成，第二面积由第二宽度和第二高度组成；

S2，当第一宽度大于第二宽度，或当第一高度大于第二高度时，对屏幕的目标区域进行切割，得到多个待填充区域，其中，目标区域用于表征图形用户界面显示于屏幕的中心位置时，图形用户界面的边缘至可视区域的边缘的区域；

S3，确定每个待填充区域对应的填充图像；

S4，将填充图像和图形用户界面进行组合，生成目标图像；

S5，通过屏幕显示目标图像。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

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

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

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

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (11)

1.一种界面显示的方法，其特征在于，通过终端设备的屏幕提供图形用户界面，所述方法包括：

获取所述屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，其中，所述第一面积由第一宽度和第一高度组成，所述第二面积由第二宽度和第二高度组成；

当所述第一宽度大于所述第二宽度，或当所述第一高度大于所述第二高度时，对所述屏幕的目标区域进行切割，得到多个待填充区域，其中，所述目标区域用于表征所述图形用户界面显示于所述屏幕的中心位置时，所述图形用户界面的边缘至所述可视区域的边缘的区域；

确定每个所述待填充区域对应的填充图像；

将所述填充图像和所述图形用户界面进行组合，生成目标图像；

通过所述屏幕显示所述目标图像。

2.根据权利要求1所述的方法，其特征在于，对所述屏幕的目标区域进行切割，得到所述多个待填充区域包括：

当所述第一高度大于所述第二高度时，在垂直方向上对所述目标区域进行切割，得到上方区域和下方区域；

当所述第一宽度大于所述第二宽度时，在水平方向上对所述目标区域进行切割，得到左侧区域和右侧区域。

3.根据权利要求1所述的方法，其特征在于，所述确定每个所述待填充区域对应的填充图像，包括：

获取每个所述待填充区域相对于所述图形用户界面的相对位置；

基于所述相对位置，确定所述填充图像，其中，所述填充图像包括如下至少之一：预设颜色的色块和预设元素。

4.根据权利要求3所述的方法，其特征在于，基于所述相对位置，确定所述填充图像，包括：

在所述相对位置为第一预设位置的情况下，确定所述填充图像包括所述预设颜色的色块；

在所述相对位置为第二预设位置的情况下，确定所述填充图像包括所述预设颜色的色块，并基于相应的待填充区域的第三高度和所述预设元素的第四高度的比较结果，确定所述填充图像是否包括所述预设元素。

5.根据权利要求4所述的方法，其特征在于，基于相应的待填充区域的第三高度和所述预设元素的第四高度的比较结果，确定所述填充图像是否包括所述预设元素包括：

在所述比较结果为所述第三高度大于所述第四高度的情况下，确定所述填充图像包括所述预设元素；

在所述比较结果为所述第三高度小于或等于所述第四高度，确定所述填充图像不包括所述预设元素。

6.根据权利要求3至5中任意一项所述的方法，其特征在于，所述预设元素的显示区域与所述图形用户界面存在部分重叠，且，所述预设元素的图层位于所述预设颜色的色块的图层的上方。

7.根据权利要求1所述的方法，其特征在于，将所述填充图像和所述图形用户界面进行组合，生成目标图像包括：

对所述填充图像进行拉伸，得到拉伸后的图像，其中，所述拉伸后的图像的面积与对应的待填充区域的面积相同；

基于每个所述待填充区域相对于所述图形用户界面的相对位置，确定所述拉伸后的图像和所述图形用户界面分别对应的目标图层；

按照所述目标图层将所述拉伸后的图像与所述图形用户界面进行叠加，生成所述目标图像。

8.一种界面显示的装置，其特征在于，通过终端设备的屏幕提供图形用户界面，所述装置包括：

获取模块，用于获取所述屏幕可视区域的第一面积，以及待显示的图形用户界面的第二面积，其中，所述第一面积由第一宽度和第一高度组成，所述第二面积由第二宽度和第二高度组成；

切割模块，用于当所述第一宽度大于所述第二宽度，或当所述第一高度大于所述第二高度时，对所述屏幕的目标区域进行切割，得到多个待填充区域，其中，所述目标区域用于表征所述图形用户界面显示于所述屏幕的中心位置时，所述图形用户界面的边缘至所述可视区域的边缘的区域；

确定模块，用于确定每个待填充区域对应的填充图像；

组合模块，用于将所述填充图像和所述图形用户界面进行组合，生成目标图像；

显示模块，用于通过所述屏幕显示所述目标图像。

9.一种非易失性存储介质，其特征在于，所述非易失性存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行所述权利要求1至8任一项中所述的界面显示的方法。

10.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序被设置为运行时执行所述权利要求1至7任一项中所述的界面显示的方法。

11.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行所述权利要求1至7任一项中所述的界面显示的方法。

Images