一种界面显示方法、装置及存储介质与流程

1.本技术实施例涉及计算机技术领域，尤其涉及一种界面显示方法、装置及存储介质。


背景技术：

2.随着计算机技术的不断发展，通过大屏展示信息的方式在现实生活中的应用越来越广泛。
3.传统的大屏展示信息的方式，需要开发人员根据大屏的分辨率信息，专门为该大屏布局开发一个目标界面，该目标界面用于展示待显示信息；然后，将布局好的目标界面展示在大屏上。
4.然而，在传统的大屏展示信息的方式中，目标界面只适用于一种分辨率的大屏，当大屏的分辨率发生变化时，需要开发人员针对变化后的大屏重新布局开发新的目标界面，因此，如何在大屏场景中实现动态界面布局成为本领域亟待解决的技术问题。


技术实现要素：

5.本技术实施例提供一种界面显示方法、装置及存储介质，能够在大屏场景中实现动态界面布局。
6.为达到上述目的，本技术实施例采用如下技术方案：
7.第一方面，本技术实施例提供一种界面显示方法，该方法包括：获取目标对应关系，目标对应关系用于表征第一显示器的横向像素数与第二显示器的横向像素数的比例关系，和第一显示器的纵向像素数与第二显示器的纵向像素数的比例关系；第一显示器用于显示第一界面，第一界面包括第一控件；根据目标对应关系和第一位置信息，确定第二位置信息；其中，第一位置信息用于指示第一控件在第一界面上的第一显示区域，第二位置信息用于指示第二控件在第二界面上的第二显示区域，第二控件是第一控件在第二界面上的体现；在第二显示器上显示第二界面；其中，在第二显示区域显示第二控件。
8.相比传统技术中大屏展示信息的方式，本技术是根据目标对应关系和第一控件在第一界面上的第一显示区域，确定第二控件在第二界面上的第二显示区域，从而完成第二界面的布局；当更换不同分辨率的显示屏后，界面显示装置仅需重新获取目标对应关系，并基于变化后的目标对应关系对第二界面重新布局，并不需要开发人员的介入，从而提高了界面显示信息的效率。该技术方案可以应用于大屏场景中，该情况下，上述第二界面所在的第二显示器可以是大屏。
9.一种可能的实现方式中，上述在获取目标对应关系之前，该方法还包括：根据第二显示器的横向像素数和纵向像素数，确定单元网格的边长的第一取值；单元网格为正方形，且单元网格的边长均被第二显示器的横向像素数和纵向像素数整除；基于第一取值，对第二显示器进行网格化；其中，第二显示区域包括至少一个单元网格，根据第一显示器的横向像素数和纵向像素数，确定单元网格的边长的第二取值；该单元网格为正方形，且该单元网
格的边长均被上述第一显示器的横向像素数和纵向像素数整除；基于上述第二取值，对该第一显示器进行网格化；上述第一显示区域包括至少一个单元网格；其中，目标对应关系具体用于表征第一显示器的横向单元网格数与第二显示器的横向单元网格数的比例关系，和第一显示器的纵向单元网格数第二显示器的纵向单元网格数的比例关系。
10.一种可能的实现方式中，上述基于第一取值，对第二显示器进行网格化，具体包括：当第一取值小于边长阈值时，增大第一取值，得到第三取值；其中，该第三取值大于或等于边长阈值；基于第三取值，对第二显示器进行网格化；和/或，当网格数量小于网格数量阈值时，减小第一取值，得到第三取值；其中，该第三取值大于或等于边长阈值；其中，该网格数量是第一取值确定的第二显示器的横向网格数量和/或纵向网格数量；基于第三取值，对第二显示器进行网格化。
11.本技术实施例提供的界面显示方法，在对第二显示器进行网格化时，当第一取值小于边长阈值时，界面显示装置增大第一取值，使单元网格的边长增大，由于单元网格的面积越大，调整控件大小时的可调整空间越小，因此，提高了调整控件大小的效率。
12.一种可能的实现方式中，当上述第三取值不能被第二显示器的横向像素数整除时，第二显示器的空闲区域均匀分布在第二显示器的两个纵向边缘区域；当上述第三取值不能被第二显示器的纵向像素数整除时，第二显示器的空闲区域均匀分布在第二显示器的两个横向边缘区域；其中，该空闲区域是第二显示器上的除显示第二界面之外的区域。
13.一种可能的实现方式中，在上述第二显示器上显示第二界面之前，该方法还包括：确定与上述第一控件功能相同、且控件的长宽比满足预设条件的第二控件；其中，该预设条件为控件的长宽比与上述第二显示区域的长宽比的差值在预设范围内。
14.本技术实施例提供的界面显示方法中，界面显示装置根据第一控件功能和预设条件确定第二控件，其中，预设条件为控件的长宽比与第二显示区域的长宽比的差值在预设范围内，基于此，在第二显示器上显示的第二控件，并不是将第一控件的长宽非等比例缩放得到的，因此，避免了控件在非等比例缩放过程中出现控件结构的变化而不符合通用的呈像需求。
15.一种可能的实现方式中，上述确定与第一控件功能相同、且控件的长宽比满足预设条件的第二控件，包括：确定与第一控件功能相同、表现形式不同，且控件的长宽比满足预设条件的控件集合；从该控件集合中确定第二控件。
16.本技术实施例提供的界面显示方法中，界面显示装置将与第一控件功能相同、表现形式不同，且长宽比与第二显示区域的长宽比的差值在预设范围内的所有控件确定为确定控件集合，然后，界面显示装置从控件集合中确定所述第二控件。基于此，界面显示装置在第二显示器上显示的第二控件，并不是将第一控件的长宽非等比例缩放得到的，因此，避免了控件在非等比例缩放过程中出现控件结构的变化。且第二控件与第一控件的表现形式可以不同，从而提高了界面显示内容的可扩展性。
17.第二方面，本技术实施例提供一种界面显示装置，该界面显示装置包括：获取模块、确定模块和显示模块；上述获取模块用于获取目标对应关系，该目标对应关系用于表征第一显示器的横向像素数与第二显示器的横向像素数的比例关系，和第一显示器的纵向像素数与第二显示器的纵向像素数的比例关系；该第一显示器用于显示第一界面，第一界面包括第一控件；上述确定模块用于根据目标对应关系和第一位置信息，确定第二位置信息；
其中，该第一位置信息用于指示第一控件在第一界面上的第一显示区域，该第二位置信息用于指示第二控件在第二界面上的第二显示区域，第二控件是第一控件在第二界面上的体现；上述显示模块用于在第二显示器上显示第二界面；其中，在第二显示区域显示第二控件。
18.一种可能的实现方式中，该界面显示装置还包括：执行模块：上述确定模块还用于根据第二显示器的横向像素数和纵向像素数，确定单元网格的边长的第一取值；该单元网格为正方形，且单元网格的边长均被第二显示器的横向像素数和纵向像素数整除；上述执行模块用于基于第一取值，对第二显示器进行网格化；其中，第二显示区域包括至少一个单元网格，上述确定模块还用于；基于第一取值，对第二显示器进行网格化；其中，第二显示区域包括至少一个单元网格，根据第一显示器的横向像素数和纵向像素数，确定单元网格的边长的第二取值；该单元网格为正方形，且该单元网格的边长均被上述第一显示器的横向像素数和纵向像素数整除；上述执行模块用于基于上述第二取值，对该第一显示器进行网格化；上述第一显示区域包括至少一个单元网格；其中，目标对应关系具体用于表征第一显示器的横向单元网格数与第二显示器的横向单元网格数的比例关系，和第一显示器的纵向单元网格数第二显示器的纵向单元网格数的比例关系。
19.一种可能的实现方式中，该界面显示装置还包括：处理模块；上述处理模块用于当第一取值小于边长阈值时，增大第一取值，得到第三取值；其中，该第三取值大于或等于边长阈值；上述执行模块用于基于第三取值，对第二显示器进行网格化；上述处理模块还用于当网格数量小于网格数量阈值时，减小第一取值，得到第三取值；其中，该第三取值大于或等于边长阈值；其中，该网格数量是第一取值确定的第二显示器的横向网格数量和/或纵向网格数量；上述执行模块用于基于第三取值，对第二显示器进行网格化。
20.一种可能的实现方式中，该界面显示装置还包括划分模块；上述划分模块用于当第三取值不能被第二显示器的横向像素数整除时，第二显示器的空闲区域均匀分布在第二显示器的两个纵向边缘区域；上述划分模块还用于当第三取值不能被第二显示器的纵向像素数整除时，第二显示器的空闲区域均匀分布在第二显示器的两个横向边缘区域；其中，该空闲区域是第二显示器上的除显示第二界面之外的区域。
21.一种可能的实现方式中，上述确定模块还用于确定与上述第一控件功能相同、且控件的长宽比满足预设条件的第二控件；其中，该预设条件为控件的长宽比与上述第二显示区域的长宽比的差值在预设范围内。
22.一种可能的实现方式中，上述确定模块还用于确定与第一控件功能相同、表现形式不同，且控件的长宽比满足预设条件的控件集合；从该控件集合中确定第二控件。
23.第三方面，本技术实施例提供一种界面显示装置，包括存储器和处理器，存储器与处理器耦合；存储器用于存储计算机程序代码，其中，计算机程序代码包括计算机指令；当计算机指令被处理器执行时，使得界面显示装置执行第一方面及其可能的实现方式中任意之一所述的方法。
24.第四方面，本技术实施例提供一种计算机可读存储介质，存储有计算机指令，当计算机指令在计算设备上运行时，使得计算设备执行上述第一方面及其可能的实现方式中任意之一所述的方法。
25.第五方面，本技术实施例提供一种的计算机程序产品，当其在计算机上运行时，使
得计算机执行上述第一方面及其可能的实现方式中任意之一所述的方法。
26.应当理解的是，本技术实施例的第二方面至第五方面技术方案及对应的可能的实施方式所取得的有益效果可以参见上述对第一方面及其对应的可能的实施方式的技术效果，此处不再赘述。
附图说明
27.图1为本技术实施例提供的一种界面显示系统示意图；
28.图2为本技术实施例提供的一种界面显示装置硬件结构示意图；
29.图3为本技术实施例提供的一种界面显示方法流程示意图一；
30.图4为本技术实施例提供的一种第一显示区间与第二显示区间对应关系示意图；
31.图5为本技术实施例提供的一种界面显示方法流程示意图二；
32.图6为本技术实施例提供的一种界面显示方法流程示意图三；
33.图7为本技术实施例提供的一种界面显示方法流程示意图四；
34.图8为本技术实施例提供的一种界面显示方法流程示意图五；
35.图9为本技术实施例提供的一种界面显示方法流程示意图六；
36.图10为本技术实施例提供的另一种第一显示区间与第二显示区间对应关系示意图；
37.图11为本技术实施例提供的一种界面显示装置结构示意图。
具体实施方式
38.本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。
39.本技术实施例的说明书和权利要求书中的术语“第一”和“第二”等是用于区别不同的对象，而不是用于描述对象的特定顺序。例如，第一显示器和第二显示器等是用于区别不同的显示器，而不是用于描述显示器的特定顺序。
40.在本技术实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本技术实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
41.首先对本技术实施例提供的一种界面显示方法与装置中涉及的一些概念做解释说明。
42.控件：用于开发构建用户界面(ui)，包括：视窗、文本框、按钮、下拉式菜单等界面元素。
43.本技术实施例提供的界面显示方法可以应用于如图1所示的界面显示系统中。该界面显示系统包括：服务器设备101和大屏显示器102。
44.在该界面显示系统中，服务器设备101中存储了第一界面的布局信息，该第一界面用于显示在非大屏显示器上，服务器设备101用于根据第一界面的布局信息对大屏显示器102上显示的第二界面进行动态布局，具体实现方式可以参考下文方法部分，其中，该服务器设备101可以为台式电脑、笔记本以及云服务器等具有处理能力的设备。
45.大屏显示器102用于对上述服务器设备101布局的第二界面进行显示，其中，该大屏显示器102是由至少一个显示器组成的具有显示功能的显示器。
46.示例性的，图2是本技术实施例提供的界面显示装置的一种硬件示意图，该界面显示装置具体为图1中的服务器设备101包括处理器201、存储器202和网络接口203。
47.其中，处理器201包括一个或多个cpu。该cpu可以为单核cpu(single-cpu)或多核cpu(multi-cpu)。
48.存储器202包括但不限于是ram、rom、eprom、快闪存储器、或光存储器等。
49.可选地，处理器201通过读取存储器202中保存的指令实现本技术实施例提供的界面显示方法，或者，处理器201通过内部存储的指令实现本技术实施例提供的界面显示方法。在处理器201通过读取存储器202中保存的指令实现上述实施例中的方法的情况下，存储器202中保存实现本技术实施例提供的界面显示方法的指令。
50.网络接口203是有线接口(端口)，例如fddi、ge接口。或者，网络接口203是无线接口。应理解，网络接口203包括多个物理端口，网络接口203用于获取大屏显示器的分辨率信息等。
51.可选地，界面显示装置还包括总线204，上述处理器201、存储器202、网络接口203通常通过总线204相互连接，或采用其他方式相互连接。
52.本技术实施例提供一种界面显示方法，该方法由界面显示装置执行，如图3所示，该方法可以包括s301-s303。
53.s301、界面显示装置获取目标对应关系。
54.上述目标对应关系用于表征第一显示器的横向像素数与第二显示器的横向像素数的比例关系，和该第一显示器的纵向像素数与该第二显示器的纵向像素数的比例关系，其中，第二显示器可以为大屏显示器，该第二显示器包括至少一个显示器，第一显示器为非大屏显示器用于显示第一界面，该第一界面中包括第一控件，如：第一显示器上显示a网页(即：第一界面)，该a网页中包括一个按钮(即：第一控件)。
55.当上述第二显示器为包括多个显示器时，上述第二显示器的横向像素数为该多个显示器的阵列中第一行的所有显示器的横向像素数之和，第二显示器的纵向像素数时该多个显示器的阵列中第一列的所有显示器的纵向像素数之和，也就是说，当上述第二显示器为包括n个显示器时，将待显示界面分割为n份分别在n个显示器上显示，即该n个显示器各自显示的界面共同组成了待显示界面，其中n大于或等于2。
56.需要说明的是，获取该目标对应关系的方式可以是根据第一显示器的分辨率和第二显示器的分辨率得到的，也可以是根据其他方式获得的，具体本技术实施例对上述获取目标对应关系的方式不进行限定。
57.应理解的是，显示器的分辨率用于指示显示器横向像素个数和该显示器纵向像素个数。
58.s302、界面显示装置根据目标对应关系和第一位置信息，确定第二位置信息。
59.上述第一位置信息用于指示第一控件在第一界面上的第一显示区域，上述第二位置信息用于指示第二控件在第二界面上的第二显示区域，该第二控件是第一控件在第二界面上的体现，也就是说，第一控件和第二控件的功能相同。
60.上述第一显示区域在第一显示器中的相对位置与第二显示区域在第二显示器中
的相对位置一致，如：第一显示区域在第一显示器的中心位置，则第二显示区域也在第二显示区域的中心位置。
61.需要说明的是，上述第二界面是将第一界面显示在第二显示器上的界面，且上述显示区域用于指示控件显示的位置和控件显示区域的长和宽。
62.上述第一显示区域与第二显示区域之间存在上述目标对关系，也就是说，“第一显示区域的长度”与“第二显示区域的长度之比”，和“目标对应关系中第一显示器的横向像素数”与“第二显示器的横向像素数之比”相同；“第一显示区域的宽度与第二显示区域的宽度之比”和目标对应关系中“第一显示器的纵向像素数与第二显示器的纵向像素数之比”相同。
63.在一种实现方式中，上述s302具体实现包括：界面显示装置根据第一控件在第一界面上的位置，确定第二控件在第二界面上的位置。然后，界面显示装置根据第一显示区域在第一界面上的长度，和第一显示器的横向像素数与第二显示器的横向像素数的比例关系，确定第二显示区域在第二界面的长度。其中，“该第一显示区域在第一界面上的长度与第二显示区域在第二界面上的长度的比例值”和“第一显示器的横向像素数与第二显示器的横向像素数的比例值”一致。同样的，基于该方式确定第二显示区域在第二界面上的宽度，其中，“该第一显示区域在第一界面的宽度与第二显示区域在第二界面上的宽度的比例值”和“第一显示器的纵向像素数与第二显示器的纵向像素数的比例值”一致，进而在第二界面上确定出第二显示区域的位置信息。
64.示例性的，如图4所示，目标对应关系为：第一显示器横向像素数与第二显示器横向像素数的比例为1：3，简称：横向比为1:3；第一显示器纵向像素数与第二显示器纵向像素数的比例为1:2，简称：纵向比为1:2；由图4中的(a)图所示，第一界面上的按钮(即：第一按钮)的显示区域的左上角坐标为(0,0)，第一按钮的长度值为1，宽度值也为1。基于此，界面显示装置将第二界面上的按钮(即：第二按钮)的显示区域的左上角的位置也确定在第二界面上的(0，0)位置，然后，界面显示装置根据目标对应关系中的横向比例1:3和第一按钮的显示区域的长度值为1，确定出第二按钮的显示区域的长度值为3，同样的，界面显示装置根据目标对应关系中的纵向比例1:2和第一按钮的显示区域的宽度值为1，确定出第二按钮的显示区域的宽度为2，从而确定出第二按钮的显示区域在第二界面上位置信息，如图4中的(b)图所示。
65.在另一种实现方式中，上述s302具体实现还包括：界面显示装置根据第一控件在第一界面上的位置，确定第二控件在第二界面上的位置。然后，界面显示装置根据“第一显示区域在第一界面上的长度”、”第一显示器的横向像素数与第二显示器的横向像素数的比例关系”、以及”预设长度比值”，确定第二显示区域在第二界面的长度。其中，“该第一显示区域在第一界面上的长度与第二显示区域在第二界面上的长度的比例值”，与“预设长度比值”之和等于“第一显示器的横向像素数与第二显示器的横向像素数的比例值”。同样的，基于该方式确定第二显示区域在第二界面上的宽度。其中，“该第一显示区域在第一界面的宽度与第二显示区域在第二界面上的宽度的比例值”与预设宽度比值之和等于“第一显示器的纵向像素数与第二显示器的纵向像素数的比例值”；进而在第二界面上确定出第二显示区域的位置信息，其中，上述预设宽度比值与预设长度比值均为正数。
66.需要说明的是，本技术实施例中上述s302的具体实现以上述第一种实现方式为例
进行说明，后续不再赘述。
67.s303、界面显示装置在第二显示器上显示第二界面。
68.需要说明的是，第二界面上的第二显示区域显示第二控件。
69.相比传统技术中大屏展示信息的方式，本技术是根据目标对应关系和第一控件在第一界面上的第一显示区域，确定第二控件在第二界面上的第二显示区域，从而完成第二界面的布局；当更换不同分辨率的大屏后，界面显示装置仅需重新获取目标对应关系，并基于变化后的目标对应关系对第二界面重新布局，并不需要开发人员的介入，从而提高了界面显示信息的效率。
70.可选的，结合图3，如图5所示，在s301之前本技术实施例提供的界面显示方法，还包括：s501-s504。
71.s501、界面显示装置根据第二显示器的横向像素数和纵向像素数，确定单元网格的边长的第一取值。
72.上述单元网格为正方形，且单元网格的边长均能被第二显示器的横向像素数和纵向像素数整除。
73.上述s501具体包括：界面显示装置根据第二显示器的横向像素数和纵向像素数，确定单元网格，该单元网格的边长为第二显示器的横向像素数和纵向像素数的公约数。
74.可选的，当为第二显示器的横向像素数和纵向像素数存在多个公约数时，将该多个公约数中的最大公约数确定为单元网格的边长，以使单元网格的边长增大，由于单元网格的面积越大，调整控件大小时的可调整空间越小，因此，提高了调整控件大小的效率。
75.s502、界面显示装置基于第一取值，对第二显示器进行网格化。
76.需要说明的是，当第二显示器是由多个显示器组成的显示器时，需要对该多个显示器进行网格化，且每个显示器的网格大小相同。
77.当上述多个显示器的分辨率不同时，根据该多个显示器中的最低分辨率确定单元网格的边长的第一取值，并基于于第一取值，对多个显示器进行网格化。
78.s503、界面显示装置根据第一显示器的横向像素数和纵向像素数，确定单元网格的边长的第二取值。
79.需要说明的是，上述确定单元网格的边长的第二取值的实现方式与s501中的确定第一取值的实现方式类似，具体对于s503的具体描述可以参考上述对于s501的相关描述，此处不再赘述。
80.s504、界面显示装置基于第二取值，对第一显示器进行网格化。
81.需要说明的是，上述对第一显示器进行网格化的实现方式与s502中的对第二显示器进行网格化的实现方式类似，具体对于s504的具体描述可以参考上述对于s502的相关描述，此处不再赘述。
82.需要说明的是，上述界面显示装置可以先执行s501-s502，再执行s503-s504；也可以先执行s503-s504，再执行s501-s502；具体本技术实施例不对界面显示装置执行s501-s502和执行s503-s504的先后顺序进行限定。
83.需要说明的是，在对第一显示器和第二显示器进行网格化的情况下，上述s302确定的第二显示区域和第一显示区域中均包括至少一个单元网格，且上述s301中获取的目标对应关系用于表征第一显示器的横向单元网格数与第二显示器的横向单元网格数的比例
关系，和第一显示器的纵向单元网格数与第二显示器的纵向单元网格数的比例关系。
84.上述s502的一种具体实现方式，结合图5，如图6所示，包括：s502a-s502b。
85.s502a、当第一取值小于边长阈值时，界面显示装置增大第一取值，得到第三取值。
86.上述第三取值大于或等于边长阈值，例如，当第一取值为3个像素，边长阈值为4个像素，将第一取值增大，得到第三取值，该第三取值为6个像素。
87.需要说明的是，上述s502a具体实现为，当第一取值小于边长阈值时，界面显示装置增大单元网格的边长，使增大后的单元网格的边长大于边长阈值。
88.s502b、界面显示装置基于第三取值，对第二显示器进行网格化。
89.本技术实施例提供的界面显示方法，在对第二显示器进行网格化时，当第一取值小于边长阈值时，界面显示装置增大第一取值，使单元网格的边长增大，由于单元网格的面积越大，调整控件大小时的可调整空间越小，因此，提高了调整控件大小的效率。
90.上述s502的另一种具体实现方式，结合图5，如图7所示，包括：s502a-s502b。
91.s502a、当网格数量小于网格数量阈值时，界面显示装置减小第一取值，得到第四取值。
92.上述第四取值大于或等于边长阈值；其中，上述网格数量是第一取值确定的第二显示器的横向网格数量和/或纵向网格数量。
93.上述s502a具体包括：界面显示装置根据上述第一取值确定在第二显示器上的横向网格数量和纵向网格数量。当该横向网格数量小于横向网格数量阈值，和/或纵向网格数量小于纵向网格数量阈值时，减小第一取值，也就是说减少单元网格的边长，使减少边长后的单元网格在第二显示器上的横向网格数量大于或等于横向网格数量阈值，且减少边长后的单元网格在第二显示器上的纵向网格数量大于或等于纵向网格数量阈值，以及保证单元网格的边长始终大于或等于边长阈值。
94.s502b、界面显示装置基于第四取值，对第二显示器进行网格化。
95.需要说明的是，上述s502b的实现与上述s502类似，对于s502b的具体描述可以参考上述对于s502的相关描述，此处不再赘述。
96.上述s502的又一种具体实现方式，将s502a与s502a-s502b相结合，当第一取值小于边长阈值时，界面显示装置增大第一取值，得到第三取值；然后，再判断网格数量是否小于网格数量阈值，当网格数量小于网格数量阈值时，界面显示装置减小述第三取值，得到第四取值，其中，第四取值大于边长阈值；最后，基于第四取值，对第二显示器进行网格化。
97.当网格边长大于或等于边长阈值或网格数量大于或等于网格数量阈值两个条件只能满足一个时，网格边长大于或等于边长阈值的优先级高于网格数量大于或等于网格数量的优先级。
98.可选的，当网格边长大于或等于边长阈值或网格数量大于或等于网格数量阈值两个条件只能满足一个时，通过人为指定的方式确定网格边长和网格数量的优先级。
99.应注意的是，上述界面显示装置基于第四取值或第三取值，对第二显示器进行网格化时，当第三取值或第四取值不能被第二显示器的横向像素数整除时，界面显示装置将第二显示器的空闲区域均匀分布在第二显示器的两个纵向边缘区域；当第三取值或第四取值不能被第二显示器的纵向像素数整除时，界面显示装置将第二显示器的空闲区域均匀分布在第二显示器的两个横向边缘区域，其中，上述空闲区域是第二显示器上的除显示第二
界面之外的区域。
100.可选的，结合图5，如图8所示，在执行s303之前本技术实施例提供的界面显示方法还包括：s801。
101.s801、界面显示装置确定与第一控件功能相同、且控件的长宽比满足预设条件的第二控件。
102.上述预设条件为控件的长宽比与第二显示区域的长宽比的差值在预设范围内。
103.上述s801具体包括：界面显示装置根据第一控选择功能相同的所有控件，然后，在该所有控件中选择长宽比与第二显示区域的长宽比的差值在预设范围内的控件作为第二控件。
104.第一显示区域和第二显示区域的长宽比和第一控件确定第二控件，第二控件与第一控件为功能相同，且样式不同的控件。
105.一种示例，如图4中的(a)图和(b)图所示，第一显示区域为图4中的(a)图中按钮所在的区域，第一显示区域的长宽比为1:1，第二显示区域的为图4中的(b)图中按钮所在的区域，长宽比为3:2，此时，界面显示装置选择长宽比为3:2的按钮确定为第二控件，因为如果按照现有技术中的方式对长宽比为1:1的按钮强行拉伸使其成为长宽比为3:2的按钮，该按钮的上的文字将会发生扭曲，如图10中的(a)图和(b)图中各自的“按钮”控件所示，其中，图10中的(b)图中的“按钮”文本框是通过图10中的(a)图中的“按钮”文本框强行拉伸得到的，具体是：将长宽比为1：1的“按钮”文本框拉伸为长宽比为3：2的文本框，进而导致图10中的(b)图中的“按钮”文本框中的“按钮”这两个文字发生扭曲。
106.又一种示例，如图4中的(c)图和(d)图所示，第一显示区域为图4中的(c)图中第一饼状图所在的区域，即：该饼状图的第1部分为40％，第2部分为25％，第3部分为35％，该第一显示区域的长宽比为1:1，第二显示区域的为图4中的(d)图中第二饼状图所在的区域，该第二显示区域长宽比为3:2，此时，界面显示装置选择功能相同样式不同的饼状图，如第二饼状图；该第二饼状图中第1部分为40％，第2部分为25％，第3部分为35％，且该饼状图旁边第一矩形区域显示第1部分的具体数据量，如第1部分数据量为40，第二矩形区域显示第2部分的具体数据量，如第2部分数据量为25，第三矩形区域显示第3部分的具体数据量，如第3部分数据量为35；虽然第二饼状图相比第一饼状图多了对各个部分数量的具体解释，但第一饼状图和第二饼状图的作用始终相同，只是样式不同。
107.本技术实施例提供的界面显示方法中，界面显示装置根据第一控件功能和预设条件确定第二控件，其中，预设条件为控件的长宽比与第二显示区域的长宽比的差值在预设范围内，基于此，在第二显示器上显示的第二控件，并不是将第一控件的长宽非等比例缩放得到的，因此，避免了控件在非等比例缩放过程中出现控件结构的变化。
108.可选的，结合图5，如图9所示，在执行s303之前本技术实施例提供的界面显示方法还包括：s901-s902。
109.s901、界面显示装置确定与第一控件功能相同、表现形式不同，且控件的长宽比满足所述预设条件的控件集合。
110.上述预设条件为控件的长宽比与第二显示区域的长宽比的差值在预设范围内；也就是说，上述控件集合中每个控件的长宽比与第二显示区域的长宽比的差值在预设范围以内，第一控件与控件集合中每个控件的功能相同，且第一控件与控件集合中每个控件的表
现形式不同。
111.示例性的，假设第一显示区域的长宽比为1:1，第二显示区域的长宽比为3:2，第一控件为数据集a的折线图，那么，界面显示装置将数据集a的柱状图和饼状图等用于体现数据集a属性的图确定为控件集合。
112.s902、界面显示装置从控件集合中确定第二控件。
113.上述第二控件可以是人为在控件集合中指定的控件，或界面显示装置在控件集合中默认的控件。
114.示例性的，基于上述示例，界面显示装置将用户在控件集合中指定的柱状图确定为第二控件。
115.本技术实施例提供的界面显示方法中，界面显示装置将与第一控件功能相同、表现形式不同，且长宽比与第二显示区域的长宽比的差值在预设范围内的所有控件确定为确定控件集合，然后，界面显示装置从控件集合中确定所述第二控件。基于此，界面显示装置在第二显示器上显示的第二控件，并不是将第一控件的长宽非等比例缩放得到的，因此，避免了控件在非等比例缩放过程中出现控件结构的变化。且第二控件与第一控件的表现形式可以不同，从而提高了界面显示内容的可扩展性。
116.相应地，本技术实施例提供一种界面显示装置，该界面显示装置用于执行上述界面显示方法中各个步骤，本技术实施例可以根据上述方法示例对该界面显示装置进行功能模块的划分，例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。本技术实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
117.在采用对应各个功能划分各个功能模块的情况下，图11示出上述实施例中所涉及的界面显示装置的一种可能的结构示意图。如图11所示，该界面显示装置包括：获取模块1101、确定模块1102和显示模块1103。
118.获取模块1101用于获取目标对应关系，例如执行上述方法实施例中的步骤s301。
119.确定模块1102用于根据目标对应关系和第一位置信息，确定第二位置信息，例如执行上述方法实施例中的步骤s302。
120.显示模块1103用于在第二显示器上显示第二界面，例如执行上述方法实施例中的步骤s303。
121.可选的，上述界面显示装置包括：执行模块1104。
122.上述确定模块1102用于根据第二显示器的横向像素数和纵向像素数，确定单元网格的边长的第一取值，例如执行上述方法实施例中的步骤s501。
123.执行模块1104用于基于第一取值，对第二显示器进行网格化，例如执行上述方法实施例中的步骤s502。
124.上述确定模块1102用于根据第一显示器的横向像素数和纵向像素数，确定单元网格的边长的第二取值，例如执行上述方法实施例中的步骤s503。
125.执行模块1104用于基于第二取值，对第一显示器进行网格化，例如执行上述方法实施例中的步骤s504。
126.可选的，上述界面显示装置包括：处理模块1105。
127.处理模块1105用于当第一取值小于边长阈值时，增大第一取值，得到第三取值，例如执行上述方法实施例中的步骤s502a。
128.上述执行模块1104用于基于第三取值，对第二显示器进行网格化，例如执行上述方法实施例中的步骤s502b。
129.可选的，上述界面显示装置包括：划分模块1106。
130.划分模块1106用于当第三取值不能被第二显示器的横向像素数整除时，第二显示器的空闲区域均匀分布在第二显示器的两个纵向边缘区域；当第三取值不能被第二显示器的纵向像素数整除时，第二显示器的空闲区域均匀分布在第二显示器的两个横向边缘区域。
131.上述界面显示装置的各个模块还可以用于执行上述方法实施例中的其他动作，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。
132.其中，获取模块1101、确定模块1102、显示模块1103、执行模块1104、处理模块1105和划分模块1106中的部分或全部步骤可以通过图2中的处理器201执行存储器202中的代码实现。
133.在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件程序实现时，可以全部或部分地以计算机程序产品的形式实现。该计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行该计算机指令时，全部或部分地产生按照本技术实施例中的流程或功能。该计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程装置。该计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，该计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(digital subscriber line，dsl))方式或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心传输。该计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包括一个或多个可用介质集成的服务器、数据中心等数据存储设备。该可用介质可以是磁性介质(例如，软盘、磁盘、磁带)、光介质(例如，数字视频光盘(digital video disc，dvd))、或者半导体介质(例如固态硬盘(solid state drives，ssd))等。
134.通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
135.在本技术所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
136.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
137.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
138.所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：快闪存储器、移动硬盘、只读存储器、随机存取存储器、磁碟或者光盘等各种可以存储程序代码的介质。
139.以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何在本技术揭露的技术范围内的变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应以所述权利要求的保护范围为准。

