书签 分享 收藏 举报 版权申诉 / 15

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

  • 上传人:b***
  • 文档编号:6096838
  • 上传时间:2019-04-10
  • 格式:PDF
  • 页数:15
  • 大小:920.98KB
  • 摘要
    申请专利号:

    CN201510351562.5

    申请日:

    2015.06.23

    公开号:

    CN106326251A

    公开日:

    2017.01.11

    当前法律状态:

    实审

    有效性:

    审中

    法律详情:

    实质审查的生效IPC(主分类):G06F 17/30申请日:20150623|||公开

    IPC分类号:

    G06F17/30; G06T3/40

    主分类号:

    G06F17/30

    申请人:

    阿里巴巴集团控股有限公司

    发明人:

    毕波

    地址:

    英属开曼群岛大开曼资本大厦一座四层847号邮箱

    优先权:

    专利代理机构:

    北京汉昊知识产权代理事务所(普通合伙) 11370

    代理人:

    朱海波

    PDF完整版下载: PDF下载
    内容摘要

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

    权利要求书

    1.一种待展示对象的全尺寸适配方法,其特征在于,包括:
    获取待展示对象包含的元素以及所述元素的描述信息,所述元素的描
    述信息包括:元素间的父子关系信息以及基于所述父子关系适配不同尺寸
    的展示区域的规则;
    基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺
    寸信息,确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸
    及位置;
    以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象
    包含的元素。
    2.如权利要求1所述的待展示对象的全尺寸适配方法,其特征在于,
    使用指定属性标识标记待展示对象中包含的元素及元素的描述信息,则获
    取待展示对象包含的元素以及所述元素的描述信息包括:
    通过所述指定属性标识获取待展示对象包含的元素及所述元素的描
    述信息。
    3.如权利要求1所述的待展示对象的全尺寸适配方法,其特征在于,
    基于所述父子关系适配不同尺寸的展示区域的规则包括:
    各元素在不同尺寸范围的展示区域展示时的尺寸及位置的确定规则;

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

    确定各元素适配后的尺寸及位置的优先顺序。
    9.如权利要求8所述的待展示对象的全尺寸适配装置,其特征在于,
    确定各元素适配后的尺寸及位置的优先顺序通过如下方式表达:
    优先顺序指示信息;或
    各元素声明的先后顺序。
    10.如权利要求9所述的待展示对象的全尺寸适配装置,其特征在于,
    确定各元素适配后的尺寸及位置的优先顺序包括:
    从最外层父元素开始,依照从父元素到子元素顺序适配各元素的尺寸
    及位置,对于同一父元素下的同级别子元素按照声明的先后顺序适配各元
    素的尺寸及位置。

    说明书

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

    技术领域

    本申请涉及计算机技术领域,尤其涉及一种待展示对象的全尺寸适配
    方法及装置。

    背景技术

    待展示对象是指可以展示于网页或终端的任意应用界面的对象的统
    称。其可以是一张图片,也可以是图片与文字等其他信息的组合。

    目前的待展示对象制作一次只能适应单一尺寸,也就是在制作待展示
    对象时,直接确定待展示对象中所包含的所有元素的尺寸及位置信息,该
    尺寸及位置信息是固定不变的。而当需要将该待展示对象展示于某一展示
    区域时,往往展示区域的尺寸与制作的待展示对象的尺寸不一致,则出现
    待展示对象的尺寸无法适配展示区域尺寸的情况。

    为了解决上述问题,一般采用将待展示对象进行缩放或拉伸等处理实
    现待展示对象的全尺寸适配。而缩放及拉伸处理会影响待展示对象的展示
    效果,例如,会出现待展示对象变形、或模糊等情况,因此该处理方式无
    法保证待展示对象的展示效果。

    发明内容

    本申请解决的技术问题之一是提供待展示对象的全尺寸适配方法及
    装置,在保证待展示对象的展示效果的同时,简单方便的实现全尺寸适配。

    根据本申请一方面的一个实施例,提供了一种待展示对象的全尺寸适
    配方法,包括:

    获取待展示对象包含的元素以及所述元素的描述信息,所述元素的描
    述信息包括:元素间的父子关系信息以及基于所述父子关系适配不同尺寸
    的展示区域的规则;

    基于获取的所述元素及所述元素的描述信息结合当前展示区域的尺
    寸信息,确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸
    及位置;

    以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象
    包含的元素。

    根据本申请另一方面的一个实施例,提供了一种待展示对象的全尺寸
    适配装置,包括:

    获取单元,用于获取待展示对象包含的元素以及所述元素的描述信息,
    所述元素的描述信息包括:元素间的父子关系信息以及基于所述父子关系
    适配不同尺寸的展示区域的规则;

    确定单元,用于基于获取的所述元素及所述元素的描述信息结合当前
    展示区域的尺寸信息,确定所述待展示对象包含的元素适配所述当前展示
    区域后的尺寸及位置;

    展示单元,用于以确定的所述尺寸及位置在所述当前展示区域展示所
    述待展示对象包含的元素。

    本实施例获取待展示对象的所包含的元素及元素的描述信息,基于获
    取的所述元素及所述元素的描述信息结合当前展示区域的尺寸信息,可以
    确定所述待展示对象包含的元素适配所述当前展示区域后的尺寸及位置,
    最终以确定的所述尺寸及位置在所述当前展示区域展示所述待展示对象
    包含的元素。由于所述元素的描述信息中包括元素间的父子关系信息以及
    基于所述父子关系适配不同尺寸的展示区域的规则,因此按照该规则可以
    在保证待展示对象的展示效果的同时,简单方便的令待展示对象可以适配
    各种展示区域,不会出现待展示对象的变形及模糊等情况。

    本领域普通技术人员将了解,虽然下面的详细说明将参考图示实施例、
    附图进行,但本申请并不仅限于这些实施例。而是,本申请的范围是广泛
    的,且意在仅通过后附的权利要求限定本申请的范围。

    附图说明

    通过阅读参照以下附图所作的对非限制性实施例所作的详细描述,本
    申请的其它特征、目的和优点将会变得更明显:

    图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存储器,磁
    或光驱动器或软磁盘及类似设备。另外,本申请的一些步骤或功能可采用
    硬件来实现,例如,作为与处理器配合从而执行各个步骤或功能的电路。

    另外,本申请的一部分可被应用为计算机程序产品,例如计算机程序
    指令,当其被计算机执行时,通过该计算机的操作,可以调用或提供根据
    本申请的方法和/或技术方案。而调用本申请的方法的程序指令,可能被存
    储在固定的或可移动的记录介质中,和/或通过广播或其他信号承载媒体中
    的数据流而被传输,和/或被存储在根据所述程序指令运行的计算机设备的
    工作存储器中。在此,根据本申请的一个实施例包括一个装置,该装置包
    括用于存储计算机程序指令的存储器和用于执行程序指令的处理器,其中,
    当该计算机程序指令被该处理器执行时,触发该装置运行基于前述根据本
    申请的多个实施例的方法和/或技术方案。

    对于本领域技术人员而言,显然本申请不限于上述示范性实施例的细
    节,而且在不背离本申请的精神或基本特征的情况下,能够以其他的具体
    形式实现本申请。因此,无论从哪一点来看,均应将实施例看作是示范性
    的,而且是非限制性的,本申请的范围由所附权利要求而不是上述说明限
    定,因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括
    在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要
    求。此外,显然“包括”一词不排除其他单元或步骤,单数不排除复数。系
    统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件
    或者硬件来实现。第一,第二等词语用来表示名称,而并不表示任何特定
    的顺序。

    关 键  词:
    展示 对象 尺寸 配方 装置
      专利查询网所有文档均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    0条评论

    还可以输入200字符

    暂无评论,赶快抢占沙发吧。

    关于本文
    本文标题:待展示对象的全尺寸适配方法及装置.pdf
    链接地址:https://www.zhuanlichaxun.net/p-6096838.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2017-2018 zhuanlichaxun.net网站版权所有
    经营许可证编号:粤ICP备2021068784号-1