CN116088975A - 屏幕页面自适应展示方法、装置、系统、设备及存储介质 - Google Patents

Abstract

本申请公开一种屏幕页面自适应展示方法、装置、系统、设备及存储介质，相关实施例可应用于移动终端、大屏幕设备、车载终端等领域。该方法包括获取屏幕的待展示数据，从中提取出画布信息和组件信息；当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取屏幕的尺寸；根据画布信息和组件信息确定组件在画布上的布局类型；以布局类型对应的配置规则重配置组件信息，根据屏幕的尺寸重新配置画布信息，获得更新后的待展示数据；基于更新后的待展示数据生成页面并展示。通过本方案对待展示数据的自适应处理，能够生成与屏幕匹配的页面，从而组件在全屏展示的页面中保持组件原布局效果。进而，保证组件中数据的可视化展示效果。

Description

屏幕页面自适应展示方法、装置、系统、设备及存储介质

技术领域

本申请涉及数据可视化技术领域，尤其涉及一种屏幕页面自适应展示方法、装置、系统、设备及存储介质。

背景技术

随着各行各业数据量的高速增长，数据可视化需求急速扩大。数据的可视化展示已然成为当前的一大研究热点。在监控中心、调度中心、指挥中心等场所，数据大屏显示系统已经成为不可或缺的核心设施。数据大屏显示系统能够将数据通过页面上图表等组件的形式展示出来，帮助用户高效发现数据背后的关系、规律和变化趋势。

在传统的页面展示方案中，将设计好的画布及组件的布局效果通过直接缩放的方式形成铺满整个屏幕的页面。但是当屏幕的比例和画布的比例存在差异时，直接缩放形成的页面中，可能出现许多问题。以下列举3种问题：1、组件偏离其在原设计好的布局效果中所处的方位；2、组件发生形变；3、组件显示不全。下面结合图1至图4对上述3种问题情况的展示结果进行示意和说明。

图1展示出了一种设计好的画布及组件的布局效果示意图，在图1中，画布与组件A存在位置上的布局关联，组件A位于整张画布的右上角。基于图1的布局效果，采用传统的页面展示方法分别可能产生图2至图4中任一种页面展示效果。图2展示的组件A偏离于屏幕的右上角，相比于图1所示的布局效果中的组件A方位，更加居中。图3展示的组件A的字体相比于图1中组件A的字体发生拉伸。图4展示的组件A仅仅显露出部分字体，其他的部分未囊括到屏幕内。造成上述问题的原因就在于，在传统的页面展示方案中，尽管已经布局好组件和画布，但是由于屏幕的比例和画布的比例存在差异，因此在生成铺满全屏的页面时，无法将原设计好的布局效果适应屏幕比例差别地保持到屏幕上。

结合以上示例的说明可知，通过传统的页面展示技术展示页面很容易导致页面中组件的实际布局效果与原设计好的布局效果不匹配，进而，影响数据的可视化展示效果。如何将原设计好的组件及画布布局效果自适应地保持到全屏展示的页面上，已经成为数据可视化展示场景中中亟待解决的技术问题。

发明内容

本申请实施例提供了一种屏幕页面自适应展示方法、装置、系统、设备及存储介质，以将原设计的组件和画布布局自适应地保持到展示的页面上，提升数据可视化展示效果。

本申请第一方面提供了一种屏幕页面自适应展示方法，方法包括：

获取屏幕的待展示数据；

从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；

当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；

根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；

以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

基于所述更新后的待展示数据生成页面；

通过所述屏幕展示生成的所述页面。

本申请第二方面提供了一种屏幕页面自适应展示装置，装置包括：

数据获取单元，用于获取屏幕的待展示数据；

画布组件信息提取单元，用于从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；

屏幕尺寸获取单元，用于当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；

布局类型确定单元，用于根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；

数据更新单元，用于以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

页面生成单元，用于基于所述更新后的待展示数据生成页面；

展示单元，用于通过所述屏幕展示生成的所述页面。

本申请第三方面提供了一种屏幕页面自适应展示系统，系统包括具备屏幕的显示器，还包括：

页面编辑器，用于响应对于组件的可视化操作指令，完成组件在画布上的布局；

响应式布局规则系统，用于获取屏幕的待展示数据；从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；通过所述显示器展示人机交互窗口；当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

页面管理模块，用于基于所述更新后的待展示数据生成页面，以便所述屏幕进行展示。

本申请第四方面提供了一种计算机设备，包括：所述设备包括处理器以及存储器：

所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；

所述处理器用于根据所述程序代码中的指令执行第一方面所述的屏幕页面自适应展示方法。

本申请第五方面提供了一种计算机可读存储介质，所述计算机可读存储介质用于存储程序代码，所述程序代码用于执行第一方面所述的屏幕页面自适应展示方法。

从以上技术方案可以看出，本申请实施例具有以下优点：

本申请实施例中，获取屏幕的待展示数据；从待展示数据中提取出画布信息和组件信息；当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取屏幕的尺寸。接着通过对画布信息和组件信息进行分析来确定组件在画布上的布局类型，以该布局类型指导后续生成页面的操作。具体地，以该布局类型对应的配置规则重新配置组件信息，并根据屏幕的尺寸重新配置画布信息，获得更新后的待展示数据。由于在重新配置组件信息时，具体是按照组件布局类型对应的配置规则配置完成的，且画布也根据屏幕做出了尺寸调整，因此最终更新后的待展示数据可帮助组件在所展示的页面中继续保持原先组件在画布上的布局效果。例如，在原设计的布局类型组件沿着画布的右上角布局，即便画布的比例与屏幕的比例不同，通过实施本申请技术方案生成页面，也能够使组件布局在页面的右上角，进而保证了组件中数据的可视化展示效果。可见，本申请技术方案能够使组件在屏幕中展示时适应屏幕尺寸地保持原设计的组件布局效果。

附图说明

图1为一种设计好的画布及组件的布局效果示意图；

图2为组件偏离其在原设计好的布局效果中所处的方位的示意图；

图3为组件相比于设计好的布局效果发生形变的示意图；

图4为组件相比于设计好的布局效果显示不全的示意图；

图5为本申请实施例提供的一种屏幕页面自适应展示方法流程图；

图6A为本申请实施例提供的对组件进行创建和布局配置并展示页面的流程示意图；

图6B为屏幕页面自适应展示方法的另一流程图；

图7A为本申请实施例提供的通过不同的可视化操作实现组件动态布局配置的流程示意图；

图7B为对动态布局组件并基于动态布局的组件实现屏幕页面自适应展示的方法流程图；

图8为本申请实施例提供的可视化配置页面的界面示意图；

图9为本申请实施例提供的创建页面时展示的编辑窗口示意图；

图10为本申请实施例提供的编辑组件的界面示意图；

图11为本申请实施例提供的一种屏幕页面自适应展示装置结构示意图；

