CN106326251B - 待展示对象的全尺寸适配方法及装置 - Google Patents

待展示对象的全尺寸适配方法及装置 Download PDF

Info

Publication number
CN106326251B
CN106326251B CN201510351562.5A CN201510351562A CN106326251B CN 106326251 B CN106326251 B CN 106326251B CN 201510351562 A CN201510351562 A CN 201510351562A CN 106326251 B CN106326251 B CN 106326251B
Authority
CN
China
Prior art keywords
presented
size
location
adaptation
display area
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.)
Active
Application number
CN201510351562.5A
Other languages
English (en)
Other versions
CN106326251A (zh
Inventor
毕波
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201510351562.5A priority Critical patent/CN106326251B/zh
Priority to PCT/CN2016/085937 priority patent/WO2016206559A1/zh
Publication of CN106326251A publication Critical patent/CN106326251A/zh
Priority to US15/852,464 priority patent/US10853912B2/en
Application granted granted Critical
Publication of CN106326251B publication Critical patent/CN106326251B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/04—Context-preserving transformations, e.g. by using an importance map
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G06T3/4092—Image resolution transcoding, e.g. by using client-server architectures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • 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
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T5/00—Image enhancement or restoration
    • G06T5/73—Deblurring; Sharpening

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供了一种待展示对象的全尺寸适配方法及装置。所述方法包括：获取待展示对象包含的元素以及所述元素的描述信息，所述元素的描述信息包括：元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则；基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置；以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素。本申请实现了保证待展示对象展示效果的同时实现全尺寸适配。

Description

待展示对象的全尺寸适配方法及装置
技术领域
本申请涉及计算机技术领域，尤其涉及一种待展示对象的全尺寸适配方法及装置。
背景技术
待展示对象是指可以展示于网页或终端的任意应用界面的对象的统称。其可以是一张图片，也可以是图片与文字等其他信息的组合。
目前的待展示对象制作一次只能适应单一尺寸，也就是在制作待展示对象时，直接确定待展示对象中所包含的所有元素的尺寸及位置信息，该尺寸及位置信息是固定不变的。而当需要将该待展示对象展示于某一展示区域时，往往展示区域的尺寸与制作的待展示对象的尺寸不一致，则出现待展示对象的尺寸无法适配展示区域尺寸的情况。
为了解决上述问题，一般采用将待展示对象进行缩放或拉伸等处理实现待展示对象的全尺寸适配。而缩放及拉伸处理会影响待展示对象的展示效果，例如，会出现待展示对象变形、或模糊等情况，因此该处理方式无法保证待展示对象的展示效果。
发明内容
本申请解决的技术问题之一是提供待展示对象的全尺寸适配方法及装置，在保证待展示对象的展示效果的同时，简单方便的实现全尺寸适配。
根据本申请一方面的一个实施例，提供了一种待展示对象的全尺寸适配方法，包括：
获取待展示对象包含的元素以及所述元素的描述信息，所述元素的描述信息包括：元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则；
基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置；
以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素。
根据本申请另一方面的一个实施例，提供了一种待展示对象的全尺寸适配装置，包括：
获取单元，用于获取待展示对象包含的元素以及所述元素的描述信息，所述元素的描述信息包括：元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则；
确定单元，用于基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置；
展示单元，用于以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素。
本实施例获取待展示对象的所包含的元素及元素的描述信息，基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，可以确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置，最终以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素。由于所述元素的描述信息中包括元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则，因此按照该规则可以在保证待展示对象的展示效果的同时，简单方便的令待展示对象可以适配各种展示区域，不会出现待展示对象的变形及模糊等情况。
本领域普通技术人员将了解，虽然下面的详细说明将参考图示实施例、附图进行，但本申请并不仅限于这些实施例。而是，本申请的范围是广泛的，且意在仅通过后附的权利要求限定本申请的范围。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：
图1是根据本申请一个实施例的待展示对象的全尺寸适配方法的流程图。
图2是根据本申请一个实施例的获取的各元素间父子关系示意图。
图3是根据本申请一个实施例的以适配后的尺寸展示待展示对象示意图。
图4是根据本申请另一个实施例的以适配后的尺寸展示待展示对象示意图。
图5是根据本申请一个实施例的待展示对象的全尺寸适配装置的结构示意图。
附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。
所述计算机设备包括用户设备与网络设备。其中，所述用户设备包括但不限于电脑、智能手机、PDA等；所述网络设备包括但不限于单个网络服务器、多个网络服务器组成的服务器组或基于云计算(Cloud Computing)的由大量计算机或网络服务器构成的云，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个超级虚拟计算机。其中，所述计算机设备可单独运行来实现本申请，也可接入网络并通过与网络中的其他计算机设备的交互操作来实现本申请。其中，所述计算机设备所处的网络包括但不限于互联网、广域网、城域网、局域网、VPN网络等。
需要说明的是，所述用户设备、网络设备和网络等仅为举例，其他现有的或今后可能出现的计算机设备或网络如可适用于本申请，也应包含在本申请保护范围以内，并以引用方式包含于此。
后面所讨论的方法(其中一些通过流程图示出)可以通过硬件、软件、固件、中间件、微代码、硬件描述语言或者其任意组合来实施。当用软件、固件、中间件或微代码来实施时，用以实施必要任务的程序代码或代码段可以被存储在机器或计算机可读介质(比如存储介质)中。(一个或多个)处理器可以实施必要的任务。
这里所公开的具体结构和功能细节仅仅是代表性的，并且是用于描述本申请的示例性实施例的目的。但是本申请可以通过许多替换形式来具体实现，并且不应当被解释成仅仅受限于这里所阐述的实施例。
应当理解的是，虽然在这里可能使用了术语“第一”、“第二”等等来描述各个单元，但是这些单元不应当受这些术语限制。使用这些术语仅仅是为了将一个单元与另一个单元进行区分。举例来说，在不背离示例性实施例的范围的情况下，第一单元可以被称为第二单元，并且类似地第二单元可以被称为第一单元。这里所使用的术语“和/或”包括其中一个或更多所列出的相关联项目的任意和所有组合。
应当理解的是，当一个单元被称为“连接”或“耦合”到另一单元时，其可以直接连接或耦合到所述另一单元，或者可以存在中间单元。与此相对，当一个单元被称为“直接连接”或“直接耦合”到另一单元时，则不存在中间单元。应当按照类似的方式来解释被用于描述单元之间的关系的其他词语(例如“处于...之间”相比于“直接处于...之间”，“与...邻近”相比于“与...直接邻近”等等)。
这里所使用的术语仅仅是为了描述具体实施例而不意图限制示例性实施例。除非上下文明确地另有所指，否则这里所使用的单数形式“一个”、“一项”还意图包括复数。还应当理解的是，这里所使用的术语“包括”和/或“包含”规定所陈述的特征、整数、步骤、操作、单元和/或组件的存在，而不排除存在或添加一个或更多其他特征、整数、步骤、操作、单元、组件和/或其组合。
还应当提到的是，在一些替换实现方式中，所提到的功能/动作可以按照不同于附图中标示的顺序发生。举例来说，取决于所涉及的功能/动作，相继示出的两幅图实际上可以基本上同时执行或者有时可以按照相反的顺序来执行。
本申请实施例中所述的待展示对象的全尺寸适配是指待展示对象的尺寸可以适应不同尺寸的展示区域，同时保证待展示对象的展示效果。保证待展示对象的展示效果包括但不限于：不改变待展示对象中任一元素的视觉特征。
本申请实施例实现在保证待展示对象的展示效果的情况下实现全尺寸适配的方案为：将全尺寸适配逻辑封装成一个工具，将该工具安装于需要实现全尺寸适配的设备(例如，网络设备或用户端设备)中。本申请实施例的待展示对象需要按照本申请约定的规则制作。在执行待展示对象的全尺寸适配时，由安装了所述工具的设备根据所述规则以及展示区域的尺寸确定待展示对象的尺寸，以实现待展示对象的尺寸可以适应展示区域的尺寸，这样制作的待展示对象可以适应各种展示区域的尺寸。
其中，可以采用JavaScript语言制作本申请实施例的满足约定规则的待展示对象。当然，本实施例并不局限于此。按照本申请实施例约定的规则制作的待展示对象至少包括：元素以及元素的描述信息。
所述元素即该待展示对象中包含的组成部分。
其中，为便于识别，可使用指定属性标识标记每个元素及元素的描述信息。例如，使用data-rwd标识来标记待展示对象中的元素及元素的描述信息。
在元素的描述信息中至少包含如下信息：元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则。也就是，本申请实施例是以父子关系描述元素间的关系。由于本申请实施例是基于父子关系适配不同尺寸的展示区域的规则，因此在该规则中描述元素的尺寸及位置时，不但可以描述元素尺寸允许的范围、元素之间距离等，还可以描述诸如：子元素的某一尺寸与另一元素的某一尺寸相同，或子元素的某一尺寸占父元素的比值、或子元素与父元素某一边的距离是另一元素某一尺寸的倍数等等，也就是基于父子关系适配不同尺寸的展示区域的规则能够充分描述元素间的尺寸或位置关系，使得元素的布局更加灵活。
基于所述父子关系适配不同尺寸的展示区域的规则至少包括：各元素在不同尺寸范围的展示区域展示时的尺寸及位置的确定规则；及确定各元素适配后的尺寸及位置的优先顺序。
确定各元素适配后的尺寸及位置的优先顺序通过如下方式表达：
优先顺序指示信息；或
各元素声明的先后顺序。
所述优先顺序指示信息，即，在规则中通过指示信息明确指示确定各元素适配后的尺寸及位置的优先顺序。各元素声明的先后顺序，即，描述信息中各元素出现的先后顺序。其中，确定各元素适配后的尺寸及位置的优先顺序包括但不限于：从最外层父元素开始，依照从父元素到子元素顺序适配各元素的尺寸及位置，对于同一父元素下的同级别元素按照声明的先后顺序适配各元素的尺寸及位置。也就是同一父元素下的同级别子元素中，先声明的先确定其适配后的尺寸及位置，对于不同父元素下的同级别子元素不限制确定适配后尺寸及位置的先后顺序。
其中，所述规则可以规定在不同尺寸的展示区域展示时各元素间的相对展示位置可以不同。可见，通过该规则可灵活设置各元素的展示样式。
下面结合附图对本申请的技术方案作进一步详细描述。
图1是根据本申请一个实施例的待展示对象的全尺寸适配方法的流程图，该方法用于在一展示区域展示待展示对象时，确定待展示对象的尺寸，以实现待展示对象的尺寸完全适应该展示区域的尺寸，且保证待展示对象的展示效果。如图1中所示，该方法主要包括如下步骤：
S10、获取待展示对象包含的元素以及所述元素的描述信息；
S11、基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置；
S12、以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素。
为进一步理解本实施例的方法，下面对上述各步骤做进一步详细介绍。
步骤S10中获取待展示对象包含的元素及元素的描述信息时，可依据指定属性标识(如data-rwd标识)来识别待展示对象中包含的元素及元素的描述信息，获取识别的所有元素。
一种实施例所述待展示对象的元素及元素的描述信息使用HTML(超文本标记语言)语法进行标记，不但符合已有技术的开发习惯，同时能够方便的显示出元素间的父子关系，例如，HTML中元素的包含与被包含关系，即可表示元素的父子关系。且通过各元素声明的先后顺序即可获得确定各元素适配后的尺寸的先后顺序。当然本申请实施例并不局限于此。
假设一种实例所获取的待展示对象包含的元素包括：最外层容器、待展示大图区域、大图、商业标识(logo)、标题和小标志区域、标题、小标志。通过获取元素的描述信息获知上述元素的父子关系如图2中所示。图2中的待展示大图区域、商业标识(logo)和标题和小标志区域属于同一级别，且为同属于一个父元素“最外层容器”下的子元素。标题、小标志属于同一级别，且为同属于一个父元素“标题和小标志区域”下的子元素。大图属于待展示大图区域下的子元素。
本实例中所获取的各元素的描述信息包括各元素适配不同尺寸的展示区域的规则和确定各元素适配后的尺寸及位置的优先顺序。假设获取的上述各元素适配不同尺寸的展示区域的规则如下：
最外层容器的尺寸适配规则定义为superview.width，superview.height，即宽度和高度分别与展示区域的宽度和高度一致；最外层容器的位置为：left:0，top:0，即最外层容器的左边和展示区域的左边重合，即最外层容器的上边与展示区域的上边重合。这样无论展示区域尺寸为多少，该最外层容器均可以与展示区域尺寸一致。
商业标识(logo)的尺寸为100×80px，按“覆盖子元素的最小值”的原则自动适配，所述“覆盖子元素的最小值”的原则即保持原始尺寸(100×80px)不变。商业标识(logo)的位置为在展示区域的高大于100px时为：left:0，bottom：0，即商业标识(logo)的左边与展示区域的左边重合，下边与展示区域下边重合；在展示区域的高小于等于100px时为：top:0，right:0，即，商业标识(logo)的右边与展示区域的右边重合，商业标识(logo)的上边与展示区域的上边重合。
标题和小标志区域的尺寸为使用减法描述的尺寸确定规则，该区域的宽的确定规则为展示区域的高小于等于100px时，该标题和小标志区域的高为展示区域的高减去商业标识(logo)的高，宽等于商业标识(logo)的宽，位置为bottom：0，right:0，即，标题和小标志区域的下边与展示区域的下边重合，右边与展示区域的右边重合；展示区域的高大于100px时，该标题和小标志区域的高等于商业标识(logo)的高，宽为展示区域的宽减去商业标识(logo)的宽，位置为bottom：0，right:0，即，标题和小标志区域的下边与展示区域的下边重合，右边与展示区域的右边重合。该元素中的子元素标题”与同一级别的小标志在竖直方向按间距1％的方式在父元素中显示，且在展示区域的高小于等于100px时，小标志隐藏。
标题的宽的确定规则为：展示区域的高大于100px时，标题的宽为展示区域的宽减去商业标识(logo)的宽再减去40px，高为30px，标题的位置为left:20，即距离父元素左边20px。且可指定标题中字体的大小。展示区域的高小于等于100px时，标题的高等于标题和小标志区域的高，宽等于标题和小标志区域的宽。
小标志的宽的确定规则为：展示区域的高大于100px时，与标题宽一致，高为20px，位置为left:20，即左边与父元素距离20px。展示区域的高小于等于100px时，小标志隐藏。
待展示大图区域的宽度确定规则定义为：展示区域的高大于100px时，superview.width，即宽度与展示区域的尺寸一致，高度确定规则定义为待展示区域的高度减去商业标识(logo)的高度。位置为：left:0，top:0，即距离其父元素“最外层容器”的左边及上边均为0。展示区域的高小于等于100px时，待展示大图区域的宽为展示区域的宽减去商业标识(logo)的宽，高等于展示区域的高，位置为：left:0，top:0。
大图的尺寸确定规则为使用keep函数表示的，即表示按照当前设定的大图的宽高比按比例缩放大图。假设大图的设定的宽高比为5:3。位置使用contain函数表示，即大图的位置为在父元素“待展示大图区域”中全部展示，即覆盖父元素全部范围。
上面所述仅为一种实例，实际应用中可以针对展示区域的各种尺寸(尺寸范围)设置相应的尺寸及位置的确定规则。
假如所述规则中没有优先顺序指示信息来指示各元素适配时的优先顺序，则表明需要根据各元素声明先后顺序来确定优先顺序，也就是同一父元素下的同级别子元素中，先声明的先确定其适配后的尺寸及位置，对于不同父元素下的同级别子元素不限制确定适配后尺寸及位置的先后顺序。上述实例中各元素声明的顺序为：最外层容器-商业标识(logo)-标题和小标志区域-标题-小标志-待展示大图区域-大图。
步骤S11中需要先获取当前展示区域的尺寸信息(本申请实施例对具体获取方法不做限制)，再基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，按照获取的确定各元素适配后的尺寸及位置的优先顺序来确定待展示对象包含的元素适配所述当前展示区域后的尺寸及位置。
仍以上面的实例为例，上面的实例中最外层容器为最外层父元素，则在确定各元素适配后的尺寸及位置时首先确定最外层容器适配后的尺寸及位置，由于没有与最外层容器同级别的元素，因此按照从父元素到子元素的顺序确定，也就是接下来确定该最外层容器包含的子元素适配后的尺寸及位置，包括：确定商业标识(logo)、标题和小标志区域、待展示大图区域三个子元素适配后的尺寸及位置，并按照该三个子元素声明的顺序来确定三个子元素的适配后的尺寸及位置，即，按照商业标识(logo)-标题和小标志区域-待展示大图区域的顺序确定三个子元素适配后的尺寸及位置。之后再分别确定该三个子元素所包含的子元素适配后的尺寸及位置，包括确定标题和小标志的适配后的尺寸及位置以及确定大图的适配后的尺寸及位置。标题和小标志同属于一个父元素下，则按照声明的顺序确定适配后的尺寸及位置，也就是先确定标题的适配后的尺寸及位置，后确定小标志的适配后的尺寸及位置。对于大图，其与标题及小标志不属于同一父元素下，因此确定的先后顺序无限制，也就是其可以与标题和/或小标志同时或之前或之后来确定适配后的尺寸及位置。
本实施例中按照指定的顺序(即获取的确定各元素适配后的尺寸及位置的优先顺序)来确定各元素适配后的尺寸及位置，这样不会出错计算冲突问题，也就是针对同一元素所得到的适配后的尺寸及位置是唯一的。
依照上面实例中获取的所述规则，假设一种实例当前展示区域的尺寸为590×400px，则所确定的各元素适配后的尺寸及位置如下：
最外层容器的宽、高分别和当前展示区域的宽、高一致，也就是最外层容器尺寸为：590×400px。位置为：最外层容器的左边与当前展示区域的左边重合，最外层容器的上边与当前展示区域的上边重合。
商业标识(logo)会按其真实尺寸(100×80px)显示出来；位置为：商业标识(logo)的左边当前展示区域的左边重合，下边与当前展示区域的下边重合。
标题和小标志区域宽为当前展示区域宽-商业标识(logo)宽的所得值，即590-100＝490px；高为与商业标识(logo)相同的值为80px；位置为：该区域右边与当前展示区域右边重合，下边与当前展示区域下边重合。
标题的宽是当前展示区域的宽-商业标识(logo)的宽-40px的所得值，即，590-100-40＝450px；高为30px。位置为：左边与父元素“标题和小标志区域”距离20px。
小标志的宽和标题的宽一致450px，高为20px。位置为：左边与父元素距离20px；标题和小标志在竖直方向，在其父元素中按间距1％，标题，间距1％，小标志，间距1％的方式显示。
待展示大图区域的宽与当前展示区域宽一致为590px，高为当前展示区域高减去商业标识(logo)的高400-80＝320px，位置为左边与当前展示区域的左边重合，上边和当前展示区域的上边重合。
大图的尺寸按照设定的大图的宽高比5:3按比例缩放，使其覆盖待展示大图区域的全部范围。
另一实例，假设获取的当前展示区域的尺寸为展示区域的尺寸310×100px，此时当前展示区域的高等于100px，则所确定的各元素适配后的尺寸及位置如下：
最外层容器的宽、高分别和当前展示区域的宽、高一致，也就是最外层容器尺寸为：310×100px。位置为：最外层容器的左边与当前展示区域的左边重合，最外层容器的上边与当前展示区域的上边重合。
商业标识(logo)会按其真实尺寸(100×80px)显示出来；位置为：商业标识(logo)的上边当前展示区域的上边重合，右边与当前展示区域的右边重合。
标题和小标志区域宽为与商业标识(logo)宽相同为80px；高为当前展示区域的高减去商业标识(logo)的高，100-80＝20px；位置为：该区域右边与当前展示区域右边重合，下边与当前展示区域下边重合。
标题的尺寸及位置与其父元素标题和小标志区域的相同。小标志隐藏。
待展示大图区域的高与当前展示区域高一致为100px，宽为当前展示区域宽减去商业标识(logo)的宽310-100＝210px，位置为左边与当前展示区域的左边重合，上边和当前展示区域的上边重合。
大图的尺寸按照设定的大图的宽高比5:3按比例缩放，使其覆盖待展示大图区域的全部范围。
上述步骤S11完成了确定待展示对象适配当前展示区域后的尺寸及位置，步骤S12为以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素。
在当前展示区域的尺寸为590×400px情况下，以上述确定的各元素适配后的尺寸及位置在当前展示区域中展示待展示对象的实例如图3中所示。
在当前展示区域的尺寸为展示区域的尺寸310×100px情况下，以上述确定的各元素适配后的尺寸及位置在当前展示区域中展示待展示对象的实例如图4中所示。
可见，依照指定规则制作的待展示对象可以适配不同尺寸的展示区域，实现了待展示对象的全尺寸适配。且由上述介绍可知，本申请实施例在制作待展示对象时，无需关注具体适配方法，只需关注各元素展示样式。而具体的适配方法可以在展示待展示对象时由具有适配工具的设备完成。
本申请实施例通过在制作的待展示对象中设置各元素的适配规则，所述规则比较灵活，使得待展示对象可以实现全尺寸适配。且在全尺寸适配时保证待展示对象的整体展示效果的同时，可以设置在适配不同尺寸的展示区域时保持某些元素尺寸不变，以保证该元素展示效果更佳。
本申请实施例还提供一种与上述待展示对象的全尺寸适配方法对应的待展示对象的全尺寸适配装置，该装置可设置于网络设备或用户端设备中。如图5所示为所述装置结构示意图，该装置主要包括：
获取单元50，用于获取待展示对象包含的元素以及所述元素的描述信息，所述元素的描述信息包括：元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则；也就是，本申请实施例是以父子关系描述元素间的关系。由于本申请实施例是基于父子关系适配不同尺寸的展示区域的规则，因此在该规则中描述元素的尺寸及位置时，不但可以描述元素尺寸允许的范围、元素之间距离等，还可以描述诸如：子元素的某一尺寸与另一元素的某一尺寸相同，或子元素的某一尺寸占父元素的比值、或子元素与父元素某一边的距离是另一元素某一尺寸的倍数等等，也就是基于父子关系适配不同尺寸的展示区域的规则能够充分描述元素间的尺寸或位置关系，使得元素的布局更加灵活。
确定单元51，用于基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置；
展示单元52，用于以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素。
本申请实施例可使用指定属性标识标记待展示对象中包含的元素及元素的描述信息，例如，使用data-rwd标识来标记待展示对象中的元素及元素的描述信息。则获取单元50被配置为：
通过所述指定属性标识获取待展示对象包含的元素及所述元素的描述信息。
本实施例中所述的基于所述父子关系适配不同尺寸的展示区域的规则包括：
各元素在不同尺寸范围的展示区域展示时的尺寸及位置的确定规则；及确定各元素适配后的尺寸及位置的优先顺序。
确定各元素适配后的尺寸及位置的优先顺序通过如下方式表达：
优先顺序指示信息；或
各元素声明的先后顺序。
所述优先顺序指示信息，即，在规则中通过指示信息明确指示确定各元素适配后的尺寸及位置的优先顺序。各元素声明的先后顺序，即，描述信息中各元素出现的先后顺序。其中，确定各元素适配后的尺寸及位置的优先顺序包括但不限于：从最外层父元素开始，依照从父元素到子元素顺序适配各元素的尺寸及位置，对于同一父元素下的同级别元素按照声明的先后顺序适配各元素的尺寸及位置。也就是同一父元素下的同级别子元素中，先声明的先确定其适配后的尺寸及位置，对于不同父元素下的同级别子元素不限制确定适配后尺寸及位置的先后顺序。
其中，所述规则可以规定在不同尺寸的展示区域展示时各元素间的相对展示位置可以不同。可见，通过该规则可灵活设置各元素的展示样式。
综上所述，本申请实施例所述的待展示对象的全尺寸适配方法及装置，通过获取按照指定规则制作的待展示对象的所包含的元素及元素的描述信息，所述元素的描述信息中包括：元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则；则基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，可以确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置，最终以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素。因此本实施例的待展示对象可以在保证展示效果的同时，适配各种尺寸的展示区域，而不会出现对待展示对象进行拉伸缩放等出现的变形等情况。
另外，本申请实施例制作待展示对象时无需关注具体的适配方法，只需关注待展示对象的展示样式，将全尺寸适配功能封装成一个工具加载于设备中，不但令待展示对象的制作更加简单，同时另待展示对象的全尺寸适配更加方便快捷。
需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。
另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。
对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

Claims (8)

1.一种待展示对象的全尺寸适配方法，其特征在于，包括：
获取待展示对象包含的元素以及所述元素的描述信息，所述元素的描述信息包括：元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则；
基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置；
以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素；
其中基于所述父子关系适配不同尺寸的展示区域的规则包括：
各元素在不同尺寸范围的展示区域展示时的尺寸及位置的确定规则；及
确定各元素适配后的尺寸及位置的优先顺序。
2.如权利要求1所述的待展示对象的全尺寸适配方法，其特征在于，使用指定属性标识标记待展示对象中包含的元素及元素的描述信息，则获取待展示对象包含的元素以及所述元素的描述信息包括：
通过所述指定属性标识获取待展示对象包含的元素及所述元素的描述信息。
3.如权利要求1所述的待展示对象的全尺寸适配方法，其特征在于，确定各元素适配后的尺寸及位置的优先顺序通过如下方式表达：
优先顺序指示信息；或
各元素声明的先后顺序。
4.如权利要求3所述的待展示对象的全尺寸适配方法，其特征在于，确定各元素适配后的尺寸及位置的优先顺序包括：
从最外层父元素开始，依照从父元素到子元素顺序适配各元素的尺寸及位置，对于同一父元素下的同级别子元素按照声明的先后顺序适配各元素的尺寸及位置。
5.一种待展示对象的全尺寸适配装置，其特征在于，包括：
获取单元，用于获取待展示对象包含的元素以及所述元素的描述信息，所述元素的描述信息包括：元素间的父子关系信息以及基于所述父子关系适配不同尺寸的展示区域的规则；
确定单元，用于基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息，确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置；
展示单元，用于以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象包含的元素；
其中基于所述父子关系适配不同尺寸的展示区域的规则包括：
各元素在不同尺寸范围的展示区域展示时的尺寸及位置的确定规则；及
确定各元素适配后的尺寸及位置的优先顺序。
6.如权利要求5所述的待展示对象的全尺寸适配装置，其特征在于，使用指定属性标识标记待展示对象中包含的元素及元素的描述信息，获取单元被配置为：
通过所述指定属性标识获取待展示对象包含的元素及所述元素的描述信息。
7.如权利要求5所述的待展示对象的全尺寸适配装置，其特征在于，确定各元素适配后的尺寸及位置的优先顺序通过如下方式表达：
优先顺序指示信息；或
各元素声明的先后顺序。
8.如权利要求7所述的待展示对象的全尺寸适配装置，其特征在于，确定各元素适配后的尺寸及位置的优先顺序包括：
从最外层父元素开始，依照从父元素到子元素顺序适配各元素的尺寸及位置，对于同一父元素下的同级别子元素按照声明的先后顺序适配各元素的尺寸及位置。
CN201510351562.5A 2015-06-23 2015-06-23 待展示对象的全尺寸适配方法及装置 Active CN106326251B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN201510351562.5A CN106326251B (zh) 2015-06-23 2015-06-23 待展示对象的全尺寸适配方法及装置
PCT/CN2016/085937 WO2016206559A1 (zh) 2015-06-23 2016-06-16 待展示对象的全尺寸适配方法及装置
US15/852,464 US10853912B2 (en) 2015-06-23 2017-12-22 Method and apparatus for complete size adaptation of object to be displayed

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510351562.5A CN106326251B (zh) 2015-06-23 2015-06-23 待展示对象的全尺寸适配方法及装置

Publications (2)

Publication Number Publication Date
CN106326251A CN106326251A (zh) 2017-01-11
CN106326251B true CN106326251B (zh) 2019-05-17

Family

ID=57586039

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510351562.5A Active CN106326251B (zh) 2015-06-23 2015-06-23 待展示对象的全尺寸适配方法及装置

Country Status (3)

Country Link
US (1) US10853912B2 (zh)
CN (1) CN106326251B (zh)
WO (1) WO2016206559A1 (zh)

Families Citing this family (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108959303B (zh) * 2017-05-22 2022-07-15 阿里巴巴集团控股有限公司 一种展示图片生成、布局生成方法和数据处理服务器
CN109241151B (zh) * 2017-06-29 2022-05-10 阿里巴巴集团控股有限公司 一种数据结构的转换方法、装置及电子设备
CN110825989A (zh) * 2018-07-23 2020-02-21 北京京东尚科信息技术有限公司 图片展示方法、装置、电子设备及可读介质
CN110968811B (zh) * 2018-09-30 2023-05-23 北京国双科技有限公司 显示控制方法和装置
CN110457106B (zh) * 2019-08-07 2023-05-23 北京字节跳动网络技术有限公司 一种信息展示方法、装置、设备及存储介质
CN112988561B (zh) * 2019-12-18 2023-09-08 腾讯科技（深圳）有限公司 检测显示配置代码的方法、装置、服务器和存储介质
CN113687809A (zh) * 2020-05-18 2021-11-23 北京沃东天骏信息技术有限公司 信息显示方法及装置、以及电子设备和可读存储介质
CN112738629B (zh) * 2020-12-29 2023-03-10 北京达佳互联信息技术有限公司 视频展示方法、装置、电子设备和存储介质
CN113342454B (zh) * 2021-08-05 2021-11-16 北京金堤科技有限公司 用于确定详情卡片位置的方法和装置
CN114510172A (zh) * 2022-02-17 2022-05-17 京东方科技集团股份有限公司 一种电子标牌显示的方法及电子设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1243287A (zh) * 1998-07-06 2000-02-02 国际商业机器公司 与显示屏和窗口大小相关的web页适配系统
CN102323939A (zh) * 2011-08-31 2012-01-18 百度在线网络技术（北京）有限公司 页面重排过程中确定重排后元素的背景信息的方法与设备
CN102841790A (zh) * 2012-07-02 2012-12-26 北京大学 面向异构终端的Web应用界面动态适配方法

Family Cites Families (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2001071544A2 (en) * 2000-03-17 2001-09-27 Xeno Development Inc. Method and devices for recording changes in visual stimuli observed through browser-based interfaces
EP1524606B1 (en) * 2003-10-15 2009-09-16 Canon Kabushiki Kaisha Selective preview and proofing of documents or layouts containing variable data
US8166396B2 (en) * 2008-08-22 2012-04-24 International Business Machines Corporation User interface rendering
CN101882074A (zh) * 2010-03-15 2010-11-10 浪潮集团山东通用软件有限公司 一种用于图形用户界面组合及布局的方法与系统
US9576068B2 (en) * 2010-10-26 2017-02-21 Good Technology Holdings Limited Displaying selected portions of data sets on display devices
JP5772435B2 (ja) * 2011-09-21 2015-09-02 ブラザー工業株式会社 画像処理装置
US20130086525A1 (en) * 2011-09-30 2013-04-04 Nokia Corporation Method, Apparatus, Computer Program and User Interface
US9491451B2 (en) * 2011-11-15 2016-11-08 Magna Electronics Inc. Calibration system and method for vehicular surround vision system
JP5387668B2 (ja) * 2011-12-26 2014-01-15 ソニー株式会社 情報処理端末、情報処理方法、およびプログラム
CA2923580C (en) * 2013-09-12 2021-10-12 Wix.Com Ltd. System and method for automated conversion of interactive sites and applications to support mobile and other display environments
US9703757B2 (en) * 2013-09-30 2017-07-11 Google Inc. Automatically determining a size for a content item for a web page
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技（深圳）有限公司 页面布局自适应方法及装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1243287A (zh) * 1998-07-06 2000-02-02 国际商业机器公司 与显示屏和窗口大小相关的web页适配系统
CN102323939A (zh) * 2011-08-31 2012-01-18 百度在线网络技术（北京）有限公司 页面重排过程中确定重排后元素的背景信息的方法与设备
CN102841790A (zh) * 2012-07-02 2012-12-26 北京大学 面向异构终端的Web应用界面动态适配方法

Also Published As

Publication number Publication date
US20180122045A1 (en) 2018-05-03
WO2016206559A1 (zh) 2016-12-29
US10853912B2 (en) 2020-12-01
CN106326251A (zh) 2017-01-11

Similar Documents

Publication Publication Date Title
CN106326251B (zh) 待展示对象的全尺寸适配方法及装置
KR102215766B1 (ko) 합성 화상을 생성하는 방법 및 장치
CN107239287B (zh) 一种网页显示方法、装置、电子设备及存储介质
US20160283096A1 (en) Method of generating a link by utilizing a picture and system thereof
CN105373567B (zh) 页面生成方法及客户端
US11455460B2 (en) Method for displaying handwritten note in electronic book, electronic device and computer storage medium
CN105279251B (zh) 虚拟礼物展示方法和装置
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
CN106303729B (zh) 基于弹幕的交互方法、交互装置及用户设备
CN104166656B (zh) 流量统计的网页化展示方法及装置
CN105825535B (zh) 一种图层合并方法及系统
CN105096368B (zh) 三维对象处理方法和相关装置
CN106156237B (zh) 信息处理方法、信息处理装置及用户设备
CN103677491B (zh) 一种用于渲染网页的方法和装置
CN109710258A (zh) 微信小程序界面生成的方法及装置
CN109683773A (zh) 语料标注方法和装置
CN109002241A (zh) 视图错层显示方法、电子设备及存储介质
CN108491140B (zh) 互动内容的展示方法及装置
CN108170431B (zh) 一种导航标签窗口颜色设置方法及装置
WO2014163979A1 (en) Automatic image piling
CN105630893B (zh) 一种组图标题的显示方法和装置
CN109284487A (zh) 在canvas中渲染数据的方法、装置、电子设备及存储介质
CN103631944B (zh) 一种基于内容相似的网页分割方法
CN104899287B (zh) 网页的显示方法和装置
CN105302416A (zh) 一种动漫展示系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant