CN112269620A - 显示方法及装置、电子设备和存储介质 - Google Patents
显示方法及装置、电子设备和存储介质 Download PDFInfo
- Publication number
- CN112269620A CN112269620A CN202011288755.8A CN202011288755A CN112269620A CN 112269620 A CN112269620 A CN 112269620A CN 202011288755 A CN202011288755 A CN 202011288755A CN 112269620 A CN112269620 A CN 112269620A
- Authority
- CN
- China
- Prior art keywords
- page
- size
- parameters
- elements
- determining
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 57
- 238000003860 storage Methods 0.000 title claims abstract description 23
- 238000006243 chemical reaction Methods 0.000 claims description 152
- 238000013519 translation Methods 0.000 claims description 23
- 238000004590 computer program Methods 0.000 claims description 15
- 230000009466 transformation Effects 0.000 claims description 10
- 230000000694 effects Effects 0.000 abstract description 16
- 230000006870 function Effects 0.000 description 40
- 238000012545 processing Methods 0.000 description 30
- 238000010586 diagram Methods 0.000 description 20
- 238000004891 communication Methods 0.000 description 11
- 238000005516 engineering process Methods 0.000 description 9
- 238000004364 calculation method Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 5
- 230000005540 biological transmission Effects 0.000 description 4
- 230000005236 sound signal Effects 0.000 description 4
- 238000011161 development Methods 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000010295 mobile communication Methods 0.000 description 2
- 230000001902 propagating effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- RYGMFSIKBFXOCR-UHFFFAOYSA-N Copper Chemical compound [Cu] RYGMFSIKBFXOCR-UHFFFAOYSA-N 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 230000000295 complement effect Effects 0.000 description 1
- 229910052802 copper Inorganic materials 0.000 description 1
- 239000010949 copper Substances 0.000 description 1
- 238000003384 imaging method Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 229910044991 metal oxide Inorganic materials 0.000 description 1
- 150000004706 metal oxides Chemical class 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开涉及一种显示方法及装置、电子设备和存储介质,所述方法包括:获取待显示的第一页面的第一尺寸及目标屏幕的第二尺寸;根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数;根据所述各个元素的第二参数,绘制所述第二页面;在所述目标屏幕中显示所述第二页面。本公开实施例可通过动态绘制,使得页面在不同尺寸的目标屏幕上显示时,不仅可全屏显示,还可减少页面样式错乱,提高显示效果。
Description
技术领域
本公开涉及计算机技术领域,尤其涉及一种显示方法及装置、电子设备和存储介质。
背景技术
大屏幕作为一种展示方式,在多个行业及产品中得到了广泛应用。在相关技术中,由于大屏幕的分辨率不固定,通过大屏幕展示页面时,往往会出现留白或页面无法正常显示的情况,例如页面样式(即页面排版)错乱、出现滚动条或部分内容无法显示等,显示效果较差。
发明内容
本公开提出了一种显示技术方案。
根据本公开的一方面,提供了一种显示方法,包括:获取待显示的第一页面的第一尺寸及目标屏幕的第二尺寸;根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数;根据所述各个元素的第二参数,绘制所述第二页面;在所述目标屏幕中显示所述第二页面。
根据本公开的实施例,可获取第一页面的第一尺寸及目标屏幕的第二尺寸,并根据第一尺寸、第二尺寸以及第一页面中元素的第一参数,确定元素在第二页面中的第二参数,然后根据各个元素的第二参数,绘制第二页面,并在目标屏幕中显示第二页面,从而可通过动态绘制,使得页面在不同尺寸(例如不同分辨率)的目标屏幕上显示时,不仅可全屏显示,还可减少页面样式错乱,提高显示效果。
在一种可能的实现方式中,所述根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数,包括:根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系;根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数。
在本公开的实施例中,通过确定第一页面中元素的参数与第二页面中元素的参数之间的转换关系,并根据第一页面中各个元素的第一参数以及转换关系,确定各个元素在第二页面中的第二参数,从而可减少确定各个元素的第二参数时的重复计算,提高处理效率。
在一种可能的实现方式中,所述第一尺寸包括第一宽度,所述第二尺寸包括第二宽度,所述元素的参数包括宽度和/或关键点位置,所述转换关系包括横向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;
所述根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标。
在本公开的实施例中,通过确定横向转换关系,并根据第一页面中各个元素的宽度和/或关键点横坐标,以及横向转换关系,确定各个元素在第二页面中的宽度和/或关键点横坐标,从而可对元素的水平方向的参数进行转换,准确性高,可提高页面显示效果。
在一种可能的实现方式中,所述第一尺寸包括第一高度,所述第二尺寸包括第二高度,所述元素的参数包括高度和/或关键点位置,所述转换关系包括纵向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
在本公开的实施例中,通过确定纵向转换关系,并根据第一页面中各个元素的高度和/或关键点纵坐标,以及纵向转换关系,确定各个元素在第二页面中的高度和/或关键点纵坐标,从而可对各个元素的垂直方向的参数进行转换,准确性高,可提高页面显示效果。
在一种可能的实现方式中,所述第一尺寸包括第一宽度及第一高度,所述第二尺寸包括第二宽度及第二高度,所述元素的参数包括宽度及高度,和/或,关键点位置,所述转换关系包括横向转换关系和纵向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;
根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述根据所述第一页面中元素的第一参数以及所述转换关系,确定所述元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标;
根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
在本公开的实施例中,通过确定横向转换关系及纵向转换关系,并根据第一页面中各个元素的第一参数(包括宽度及高度,和/或,关键点位置),以及横向转换关系及纵向转换关系,确定各个元素在第二页面中的第二参数(包括宽度及高度,和/或,关键点位置),从而可同时对各个元素的水平方向及垂直方向的参数进行转换,准确性高,可提高页面显示效果。
在一种可能的实现方式中,所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:根据所述第一尺寸及所述第二尺寸,确定尺寸配置表;根据所述尺寸配置表,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系。
在本公开的实施例中,可根据第一尺寸及第二尺寸确定尺寸配置表,并根据尺寸配置表,确定转换关系,从而可在处理过程中,减少重复获取第一尺寸及第二尺寸的次数,提高处理效率
在一种可能的实现方式中,所述第一尺寸与所述第二尺寸不同,从而可使得待显示的原始页面可以在不同尺寸的目标屏幕中进行显示。
在一种可能的实现方式中,所述第一页面包括网页web页面,所述元素包括图片、文字、表格中的至少一种,所述转换关系通过层叠样式表语言Sass来表示。
通过层叠样式表语言Sass来表示转换关系,可提高页面绘制效率。
根据本公开的一方面,提供了一种显示装置,包括:
尺寸获取模块,用于获取待显示的第一页面的第一尺寸及目标屏幕的第二尺寸;
参数确定模块,用于根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数;
页面绘制模块,用于根据所述各个元素的第二参数,绘制所述第二页面;
页面显示模块,用于在所述目标屏幕中显示所述第二页面。
在一种可能的实现方式中,所述参数确定模块,包括:
转换关系确定子模块,用于根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系;
参数确定子模块,用于根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数。
在一种可能的实现方式中,所述第一尺寸包括第一宽度,所述第二尺寸包括第二宽度,所述元素的参数包括宽度和/或关键点位置,所述转换关系包括横向转换关系,
所述转换关系确定子模块,被配置为:根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;
所述参数确定子模块,被配置为:根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标。
在一种可能的实现方式中,所述第一尺寸包括第一高度,所述第二尺寸包括第二高度,所述元素的参数包括高度和/或关键点位置,所述转换关系包括纵向转换关系,
所述转换关系确定子模块,被配置为:根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述参数确定子模块,被配置为:根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
在一种可能的实现方式中,所述第一尺寸包括第一宽度及第一高度,所述第二尺寸包括第二宽度及第二高度,所述元素的参数包括宽度及高度,和/或,关键点位置,所述转换关系包括横向转换关系和纵向转换关系,
所述转换关系确定子模块,被配置为:根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述参数确定子模块,被配置为:根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标;根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
在一种可能的实现方式中,所述转换关系确定子模块,被配置为:根据所述第一尺寸及所述第二尺寸,确定尺寸配置表;根据所述尺寸配置表,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系。
在一种可能的实现方式中,所述第一尺寸与所述第二尺寸不同。
在一种可能的实现方式中,所述第一页面包括网页web页面,所述元素包括图片、文字、表格中的至少一种,所述转换关系通过层叠样式表语言Sass来表示。
根据本公开的一方面,提供了一种电子设备,包括:处理器;用于存储处理器可执行指令的存储器;其中,所述处理器被配置为调用所述存储器存储的指令,以执行上述方法。
根据本公开的一方面,提供了一种计算机可读存储介质,其上存储有计算机程序指令,所述计算机程序指令被处理器执行时实现上述方法。
根据本公开的实施例,可获取第一页面的第一尺寸及目标屏幕的第二尺寸,并根据第一尺寸、第二尺寸以及第一页面中元素的第一参数,确定元素在第二页面中的第二参数,然后根据各个元素的第二参数,绘制第二页面,并在目标屏幕中显示第二页面,从而可通过动态绘制,使得页面在不同尺寸(例如不同分辨率)的目标屏幕上显示时,不仅可全屏显示,还可减少页面样式错乱,提高显示效果。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,而非限制本公开。根据下面参考附图对示例性实施例的详细说明,本公开的其它特征及方面将变得清楚。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,这些附图示出了符合本公开的实施例,并与说明书一起用于说明本公开的技术方案。
图1示出根据本公开实施例的显示方法的应用场景示意图。
图2示出根据本公开实施例的显示方法的流程图。
图3示出根据本公开实施例的显示方法的处理过程的示意图。
图4示出根据本公开实施例的显示装置的框图。
图5示出根据本公开实施例的电子设备的框图。
图6示出根据本公开实施例的电子设备的框图。
具体实施方式
以下将参考附图详细说明本公开的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面,但是除非特别指出,不必按比例绘制附图。
在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。
本文中术语“和/或”,仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合,例如,包括A、B、C中的至少一种,可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
另外,为了更好地说明本公开,在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解,没有某些具体细节,本公开同样可以实施。在一些实例中,对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述,以便于凸显本公开的主旨。
图1示出根据本公开实施例的显示方法的应用场景示意图。图1所示的应用场景提供了一种显示系统,该显示系统包括电子设备100及目标屏幕200,电子设备100通过通信线缆与目标屏幕200连接。
电子设备100中存储有若干个页面110,页面110可在目标屏幕200中进行显示,以便用户对页面进行展示、编辑或其他处理。其中,页面110可以为文档页面、设计图稿、网页web页面等,本公开对页面的具体类型不作限制。
用于页面显示的目标屏幕200可包括超长或超宽大屏幕、普通显示器等,其中,大屏幕可以为整块大屏幕或拼接大屏幕。本公开对目标屏幕200的具体类型不作限制。
电子设备100可用于执行本公开实施例的显示方法。电子设备100可以为终端设备或服务器。终端设备可以为用户设备(User Equipment,UE)、移动设备、用户终端、终端、蜂窝电话、无绳电话、个人数字处理(Personal Digital Assistant,PDA)、手持设备、计算设备、车载设备、可穿戴设备等。在一些可能的实现方式中,所述显示方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
图2示出根据本公开实施例的显示方法的流程图,如图2所示,所述显示方法包括:
在步骤S11中,获取待显示的第一页面的第一尺寸及目标屏幕的第二尺寸;
在步骤S12中,根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数;
在步骤S13中,根据所述各个元素的第二参数,绘制所述第二页面;
在步骤S14中,在所述目标屏幕中显示所述第二页面。在一种可能的实现方式中,在目标屏幕中显示页面时,在待显示的原始页面(可称为第一页面)的尺寸(例如分辨率)与目标屏幕的尺寸不一致的情况下,可根据原始页面的尺寸及目标屏幕的尺寸,绘制内容与原始页面相同且尺寸与目标屏幕相同的页面(可称为第二页面),并在目标屏幕中进行显示,从而可使得待显示的原始页面可以在不同尺寸的目标屏幕中进行显示。
在一种可能的实现方式中,第一页面可包括文档页面、设计图稿、网页web页面等。第一页面中可包括图片、文字、表格、音频、视频等多种元素。本公开对第一页面的具体类型及第一页面中包括的内容不作限制。
在一种可能的实现方式中,在目标屏幕中显示页面时,可在步骤S11中,获取待显示的第一页面的第一尺寸及目标屏幕的第二尺寸。第一尺寸及第二尺寸可通过分辨率来表示。可获取待显示的第一页面的分辨率并将其作为第一尺寸;可获取目标屏幕的分辨率并将其作为第二尺寸。
在一种可能的实现方式中,分辨率可通过手动查看的方式来确定,也可使用系统提供的函数来获取。例如,在Windows系统中,目标屏幕的第二尺寸为b1*b2(b1表示目标屏幕的宽度,b2表示目标屏幕的高度)时,可通过Windows系统提供的函数自动获取当前窗口的宽度及高度:通过b1=window.innerWidth来获取b1的具体取值,通过b2=window.innerHeight来获取b2的具体取值,然后将b1及b2的具体取值,确定为目标屏幕的第二尺寸。
需要说明的是,本领域技术人员可根据实际情况确定第一尺寸及第二尺寸的获取方式,本公开对此不作限制。
在一种可能的实现方式中,所述第一尺寸与所述第二尺寸不同。例如,待显示的第一页面的分辨率(即第一尺寸)为12000*2400,目标屏幕的分辨率(即第二尺寸)为11500*2100,第一尺寸与第二尺寸大小不同。
在一种可能的实现方式中,可在步骤S12中,根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数。
其中,所述第一页面中的元素可包括图片、文字、表格中的至少一种。元素的第一参数可用于表示该元素在第一页面中的尺寸(例如长度、宽度等)、位置等信息。本公开对第一参数的具体内容不作限制。
可根据第一尺寸、第二尺寸及第一页面中各个元素的第一参数,通过尺寸比对、等比计算、函数调用等方式,确定所述各个元素在第二页面中的第二参数。元素的第二参数可用于表示该元素在第二页面中的尺寸(例如长度、宽度等)、位置等信息。元素的第二参数的具体内容与其第一参数的具体内容相对应。
在一种可能的实现方式中,可在步骤S13中,根据各个元素的第二参数,例如尺寸、位置等信息,绘制第二页面,并在步骤S14中,在目标屏幕中显示第二页面。
根据本公开的实施例,可获取第一页面的第一尺寸及目标屏幕的第二尺寸,并根据第一尺寸、第二尺寸以及第一页面中元素的第一参数,确定元素在第二页面中的第二参数,然后根据各个元素的第二参数,绘制第二页面,并在目标屏幕中显示第二页面,从而可通过动态绘制,使得页面在不同尺寸(例如不同分辨率)的目标屏幕上显示时,不仅可全屏显示,还可减少页面样式错乱,提高显示效果。
在一种可能的实现方式中,步骤S12可包括:根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系;根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数。
在一种可能的实现方式中,可根据第一尺寸及第二尺寸,确定第一页面中元素的参数与第二页面中元素的参数之间的转换关系。可通过公式、函数等多种方式,来表示转换关系。本公开对转换关系的表示方式不作限制。
在一种可能的实现方式中,在转换关系通过函数表示时,可将函数定义为公共函数或全局函数,即开发项目中其他函数均可调用的函数。开发项目不同,编写函数时使用的语言可能不同。例如,在第一页面为网页web页面时,表示转换关系的函数可通过层叠样式表语言(Syntactically Awesome Stylesheets,简称Sass)来表示或编写,通过这种方式,可提高页面绘制效率。
确定转换关系后,可根据第一页面中各个元素的第一参数及所述转换关系,确定各个元素在第二页面中的第二参数。例如,可将第一页面中各个元素的第一参数,分别输入表示转换关系的函数中进行处理,得到各个元素在第二页面中的第二参数。
在本公开的实施例中,通过确定第一页面中元素的参数与第二页面中元素的参数之间的转换关系,并根据第一页面中各个元素的第一参数以及转换关系,确定各个元素在第二页面中的第二参数,从而可减少确定各个元素的第二参数时的重复计算,提高处理效率。
在一种可能的实现方式中,所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,可包括:
根据所述第一尺寸及所述第二尺寸,确定尺寸配置表;
根据所述尺寸配置表,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系。
在一种可能的实现方式中,可根据第一尺寸及第二尺寸,确定尺寸配置表。尺寸配置表可用于存储第一尺寸及第二尺寸,便于在需要使用时直接读取,无需多次重复获取第一尺寸及第二尺寸。
在一种可能的实现方式中,尺寸配置表可以是独立的配置文件,例如,可通过独立的文本格式、可扩展标记语言(Extensible Markup Language,简称XML)文件等来存储尺寸配置表。尺寸配置表也可以是表格、列表。本公开对尺寸配置表的具体形式不作限制。
尺寸配置表中的尺寸信息,可手动填写,也可以自动填写,例如,通过函数将获取到的第一尺寸及第二尺寸,填写至尺寸配置表中。本公开对此不作限制。
在一种可能的实现方式中,确定尺寸配置表后,可根据该尺寸配置表,确定第一页面中元素的参数及第二页面中元素的参数之间的转换关系。
在本公开的实施例中,可根据第一尺寸及第二尺寸确定尺寸配置表,并根据尺寸配置表,确定转换关系,从而可在处理过程中,减少重复获取第一尺寸及第二尺寸的次数,提高处理效率。
在一种可能的实现方式中,元素的参数可包括关键点位置、宽度及高度中的至少一种。其中,元素的关键点位置可用于确定元素在页面中的具体位置,每个元素可以有一个或多个关键点,本公开对此不作限制。
在一种可能的实现方式中,关键点位置可通过位置坐标来表示。位置坐标可以为绝对坐标,也可以为相对坐标,本公开对此不作限制。关键点位置可包括关键点横坐标和关键点纵坐标。
在一种可能的实现方式中,元素的宽度及高度可用于表示元素的尺寸。元素不同,其尺寸的表示方式可能不同。元素的宽度与高度相同时,其尺寸可通过宽度或高度来表示,例如,元素为正方形、圆形的图片或文字时,其尺寸可通过宽度或高度来表示;元素的宽度与高度不同时,其尺寸可通过宽度及高度来表示,例如,元素为长方形的图片、表格等,其尺寸可通过宽度或高度来表示。本领域技术人员可根据实际情况来确定各个元素的尺寸的表示方式,本公开对此不作限制。
在一种可能的实现方式中,所述第一尺寸包括第一宽度,所述第二尺寸包括第二宽度,所述元素的参数包括宽度和/或关键点位置,所述转换关系包括横向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;
所述根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标。
其中,横向转换关系可用于表示水平方向的转换关系。在一种可能的实现方式中,在所述第一尺寸包括第一宽度,第二尺寸包括第二宽度,元素的参数包括宽度和/或关键点位置的情况下,需确定元素的横向转换关系。可根据第一宽度及第二宽度,即第一页面与目标屏幕的水平方向的尺寸,确定第一页面中元素的参数与第二页面中元素的参数之间的横向转换关系;然后根据第一页面中各个元素的宽度和/或关键点横坐标,以及横向转换关系,确定各个元素在第二页面中的宽度和/或关键点横坐标。
举例来说,可通过第二宽度与第一宽度之间的等比计算来确定横向转换关系。可将横向转换关系表示为下述公式(1):
function(x)=x*b1/a1 (1)
公式(1)中,x表示第一页面中任一元素的宽度或关键点横坐标,a1表示第一宽度,b1表示第二宽度,function(x)表示该元素在第二页面中的宽度或关键点横坐标。
在上述公式(1)通过函数实现时,在得到第一页面中任一元素的宽度和/或关键点横坐标时,可将第一页面中该元素的宽度和/或关键点横坐标,分别作为输入参数,传递到根据上述公式(1)编写的横向转换函数中进行处理,横向转换函数的返回值即为该元素在第二页面中的宽度和/或关键点横坐标。
在本公开的实施例中,通过确定横向转换关系,并根据第一页面中各个元素的宽度和/或关键点横坐标,以及横向转换关系,确定各个元素在第二页面中的宽度和/或关键点横坐标,从而可对元素的水平方向的参数进行转换,准确性高,可提高页面显示效果。
在一种可能的实现方式中,所述第一尺寸包括第一高度,所述第二尺寸包括第二高度,所述元素的参数包括高度和/或关键点位置,所述转换关系包括纵向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
在一种可能的实现方式中,在第一尺寸包括第一高度,第二尺寸包括第二高度,元素的参数包括高度和/或关键点位置的情况下,需确定元素的纵向转换关系。可根据第一高度及第二高度,即第一页面与目标屏幕的垂直方向的尺寸,确定第一页面中元素的参数与第二页面中元素的参数之间的纵向转换关系;然后根据第一页面中各个元素的高度和/或关键点纵坐标,以及纵向转换关系,确定各个元素在第二页面中的高度和/或关键点纵坐标。
举例来说,可通过第二高度与第一高度之间的等比计算来确定纵向转换关系。可将纵向转换关系表示为下述公式(2):
function(y)=y*b2/a2 (2)
公式(2)中,y表示第一页面中任一元素的高度或关键点纵坐标,a2表示第一高度,b2表示第二高度,function(y)表示该元素在第二页面中的高度或关键点纵坐标。
在上述公式(2)通过函数实现时,在得到第一页面中任一元素的高度和/或关键点纵坐标时,可将第一页面中该元素的高度和/或关键点纵坐标,分别作为输入参数,传递到根据上述公式(2)编写的纵向转换函数中进行处理,纵向转换函数的返回值即为该元素在第二页面中的高度和/或关键点纵坐标。
在本公开的实施例中,通过确定纵向转换关系,并根据第一页面中各个元素的高度和/或关键点纵坐标,以及纵向转换关系,确定各个元素在第二页面中的高度和/或关键点纵坐标,从而可对各个元素的垂直方向的参数进行转换,准确性高,可提高页面显示效果。
在一种可能的实现方式中,所述第一尺寸包括第一宽度及第一高度,所述第二尺寸包括第二宽度及第二高度,所述元素的参数包括宽度及高度,和/或,关键点位置,所述转换关系包括横向转换关系和纵向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;
根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述根据所述第一页面中元素的第一参数以及所述转换关系,确定所述元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标;
根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
在一种可能的实现方式中,在第一尺寸包括第一宽度及第一高度,第二尺寸包括第二宽度及第二高度,第一页面中的元素的参数包括宽度及高度,和/或,关键点位置的情况下,需确定元素的横向转换关系和纵向转换关系。
可根据第一宽度及第二宽度,即第一页面与目标屏幕的水平方向的尺寸,确定第一页面中元素的参数与第二页面中元素的参数之间的横向转换关系,其中,横向转换关系可例如上述公式(1);
可根据第一高度及述第二高度,即第一页面与目标屏幕的垂直方向的尺寸,确定第一页面中元素的参数与第二页面中元素的参数之间的纵向转换关系,其中,纵向转换关系可例如上述公式(2)。
确定出横向转换关系及纵向转换关系后,可根据第一页面中各个元素的宽度和/或关键点横坐标,以及横向转换关系,确定各个元素在第二页面中的宽度和/或关键点横坐标,例如,可将第一页面中任一元素的宽度和/或关键点横坐标,输入上述公式(1),得到该元素在第二页面中的宽度和/或关键点横坐标;
可根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及纵向转换关系,确定各个元素在第二页面中的高度和/或关键点纵坐标,例如,可将第一页面中任一元素的高度和/或关键点纵坐标,输入上述公式(2),得到该元素在第二页面中的高度和/或关键点纵坐标。
在本公开的实施例中,通过确定横向转换关系及纵向转换关系,并根据第一页面中各个元素的第一参数(包括宽度及高度,和/或,关键点位置),以及横向转换关系及纵向转换关系,确定各个元素在第二页面中的第二参数(包括宽度及高度,和/或,关键点位置),从而可同时对各个元素的水平方向及垂直方向的参数进行转换,准确性高,可提高页面显示效果。
图3示出根据本公开实施例的显示方法的处理过程的示意图。如图3所示,可在步骤S201中,获取待显示的第一页面(例如web页面)的第一尺寸及目标屏幕的第二尺寸;在步骤S202中,根据第一尺寸及第二尺寸,确定尺寸配置表;在步骤S203中,根据尺寸配置表中的第一宽度及第二宽度,确定第一页面中元素的参数与第二页面中元素的参数之间的横向转换关系,并根据尺寸配置表中的第一高度及第二高度,确定第一页面中元素的参数与第二页面中元素的参数之间的纵向转换关系;在步骤S204中,通过层叠样式表语言Sass,建立CSS(Cascading Style Sheets,层叠样式表)样式函数,所述样式函数包括与横向转换关系对应的横向转换函数,以及与纵向转换关系对应的纵向转换函数;
然后可在步骤S205中,将第一页面中各个元素的第一参数分别输入样式函数中进行处理,得到各个元素在第二页面中的第二参数;在步骤S206中,根据各个元素的第二参数,绘制第二页面,并在步骤S207中,在目标屏幕中显示第二页面。
根据本公开的实施例,可在目标屏幕的尺寸与待显示的第一页面的尺寸不同的情况下,例如,目标屏幕的宽高比(宽度与高度的比值)与待显示的第一页面的宽高比不同的情况下,可使用上述显示方式,通过等比计算、函数封装等方式,确定第一页面中的各个元素在第二页面中的参数,并根据各个元素的第二参数,绘制并在目标屏幕中显示第二页面,从而不仅可使得第二页面在目标屏幕中全屏显示,而不产生留白或滚动,还可减少页面样式错乱,提高页面清晰度,进而提高显示效果。此外,通过函数封装,还可减少重复计算,提高处理效率。
例如,在大屏展示的前端web开发中,不同于常见的显示器,大屏通常具有分辨率大、宽度超长等特点,不便于开发人员确认展示效果。在该情况下,可使用上述显示方法,开发人员可将尺寸配置表中的第二尺寸(即目标屏幕的尺寸)修改为开发人员使用的普通显示器的分辨率,从而可在分辨率较小的显示器上也能直观地看到开发的样式效果。
在通过大屏展示页面时,在大屏的分辨率与待显示的第一页面的分辨率不一致的情况下,可使用上述显示方法,确定第一页面中的各个元素在第二页面中的参数,并根据各个元素的第二参数,绘制并在目标屏幕中显示第二页面,从而可减少页面样式错乱,提高页面清晰度,进而可提高显示效果。
可以理解,本公开提及的上述各个方法实施例,在不违背原理逻辑的情况下,均可以彼此相互结合形成结合后的实施例,限于篇幅,本公开不再赘述。本领域技术人员可以理解,在具体实施方式的上述方法中,各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
此外,本公开还提供了显示装置、电子设备、计算机可读存储介质、程序,上述均可用来实现本公开提供的任一种显示方法,相应技术方案和描述和参见方法部分的相应记载,不再赘述。
图4示出根据本公开实施例的显示装置的框图,如图4所示,所述显示装置应用于电子设备,该显示装置包括:
尺寸获取模块41,用于获取待显示的第一页面的第一尺寸及目标屏幕的第二尺寸;
参数确定模块42,用于根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数;
页面绘制模块43,用于根据所述各个元素的第二参数,绘制所述第二页面;
页面显示模块44,用于在所述目标屏幕中显示所述第二页面。
根据本公开的实施例,可获取第一页面的第一尺寸及目标屏幕的第二尺寸,并根据第一尺寸、第二尺寸以及第一页面中元素的第一参数,确定元素在第二页面中的第二参数,然后根据各个元素的第二参数,绘制第二页面,并在目标屏幕中显示第二页面,从而可通过动态绘制,使得页面在不同尺寸(例如不同分辨率)的目标屏幕上显示时,不仅可全屏显示,还可减少页面样式错乱,提高显示效果。
在一种可能的实现方式中,所述参数确定模块42,可包括:
转换关系确定子模块,用于根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系;
参数确定子模块,用于根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数。
在一种可能的实现方式中,所述第一尺寸包括第一宽度,所述第二尺寸包括第二宽度,所述元素的参数包括宽度和/或关键点位置,所述转换关系包括横向转换关系,
所述转换关系确定子模块,被配置为:根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;
所述参数确定子模块,被配置为:根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标。
在一种可能的实现方式中,所述第一尺寸包括第一高度,所述第二尺寸包括第二高度,所述元素的参数包括高度和/或关键点位置,所述转换关系包括纵向转换关系,
所述转换关系确定子模块,被配置为:根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述参数确定子模块,被配置为:根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
在一种可能的实现方式中,所述第一尺寸包括第一宽度及第一高度,所述第二尺寸包括第二宽度及第二高度,所述元素的参数包括宽度及高度,和/或,关键点位置,所述转换关系包括横向转换关系和纵向转换关系,
所述转换关系确定子模块,被配置为:根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述参数确定子模块,被配置为:根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标;根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
在一种可能的实现方式中,所述转换关系确定子模块,被配置为:根据所述第一尺寸及所述第二尺寸,确定尺寸配置表;根据所述尺寸配置表,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系。
在一种可能的实现方式中,所述第一尺寸与所述第二尺寸不同。
在一种可能的实现方式中,所述第一页面包括网页web页面,所述元素包括图片、文字、表格中的至少一种,所述转换关系通过层叠样式表语言Sass来表示。
在一些实施例中,本公开实施例提供的装置具有的功能或包含的模块可以用于执行上文方法实施例描述的方法,其具体实现可以参照上文方法实施例的描述,为了简洁,这里不再赘述。
本公开实施例还提出一种计算机可读存储介质,其上存储有计算机程序指令,所述计算机程序指令被处理器执行时实现上述方法。计算机可读存储介质可以是非易失性计算机可读存储介质。
本公开实施例还提出一种电子设备,包括:处理器;用于存储处理器可执行指令的存储器;其中,所述处理器被配置为调用所述存储器存储的指令,以执行上述方法。
本公开实施例还提供了一种计算机程序产品,包括计算机可读代码,当计算机可读代码在设备上运行时,设备中的处理器执行用于实现如上任一实施例提供的显示方法的指令。
本公开实施例还提供了另一种计算机程序产品,用于存储计算机可读指令,指令被执行时使得计算机执行上述任一实施例提供的显示方法的操作。
电子设备可以被提供为终端、服务器或其它形态的设备。
图5示出根据本公开实施例的一种电子设备500的框图。例如,电子设备500可以是移动电话,计算机,数字广播终端,消息收发设备,游戏控制台,平板设备,医疗设备,健身设备,个人数字助理等终端。
参照图5,电子设备500可以包括以下一个或多个组件:处理组件502,存储器504,电源组件506,多媒体组件508,音频组件510,输入/输出(I/O)的接口512,传感器组件514,以及通信组件516。
处理组件502通常控制电子设备500的整体操作,诸如与显示,电话呼叫,数据通信,相机操作和记录操作相关联的操作。处理组件502可以包括一个或多个处理器520来执行指令,以完成上述的方法的全部或部分步骤。此外,处理组件502可以包括一个或多个模块,便于处理组件502和其他组件之间的交互。例如,处理组件502可以包括多媒体模块,以方便多媒体组件508和处理组件502之间的交互。
存储器504被配置为存储各种类型的数据以支持在电子设备500的操作。这些数据的示例包括用于在电子设备500上操作的任何应用程序或方法的指令,联系人数据,电话簿数据,消息,图片,视频等。存储器504可以由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。
电源组件506为电子设备500的各种组件提供电力。电源组件506可以包括电源管理系统,一个或多个电源,及其他与为电子设备500生成、管理和分配电力相关联的组件。
多媒体组件508包括在所述电子设备500和用户之间的提供一个输出接口的屏幕。在一些实施例中,屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板,屏幕可以被实现为触摸屏,以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界,而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中,多媒体组件508包括一个前置摄像头和/或后置摄像头。当电子设备500处于操作模式,如拍摄模式或视频模式时,前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
音频组件510被配置为输出和/或输入音频信号。例如,音频组件510包括一个麦克风(MIC),当电子设备500处于操作模式,如呼叫模式、记录模式和语音识别模式时,麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器504或经由通信组件516发送。在一些实施例中,音频组件510还包括一个扬声器,用于输出音频信号。
I/O接口512为处理组件502和外围接口模块之间提供接口,上述外围接口模块可以是键盘,点击轮,按钮等。这些按钮可包括但不限于:主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件514包括一个或多个传感器,用于为电子设备500提供各个方面的状态评估。例如,传感器组件514可以检测到电子设备500的打开/关闭状态,组件的相对定位,例如所述组件为电子设备500的显示器和小键盘,传感器组件514还可以检测电子设备500或电子设备500一个组件的位置改变,用户与电子设备500接触的存在或不存在,电子设备500方位或加速/减速和电子设备500的温度变化。传感器组件514可以包括接近传感器,被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件514还可以包括光传感器,如互补金属氧化物半导体(CMOS)或电荷耦合装置(CCD)图像传感器,用于在成像应用中使用。在一些实施例中,该传感器组件514还可以包括加速度传感器,陀螺仪传感器,磁传感器,压力传感器或温度传感器。
通信组件516被配置为便于电子设备500和其他设备之间有线或无线方式的通信。电子设备500可以接入基于通信标准的无线网络,如无线网络(WiFi),第二代移动通信技术(2G)或第三代移动通信技术(3G),或它们的组合。在一个示例性实施例中,通信组件516经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中,所述通信组件516还包括近场通信(NFC)模块,以促进短程通信。例如,在NFC模块可基于射频识别(RFID)技术,红外数据协会(IrDA)技术,超宽带(UWB)技术,蓝牙(BT)技术和其他技术来实现。
在示例性实施例中,电子设备500可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现,用于执行上述方法。
在示例性实施例中,还提供了一种非易失性计算机可读存储介质,例如包括计算机程序指令的存储器504,上述计算机程序指令可由电子设备500的处理器520执行以完成上述方法。
图6示出根据本公开实施例的一种电子设备600的框图。例如,电子设备600可以被提供为一服务器。参照图6,电子设备600包括处理组件622,其进一步包括一个或多个处理器,以及由存储器632所代表的存储器资源,用于存储可由处理组件622的执行的指令,例如应用程序。存储器632中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外,处理组件622被配置为执行指令,以执行上述方法。
电子设备600还可以包括一个电源组件626被配置为执行电子设备600的电源管理,一个有线或无线网络接口650被配置为将电子设备600连接到网络,和一个输入输出(I/O)接口658。电子设备600可以操作基于存储在存储器632的操作系统,例如微软服务器操作系统(Windows ServerTM),苹果公司推出的基于图形用户界面操作系统(Mac OS XTM),多用户多进程的计算机操作系统(UnixTM),自由和开放原代码的类Unix操作系统(LinuxTM),开放原代码的类Unix操作系统(FreeBSDTM)或类似。
在示例性实施例中,还提供了一种非易失性计算机可读存储介质,例如包括计算机程序指令的存储器632,上述计算机程序指令可由电子设备600的处理组件622执行以完成上述方法。
本公开可以是系统、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质,其上载有用于使处理器实现本公开的各个方面的计算机可读程序指令。
计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是(但不限于)电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身,诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如,通过光纤电缆的光脉冲)、或者通过电线传输的电信号。
这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备,或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令,并转发该计算机可读程序指令,以供存储在各个计算/处理设备中的计算机可读存储介质中。
用于执行本公开操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码,所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等,以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中,通过利用计算机可读程序指令的状态信息来个性化定制电子电路,例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA),该电子电路可以执行计算机可读程序指令,从而实现本公开的各个方面。
这里参照根据本公开实施例的方法、装置(系统)和计算机程序产品的流程图和/或框图描述了本公开的各个方面。应当理解,流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合,都可以由计算机可读程序指令实现。
这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器,从而生产出一种机器,使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时,产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中,这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作,从而,存储有指令的计算机可读介质则包括一个制造品,其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。
也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上,使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤,以产生计算机实现的过程,从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。
附图中的流程图和框图显示了根据本公开的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分,所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中,所述计算机程序产品具体体现为计算机存储介质,在另一个可选实施例中,计算机程序产品具体体现为软件产品,例如软件开发包(Software Development Kit,SDK)等等。
以上已经描述了本公开的各实施例,上述说明是示例性的,并非穷尽性的,并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下,对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择,旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进,或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。
Claims (11)
1.一种显示方法,其特征在于,包括:
获取待显示的第一页面的第一尺寸及目标屏幕的第二尺寸;
根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数;
根据所述各个元素的第二参数,绘制所述第二页面;
在所述目标屏幕中显示所述第二页面。
2.根据权利要求1所述的方法,其特征在于,所述根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数,包括:
根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系;
根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数。
3.根据权利要求2所述的方法,其特征在于,所述第一尺寸包括第一宽度,所述第二尺寸包括第二宽度,所述元素的参数包括宽度和/或关键点位置,所述转换关系包括横向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;
所述根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标。
4.根据权利要求2所述的方法,其特征在于,所述第一尺寸包括第一高度,所述第二尺寸包括第二高度,所述元素的参数包括高度和/或关键点位置,所述转换关系包括纵向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述根据所述第一页面中各个元素的第一参数以及所述转换关系,确定所述各个元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
5.根据权利要求2所述的方法,其特征在于,所述第一尺寸包括第一宽度及第一高度,所述第二尺寸包括第二宽度及第二高度,所述元素的参数包括宽度及高度,和/或,关键点位置,所述转换关系包括横向转换关系和纵向转换关系,
所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一宽度及所述第二宽度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的横向转换关系;
根据所述第一高度及所述第二高度,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的纵向转换关系;
所述根据所述第一页面中元素的第一参数以及所述转换关系,确定所述元素在第二页面中的第二参数,包括:
根据所述第一页面中各个元素的宽度和/或关键点横坐标,以及所述横向转换关系,确定所述各个元素在第二页面中的宽度和/或关键点横坐标;
根据所述第一页面中各个元素的高度和/或关键点纵坐标,以及所述纵向转换关系,确定所述各个元素在第二页面中的高度和/或关键点纵坐标。
6.根据权利要求2所述的方法,其特征在于,所述根据所述第一尺寸及所述第二尺寸,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系,包括:
根据所述第一尺寸及所述第二尺寸,确定尺寸配置表;
根据所述尺寸配置表,确定所述第一页面中元素的参数与所述第二页面中元素的参数之间的转换关系。
7.根据权利要求1-6中任意一项所述的方法,其特征在于,所述第一尺寸与所述第二尺寸不同。
8.根据权利要求2-6中任意一项所述的方法,其特征在于,所述第一页面包括网页web页面,所述元素包括图片、文字、表格中的至少一种,所述转换关系通过层叠样式表语言Sass来表示。
9.一种显示装置,其特征在于,包括:
尺寸获取模块,用于获取待显示的第一页面的第一尺寸及目标屏幕的第二尺寸;
参数确定模块,用于根据所述第一尺寸、所述第二尺寸以及所述第一页面中各个元素的第一参数,确定所述各个元素在第二页面中的第二参数;
页面绘制模块,用于根据所述各个元素的第二参数,绘制所述第二页面;
页面显示模块,用于在所述目标屏幕中显示所述第二页面。
10.一种电子设备,其特征在于,包括:
处理器;
用于存储处理器可执行指令的存储器;
其中,所述处理器被配置为调用所述存储器存储的指令,以执行权利要求1至8中任意一项所述的方法。
11.一种计算机可读存储介质,其上存储有计算机程序指令,其特征在于,所述计算机程序指令被处理器执行时实现权利要求1至8中任意一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011288755.8A CN112269620A (zh) | 2020-11-17 | 2020-11-17 | 显示方法及装置、电子设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011288755.8A CN112269620A (zh) | 2020-11-17 | 2020-11-17 | 显示方法及装置、电子设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112269620A true CN112269620A (zh) | 2021-01-26 |
Family
ID=74339200
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011288755.8A Pending CN112269620A (zh) | 2020-11-17 | 2020-11-17 | 显示方法及装置、电子设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112269620A (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113010252A (zh) * | 2021-03-19 | 2021-06-22 | 掌阅科技股份有限公司 | 应用页面的展示方法、电子设备及存储介质 |
CN113867868A (zh) * | 2021-09-29 | 2021-12-31 | 北京达佳互联信息技术有限公司 | 显示参数确定方法、装置及存储介质 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20010011364A1 (en) * | 1998-01-07 | 2001-08-02 | Everett W. Stoub | System for converting scrolling display to non-scrolling columnar display |
CN107608670A (zh) * | 2016-07-12 | 2018-01-19 | 深圳联友科技有限公司 | 一种报表ui元素自适应展示的方法及系统 |
CN108363604A (zh) * | 2018-02-06 | 2018-08-03 | 四川虹美智能科技有限公司 | 一种分辨率适配方法、装置及业务系统 |
CN109308155A (zh) * | 2018-08-21 | 2019-02-05 | 中国平安人寿保险股份有限公司 | 调整页面的方法、装置、计算机设备及存储介质 |
CN110532488A (zh) * | 2018-05-23 | 2019-12-03 | 腾讯科技(深圳)有限公司 | 网页渲染方法、装置和电子设备 |
CN110908627A (zh) * | 2019-10-31 | 2020-03-24 | 维沃移动通信有限公司 | 投屏方法及第一电子设备 |
-
2020
- 2020-11-17 CN CN202011288755.8A patent/CN112269620A/zh active Pending
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20010011364A1 (en) * | 1998-01-07 | 2001-08-02 | Everett W. Stoub | System for converting scrolling display to non-scrolling columnar display |
CN107608670A (zh) * | 2016-07-12 | 2018-01-19 | 深圳联友科技有限公司 | 一种报表ui元素自适应展示的方法及系统 |
CN108363604A (zh) * | 2018-02-06 | 2018-08-03 | 四川虹美智能科技有限公司 | 一种分辨率适配方法、装置及业务系统 |
CN110532488A (zh) * | 2018-05-23 | 2019-12-03 | 腾讯科技(深圳)有限公司 | 网页渲染方法、装置和电子设备 |
CN109308155A (zh) * | 2018-08-21 | 2019-02-05 | 中国平安人寿保险股份有限公司 | 调整页面的方法、装置、计算机设备及存储介质 |
CN110908627A (zh) * | 2019-10-31 | 2020-03-24 | 维沃移动通信有限公司 | 投屏方法及第一电子设备 |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113010252A (zh) * | 2021-03-19 | 2021-06-22 | 掌阅科技股份有限公司 | 应用页面的展示方法、电子设备及存储介质 |
CN113010252B (zh) * | 2021-03-19 | 2022-08-09 | 掌阅科技股份有限公司 | 应用页面的展示方法、电子设备及存储介质 |
CN113867868A (zh) * | 2021-09-29 | 2021-12-31 | 北京达佳互联信息技术有限公司 | 显示参数确定方法、装置及存储介质 |
CN113867868B (zh) * | 2021-09-29 | 2024-05-17 | 北京达佳互联信息技术有限公司 | 显示参数确定方法、装置及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
EP3301559A1 (en) | Content sharing method and device | |
CN106569800B (zh) | 前端界面生成方法及装置 | |
CN112465843A (zh) | 图像分割方法及装置、电子设备和存储介质 | |
US9959487B2 (en) | Method and device for adding font | |
CN109285126B (zh) | 图像处理方法及装置、电子设备和存储介质 | |
EP3147802B1 (en) | Method and apparatus for processing information | |
CN106547547B (zh) | 数据采集方法及装置 | |
CN113065591B (zh) | 目标检测方法及装置、电子设备和存储介质 | |
CN110968364B (zh) | 添加快捷插件的方法、装置及智能设备 | |
CN110704059A (zh) | 图像处理方法、装置、电子设备及存储介质 | |
CN106504295B (zh) | 渲染图片的方法及装置 | |
CN112269620A (zh) | 显示方法及装置、电子设备和存储介质 | |
CN112541971A (zh) | 点云地图构建方法及装置、电子设备和存储介质 | |
CN110989905A (zh) | 信息处理方法及装置、电子设备和存储介质 | |
CN109992754B (zh) | 文档处理方法及装置 | |
CN105468606B (zh) | 网页保存的方法及装置 | |
CN112598676B (zh) | 图像分割方法及装置、电子设备和存储介质 | |
CN107179837B (zh) | 输入方法及装置 | |
CN112508020A (zh) | 标注方法及装置、电子设备和存储介质 | |
CN111354444A (zh) | 病理切片图像的展示方法及装置、电子设备和存储介质 | |
CN112035691A (zh) | 切片图像的细胞标注数据的展示方法及装置、设备和介质 | |
CN115391601B (zh) | 视频格式的检测方法、索引模型的构建方法及装置 | |
CN107679205B (zh) | 多媒体数据播放方法、装置、计算机设备及存储介质 | |
CN107885571B (zh) | 显示页面控制方法及装置 | |
CN108733731B (zh) | 一种更改文档中多媒体资源的便捷方法、装置及电子设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210126 |
|
RJ01 | Rejection of invention patent application after publication |