图12为本申请实施例提供的一种屏幕页面自适应展示系统结构示意图；

图13为本申请实施例中服务器的一个结构示意图；

图14为本申请实施例中终端设备的一个结构示意图。

具体实施方式

传统的页面展示技术难以将组件布局根据屏幕的尺寸或比例进行自适应的调整，导致组建中的数据可能因上述问题展示效果不佳，参见图2至图4。基于此问题，本申请实施例提供了一种屏幕页面自适应展示方法、装置、系统、设备及存储介质。本申请技术方案能够在屏幕的比例与画布的比例存在差异的情况下，将原设计的组件在画布上的布局效果保持到屏幕全屏展示的页面中，保证数据的可视化展示效果。

本申请实施例中介绍的技术方案可以应用在移动终端、大屏幕设备和车载终端等领域。具体运用的场景不限于人工智能、智慧交通、辅助驾驶、云技术等场景，在这些场景中都可能需要通过屏幕展示页面来呈现数据。

智能交通系统(Intelligent Traffic System，ITS)又称智能运输系统(Intelligent Transportation System)，是将先进的科学技术(信息技术、计算机技术、数据通信技术、传感器技术、电子控制技术、自动控制理论、运筹学、人工智能等)有效地综合运用于交通运输、服务控制和车辆制造，加强车辆、道路、使用者三者之间的联系，从而形成一种保障安全、提高效率、改善环境、节约能源的综合运输系统。

智能车路协同系统(Intelligent Vehicle Infrastructure CooperativeSystems，IVICS)，简称车路协同系统，是智能交通系统(ITS)的一个发展方向。车路协同系统是采用先进的无线通信和新一代互联网等技术，全方位实施车车、车路动态实时信息交互，并在全时空动态交通信息采集与融合的基础上开展车辆主动安全控制和道路协同管理，充分实现人车路的有效协同，保证交通安全，提高通行效率，从而形成的安全、高效和环保的道路交通系统。

以上提及的屏幕页面自适应展示可以应用于与屏幕具有通信关系的处理设备上，例如终端设备或服务器。该方法由终端设备或服务器独立执行，也可以应用于终端设备和服务器通信的网络场景，通过终端设备和服务器配合运行。其中，终端设备可以为手机、台式计算机、个人数字助理(Personal Digital Assistant，简称PDA)、平板电脑、智能家电、智能语音交互设备等设备。服务器可以理解为是应用服务器，也可以为Web服务器，在实际部署时，该服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。

下面结合实施例介绍方案的具体实现。参见图5，该图为本申请实施例提供的一种屏幕页面自适应展示方法流程图。如图5所示的方法包括：

S501：获取屏幕的待展示数据。

本申请实施例中，提供了人机交互的界面，通过界面用户可以完成对于画布、组件和数据源的配置。配置完成后，上文提及的处理设备即可以收集到屏幕待展示数据。

具体而言，在人机交互界面上展示有布局效果预览窗口和编辑窗口，其中，编辑窗口支持用户通过人机交互操作完成对于画布、组件和数据源的配置。而布局效果预览窗口则实时展示或者通过触发展示配置后生成的预览图像。例如，对画布上某一组件的尺寸进行放大配置，则布局效果预览窗口可以将该组件的放大效果展示出来。另外，用户也可以对组件进行可视化操作，例如删除、添加、拖拽、缩放等。通过收集这些指令也可以实现对组件的配置。

S502：从待展示数据中提取出画布信息和组件信息。

待展示数据中，涉及页面展示的关键在于画布信息和组件信息，因此为了便于后续生成页面的需求，需要从待展示数据中提取出画布信息和组件信息。

画布信息包括画布尺寸，组件信息包括画布上布局的组件的尺寸、位置和定位类型。

在本申请实施例中，画布信息包括画布尺寸。具体地，包括画布宽度和画布高度。组件信息包括画布上布局的组件的尺寸和位置和定位类型。其中组件的尺寸包括组件宽度和组件高度。为便于区分，后文中，画布宽度和画布高度分别用canvasWidth和canvasHeight表示，组件宽度和组件高度分别用componentWidth和componentHeight表示。

在对画布上组件的位置进行表示时，具体以画布上的顶点作为原点。实际应用中，可以将画布的左上顶点、左下顶点、右上顶点、右下顶点中任一顶点作为原点。为便于理解，后文以画布的左上顶点为组件定位的原点的示例进行介绍。画布上作为原点的顶点可以由人为设定，也可以将某一顶点作为默认的原点。

组件的定位类型(positionType)包括以下中的一种：左上定位(top-left)，左下定位(top-bottom)，右上定位(right-top)和右下定位(right-bottom)。组件的定位类型用于指示画布的多个顶点中作为原点的顶点。例如，组件的位置是以画布的左上顶点作为原点，则组件的定位类型为左上定位；组件的位置是以画布的左下顶点作为原点，则组件的定位类型为左下定位；组件的位置是以画布的右上顶点作为原点，则组件的定位类型为右上定位；组件的位置是以画布的右下顶点作为原点，则组件的定位类型为右下定位。

S503：当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取屏幕的尺寸。

人机交互窗口可以是编辑窗口，也可以是界面中展示的其他窗口，例如新的弹窗等。人机交互窗口可以设置有供用户确定需要基于屏幕自适应展示页面的图形控件，例如开关。当开关受到触发开启，则表示需要基于屏幕自适应展示页面；否则，可以按照对当前布局配置直接缩放处理，生成展示的页面。另外，人机交互窗口中供用户确定其展示意图的形式还可以是下拉菜单，勾选控件等等。此处不做限定。

屏幕的尺寸包括屏幕宽度和屏幕高度，分别用windowWidth和windowHeight表示。屏幕的尺寸、画布尺寸和组件的尺寸均以分辨率单位表示。在本申请实施例中屏幕的尺寸、画布尺寸和组件的尺寸均以分辨率单位表示。作为示例，上述尺寸的表示单位为像素(px)。例如屏幕尺寸为1000px×800px，表示屏幕宽度为1000px，屏幕高度为800px。

屏幕的尺寸直接影响了与原始画布及组件的匹配性，因此，为了在确定需要基于所述屏幕自适应展示页面后，将原设计的布局效果很好地保持到展示的页面中，需要获取屏幕的尺寸，进而完成后续的页面生成操作。

S504：根据画布信息和组件信息确定组件在画布上的布局类型。

在本申请实施例中组件信息和画布信息能够反映出原设计的画布和组件的布局效果。为了后续在全屏展示页面时，使组件的布局效果保持原设计的布局效果，需要执行本步骤确定出组件在原设计中的布局类型。布局类型能够在很大程度上反映布局效果。

本申请实施例中列举出组件的以下多种可能的布局类型：全屏布局、居中布局、左下角布局、右上角布局、右下角布局和左上角布局。组件的布局类型可以通过画布尺寸、组件的尺寸和组件的位置进行计算来确定。