技术特征：
1.一种界面显示方法，其特征在于，包括：获取目标对应关系，所述目标对应关系用于表征第一显示器的横向像素数与第二显示器的横向像素数的比例关系，和所述第一显示器的纵向像素数与所述第二显示器的纵向像素数的比例关系；所述第一显示器用于显示第一界面，所述第一界面包括第一控件；根据所述目标对应关系和第一位置信息，确定第二位置信息；其中，所述第一位置信息用于指示所述第一控件在所述第一界面上的第一显示区域，所述第二位置信息用于指示第二控件在第二界面上的第二显示区域，所述第二控件是所述第一控件在所述第二界面上的体现；在所述第二显示器上显示所述第二界面；其中，在所述第二显示区域显示所述第二控件。2.根据权利要求1所述的方法，其特征在于，在所述获取目标对应关系之前，所述方法还包括：根据所述第二显示器的横向像素数和纵向像素数，确定单元网格的边长的第一取值；所述单元网格为正方形，且所述单元网格的边长均被所述第二显示器的横向像素数和纵向像素数整除；基于所述第一取值，对所述第二显示器进行网格化；所述第二显示区域包括至少一个单元网格；根据所述第一显示器的横向像素数和纵向像素数，确定单元网格的边长的第二取值；所述单元网格为正方形，且所述单元网格的边长均被所述第一显示器的横向像素数和纵向像素数整除；基于所述第二取值，对所述第一显示器进行网格化；所述第一显示区域包括至少一个单元网格；其中，所述目标对应关系具体用于表征所述第一显示器的横向单元网格数与所述第二显示器的横向单元网格数的比例关系，和所述第一显示器的纵向单元网格数与所述第二显示器的纵向单元网格数的比例关系。3.根据权利要求2所述的方法，其特征在于，所述基于所述第一取值，对所述第二显示器进行网格化，包括：当所述第一取值小于边长阈值时，增大所述第一取值，得到第三取值；其中，所述第三取值大于或等于所述边长阈值；基于所述第三取值，对所述第二显示器进行网格化；和/或，当网格数量小于网格数量阈值时，减小所述第一取值，得到第三取值；其中，所述第三取值大于或等于边长阈值；其中，所述网格数量是所述第一取值确定的所述第二显示器的横向网格数量和/或纵向网格数量；基于所述第三取值，对所述第二显示器进行网格化。4.根据权利要求3所述的方法，其特征在于，当所述第三取值不能被所述第二显示器的横向像素数整除时，所述第二显示器的空闲区域均匀分布在所述第二显示器的两个纵向边缘区域；当所述第三取值不能被所述第二显示器的纵向像素数整除时，所述第二显示器的空闲区域均匀分布在所述第二显示器的两个横向边缘区域；其中，所述空闲区域是所述第二显示器上的除显示所述第二界面之外的区域。
5.根据权利要求1至4任一项所述的方法，其特征在于，在所述第二显示器上显示所述第二界面之前，所述方法还包括：确定与所述第一控件功能相同、且控件的长宽比满足预设条件的第二控件；其中，所述预设条件为控件的长宽比与所述第二显示区域的长宽比的差值在预设范围内。6.根据权利要求5所述的方法，其特征在于，所述确定与所述第一控件功能相同、且控件的长宽比满足预设条件的第二控件，包括：确定与所述第一控件功能相同、表现形式不同，且控件的长宽比满足所述预设条件的控件集合；从所述控件集合中确定所述第二控件。7.一种界面显示装置，其特征在于，包括：获取模块、确定模块和显示模块；所述获取模块，用于获取目标对应关系，所述目标对应关系用于表征第一显示器的横向像素数与第二显示器的横向像素数的比例关系，和所述第一显示器的纵向像素数与所述第二显示器的纵向像素数的比例关系；所述第一显示器用于显示第一界面，所述第一界面包括第一控件；所述确定模块，用于根据所述目标对应关系和第一位置信息，确定第二位置信息；其中，所述第一位置信息用于指示所述第一控件在所述第一界面上的第一显示区域，所述第二位置信息用于指示第二控件在第二界面上的第二显示区域，所述第二控件是所述第一控件在所述第二界面上的体现；所述显示模块，用于在所述第二显示器上显示所述第二界面；其中，在所述第二显示区域显示所述第二控件。8.根据权利要求7所述的界面显示装置，其特征在于，所述界面显示装置还包括：执行模块：所述确定模块，还用于根据所述第二显示器的横向像素数和纵向像素数，确定单元网格的边长的第一取值；所述单元网格为正方形，且所述单元网格的边长均被所述第二显示器的横向像素数和纵向像素数整除；所述执行模块，用于基于所述第一取值，对所述第二显示器进行网格化；其中，所述第二显示区域包括至少一个单元网格；所述确定模块，还用于根据所述第一显示器的横向像素数和纵向像素数，确定单元网格的边长的第二取值；所述单元网格为正方形，且所述单元网格的边长均被所述第一显示器的横向像素数和纵向像素数整除；所述执行模块，还用于基于所述第二取值，对所述第一显示器进行网格化；所述第一显示区域包括至少一个单元网格；其中，所述目标对应关系具体用于表征所述第一显示器的横向单元网格数与所述第二显示器的横向单元网格数的比例关系，和所述第一显示器的纵向单元网格数与所述第二显示器的纵向单元网格数的比例关系；所述界面显示装置还包括：处理模块；所述处理模块，用于当所述第一取值小于边长阈值时，增大所述第一取值，得到第三取值；其中，所述第三取值大于或等于所述边长阈值；所述执行模块，用于基于所述第三取值，对所述第二显示器进行网格化；
和/或，所述处理模块，还用于当网格数量小于网格数量阈值时，减小所述第一取值，得到第三取值；其中，所述第三取值大于或等于边长阈值；其中，所述网格数量是所述第一取值确定的所述第二显示器的横向网格数量和/或纵向网格数量；所述执行模块，用于基于所述第三取值，对所述第二显示器进行网格化；所述界面显示装置还包括划分模块；所述划分模块，用于当所述第三取值不能被所述第二显示器的横向像素数整除时，所述第二显示器的空闲区域均匀分布在所述第二显示器的两个纵向边缘区域；所述划分模块，还用于当所述第三取值不能被所述第二显示器的纵向像素数整除时，所述第二显示器的空闲区域均匀分布在所述第二显示器的两个横向边缘区域；其中，所述空闲区域是所述第二显示器上的除显示所述第二界面之外的区域；所述确定模块，还用于确定与所述第一控件功能相同、且控件的长宽比满足预设条件的第二控件；其中，所述预设条件为控件的长宽比与所述第二显示区域的长宽比的差值在预设范围内；所述确定模块，具体确定与所述第一控件功能相同、表现形式不同，且控件的长宽比满足所述预设条件的控件集合；所述确定模块，还用于从所述控件集合中确定所述第二控件。9.一种界面显示装置，其特征在于，包括存储器和处理器，所述存储器与所述处理器耦合；所述存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令；当所述计算机指令被所述处理器执行时，使得所述界面显示装置执行如权利要求1至6中任一项所述的方法。10.一种计算机可读存储介质，其特征在于，存储有计算机指令，当所述计算机指令在计算设备上运行时，使得所述计算设备执行如权利要求1至6中任一项所述的方法。

技术总结
本申请实施例提供一种界面显示方法、装置及存储介质，涉及计算机技术领域，能够在大屏场景中实现动态界面布局。该方法包括：获取目标对应关系，目标对应关系用于表征第一显示器的横向像素数与第二显示器的横向像素数的比例关系，和第一显示器的纵向像素数与第二显示器的纵向像素数的比例关系；第一显示器用于显示第一界面，第一界面包括第一控件；根据目标对应关系和第一位置信息，确定第二位置信息；其中，第一位置信息用于指示第一控件在第一界面上的第一显示区域，第二位置信息用于指示第二控件在第二界面上的第二显示区域，第二控件是第一控件在第二界面上的体现；在第二显示器上显示第二界面；其中，在第二显示区域显示第二控件。二控件。二控件。


技术研发人员：鲁欣如 沈敏捷
受保护的技术使用者：杭州海康威视系统技术有限公司
技术研发日：2022.03.24
技术公布日：2023/10/6