在一种可选实现方式中，预先构建了布局类型判定条件集合，其中包括多种布局类型判定条件，各自与组件不同的布局类型对应。当需要确定组件的布局类型时，从布局类型判定条件集合中遍历布局类型判定条件。由于布局类型判定条件为关于画布尺寸和组件信息的判定条件，因此基于画布尺寸、组件尺寸和组件位置能够确定出是否满足遍历到的布局类型判定条件。为便于说明，将组件满足的布局类型判定条件可以作为目标判定条件。由于布局类型判定条件唯一对应布局类型，因此，通过目标判定条件以及判定条件与布局类型的对应关系，可以将目标判定条件对应的布局类型确定为组件的布局类型。例如，组件满足居中布局这一布局类型对应的判定条件，则组件在画布的布局类型为居中布局。

需要说明的时，在S504执行之前，组件的布局类型为默认布局类型，该默认布局类型为全屏布局、居中布局、左下角布局、右上角布局、右下角布局和左上角布局中的一种。作为示例，将左上角布局作为默认布局类型。但是通过S504的实施可以发现，实际确定出的组件布局类型可能是不同于默认布局类型的。对此，显然，为了保持原设计的组件布局效果，需要基于S504确定出的组件布局类型，即可以依照布局类型来重新配置组件信息，进而完成页面的生成，具体参见S505-S506。

在本示例中，组件的定位类型的默认值(默认值为top-left、top-bottom、right-top和right-bottom中的一种)为top-left为例。即，画布的左上角顶点作为组件定位的原点。组件的定位点为组件的左上角顶点。组件的位置信息是依据组件的定位点和画布上作为原点的顶点来确定的。组件的位置包括：组件的定位点相对于画布上原点的横坐标(positionX)和纵坐标(positionY)。

前文介绍的布局类型判定条件集合，具体可以是根据组件定位类型确定的。不同的定位类型可能对应于不同的布局类型判定条件集合。因此S504具体实现时，可以是首先根据所述组件的定位类型，确定所述定位类型对应的布局类型判定条件集合。其后基于所述画布尺寸、所述组件的尺寸和位置，在布局类型判定条件集合中遍历各布局类型判定条件，确定出所述组件满足的布局类型判定条件作为目标判定条件；将所述目标判定条件对应的布局类型确定为所述组件的布局类型。

S505：以布局类型对应的配置规则重新配置组件信息，并根据屏幕的尺寸重新配置画布信息，获得更新后的待展示数据。

几种不同布局类型的判定条件和对应的配置规则列举如下：

a、全屏布局

判定条件：组件横坐标的绝对值，组件纵坐标的绝对值，画布宽度与组件宽度之差的绝对值，画布高度与组件高度之差的绝对值，均小于或等于预设阈值。作为示例，预设阈值为5px，则判定条件a的数学表示为：

Math.abs(positionX)<＝5px&&Math.abs(positionY)<＝5px&&Math.abs(canvasWidth-componentWidth)<＝5px&&Math.abs(canvasHeight-componentHeight)<＝5px

其中，预设阈值还可以基于实际的需求进行设定，此处对预设阈值不做数值限定。预设阈值表征的是允许的误差范围，当允许误差范围越小时，可以将预设阈值设置得更小。

配置规则：将所述组件宽度和所述组件高度分别重新配置为所述屏幕的宽度和高度，将所述横坐标和所述纵坐标均重新配置为0。具体地：(componentWidth,componentHeight,positionType,positionX,positionY)＝(windowWidth,windowHeight,‘top-left’,0,0)。

b、居中布局

判定条件：第一差值的绝对值小于或等于预设阈值。其中，第一差值为通过将画布宽度的一半与横坐标的差值减去组件宽度的一半获得。预设阈值为5px为示例，则判定条件b的数学表示为：

Math.abs(canvasWidth/2-positionX-componentWidth/2)<＝5px

配置规则：将所述横坐标重新配置为所述宽度与所述组件宽度之差的一半。具体地：(positionType,positionX,positionY)＝(‘top-left’,(windowWidth-componentWidth)/2,positionY)。

c、左下角布局

判定条件：第二差值小于或等于画布高度与预设系数的乘积，且横坐标小于画布宽度的一半。其中，第二差值为通过将画布高度与纵坐标的差值减去组件高度获得。预设系数为0.1为示例，判定条件c的数学表示为：

(canvasHeight-positionY-componentHeight)<＝canvasHeight*0.1&&positionX<canvasWidth/2

其中，预设系数也可以根据实际需求进行设定，此处对预设系数的数值不做限定。

配置规则：将所述定位类型重新配置为左下定位，用于指示所述画布的左下角顶点作为所述原点，将所述纵坐标重新配置为所述第二差值。

具体地：(positionType,positionX,positionY)＝(‘bottom-left’,positionX,canvasHeight-positionY-componentHeight)。

d、右下角布局

判定条件：第二差值小于或等于画布高度与预设系数的乘积，且横坐标大于画布宽度的一半。判定条件d的数学表示为：

(canvasHeight-positionY-componentHeight)<＝canvasHeight*0.1&&positionX>canvasWidth/2

配置规则：将所述定位类型重新配置为右下定位，用于指示所述画布的右下角顶点作为所述原点，将所述横坐标重新配置为第三差值，将所述纵坐标重新配置为所述第二差值；所述第三差值为通过将所述画布宽度与所述横坐标的差值减去所述组件宽度获得。具体地：(positionType,positionX,positionY)＝(‘bottom-right’,canvasWidth-position-comonentWidth,canvasHeight-positionY-componentHeight)。

e、右上角布局

判定条件：组件横坐标大于画布宽度的一半，且组件的布局类型不为右下角布局。其中，前一条件数学表示为：

positionX>canvasWidth/2

配置规则：将所述定位类型重新配置为右上定位，用于指示所述画布的右上角顶点作为所述原点，将所述横坐标重新配置为所述第三差值。具体地：(positionType,positionX,positionY)＝(‘top-right’,canvasWidth-positionX-componentWidth,positionY)。

f、左上角布局

判定条件：组件的布局类型不属于全屏布局、居中布局、左下角布局、右上角布局、右下角布局和左上角布局，即不满足以上判定条件a至e。

配置规则：不变更组件信息。

以上示例中介绍了默认布局类型为左上角局部且默认定位类型为左上定位的场景中，当实际确定出布局类型不同于默认布局类型时基于实际确定出的布局类型对应的配置策略对组件信息进行重新配置的实现方式。当然，在默认布局类型为其他布局类型和/或组件的默认定位类型为其他定位类型时，以上的布局类型判定条件和配置规则均可能发生变更。

为了生成与屏幕适配的页面，还需要对画布尺寸进行调整。具体的调整方式为，当画布尺寸与屏幕尺寸不一致时，将画布尺寸的值变更为屏幕的尺寸，将画布的宽度和高度分别配置为所述屏幕的宽度和高度，使得画布尺寸全屏化为{windowWidth,windowHeight}。

通过以上对于画布信息和组件信息的重新配置完成了对待展示数据的更新。

S506：基于更新后的待展示数据生成页面。

将画布的位置属性设置为相对位置属性(relative)；根据更新后的待展示数据中的组件信息配置组件的布局属性，其中包括组件的位置属性(position)被设置为绝对位置属性。最终，根据画布及组件的位置属性以及组件的布局属性，通过层叠样式表CSS绝对定位布局技术渲染得到与屏幕适配的页面。

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

上文中，提及的配置组件的布局属性的操作如下：

若组件的布局类型为全屏布局，则该组件CSS布局属性(position,left,top,width,height)为(‘absolute’,0,0,componentWidth,componentHeight)；

若组件的布局类型为居中布局，则该组件CSS布局属性(position,left,top,width,height)为(‘absolute’,positionX,positionY,componentWidth,componentHeight)；

若组件的布局类型为左下角布局，positionType为bottom-left，则该组件CSS布局属性为(position,left,bottom,width,height)为(‘absolute’,positionX,positionY,componentWidth,componentHeight)；

若组件的布局类型为右下角布局，positionType为bottom-right，则该组件CSS布局属性为(position,right,bottom,width,height)为(‘absolute’,positionX,positionY,componentWidth,componentHeight)；

若组件的布局类型为右上角布局，positionType为top-right，则该组件CSS布局属性为(position,right,top,width,height)为(‘absolute’,positionX,positionY,componentWidth,componentHeight)；

若组件的布局类型为默认的左上角布局，positionType为top-left(默认值)，则该组件CSS布局属性为(position,left,top,width,height)为(‘absolute’,positionX,positionY,componentWidth,componentHeight)。

在前述实施例中，为便于说明，均是以单个组件为示例进行的说明。在画布上布局的组件均可以归纳到一个组件列表中，在执行以上操作时可以遍历列表，针对组件列表中每个组件分别执行相应的操作，从而共同根据操作后的结果生成页面。

S507：通过屏幕展示生成的页面。

通过生成页面后，即可以利用屏幕全屏展示该页面，展示的效果中组件的布局效果与初始布局配置信息预期达到的组件布局效果一致或者相仿。解决了图2至图4所示的多种组件数据可视化展示效果不佳的问题。

本申请实施例中，获取屏幕的待展示数据，从中提取出画布信息和组件信息；确定需要基于所述屏幕自适应展示页面时，获取屏幕的尺寸；根据画布信息和组件信息确定组件在画布上的布局类型；以布局类型对应的配置规则重配置组件信息，根据屏幕的尺寸重新配置画布信息，获得更新后的待展示数据；基于更新后的待展示数据生成页面并展示。通过本方案对待展示数据的自适应处理，能够生成与屏幕匹配的页面，从而组件在全屏展示的页面中保持组件原布局效果。进而，保证组件中数据的可视化展示效果。

本申请实施例中，图5所示的屏幕页面自适应展示方法可以作为一种可以选择开启与否的页面展示方法。例如，当选择开启时，执行图5所示流程中的各个步骤。而当不选择开启时，采用其他默认的页面展示方法，例如根据初始布局配置信息直接进行简单缩放算法，画布和其上布局的组件生成了平铺到整个屏幕的页面。在这种方案下，如果屏幕的比例和画布比例不一致，有可能产生图2至图4所示的可视化数据展示问题。在可选实现方式中，在可视化布局组件的窗口(人机交互窗口)中设置有图形控件形式的开关，根据画布信息和组件信息确定组件的布局类型，包括：当开关受到触发操作处于开启状态时，根据画布信息和组件信息确定组件的布局类型。否则，若开关处于关闭状态，则采用缩放方法基于初始布局配置信息生成页面进行展示。

在前文介绍的实施例步骤S501中提及，需要配置组件信息。在具体实现时，可以是接收作用于组件的可视化操作指令；可视化操作指令用于对组件在画布上的布局效果进行控制。可视化操作指令可以是添加操作、删除操作、拖拽操作、缩放操作等操作的指令，用于添加组件、删除组件、拖拽组件、缩放组件。在接收到可视化操作指令后，可以根据画布尺寸、组件的初始尺寸和初始位置以及可视化操作指令的类型和参数，获取组件的新尺寸和/或新位置。最后将所述新尺寸和/或所述新位置更新到所述编辑窗口展示的组件信息中。其中，可视化操作指令的类型可以是添加、删除、拖拽、缩放。可视化操作指令的参数可以是位移量添加位置、拖拽方向、拖拽距离、缩放倍数等。

在接收作用于组件的可视化操作指令之前，还需要确定可视化操作指令的对象，即组件。具体地，可以根据作用在组件库中组件的选中操作，确定组件作为可视化操作指令的操作对象；或者，根据作用在画布上组件的选中操作，确定组件作为可视化操作指令的操作对象。此方案主要针对的是组件库中已有的组件作为需要布局操作的组件。在实际应用中对于组件库中不具备的组件，为了进行可视化操作布局，还需要新创建并添加到组件库中。

图6A为对组件进行创建和布局配置并展示页面的流程示意图。如图6A所示，该流程主要划分为两个部分，分别是在页面编辑器中执行的流程和在组件编辑器中执行的流程。在页面编辑器中首先布局页面，相当于建立大屏应用或者编辑大屏应用，以备生成页面的操作。其后，从组件库中选择需要的组件，若组件不存在于组件库中，则需要通过组件编辑器开发组件，选择图标类型，例如折线图、条形图、饼图、面积图、地图、仪表盘、关系图、地理可视化等。配置数据源图表视觉配置，然后根据图表类型与配置生成预览图表，获得组件配置保存到组件库中。其间，还可能涉及到组件的调试。调试完成后加入到组件库中。对于组件库中包含需要的组件的情况，在布局时添加可选的需要的组件到画布中。通过可视化操作将组件放置到画布中的指定位置，完成布局。接着，可视化布局组件的窗口(一种人机交互窗口)中开关的开启或关闭状态决定了是否启用图5所示的页面展示方法重新配置组件信息和画布信息。当启用时，基于获取到的待展示数据进行自适应的更新配置，执行图5所示的方法流程；当不启用时，直接缩放布局的画布和组件生成铺满屏幕的页面。

结合人机交互场景下用户对于组件的可视化编辑操作，下面通过图6B介绍屏幕页面自适应展示方法的另一流程图。参见图6B，该方法包括：

S601：响应于页面创建操作创建空白页面。

其中页面创建操作可以通过用户触发页面创建模块实现，在创建页面的同时，弹出对页面的名称和备注编辑窗口。用户可以通过手动编辑的方式，为此次创建的页面命名，对其进行备注等。

S602：展示布局效果预览窗口和编辑窗口。

S603：响应于对画布的选中操作，在编辑窗口中展示画布的可选配置项。

例如，画布的颜色、纹理、尺寸等。

S604：响应于作用在画布的可选配置项的触发操作和/或编辑操作，获得画布信息。

S605：响应于对组件库中目标组件的选中操作，确定目标组件为本次的编辑对象。

选中操作可以通过点击实现，当然也可以通过其他支持的方式实现组件的选中。

S606：响应于作用在目标组件的可选配置项的触发操作和/或编辑操作，获得组件信息；或者响应于作用在目标组件的可视化操作，获得组件信息。

S607：响应于作用在目标组件的数据源导入框的编辑操作或者路径链接，获得组件的数据源。

S608：根据画布信息、画布上所有组件的组件信息和组件对应的数据源生成预览图像，通过布局效果预览窗口展示预览图像。

S609：当通过人机交互窗口确定布局效果配置完毕时，根据画布信息、画布上所有组件的组件信息和组件对应的数据源生成待展示数据。

本步骤中，该人机交互窗口可以是确定用户提供基于屏幕自适应展示页面意图的窗口，也可以是其他的人机交互窗口。此处，支持用户选择布局效果配置完毕的方式可以是窗口中提供的带有“确认当前布局配置效果”字样的图形控件。当用户触发该控件，表示用户确认了预览图像中组件与画布的布局。

S610：从待展示数据中提取出画布信息和组件信息。

S611：当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取屏幕的尺寸。

S612：根据画布信息和组件信息确定组件在画布上的布局类型。

S613：以布局类型对应的配置规则重新配置组件信息，并根据屏幕的尺寸重新配置画布信息，获得更新后的待展示数据。

S614：基于更新后的待展示数据生成页面并通过屏幕展示。下面介绍多种可视化操作对于布局配置的影响。图7A为通过不同的可视化操作实现组件动态布局配置的流程示意图。如图7A所示，当需要布局组件时，首先初始化画布的皮遏制，接着计算画布的宽度和高度，渲染组件的绝对布局，接着通过执行添加操作、删除操作、拖拽操作或缩放操作实现组件的添加、删除、拖拽或者缩放。对于添加组件或者删除组件的情况，可以在操作完成后获取新的布局，对画布上的布局进行更新；对于拖拽组件或者缩放组件的情况，对于布局中组件的布局需要发生相应的调整，例如，拖拽会使组件位置发生变化、缩放会使组件尺寸发生变化，最终也能够在操作完成后获取新的布局，对画布上的布局进行更新。以上提及的附图中，uuid表示组件的唯一标识符，newX、newY、newW、newH代表组件新的横纵坐标和组件新的宽度和高度。最终通过可视化操作布局完成后，可以保存布局配置获得待展示数据。

以下通过图7B介绍对动态布局组件并基于动态布局的组件实现屏幕页面自适应展示的方法流程图。如图7B所示，该方法包括：

S701：响应于对画布上布局的目标组件的可视化操作指令，确定可视化操作的类型。

S702：根据所述画布尺寸、目标组件的初始尺寸和目标位置以及所述可视化操作的类型和参数，获得目标组件的新尺寸和/或新位置。

S703：根据目标组件的新尺寸和/或新位置，完成对目标组件信息的更新，获得更新后的组件信息。

S704：根据更新后的组件信息和配置的画布信息以及组件数据源，获得待展示数据。

S705至S710的实现方式与S502至S507的实现方式基本相同，故此处不再赘述。

以大屏页面展示为例，传统的静态大屏可视化应用技术实现方案中，无法支持组件的动态配置布局，这意味着往往需要根据业务需求重复开发与实现数据大屏应用布局配置。

本发明通过基于React和CSS绝对定位技术，支持可视化自由画布操作方法与响应式布局系统，动态计算渲染组件画布布局样式，实现可视化数据大屏的工业化生产，极大提升了可视化数据大屏的工程开发效率。React是用于构建用户界面的JavaScript库。用户可以在React里传递多种类型的参数，如声明代码，帮助渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

为了便于理解实现画布和组件布局配置的可视化界面以及用户可执行的操作，下面通过几个附图进行讲解。图8为可视化配置页面的界面示意图。图8左侧为页面展示的画布中已经布局的多个组件的可视化列表；图8右侧为页面编辑器对画布的配置窗口；图8中央为画布、组件的布局效果预览窗口。在创建页面(大屏应用)之前，可进行名称和备注的编辑，弹出的编辑窗口如图9所示。进入创建的页面后，展示画布以及组件库，选中组件库中的特定组件并添加到画布当中后，如图10所示的编辑组件的界面示意图中右侧的组件编辑器窗口可以进行组件位置、组件尺寸的编辑。如果用户通过可视化操作改变组件位置和尺寸，在组件编辑器窗口中也会进行显示。另外还可以编辑组件的数据源，作为示例，数据源可以来源于特定的文件。为组件配置数据源时也可以编辑组件的数据类型和数据的具体内容。

基于前文介绍的屏幕页面自适应展示方法，相应地，本申请还提供了一种屏幕页面自适应展示装置。图11为该装置的结构示意图，如图11所示，屏幕页面自适应展示装置1100包括：

数据获取单元1101，用于获取屏幕的待展示数据；

画布组件信息提取单元1102，用于从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；

屏幕尺寸获取单元1103，用于当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；

布局类型确定单元1104，用于根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；

数据更新单元1105，用于以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

页面生成单元1106，用于基于所述更新后的待展示数据生成页面；

展示单元1107，用于通过所述屏幕展示生成的所述页面。

通过本方案对待展示数据的自适应处理，能够生成与屏幕匹配的页面，从而组件在全屏展示的页面中保持组件原布局效果。进而，保证组件中数据的可视化展示效果。

可选地，所述数据获取单元1101，包括：

窗口展示子单元，用于展示布局效果预览窗口和编辑窗口；

预览图像生成，用于根据所述编辑窗口中配置的画布信息、组件信息和组件对应的数据源生成预览图像；

内容展示子单元，用于在所述布局效果预览窗口中展示所述预览图像；

数据生成子单元，用于当通过所述人机交互窗口确定布局效果配置完毕时，根据画布信息、组件信息和组件对应的数据源生成所述待展示数据。

可选地，布局类型确定单元1104包括：

集合确定子单元，用于根据所述组件的定位类型，确定所述定位类型对应的布局类型判定条件集合；所述定位类型指示了所述画布的多个顶点中作为所述原点的顶点；

目标判定条件确定子单元，用于基于所述画布尺寸、所述组件的尺寸和位置，在布局类型判定条件集合中遍历各布局类型判定条件，确定出所述组件满足的布局类型判定条件作为目标判定条件；所述布局类型判定条件集合中的各布局类型判定条件为关于所述画布尺寸和所述组件信息的判定条件；

布局类型确定子单元，用于将所述目标判定条件对应的布局类型确定为所述组件的布局类型。

可选地，组件的位置包括所述组件的定位点相对于所述画布上原点的横坐标和纵坐标；所述定位类型指示了所述画布的多个顶点中作为所述原点的顶点；所述组件的定位类型的默认值为左上定位，用于指示所述画布的左上角顶点作为所述原点；所述组件的定位点为所述组件的左上角顶点；所述至少一种布局类型包括：全屏布局、居中布局、左下角布局、右上角布局、右下角布局和左上角布局；所述画布尺寸包括：画布宽度和画布高度；所述组件的尺寸包括：组件宽度和组件高度；

当所述目标判定条件为所述横坐标的绝对值，所述纵坐标的绝对值，所述画布宽度与所述组件宽度之差的绝对值，所述画布高度与所述组件高度之差的绝对值，均小于或等于预设阈值时，确定出的所述组件的布局类型为全屏布局；

当所述目标判定条件为第一差值的绝对值小于或等于所述预设阈值时，确定出的所述组件的布局类型为居中布局；所述第一差值为通过将所述画布宽度的一半与所述横坐标的差值减去所述组件宽度的一半获得；

当所述目标判定条件为第二差值小于或等于所述画布高度与预设系数的乘积，且所述横坐标小于所述画布宽度的一半时，确定出的所述组件的布局类型为左下角布局；所述第二差值为通过将所述画布高度与所述纵坐标的差值减去所述组件高度获得；

当所述目标判定条件为所述第二差值小于或等于所述画布高度与所述预设系数的乘积，且所述横坐标大于所述画布宽度的一半时，确定出的所述组件的布局类型为右下角布局；

当所述横坐标大于所述画布宽度的一半，且所述组件的布局类型不为右下角布局时，确定出的所述组件的布局类型为右上角布局；

当所述组件的布局类型不属于全屏布局、居中布局、左下角布局、右上角布局、右下角布局和左上角布局时，确定出的所述组件的布局类型为左上角布局。

可选地，数据更新单元1105用于：

当所述组件的布局类型为全屏布局时，将所述组件宽度和所述组件高度分别重新配置为所述屏幕的宽度和高度，将所述横坐标和所述纵坐标均重新配置为0；

当所述组件的布局类型为居中布局时，将所述横坐标重新配置为所述宽度与所述组件宽度之差的一半；

当所述组件的布局类型为左下角布局时，将所述定位类型重新配置为左下定位，用于指示所述画布的左下角顶点作为所述原点，将所述纵坐标重新配置为所述第二差值；

当所述组件的布局类型为右下角布局时，将所述定位类型重新配置为右下定位，用于指示所述画布的右下角顶点作为所述原点，将所述横坐标重新配置为第三差值，将所述纵坐标重新配置为所述第二差值；所述第三差值为通过将所述画布宽度与所述横坐标的差值减去所述组件宽度获得；

当所述组件的布局类型为右上角布局时，将所述定位类型重新配置为右上定位，用于指示所述画布的右上角顶点作为所述原点，将所述横坐标重新配置为所述第三差值。

数据更新单元1105具体用于根据所述屏幕的尺寸重新配置所述画布信息，具体实现时，将所述画布的宽度和高度分别配置为所述屏幕的宽度和高度。可选地，页面生成单元1107包括：

位置属性设置子单元，用于将所述画布的位置属性设置为相对位置属性；

布局属性设置子单元，用于根据所述更新后的待展示数据中的组件信息配置所述组件的布局属性；所述布局属性包括所述组件的位置属性，所述组件的位置属性被设置为绝对位置属性；

页面渲染子单元，用于根据所述画布及所述组件的位置属性以及所述组件的布局属性，通过层叠样式表CSS绝对定位布局技术渲染得到与所述屏幕适配的页面。

可选地，数据获取单元1101，包括：

指令接收子单元，用于接收作用于所述组件的可视化操作指令；所述可视化操作指令用于对所述组件在所述画布上的布局效果进行控制；

配置信息获取子单元，用于根据所述画布尺寸、所述组件的初始尺寸和初始位置以及所述可视化操作指令的类型和参数，获得所述组件的新尺寸和/或新位置；

组件信息更新子单元，用于将所述新尺寸和/或所述新位置更新到所述编辑窗口展示的组件信息中。

可选地，数据获取单元1101还包括：组件确定子单元，用于在所述接收作用于所述组件的可视化操作指令之前，根据作用在组件库中所述组件的选中操作，确定所述组件作为所述可视化操作指令的操作对象；或者，在所述接收作用于所述组件的可视化操作指令之前，根据作用在所述画布上所述组件的选中操作，确定所述组件作为所述可视化操作指令的操作对象。

以上实施例介绍的装置可以部署在服务器，也可以部署在终端设备。

在前述实施例介绍的屏幕页面自适应展示方法和装置的基础上，相应地，本申请还提供了一种屏幕页面自适应展示系统。图12为屏幕页面自适应展示系统的结构示意图。如图12所示，该系统1200包括具备屏幕的显示器，还包括：

页面编辑器，用于响应对于组件的可视化操作指令，完成组件在画布上的布局；

响应式布局规则系统，用于获取屏幕的待展示数据；从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；通过所述显示器展示人机交互窗口；当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

页面管理模块，用于基于所述更新后的待展示数据生成页面，以便所述屏幕进行展示。

可选地，屏幕页面自适应展示系统还包括：

组件编辑器，用于支持对组件的创建，并将创建的组件发布到组件库中；

组件管理模块，用于支持对组件库中的组件进行管理。

可选地，屏幕页面自适应展示系统还包括：

服务器，用于存储所述更新后的待展示数据和所述与所述页面管理模块生成的页面。

需要说明的是，本申请实施例中提供的屏幕页面自适应展示方法、装置及系统、设备中，布局的实现基于CSS绝对定位实现，也可以通过CSS弹性布局/CSS网格布局系统等布局系统，实现符合规则的大屏应用布局系统。本发明中响应式布局算法基于CSS规则系统实现，也可以按照产品需求，通过其他布局算法实现布局转换过程。本发明中组件实现基于React组件技术，也可以基于Vue/Angular/Web Component等其他组件技术实现；本发明中服务端实现基于Node.js服务器技术，也可以基于Python/PHP/Go等其他服务器技术实现。

图13是本申请实施例提供的一种服务器结构示意图，该服务器900可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器(central processingunits，CPU)922(例如，一个或一个以上处理器)和存储器932，一个或一个以上存储应用程序942或数据944的存储介质930(例如一个或一个以上海量存储设备)。其中，存储器932和存储介质930可以是短暂存储或持久存储。存储在存储介质930的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对服务器中的一系列指令操作。更进一步地，中央处理器922可以设置为与存储介质930通信，在服务器900上执行存储介质930中的一系列指令操作。

服务器900还可以包括一个或一个以上电源926，一个或一个以上有线或无线网络接口950，一个或一个以上输入输出接口958，和/或，一个或一个以上操作系统941，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM等等。

上述实施例中由服务器所执行的步骤可以基于该图13所示的服务器结构。

其中，CPU 922用于执行如下步骤：

获取屏幕的待展示数据；

从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；

当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；

根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；

以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

基于所述更新后的待展示数据生成页面；

通过所述屏幕展示生成的所述页面。本申请实施例还提供了另一种屏幕页面自适应展示设备，如图14所示，为了便于说明，仅示出了与本申请实施例相关的部分，具体技术细节未揭示的，请参照本申请实施例方法部分。该终端可以为包括手机、平板电脑、个人数字助理(英文全称：Personal Digital Assistant，英文缩写：PDA)、销售终端(英文全称：Point of Sales，英文缩写：POS)、车载电脑等任意终端设备，以终端为手机为例：

图14示出的是与本申请实施例提供的终端相关的手机的部分结构的框图。参考图14，手机包括：射频(英文全称：Radio Frequency，英文缩写：RF)电路1010、存储器1020、输入单元1030、显示单元1040、传感器1050、音频电路1060、无线保真(英文全称：wirelessfidelity，英文缩写：WiFi)模块1070、处理器1080、以及电源1090等部件。本领域技术人员可以理解，图14中示出的手机结构并不构成对手机的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图14对手机的各个构成部件进行具体的介绍：

RF电路1010可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，给处理器1080处理；另外，将设计上行的数据发送给基站。通常，RF电路1010包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(英文全称：LowNoise Amplifier，英文缩写：LNA)、双工器等。此外，RF电路1010还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(英文全称：Global System of Mobile communication，英文缩写：GSM)、通用分组无线服务(英文全称：General Packet Radio Service，GPRS)、码分多址(英文全称：CodeDivision Multiple Access，英文缩写：CDMA)、宽带码分多址(英文全称：Wideband CodeDivision Multiple Access,英文缩写：WCDMA)、长期演进(英文全称：Long TermEvolution，英文缩写：LTE)、电子邮件、短消息服务(英文全称：Short Messaging Service，SMS)等。

存储器1020可用于存储软件程序以及模块，处理器1080通过运行存储在存储器1020的软件程序以及模块，从而执行手机的各种功能应用以及数据处理。存储器1020可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器1020可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

输入单元1030可用于接收输入的数字或字符信息，以及产生与手机的用户设置以及功能控制有关的键信号输入。具体地，输入单元1030可包括触控面板1031以及其他输入设备1032。触控面板1031，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板1031上或在触控面板1031附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板1031可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器1080，并能接收处理器1080发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板1031。除了触控面板1031，输入单元1030还可以包括其他输入设备1032。具体地，其他输入设备1032可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元1040可用于显示由用户输入的信息或提供给用户的信息以及手机的各种菜单。显示单元1040可包括显示面板1041，可选的，可以采用液晶显示器(英文全称：Liquid Crystal Display，英文缩写：LCD)、有机发光二极管(英文全称：Organic Light-Emitting Diode，英文缩写：OLED)等形式来配置显示面板1041。进一步的，触控面板1031可覆盖显示面板1041，当触控面板1031检测到在其上或附近的触摸操作后，传送给处理器1080以确定触摸事件的类型，随后处理器1080根据触摸事件的类型在显示面板1041上提供相应的视觉输出。虽然在图14中，触控面板1031与显示面板1041是作为两个独立的部件来实现手机的输入和输入功能，但是在某些实施例中，可以将触控面板1031与显示面板1041集成而实现手机的输入和输出功能。

手机还可包括至少一种传感器1050，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板1041的亮度，接近传感器可在手机移动到耳边时，关闭显示面板1041和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于手机还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路1060、扬声器1061，传声器1062可提供用户与手机之间的音频接口。音频电路1060可将接收到的音频数据转换后的电信号，传输到扬声器1061，由扬声器1061转换为声音信号输出；另一方面，传声器1062将收集的声音信号转换为电信号，由音频电路1060接收后转换为音频数据，再将音频数据输出处理器1080处理后，经RF电路1010以发送给比如另一手机，或者将音频数据输出至存储器1020以便进一步处理。

WiFi属于短距离无线传输技术，手机通过WiFi模块1070可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图14示出了WiFi模块1070，但是可以理解的是，其并不属于手机的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器1080是手机的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器1020内的软件程序和/或模块，以及调用存储在存储器1020内的数据，执行手机的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器1080可包括一个或多个处理单元；优选的，处理器1080可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1080中。

手机还包括给各个部件供电的电源1090(比如电池)，优选的，电源可以通过电源管理系统与处理器1080逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管未示出，手机还可以包括摄像头、蓝牙模块等，在此不再赘述。

在本申请实施例中，该终端所包括的处理器1080还具有以下功能：

获取屏幕的待展示数据；

从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；

当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；

根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；

以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

基于所述更新后的待展示数据生成页面；

通过所述屏幕展示生成的所述页面。本申请实施例还提供一种计算机可读存储介质，用于存储程序代码，该程序代码用于执行前述各个实施例所述的一种屏幕页面自适应展示方法中的任意一种实施方式。

本申请实施例还提供一种包括指令的计算机程序产品，当其在计算机上运行时，使得计算机执行前述各个实施例所述的一种屏幕页面自适应展示方法中的任意一种实施方式。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

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

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

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

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

Claims (14)

1.一种屏幕页面自适应展示方法，其特征在于，包括：

获取屏幕的待展示数据；

从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；

当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；

根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；

以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

基于所述更新后的待展示数据生成页面；

通过所述屏幕展示生成的所述页面。

2.根据权利要求1所述的方法，其特征在于，所述获取屏幕的待展示数据，包括：

展示布局效果预览窗口和编辑窗口；

根据所述编辑窗口中配置的画布信息、组件信息和组件对应的数据源生成预览图像；

在所述布局效果预览窗口中展示所述预览图像；

当通过所述人机交互窗口确定布局效果配置完毕时，根据画布信息、组件信息和组件对应的数据源生成所述待展示数据。

3.根据权利要求1所述的方法，其特征在于，所述根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型，包括：

根据所述组件的定位类型，确定所述定位类型对应的布局类型判定条件集合；所述定位类型指示了所述画布的多个顶点中作为所述原点的顶点；

基于所述画布尺寸、所述组件的尺寸和位置，在布局类型判定条件集合中遍历各布局类型判定条件，确定出所述组件满足的布局类型判定条件作为目标判定条件；所述布局类型判定条件集合中的各布局类型判定条件为关于所述画布尺寸和所述组件信息的判定条件；

将所述目标判定条件对应的布局类型确定为所述组件的布局类型。

4.根据权利要求3所述的方法，其特征在于，所述组件的位置包括所述组件的定位点相对于所述画布上原点的横坐标和纵坐标；所述定位类型指示了所述画布的多个顶点中作为所述原点的顶点；所述组件的定位类型的默认值为左上定位，用于指示所述画布的左上角顶点作为所述原点；所述组件的定位点为所述组件的左上角顶点；所述布局类型包括：全屏布局、居中布局、左下角布局、右上角布局、右下角布局和左上角布局；所述画布尺寸包括：画布宽度和画布高度；所述组件的尺寸包括：组件宽度和组件高度；

当所述目标判定条件为所述横坐标的绝对值，所述纵坐标的绝对值，所述画布宽度与所述组件宽度之差的绝对值，所述画布高度与所述组件高度之差的绝对值，均小于或等于预设阈值时，确定出的所述组件的布局类型为全屏布局；

当所述目标判定条件为第一差值的绝对值小于或等于所述预设阈值时，确定出的所述组件的布局类型为居中布局；所述第一差值为通过将所述画布宽度的一半与所述横坐标的差值减去所述组件宽度的一半获得；

当所述目标判定条件为第二差值小于或等于所述画布高度与预设系数的乘积，且所述横坐标小于所述画布宽度的一半时，确定出的所述组件的布局类型为左下角布局；所述第二差值为通过将所述画布高度与所述纵坐标的差值减去所述组件高度获得；

当所述目标判定条件为所述第二差值小于或等于所述画布高度与所述预设系数的乘积，且所述横坐标大于所述画布宽度的一半时，确定出的所述组件的布局类型为右下角布局；

当所述横坐标大于所述画布宽度的一半，且所述组件的布局类型不为右下角布局时，确定出的所述组件的布局类型为右上角布局；

当所述组件的布局类型不属于全屏布局、居中布局、左下角布局、右上角布局、右下角布局和左上角布局时，确定出的所述组件的布局类型为左上角布局。

5.根据权利要求4所述的方法，其特征在于，所述以所述布局类型对应的配置规则重新配置所述组件信息，包括：

当所述组件的布局类型为全屏布局时，将所述组件宽度和所述组件高度分别重新配置为所述屏幕的宽度和高度，将所述横坐标和所述纵坐标均重新配置为0；

当所述组件的布局类型为居中布局时，将所述横坐标重新配置为所述宽度与所述组件宽度之差的一半；

当所述组件的布局类型为左下角布局时，将所述定位类型重新配置为左下定位，用于指示所述画布的左下角顶点作为所述原点，将所述纵坐标重新配置为所述第二差值；

当所述组件的布局类型为右下角布局时，将所述定位类型重新配置为右下定位，用于指示所述画布的右下角顶点作为所述原点，将所述横坐标重新配置为第三差值，将所述纵坐标重新配置为所述第二差值；所述第三差值为通过将所述画布宽度与所述横坐标的差值减去所述组件宽度获得；

当所述组件的布局类型为右上角布局时，将所述定位类型重新配置为右上定位，用于指示所述画布的右上角顶点作为所述原点，将所述横坐标重新配置为所述第三差值。

6.根据权利要求3所述的方法，其特征在于，所述根据所述屏幕的尺寸重新配置所述画布信息，包括：

将所述画布的宽度和高度分别配置为所述屏幕的宽度和高度；

所述基于所述更新后的待展示数据生成页面，包括：

将所述画布的位置属性设置为相对位置属性；

根据所述更新后的待展示数据中的组件信息配置所述组件的布局属性；所述布局属性包括所述组件的位置属性，所述组件的位置属性被设置为绝对位置属性；

根据所述画布及所述组件的位置属性以及所述组件的布局属性，通过层叠样式表CSS绝对定位布局技术渲染得到与所述屏幕适配的页面。

7.根据权利要求2所述的方法，其特征在于，配置所述组件信息包括：

接收作用于所述组件的可视化操作指令；所述可视化操作指令用于对所述组件在所述画布上的布局效果进行控制；

根据所述画布尺寸、所述组件的初始尺寸和初始位置以及所述可视化操作指令的类型和参数，获得所述组件的新尺寸和/或新位置；

将所述新尺寸和/或所述新位置更新到所述编辑窗口展示的组件信息中。

8.根据权利要求7所述的方法，其特征在于，在所述接收作用于所述组件的可视化操作指令之前，还包括：

根据作用在组件库中所述组件的选中操作，确定所述组件作为所述可视化操作指令的操作对象；或者，

根据作用在所述画布上所述组件的选中操作，确定所述组件作为所述可视化操作指令的操作对象。

9.一种屏幕页面自适应展示装置，其特征在于，包括：

数据获取单元，用于获取屏幕的待展示数据；

画布组件信息提取单元，用于从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；

屏幕尺寸获取单元，用于当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；

布局类型确定单元，用于根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；

数据更新单元，用于以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

页面生成单元，用于基于所述更新后的待展示数据生成页面；

展示单元，用于通过所述屏幕展示生成的所述页面。

10.一种屏幕页面自适应展示系统，其特征在于，包括具备屏幕的显示器，还包括：

页面编辑器，用于响应对于组件的可视化操作指令，完成组件在画布上的布局；

响应式布局规则系统，用于获取屏幕的待展示数据；从所述待展示数据中提取出画布信息和组件信息；所述画布信息包括画布尺寸，所述组件信息包括所述画布上布局的组件的尺寸、位置和定位类型；通过所述显示器展示人机交互窗口；当通过人机交互窗口确定需要基于所述屏幕自适应展示页面时，获取所述屏幕的尺寸；所述屏幕的尺寸、所述画布尺寸和所述组件的尺寸均以分辨率单位表示；根据所述画布信息和所述组件信息确定所述组件在所述画布上的布局类型；以所述布局类型对应的配置规则重新配置所述组件信息，并根据所述屏幕的尺寸重新配置所述画布信息，获得更新后的待展示数据；

页面管理模块，用于基于所述更新后的待展示数据生成页面，以便所述屏幕进行展示。

11.根据权利要求10所述的系统，其特征在于，还包括：

组件编辑器，用于支持对组件的创建，并将创建的组件发布到组件库中；

组件管理模块，用于支持对组件库中的组件进行管理。

12.根据权利要求10或11所述的系统，其特征在于，还包括：

服务器，用于存储所述更新后的待展示数据和所述与所述页面管理模块生成的页面。

13.一种计算机设备，其特征在于，所述设备包括处理器以及存储器：

所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；

所述处理器用于根据所述程序代码中的指令执行权利要求1至8中任一项所述的屏幕页面自适应展示方法。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储程序代码，所述程序代码用于执行权利要求1至8中任一项所述的屏幕页面自适应展示方法。

Images