CN115270710A - 排版方法、排版装置 - Google Patents

排版方法、排版装置 Download PDF

Info

Publication number
CN115270710A
CN115270710A CN202110489137.8A CN202110489137A CN115270710A CN 115270710 A CN115270710 A CN 115270710A CN 202110489137 A CN202110489137 A CN 202110489137A CN 115270710 A CN115270710 A CN 115270710A
Authority
CN
China
Prior art keywords
node
sub
main shaft
size
nodes
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
Application number
CN202110489137.8A
Other languages
English (en)
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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202110489137.8A priority Critical patent/CN115270710A/zh
Publication of CN115270710A publication Critical patent/CN115270710A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/103Formatting, i.e. changing of presentation of documents
    • G06F40/109Font handling; Temporal or kinetic typography
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/24Querying
    • G06F16/245Query processing
    • G06F16/2455Query execution
    • G06F16/24552Database cache management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Computational Linguistics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Data Mining & Analysis (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本申请的实施例提供了一种排版方法、排版装置,应用于计算机技术领域,所述方法包括:获取具有层级关系的多个待排版节点,所述多个待排版节点包含有父节点和所述父节点的多个子节点;获取所述多个子节点中的各个子节点在主轴上的期望尺寸;根据所述各个子节点在主轴上的期望尺寸,对所述各个子节点进行主轴方向的排版,得到所述各个子节点在主轴上的位置和实际尺寸;在确定所述多个子节点在主轴上的位置和实际尺寸之后,获取所述各个子节点在侧轴上的期望尺寸;根据所述各个子节点在侧轴上的期望尺寸,对所述各个子节点进行侧轴方向的排版,得到所述各个子节点在侧轴上的位置和实际尺寸。本申请实施例的技术方案可以提高排版速度和效率。

Description

排版方法、排版装置
技术领域
本申请涉及计算机技术领域,具体而言,涉及一种排版方法、排版装置。
背景技术
目前,大多数浏览器内核支持Flex排版引擎,Flex排版引擎通过测量过程得到项目的尺寸,通过排版过程得到项目在容器中位置,测量和排版两个过程综合使用完成布局。但是目前的排版引擎在进行项目的测量时存在测量耗时较长的问题,影响排版速度和效率。
发明内容
本申请的实施例提供了一种排版方法及排版装置,进而至少在一定程度上可以提高排版的速度和效率。
本申请的其他特性和优点将通过下面的详细描述变得显然,或部分地通过本申请的实践而习得。
根据本申请实施例的一个方面,提供了一种排版方法,所述方法包括:
获取具有层级关系的多个待排版节点,所述多个待排版节点包含有父节点和所述父节点的多个子节点;
获取所述多个子节点中的各个子节点在主轴上的期望尺寸;
根据所述各个子节点在主轴上的期望尺寸,对所述各个子节点进行主轴方向的排版,得到所述各个子节点在主轴上的位置和实际尺寸;
获取所述各个子节点在侧轴上的期望尺寸;
根据所述各个子节点在侧轴上的期望尺寸,对所述各个子节点进行侧轴方向的排版,得到所述各个子节点在侧轴上的位置和实际尺寸。
根据本申请实施例的一个方面,提供了一种排版装置,所述排版装置包括:
节点获取单元,用于获取具有层级关系的多个待排版节点,所述多个待排版节点包含有父节点和所述父节点的多个子节点;
主轴尺寸获取单元,用于获取所述多个子节点中的各个子节点在主轴上的期望尺寸;
主轴方向排版单元,用于根据所述各个子节点在主轴上的期望尺寸对所述各个子节点进行主轴方向的排版,得到所述各个子节点在主轴上的位置和实际尺寸;
侧轴尺寸获取单元,用于获取所述各个子节点在侧轴上的期望尺寸;
侧轴方向排版单元,用于根据所述各个子节点在侧轴上的期望尺寸,对所述各个子节点进行侧轴方向的排版,得到所述各个子节点在侧轴上的位置和实际尺寸。
在本申请的一些实施例中,基于前述方案,所述排版装置还包括:
主轴缓存查询单元,用于在缓存中查询各个子节点对应的主轴排版信息,各个子节点对应的主轴排版信息包括各个子节点在主轴上的位置和实际尺寸;若在所述缓存中查询到所述子节点对应的主轴排版信息可用,则将所述子节点在缓存中对应的主轴排版信息作为所述子节点的排版信息;若在所述缓存中查询到所述子节点对应的主轴排版信息不可用,则获取所述多个子节点中的各个子节点在主轴上的期望尺寸。
在本申请的一些实施例中,基于前述方案,所述排版装置还包括:
主轴排版信息存储单元,用于为在所述主轴方向排版单元确定所述各个子节点在主轴上的位置和实际尺寸之后,在缓存中存储所述各个子节点的在主轴上的位置和实际尺寸。
在本申请的一些实施例中,基于前述方案,所述主轴尺寸获取单元包括:
主轴测量信息查询子单元,用于在缓存中查询各个子节点对应的主轴测量信息,各个子节点对应的主轴测量信息包括各个子节点的主轴期望尺寸;若在缓存中查询到子节点对应的主轴测量信息可用,则将在缓存中查询到的子节点的主轴期望尺寸作为子节点在主轴上的期望尺寸;
主轴测量子单元,用于若在缓存中查询到子节点对应的主轴测量信息不可用,则根据子节点的主轴测量模式测量子节点的主轴,得到子节点在主轴上的期望尺寸。
在本申请的一些实施例中,基于前述方案,所述主轴测量子单元配置为:若所述子节点的主轴测量模式为精确模式,则将所述子节点在主轴上的预设尺寸作为所述子节点在主轴上的期望尺寸;若所述子节点的主轴测量模式为最大值模式,则将所述子节点在主轴上的预设最大尺寸作为所述子节点在主轴上的期望尺寸;若所述子节点的主轴测量模式为未定义模式,则获取所述子节点的下一级节点的主轴期望尺寸,根据所述子节点的下一级节点的主轴期望尺寸获取所述子节点在主轴上的期望尺寸。
在本申请的一些实施例中,基于前述方案,所述侧轴尺寸获取单元包括:
侧轴测量信息查询子单元,用于在缓存中查询各个子节点对应的侧轴测量信息,各个子节点对应的测量信息包括各个子节点的侧轴期望尺寸;若在缓存中查询到子节点对应的侧轴测量信息可用,则将在缓存中查询到的子节点的侧轴期望尺寸作为子节点在侧轴上的期望尺寸
侧轴测量子单元,用于若在缓存中查询到子节点对应的侧轴测量信息不可用,则根据子节点的侧轴测量模式测量子节点的侧轴,得到子节点在侧轴上的期望尺寸。
在本申请的一些实施例中,基于前述方案,所述侧轴测量子单元配置为:若所述子节点的侧轴测量模式为精确模式,则将所述子节点在侧轴上的预设尺寸作为所述子节点在侧轴上的期望尺寸;若所述子节点的侧轴测量模式为最大值模式,则将所述子节点在侧轴上的预设最大尺寸作为所述子节点在侧轴上的期望尺寸;若所述子节点的侧轴测量模式为未定义模式,则获取所述子节点的下一级节点在侧轴上的期望尺寸,根据所述子节点的下一级节点在侧轴上的尺寸获取所述子节点在侧轴上的期望尺寸。在本申请的一些实施例中,基于前述方案,所述排版装置还包括:
主轴重排版单元,用于在得到指定子节点在主轴上的位置和实际尺寸之后,若接收到主轴重排版请求,则重新根据所述各个子节点在主轴上的期望尺寸,对所述各个子节点进行主轴方向的排版;
侧轴重排版单元,用于在得到指定子节点在侧轴上的位置和实际尺寸之后,若接收到侧轴重排版请求,则重新根据所述各个子节点在侧轴上的期望尺寸,对所述各个子节点进行侧轴方向的排版。
在本申请的一些实施例中,基于前述方案,所述排版装置还包括:
渲染单元,用于根据所述各个子节点在主轴上的位置和实际尺寸,以及所述各个子节点在侧轴上的位置和实际尺寸,对所述各个子节点进行界面渲染,生成排版后的用户界面。
根据本申请实施例的一个方面,提供了一种计算机程序产品或计算机程序,该计算机程序产品或计算机程序包括计算机指令,该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该计算机设备执行上述实施例中所述的排版方法。
根据本申请实施例的一个方面,提供了一种计算机可读介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现如上述实施例中所述的排版方法。
根据本申请实施例的一个方面,提供了一种电子设备,包括:一个或多个处理器;存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行时,使得所述一个或多个处理器实现如上述实施例中排版方法。
在本申请的一些实施例所提供的技术方案中,通过在进行主轴方向排版时仅获取子节点在主轴上的期望尺寸,使得在子节点或父节点的属性如尺寸、排版模式频繁变化的场景中,可以针对性的只获取子节点在主轴上的期望尺寸,而在进行主轴方向的排版之后再获取子节点在侧轴上的期望尺寸以对子节点进行侧轴方向的排版,避免了同时获取到子节点在侧轴上的期望尺寸而由于节点属性发生变化而需要多次获取的问题,并且可以减少多次获取子节点的期望尺寸而增加计算量,有利于提高排版的速度和效率。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本申请。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本申请的实施例,并与说明书一起用于解释本申请的原理。显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。在附图中:
图1示出了可以应用本申请实施例的技术方案的示例性系统架构的示意图。
图2示出了本申请实施例应用于终端设备的排版效果示意图。
图3示出了根据本申请一个实施例的排版方法的流程图。
图4示出了根据本申请一个实施例的排版方法的流程示意图。
图5示出了根据本申请一个实施例的排版方法的示意图。
图6示出了根据本申请一个实施例的布局排版的示意图。
图7示出了根据本申请一个实施例排版方法的细化流程图。
图8示出了根据本申请一个实施例的排版方法的流程图。
图9示出了根据本申请一个实施例的主轴方向排版的流程图。
图10示出了根据本申请一个实施例的主轴方向排版的细节流程图。
图11示出的是根据本申请一个实施例的侧轴排版细节流程图。
图12示出了根据本申请一个实施例的排版效果示意图。
图13示出了根据本申请一个实施例的获取各个子节点的主轴期望尺寸的流程图。
图14示出了根据本申请一个实施例的主轴测量示意图。
图15示出了根据本申请一个实施例的获取各个子节点的侧轴期望尺寸的流程图。
图16示出了根据本申请一个实施例的侧轴测量示意图。
图17示出了根据本申请一个实施例的缓存架构图。
图18示出了根据本申请一个实施例的排版方法的流程图。
图19示出了根据本申请一个实施例的重排版的示意图。
图20示出了根据本申请一个实施例的排版装置框图。
图21示出了根据本申请一个实施例的排版系统框架图。
图22示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而,示例实施方式能够以多种形式实施,且不应被理解为限于在此阐述的范例;相反,提供这些实施方式使得本申请将更加全面和完整,并将示例实施方式的构思全面地传达给本领域的技术人员。
此外,所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中,提供许多具体细节从而给出对本申请的实施例的充分理解。然而,本领域技术人员将意识到,可以实践本申请的技术方案而没有特定细节中的一个或更多,或者可以采用其它的方法、组元、装置、步骤等。在其它情况下,不详细示出或描述公知方法、装置、实现或者操作以避免模糊本申请的各方面。
附图中所示的方框图仅仅是功能实体,不一定必须与物理上独立的实体相对应。即,可以采用软件形式来实现这些功能实体,或在一个或多个硬件模块或集成电路中实现这些功能实体,或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
附图中所示的流程图仅是示例性说明,不是必须包括所有的内容和操作/步骤,也不是必须按所描述的顺序执行。例如,有的操作/步骤还可以分解,而有的操作/步骤可以合并或部分合并,因此实际执行的顺序有可能根据实际情况改变。
需要说明的是:在本文中提及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
需要注意的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的对象在适当情况下可以互换,以便这里描述的本申请的实施例能够以除了在图示或描述的那些以外的顺序实施。
图1示出了可以应用本申请实施例的技术方案的示例性系统架构的示意图。
如图1所示,系统架构可以包括终端设备(如图1中所示智能手机101、平板电脑102和便携式计算机103中的一种或多种)、网络104和服务器105。网络104用以在终端设备和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型,例如有线通信链路、无线通信链路等等。
在本申请的一个实施例中,可以是由终端设备获取来自服务器105的具有层级关系的多个待排版节点,多个待排版节点包含有父节点和父节点的多个子节点;获取多个子节点中的各个子节点在主轴上的期望尺寸;根据各个子节点在主轴上的期望尺寸,对各个子节点进行主轴方向的排版,得到各个子节点在主轴上的位置和实际尺寸;获取各个子节点在侧轴上的期望尺寸;根据各个子节点在侧轴上的期望尺寸,对各个子节点进行侧轴方向的排版,得到各个子节点在侧轴上的位置和实际尺寸,最终将待排版节点渲染在终端设备的页面。
图2示出了本申请实施例应用于终端设备的排版效果示意图。如图2所示,终端设备中的各个页面元素按照一定的规则排布在终端的显示界面上,通过本申请实施例的排版方法可以计算出各个页面元素在显示界面上的排布规则,即各个页面元素在显示界面上的位置和尺寸。
需要说明的是,本申请实施例所提供的排版方法可以由终端设备执行,相应地,排版装置一般设置于终端设备中。但是,在本申请的其它实施例中,服务器也可以与终端设备具有相似的功能,从而执行本申请实施例所提供的排版方法。
还需要说明的是,图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,服务器可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能电视等,但并不局限于此,本申请在此不做限制。
需要解释的是,如上所述的云计算(cloud computing)是一种计算模式,它将计算任务分布在大量计算机构成的资源池上,使各种应用系统能够根据需要获取计算力、存储空间和信息服务。提供资源的网络被称为“云”。“云”中的资源在使用者看来是可以无限扩展的,并且可以随时获取,按需使用,随时扩展。通过建立云计算资源池(简称云平台,一般称为IaaS(Infrastructure as a Service,基础设施即服务)平台,在资源池中部署多种类型的虚拟资源,供外部客户选择使用。云计算资源池中主要包括:计算设备(为虚拟化机器,包含操作系统)、存储设备、网络设备。
以下对本申请实施例的技术方案的实现细节执行详细阐述:
图3示出了根据本申请一个实施例的排版方法的流程图,如图3所示,排版方法包括以下步骤。
步骤310:获取具有层级关系的多个待排版节点,多个待排版节点包含有父节点和父节点的多个子节点。
本申请实施例中,待排版节点可以是应用可视界面中的界面元素,也可以是html网页中的页面元素。例如,终端设备浏览器向目标网页内容服务器发出网页加载请求后获取到网页数据,浏览器解析器将网页数据解析成与网页数据对应的文档对象模型DOM树及DOM树中节点对应的层叠样式CSS属性。DOM树展示了网页中待排版页面元素的集合,以及它们之间的关系。
步骤320:获取多个子节点中的各个子节点在主轴上的期望尺寸。
本申请实施例中,可以通过查询缓存中各个子节点在主轴上的尺寸来获取各个子节点在主轴上的期望尺寸,也可以通过测量各个子节点在主轴上的尺寸来获取各个子节点在主轴上的期望尺寸。
当缓存中某个子节点在主轴上的尺寸可用,可以直接使用该子节点的主轴尺寸,节省测量该子节点主轴尺寸的过程,提高排版速度和效率。
步骤330:根据各个子节点在主轴上的期望尺寸,对各个子节点进行主轴方向的排版,得到各个子节点在主轴上的位置和实际尺寸。
本申请实施例可以采用flex一维排版模型,因此步骤330中在具体实施时可以是根据flex规则对父节点的所有子节点在主轴方向进行排版,得到各个子节点在主轴上的位置和实际尺寸。经过排版,子节点的主轴实际尺寸可能相对主轴期望尺寸发生变化。
步骤340:获取各个子节点在侧轴上的期望尺寸。
在完成子节点在主轴方向上的排版后,需要进行子节点在侧轴方向上的排版,类似于上述主轴方向上的排版,在进行侧轴方向上的排版前需要获取子节点在侧轴上的期望尺寸。本申请实施例可以通过在缓存中查询各个子节点在侧轴上的尺寸来获取各个子节点在侧轴上的期望尺寸,也可以通过测量各个子节点在侧轴上的尺寸来获取各个子节点在侧轴上的期望尺寸。
当缓存中某个子节点在侧轴上的尺寸可用,可以直接使用该子节点的侧轴尺寸,节省测量该子节点侧轴上尺寸的过程,提高排版速度和效率。
步骤350:根据各个子节点在侧轴上的期望尺寸,对各个子节点进行侧轴方向的排版,确定各个子节点在侧轴上的位置和实际尺寸。
本申请实施例中,步骤350中在具体实施时可以是根据flex规则对父节点的所有子节点在侧轴方向进行排版,得到所有子节点在侧轴上的位置和实际尺寸。经过侧轴排版,子节点的侧轴实际尺寸相对于子节点的侧轴期望尺寸可能发生变化。
待排版子节点需要被放置在其父节点对应的容器(父容器)内,本申请实施例的排版方法可以确定每个待排版子节点在父容器中的位置和尺寸,即如何显示在终端设备或服务器的屏幕上。
需要说明的是,本申请实施例同样适用于具备多层结构关系的待排版树,通过自上而下遍历待排版树的父节点,利用本申请排版方法逐层确定每一层子节点在其父容器中的位置和尺寸进而对子节点进行排版,直至完成待排版树中所有节点的排版,确定所有节点在根节点对应的容器内的位置和尺寸,为后续渲染做好准备。
图4示出了根据本申请一个实施例的排版方法的流程示意图。如图4所示,本申请实施例的排版方法应用于终端设备浏览器,浏览器可用通过本申请的排版方法确定待排版树中各个节点即页面元素在网页页面上的位置(position)和尺寸(width,height),最后通过浏览器渲染引擎将页面元素渲染在终端设备的显示屏幕上。
本申请实施例通过在进行主轴方向排版时仅获取子节点在主轴上的期望尺寸,使得在子节点或父节点的属性如尺寸、排版模式频繁变化的场景中,可以针对性的只获取子节点在主轴上的期望尺寸,而在进行主轴方向的排版之后再获取子节点在侧轴上的期望尺寸以对子节点进行侧轴方向的排版,避免了同时获取到子节点在侧轴上的期望尺寸而由于节点属性发生变化而需要多次获取的问题,并且可以减少多次获取子节点的期望尺寸而增加计算量,有利于提高排版的速度和效率。
图5示出了根据本申请一个实施例的排版方法的示意图,如图5所示,整个排版方法包括以下三大过程。
获取待排版节点:此过程的实现细节与前述步骤310的实现细节类似,不再赘述。
缓存判断:在缓存数据中查询待排版节点对应的排版信息是否可用,若可用,则将待排版节点对应的排版信息作为排版结果,若不可用,则执行排版过程。
其中,排版结果包括待排版节点中各个子节点在父容器中的位置和尺寸。
布局排版:将待排版节点进行主轴和侧轴方向的排版,得到排版结果,并将排版结果存储到缓存中。
图6示出了根据本申请一个实施例的布局排版的示意图。如图6所示,待排版节点包括一个根节点Root和两个子节点Node1、Node2和三个叶子节点Node3、Node4及Node5,经过布局排版过程后可以获取每个节点在其父容器中的位置和尺寸,位置以坐标position(xn,yn)来表示,尺寸以主轴尺寸width和侧轴尺寸height来表示。
本申请实施例在排版方法中引入缓存机制,在布局排版前先判断待排版节点在缓存中对应的排版信息是否可以直接使用,如果可以直接使用,则不需要执行后续的排版过程,如果不可以直接使用,则需要执行排版过程,通过排版过程计算得到排版结果,即各个子节点在父容器中的位置和尺寸。
由于上述布局排版过程包括主轴方向和侧轴方向的排版,图7示出了根据本申请一个实施例的排版方法的细化流程图,如图7所示,本申请排版方法还包括以下步骤。
步骤710,获取具有层级关系的多个待排版节点,多个待排版节点包含有父节点和父节点的多个子节点。步骤710的实现细节与前述步骤310的实现细节类似,不再赘述。
步骤720:在缓存中查询各个子节点对应的主轴排版信息,各个子节点对应的排版信息包括各个子节点在主轴上的位置和实际尺寸。
本申请实施例的排版方法采用缓存机制,在获取到待排版节点后,首先查询缓存中是否存储有子节点对应的排版信息,如果在缓存中存在子节点对应的排版信息,则获取子节点对应的排版信息,为后续判断该排版信息是否可用做准备。
步骤730:若在缓存中查询到子节点对应的主轴排版信息可用,则将子节点在缓存中对应的主轴排版信息作为子节点的主轴排版信息;若在缓存中查询到子节点对应的主轴排版信息不可用,则执行步骤740获取多个子节点中的各个子节点在主轴上的期望尺寸的过程。
本申请实施例中,判断子节点在缓存中对应的主轴排版信息是否可用的标准是子节点的主轴可用尺寸与子节点在缓存中对应的主轴可用尺寸相同,且子节点的主轴排版模式与子节点在缓存中对应的主轴排版模式相同。子节点的主轴可用尺寸意味着父容器提供给子节点的主轴可用尺寸,即父容器内容区主轴尺寸。主轴排版模式包括是否换行、主轴对齐方式等。
该标准意味着父节点可容纳子节点的主轴空间未发生变化,子节点在主轴空间内的布局排版方式也未发生变化。只有在两者都没有发生变化的情况下,在缓存中子节点对应的排版信息是可以直接使用的。
步骤740:获取多个子节点中的各个子节点在主轴上的期望尺寸。步骤740的实现细节与前述步骤320的实现细节类似,不再赘述。
步骤750:根据各个子节点在主轴上的期望尺寸,对各个子节点进行主轴方向的排版,得到各个子节点在主轴上的位置和实际尺寸。步骤750的实现细节与前述步骤330的实现细节类似,不再赘述。
步骤760:在缓存中查询各个子节点对应的侧轴排版信息,各个子节点对应的侧轴排版信息包括各个子节点在侧轴上的位置和实际尺寸。
本申请实施例中,在获取到待排版节点后,查询缓存中是否存储有子节点对应的排版信息,如果在缓存中存在子节点对应的排版信息,则获取子节点对应的排版信息,为后续判断该排版信息是否可用做准备。
步骤770:若在缓存中查询到子节点对应的侧轴排版信息可用,则将子节点在缓存中对应的侧排版信息作为子节点的侧排版信息;若在缓存中查询到子节点对应的侧轴排版信息不可用,则执行步骤780获取多个子节点中的各个子节点在侧轴上的期望尺寸的过程。
步骤780:获取多个子节点中的各个子节点在侧轴上的期望尺寸。步骤780的实现细节与前述步骤340的实现细节类似,不再赘述。
步骤790:根据各个子节点在侧轴上的期望尺寸,对各个子节点进行侧轴方向的排版,得到各个子节点在侧轴上的位置和实际尺寸。步骤790的实现细节与前述步骤350的实现细节类似,不再赘述。
本申请实施例中,判断子节点在缓存中对应的排版信息是否可用的标准是子节点的侧轴可用尺寸与子节点在缓存中对应的侧轴可用尺寸相同,且子节点的侧轴排版模式与子节点在缓存中对应的侧轴排版模式相同。子节点的侧轴可用尺寸意味着父容器提供给子节点的侧轴可用尺寸,即父容器内容区侧轴尺寸。侧轴排版模式包括侧轴单行对齐方式、侧轴多行对齐方式等。
该标准意味着父节点可容纳子节点的侧轴空间未发生变化,子节点在侧轴空间内的布局排版方式也未发生变化。只有在两者都没有发生变化的情况下,在缓存中子节点对应的排版信息是可以直接使用的。
步骤7100:在缓存中存储各个子节点的在主轴上的位置和实际尺寸,以及各个子节点在侧轴上的位置和实际尺寸。
本申请实施例中,在子节点主轴或侧轴排版完成后,在缓存中存储各个子节点的排版信息。如果子节点重新进行了排版,那么将子节点的排版信息也需要存储在缓存中,以备后续再次对子节点进行排版时,查询缓存中子节点的排版信息是否可用。
本申请实施例中,利用了缓存机制,若缓存中子节点对应的排版信息是可以直接使用的,那么不需要对子节点进行排版,可以减少排版计算过程,提高排版效率。
图8示出了根据本申请一个实施例的排版方法的流程图,如图8所示,在具体实施方式中,排版方法包括以下步骤。
步骤810:获取待排版节点。
步骤810的实现细节与前述步骤710的实现细节类似,不再赘述。
步骤820:执行缓存可用判断。
步骤820的实现细节与前述步骤720和步骤760的实现细节类似,步骤820也是判断缓存中子节点对应的主轴排版信息和侧轴排版信息是否可用,不再赘述。
步骤830:获取子节点的期望尺寸。
步骤830的实现细节与前述步骤740和步骤780的实现细节类似,步骤830也是获取多个子节点中的各个子节点在主轴上的期望尺寸和在侧轴上的期望尺寸,不再赘述。
步骤840:解析主轴。
在具体实施中,子节点划分为非弹性尺寸项和弹性尺寸项,非弹性项的弹性因子为0,其的主轴尺寸是被冻结的,即其主轴尺寸不发生变化,弹性尺寸项的弹性因子不为0,主轴尺寸可根据其弹性因子和主轴剩余可用空间弹性伸缩。在步骤840中,在根据各个子节点的主轴期望尺寸计算得到主轴剩余可用空间后,循环检查每一个弹性项的主轴尺寸是否冻结。若弹性项的主轴尺寸还可以在主轴剩余可用空间内伸缩,则弹性项的主轴尺寸未冻结,否则,弹性项的主轴尺寸冻结。若弹性项的主轴尺寸未冻结,则调整弹性项的主轴尺寸,重新计算弹性项的主轴尺寸,直至所有弹性项的主轴尺寸冻结,确定弹性项的实际尺寸。
步骤850:解析侧轴。
在具体实施中,子节点的侧轴可以根据其单元素侧轴对齐属性发生拉伸,步骤850循环检查每一个子节点的侧轴是否发生拉伸,如果某个子节点侧轴发生则需要重新计算该子节点的侧轴尺寸,获取该子节点的侧轴实际尺寸。
步骤860:主轴对齐。
在具体实施中,子节点按照主轴对齐方式包括沿主轴中点对齐、沿主轴起点对齐、沿主轴终点对齐等方式在主轴方向进行排布,不同的对齐方式导致子节点在主轴上的位置不同。
本申请实施例中,步骤840和步骤860共同完成步骤330的实现细节。
步骤870:侧轴对齐。
在具体实施中,子节点按照侧轴对齐方式包括沿侧轴中点对齐、沿侧轴起点对齐、沿侧轴终点对齐等方式在侧轴方向进行排布,不同的对齐方式导致子节点在侧轴上的位置不同。
本申请实施例中,步骤850和步骤870共同完成步骤350的实现细节。
步骤880:获取排版结果。
根据上述子节点的主轴实际尺寸、侧轴实际尺寸、以及主轴和侧轴对齐方式获取各个子节点在父容器中主轴位置、主轴尺寸、侧轴位置以及侧轴尺寸。
图9示出了根据本申请一个实施例的主轴方向排版的流程图,如图9所示,本申请实施例中,步骤750包括以下步骤。
步骤951:确定各个子节点在主轴上的可用空间。
本申请实施例中,子节点被放置在其父节点对应父容器内,父容器遵循flex弹性盒子模型,各个子节点在主轴上的可用空间表示父容器的内容区的主轴尺寸。
步骤952:确定父节点的主轴方向和侧轴方向。
本申请实施例中,通过父节点的主轴方向flex-direction属性确定父容器的主轴方向,侧轴与主轴垂直交叉,主轴方向默认为水平向右。
步骤953:根据父节点的主轴排版属性、子节点的元素属性以及各个子节点在主轴上的期望尺寸,在主轴上的可用空间内对子节点进行主轴方向排版,确定各个子节点在主轴上的位置以及实际尺寸。
本申请实施例中,主轴排版属性包括行对齐属性justify-content,表征父节点的子节点在主轴方向的对齐方式,主轴方向的对齐方向包括向主轴的开始位置对齐、向主轴的结束位置对齐、居中对齐等方式。
本申请实施例中,主轴排版属性包括折行属性flex-wrap,表征父节点的子节点是否允许换行以及怎样换行。若flex-wrap为不换行,当所有子节点在主轴上的尺寸之和超出了父容器内容区的宽度,子节点会压缩显示。若flex-wrap为换行,当所有子节点在主轴上的尺寸之和超出了父容器内容区的宽度,子节点会换行显示。
本申请实施例中,子节点元素属性包括order、表征子节点在父容器中的排列顺序,子节点的order数值越小,子节点排列靠前。
本申请实施例中,子节点元素属性包括子节点的弹性因子放大比例flex-grow和缩小比例flex-shrink,表征子节点在主轴上的可用空间有剩余或者不够时,子节点的放大或者缩小因子。
基于上述说明可知,子节点的主轴尺寸再经过主轴方向排版后可能会缩小或放大,因此子节点的主轴实际尺寸和期望尺寸可能不一致。
基于上述父节点的主轴排版属性以及子节点的元素属性的说明,图10示出了根据本申请一个实施例的主轴方向排版的细节流程图。如图10所示,本申请实施例步骤953包括以下步骤。
步骤10531:根据父节点的flex-wrap、子节点的在主轴上的尺寸以及子节点的order,确定子节点在主轴上可用空间内每一行子节点。
步骤10532:根据任一行中子节点在主轴上尺寸确定该行子节点在主轴上的剩余空间。
步骤10533:根据任一行子节点的flex-grow、flex-shrink属性,在该行子节点对应的主轴剩余空间内对该行子节点进行伸缩,计算得到子节点的主轴实际尺寸。
步骤10533与步骤840的实现细节相同,均是循环检查每一子节点的主轴尺寸是否冻结,直到所有子节点的主轴尺寸冻结,确定子节点的主轴实际尺寸。
步骤10534:根据父节点的justify-content确定子节点的主轴对齐方式。
步骤10535:根据父节点的主轴对齐方式以及各个子节点的实际尺寸确定子节点在主轴的位置。
图11示出的是根据本申请一个实施例的侧轴排版细节流程图。如图11所示,步骤790包括以下步骤。
步骤1191:确定各个子节点在侧轴上的可用空间。
本申请实施例中,父容器遵循flex弹性盒子模型,各个子节点在父容器的内容区进行排版,各个子节点在侧轴上的可用空间表示父容器的内容区的侧轴尺寸。
步骤1192:根据每一行各个子节点的单元素侧轴对齐属性、父节点的单行侧轴对齐属性,确定每一行中各个子节点的侧轴对齐方式。
本申请实施例中,父节点的侧轴排版属性包括单行对齐属性align-items,表征单行子节点的对齐方式,包括沿交叉轴起点对齐、沿交叉轴终点对齐,沿第一行文字的基线对齐和节点占满整个交叉轴等方式。
本申请实施例中,子节点的单元素侧轴对齐属性包括align-self,表征单个子节点的侧轴对齐方式,包括沿交叉轴起点对齐、沿交叉轴终点对齐、沿交叉轴中点对齐和节点占满整个交叉轴等方式。
本申请实施例中,当某子节点的单元素侧轴对齐方式、父节点的单行侧轴对齐方式中任一属性为节点占满整个交叉轴这一对齐方式,那么该子节点发生拉伸。
步骤1193:根据父节点的多行侧轴对齐属性确定多行子节点的整体侧轴对齐方式。
本申请实施例中,父节点的侧轴排版属性包括多行对齐属性align-content,表征父容器中多行子节点的对齐方式,包括沿交叉轴起点对齐、沿交叉轴终点对齐、沿交叉轴中点对齐、与交叉轴两端对齐,节点之间的间隔平均和节点占满整个交叉轴等方式。
若父节点的多行侧轴对齐属性为占满整个交叉轴的对齐方式,则子节点会发生拉伸。
步骤1194:确定各个子节点在侧轴上的位置,若任一子节点发生拉伸,则重新测量得到该子节点的侧轴实际尺寸。
本申请实施例中,通过对齐方式、子节点侧轴预期尺寸确定子节点在撤走的位置后,若子节点在侧轴方向发生拉伸,那么其侧轴尺寸会发生变化,需要重新计算其侧轴实际尺寸。
为了形象简单地描述上述排版方法,图12示出了根据本申请一个实施例的排版效果示意图。下面结合图12举例说明本申请实施例的排版方法。
1、获取多个待排版节点。
本示例中,待排版节点包括父节点A以及父节点A关联的子节点B、子节点C和子节点D。
2、获取各个子节点在主轴上的期望尺寸。
本示例中,通过查询缓存或者测量的方式获取子节点B、C、D在主轴上的期望尺寸分别为50px、60px、30px。
3、确定子节点主轴可用空间。
本示例中,确定父节点A对应的父容器的内容区在主轴上的尺寸为100px。
4、确定主轴方向和侧轴方向。
本示例中,确定父容器A主轴方向水平向右,侧轴方向垂直向下。
5、在主轴上的可用空间内对子节点进行主轴方向排版,得到各个子节点在主轴上的位置以及实际尺寸。
本示例中,父节点A的flex-wrap为换行wrap,子节点B、C、D的order值分别为1、3、2,那么在父容器内第一行子节点为子节点B、D,第二行子节点为子节点C。
本示例中,第一行子节点在主轴上的剩余空间为100-50-30=20px,第二行子节点在主轴上的剩余空间为100-60=40px。
本示例中,子节点B、C、D的flex-grow分别为3、0、1,那么第一行子节点在主轴上剩余空间20px被分成4份,每份5px,子节点B在主轴上尺寸放大为50+5*3=65px,子节点D在主轴上尺寸放大为30+5=35px.第二子节点的flex-grow为0,不发生伸缩,在主轴上尺寸还是60px。
本示例中,父节点的justify-content为居中对齐,第一行子节点和第二行子节点均居中对齐。
本示例中,假设父容器内容区主轴和侧轴交叉点位置为(0,0),那么第一行子节点B在主轴的起始位置为0,第一行子节点D在主轴的起始位置为66,第二行子节点C在主轴的起始位置为21。
6、获取各个子节点在侧轴上的期望尺寸。
本示例中,通过查询缓存或者测量的方式获取子节点B、C、D在主轴上的期望尺寸分别为50px、20px、10px。
7、确定子节点的侧轴可用空间。
本示例中,确定父节点A对应的父容器的内容区在侧轴上的尺寸为100px。
8、确定子节点单行对齐方式。
本示例中,父节点A的align-items为沿交叉轴终点对齐,那么第一行子节点B的侧轴尺寸比子节点D的侧轴尺寸大,子节点D沿子节点B的底部对齐。
9、确定子节点多行对齐方式。
本示例中,父节点A的align-content为沿交叉轴起点对齐。
10、确定子节点在侧轴的位置和实际尺寸。
本示例中,第一行子节点B在侧轴的位置为0,第一行子节点D在侧轴的位置为41,第二行子节点C在侧轴的位置为51。子节点B、C、D未发生拉伸,子节点B、C、D的侧轴实际尺寸为50px、20px、10px。
通过上述举例说明可知,利用本申请实施例的排版方法后可以得到待排版节点在父容器中的位置和尺寸,为后续节点在终端设备或服务器中渲染上屏做好准备。
图13示出了根据本申请一个实施例的获取各个子节点的主轴期望尺寸的流程图,如图13所示,在本申请实施例中,步骤740包括以下步骤。
步骤1341:在缓存中查询各个子节点对应的主轴测量信息,各个子节点对应的主轴测量信息包括各个子节点的主轴期望尺寸。
步骤1342:若在缓存中查询到子节点对应的主轴测量信息可用,则将在缓存中查询到的子节点的主轴期望尺寸作为子节点在主轴上的期望尺寸。
本申请实施例中,判断子节点在缓存中对应的主轴测量信息是否可用的标准是子节点的主轴可用尺寸与子节点在缓存中对应的主轴可用尺寸相同,且子节点的主轴测量模式与子节点在缓存中对应的主轴测量模式相同。本申请实施例中,子节点的主轴测量模式包括精确模式;最大值模式和未定义模式。
该标准意味着父节点可容纳子节点的主轴空间未发生变化,子节点的主轴测量模式也未发生变化。只有在两者都没有发生变化的情况下,在缓存中子节点对应的测量信息是可以直接使用的。
步骤1343:若在缓存中查询到子节点对应的主轴测量信息不可用,则根据子节点的主轴测量模式测量子节点的主轴,得到子节点在主轴上的期望尺寸。
若子节点的主轴测量模式为精确模式,则将子节点在主轴上的预设尺寸作为子节点在主轴上的期望尺寸。
在精确模式下,当子节点接收到预设的flex-basis,则将预设的flex-basis作为子节点在主轴上的期望尺寸,当子节点未接收到预设flex-basis,根据父节点的主轴方向取预设width或预设height作为子节点的主轴期望尺寸。
若子节点的主轴测量模式为最大值模式,则将子节点在主轴上的预设最大尺寸作为子节点在主轴上的期望尺寸。
在最大值模式下,根据父节点主轴方向取预设的max-width或max-height作为子节点在主轴上的期望尺寸。
若子节点的主轴测量模式为未定义模式,则获取子节点的下一级节点的主轴期望尺寸,根据子节点的下一级节点的主轴期望尺寸获取子节点在主轴上的期望尺寸。
在未定义模式下,子节点的主轴期望尺寸未知,通过累积子节点的下一级节点的主轴期望尺寸得到子节点在主轴上的期望尺寸,这一过程涉及到自下而上遍历子节点的多层下级节点来获取子节点的主轴期望尺寸。
图14示出了根据本申请一个实施例的主轴测量示意图。如图14所示,一个未知主轴尺寸的节点经过步骤1343的测量后得到其主轴尺寸。
步骤1344:在缓存中存储子节点在主轴上的期望尺寸。
本申请实施例利用缓存机制,在测量子节点的主轴期望尺寸之前,先查询缓存中子节点对应的测量信息是否可用,若可用,则直接使用子节点对应的测量信息,若不可用,则测量子节点的主轴期望尺寸,并将测量结果保存在缓存中,以备后续需要获取子节点主轴期望尺寸时使用。
同时,本申请实施例分别测量子节点的主轴和侧轴,即一次仅测量子节点在一个维度的尺寸,在子节点或父节点属性如尺寸、排版模式频繁变化的场景中,可以针对性只获取子节点的主轴或只获取子节点的侧轴尺寸,减少了子节点在主轴和侧轴上尺寸同时计算量,提高了排版的速度和效率。
图15示出了根据本申请一个实施例的获取各个子节点的侧轴期望尺寸的流程图,如图15所示,在本申请实施例中,步骤780包括以下步骤。
步骤1581:在缓存中查询各个子节点对应的侧轴测量信息,各个子节点对应的侧轴测量信息包括各个子节点的侧轴期望尺寸。
步骤1582:若在缓存中查询到子节点对应的侧轴测量信息可用,则将在缓存中查询到的子节点的侧轴期望尺寸作为子节点在侧轴上的期望尺寸。
本申请实施例中,判断子节点在缓存中对应的侧轴测量信息是否可用的标准是子节点的侧轴可用尺寸与子节点在缓存中对应的侧轴可用尺寸相同,且子节点的侧轴测量模式与子节点在缓存中对应的侧轴测量模式相同。本申请实施例中,子节点的主轴测量模式包括精确模式;最大值模式和未定义模式。
该标准意味着父节点可容纳子节点的侧轴空间未发生变化,子节点的侧轴测量模式也未发生变化。只有在两者都没有发生变化的情况下,在缓存中子节点对应的测量信息是可以直接使用的。
步骤1583:若在缓存中查询到子节点对应的侧轴测量信息不可用,则根据子节点的侧轴测量模式测量子节点的侧轴,得到子节点在侧轴上的期望尺寸。
若子节点的侧轴测量模式为精确模式,则将子节点在侧轴上的预设尺寸作为子节点在侧轴上的期望尺寸。
在精确模式下,根据父节点的主轴方向取预设width或预设height作为子节点的侧轴期望尺寸。
若子节点的侧轴测量模式为最大值模式,则将子节点在侧轴上的预设最大尺寸作为子节点在侧轴上的期望尺寸。
在最大值模式下,根据父节点的主轴方向取预设max-height或max-widtht作为子节点在主轴上的期望尺寸。
若子节点的侧轴测量模式为未定义模式,则获取子节点的下一级节点在侧轴上的期望尺寸,根据子节点的下一级节点在侧轴上的尺寸获取子节点在侧轴上的期望尺寸。
在未定义模式下,子节点的侧轴期望尺寸未知,通过累积子节点的下一级节点的侧轴期望尺寸得到子节点在侧轴上的期望尺寸。
图16示出了根据本申请一个实施例的侧轴测量示意图。如图16所示,一个未知侧轴尺寸的节点经过步骤1583的测量后得到其侧轴尺寸。
步骤1584:在缓存中存储子节点在侧轴上的期望尺寸。
本申请实施例利用缓存机制,在测量子节点的侧轴期望尺寸之前,先查询缓存中子节点对应的测量信息是否可用,若可用,则直接使用子节点对应的测量信息,若不可用,则测量子节点的侧轴期望尺寸,并将测量结果保存在缓存中,以备后续需要获取子节点侧轴期望尺寸时使用。
同时,本申请实施例分别测量子节点的主轴和侧轴,即一次仅测量子节点在一个维度的尺寸,在子节点属性如尺寸、排版模式频繁变化的场景中,可以针对性只获取子节点的主轴或只获取子节点的侧轴尺寸,减少了子节点在主轴和侧轴上尺寸同时计算量,提高了排版的速度和效率。
基于上述本申请实施例中关于排版方法的说明,可以将整个排版方法分为测量阶段和排版阶段。待排版子节点经过测量阶段后可以获取主轴期望尺寸或侧轴期望尺寸,经过排版阶段后可以获取待排版子节点在父容器中的位置和尺寸。
在本申请实施例中,在测量阶段,在缓存中查询子节点对应的测量信息;在排版阶段,在缓存中查询子节点对应的测量信息。图17示出了根据本申请一个实施例的缓存架构图。如图17所示,在具体实施本申请实施例时,当缓存收到查询请求时,判断当前阶段是测量阶段还是排版阶段。如果当前阶段是测量阶段,则判断子节点在缓存中对应的主轴或侧轴测量信息是否可用,如果可用,则命中缓存,如果不可用,则未命中缓存。如果当前阶段是排版阶段,则判断子节点在缓存中对应的主轴或侧轴排版信息是否可用,如果可用,则命中缓存,如果不可用,则未命中缓存。
图18示出了根据本申请一个实施例的排版方法的流程图,如图18所示,本申请实施例的排版方法还包括:
步骤1810:获取具有层级关系的多个待排版节点,多个待排版节点包含有父节点和父节点的多个子节点。步骤1810的实现细节与前述步骤310的实现细节类似,不再赘述。
步骤1820:获取多个子节点中的各个子节点在主轴上的期望尺寸。步骤1820的实现细节与前述步骤320的实现细节类似,不再赘述。
步骤1830:根据各个子节点在主轴上的期望尺寸,对各个子节点进行主轴方向的排版,得到各个子节点在主轴上的位置和实际尺寸。步骤1830的实现细节与前述步骤330的实现细节类似,不再赘述。
步骤1840:在得到指定子节点在主轴上的位置和实际尺寸之后,若接收到主轴重排版请求,则重新根据各个子节点在主轴上的期望尺寸,对各个子节点进行主轴方向的排版。
本申请实施例中,接收到主轴重排版请求意味着子节点的主轴尺寸、父节点的主轴尺寸或者父节点的主轴排版属性发生变化,此时需要重新对子节点进行主轴方向排版。
步骤1850:获取各个子节点在侧轴上的期望尺寸。步骤1850的实现细节与前述步骤340的实现细节类似,不再赘述。
步骤1860:根据各个子节点在侧轴上的期望尺寸,对各个子节点进行侧轴方向的排版,确定各个子节点在侧轴上的位置和实际尺寸。步骤1860的实现细节与前述步骤350的实现细节类似,不再赘述。
步骤1870:在得到指定子节点在侧轴上的位置和实际尺寸之后,若接收到侧轴重排版请求,则重新根据各个子节点在侧轴上的期望尺寸,对各个子节点进行侧轴方向的排版。
本申请实施例中,接收到侧轴重排版请求意味着子节点的侧轴尺寸、父节点的侧轴尺寸或者父节点的侧轴排版属性等发生变化,此时需要重新对子节点进行侧轴方向排版。
图19示出了根据本申请一个实施例的重排版的示意图,如图19所示,例如node1的元素单元素侧轴对齐属性发生变化,那么node1及其下一级节点node3和node4发生重排版,node1及其下一级子节点node3和node4发生重排版,node1、node3和node4的位置,具体是在侧轴上的位置发生变化。
本申请实施例通过在进行主轴方向排版时仅获取子节点在主轴上的期望尺寸,使得在子节点或父节点的属性如尺寸、排版模式频繁变化的场景中,需要重新子节点进行主轴或者侧轴重排版时,可以针对性的只获取子节点在主轴上的期望尺寸,而在进行主轴方向的排版之后再获取子节点在侧轴上的期望尺寸以对子节点进行侧轴方向的排版,避免了同时获取到子节点在侧轴上的期望尺寸而由于节点属性发生变化而需要多次获取的问题,并且可以减少多次获取子节点的期望尺寸而增加计算量,有利于提高排版的速度和效率。
本申请实施例中,通过上述排版方法在得到各个子节点在主轴上的位置和实际尺寸,以及各个子节点在侧轴上的位置和实际尺寸后,可以对各个子节点进行界面渲染,生成排版后的用户界面。
以下介绍本申请的排版装置实施例,可以用于执行本申请上述实施例中的排版方法。对于本申请排版装置实施例中未披露的细节,请参照本申请上述的排版方法的实施例。
图20示出了根据本申请一个实施例的排版装置框图,如图20所示,排版装置200包括节点获取单元201、主轴尺寸获取单元202、主轴方向排版单元203、侧轴尺寸获取单元204、侧轴方向排版单元205。
节点获取单元201,用于获取具有层级关系的多个待排版节点,多个待排版节点包含有父节点和父节点的多个子节点。
主轴尺寸获取单元202,用于获取多个子节点中的各个子节点在主轴上的期望尺寸。
主轴方向排版单元203,用于根据所述各个子节点在主轴上的期望尺寸对所述各个子节点进行主轴方向的排版,得到所述各个子节点在主轴上的位置和实际尺寸;
侧轴尺寸获取单元204,用于获取所述各个子节点在侧轴上的期望尺寸;
侧轴方向排版单元205,用于根据所述各个子节点在侧轴上的期望尺寸,对所述各个子节点进行侧轴方向的排版,得到所述各个子节点在侧轴上的位置和实际尺寸。
本申请实施例中,主轴尺寸获取单元202配置为:在缓存中查询各个子节点对应的主轴测量信息,各个子节点对应的主轴测量信息包括各个子节点的主轴期望尺寸。若在缓存中查询到子节点对应的主轴测量信息可用,则将在缓存中查询到的子节点的主轴期望尺寸作为子节点在主轴上的期望尺寸。若在缓存中查询到子节点对应的主轴测量信息不可用,则根据子节点的主轴测量模式测量子节点的主轴,得到子节点在主轴上的期望尺寸。
本申请实施例中侧轴尺寸获取单元203被配置:在缓存中查询各个子节点对应的侧轴测量信息,各个子节点对应的测量信息包括各个子节点的侧轴期望尺寸。若在缓存中查询到子节点对应的侧轴测量信息可用,则将在缓存中查询到的子节点的侧轴期望尺寸作为子节点在侧轴上的期望尺寸。若在缓存中查询到子节点对应的侧轴测量信息不可用,则根据子节点的侧轴测量模式测量子节点的侧轴,得到子节点在侧轴上的期望尺寸。
基于上述关于本申请实施例排版方法的描述,图21示出了根据本申请一个实施例的排版系统框架图,如图21所示,排版系统2100包括:
布局排版模块2110,包括测量模块、排版模块以及重排版模块。
测量模块,用于获取待排版节点的主轴和侧轴期望尺寸。
排版模块,用于对待排版节点进行主轴和侧轴方向排版,获取待排版节点的位置和主轴和侧轴期望实际尺寸。
重排版模块,用于对节点进行主轴方向或者侧轴方向重排版。
缓存模块2120,包括测量缓存模块和排版缓存模块。
测量缓存模块,用于存储待排版节点的主轴测量信息。
排版缓存模块,用于存储待排版节点的侧轴测量信息。
图22示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。
需要说明的是,图22示出的电子设备的计算机系统2200仅是一个示例,不应对本申请实施例的功能和使用范围带来任何限制。
如图22所示,计算机系统2200包括中央处理单元(Central Processing Unit,CPU)2201,其可以根据存储在只读存储器(Read-Only Memory,ROM)2202中的程序或者从储存部分2008加载到随机访问存储器(Random Access Memory,RAM)2203中的程序而执行各种适当的动作和处理,例如执行上述实施例中所述的方法。在RAM 2203中,还存储有系统操作所需的各种程序和数据。CPU 2201、ROM 2202以及RAM 2203通过总线2204彼此相连。输入/输出(Input/Output,I/O)接口2205也连接至总线2204。
以下部件连接至I/O接口2205:包括键盘、鼠标等的输入部分2206;包括诸如阴极射线管(Cathode Ray Tube,CRT)、液晶显示器(Liquid Crystal Display,LCD)等以及扬声器等的输出部分2207;包括硬盘等的储存部分2208;以及包括诸如LAN(Local AreaNetwork,局域网)卡、调制解调器等的网络接口卡的通信部分2209。通信部分2209经由诸如因特网的网络执行通信处理。驱动器2210也根据需要连接至I/O接口2205。可拆卸介质2211,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器2210上,以便于从其上读出的计算机程序根据需要被安装入储存部分2208。
特别地,根据本申请的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本申请的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分2209从网络上被下载和安装,和/或从可拆卸介质2211被安装。在该计算机程序被中央处理单元(CPU)2201执行时,执行本申请的系统中限定的各种功能。
需要说明的是,本申请实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory,EPROM)、闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory,CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、有线等等,或者上述的任意合适的组合。
附图中的流程图和框图,图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。其中,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图或流程图中的每个方框、以及框图或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本申请实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现,所描述的单元也可以设置在处理器中。其中,这些单元的名称在某种情况下并不构成对该单元本身的限定。
作为另一方面,本申请还提供了一种计算机程序产品或计算机程序,该计算机程序产品或计算机程序包括计算机指令,该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该计算机设备执行上述实施例中所述的视频编辑效果的验证方法。
作为另一方面,本申请还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被一个该电子设备执行时,使得该电子设备实现上述实施例中所述的视频编辑效果的验证方法。
应当注意,尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元,但是这种划分并非强制性的。实际上,根据本申请的实施方式,上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之,上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
通过以上的实施方式的描述,本领域的技术人员易于理解,这里描述的示例实施方式可以通过软件实现,也可以通过软件结合必要的硬件的方式来实现。因此,根据本申请实施方式的技术方案可以以软件产品的形式体现出来,该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM,U盘,移动硬盘等)中或网络上,包括若干指令以使得一台计算设备执行根据本申请实施方式的方法。
本领域技术人员在考虑说明书及实践这里公开的实施方式后,将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。
应当理解的是,本申请并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围执行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

1.一种排版方法,其特征在于,所述方法包括:
获取具有层级关系的多个待排版节点,所述多个待排版节点包含有父节点和所述父节点的多个子节点;
获取所述多个子节点中的各个子节点在主轴上的期望尺寸;
根据所述各个子节点在主轴上的期望尺寸,对所述各个子节点进行主轴方向的排版,得到所述各个子节点在主轴上的位置和实际尺寸;
获取所述各个子节点在侧轴上的期望尺寸;
根据所述各个子节点在侧轴上的期望尺寸,对所述各个子节点进行侧轴方向的排版,得到所述各个子节点在侧轴上的位置和实际尺寸。
2.根据权利要求1所述的方法,其特征在于,在所述获取所述多个子节点中的各个子节点在主轴上的期望尺寸之前,所述方法还包括:
在缓存中查询所述各个子节点对应的主轴排版信息,所述各个子节点对应的主轴排版信息包括所述各个子节点在主轴上的位置和实际尺寸;
若在所述缓存中查询到所述子节点对应的主轴排版信息可用,则将所述子节点在缓存中对应的主轴排版信息作为所述子节点的排版信息;
若在所述缓存中查询到所述子节点对应的主轴排版信息不可用,则执行获取所述多个子节点中的各个子节点在主轴上的期望尺寸的过程。
3.根据权利要求2所述的方法,其特征在于,所述根据所述各个子节点在主轴上的期望尺寸,对所述各个子节点进行主轴方向的排版,得到所述各个子节点在主轴上的位置和实际尺寸之后,所述方法还包括:
在所述缓存中存储所述各个子节点的在主轴上的位置和实际尺寸。
4.根据权利要求1所述的方法,其特征在于,所述获取所述多个子节点中的各个子节点在主轴上的期望尺寸,包括:
在缓存中查询所述各个子节点对应的主轴测量信息,所述各个子节点对应的主轴测量信息包括所述各个子节点的主轴期望尺寸;
若在所述缓存中查询到所述子节点对应的主轴测量信息可用,则将在所述缓存中查询到的所述子节点的主轴期望尺寸作为所述子节点在主轴上的期望尺寸;
若在所述缓存中查询到所述子节点对应的主轴测量信息不可用,则根据所述子节点的主轴测量模式测量所述子节点的主轴,得到所述子节点在主轴上的期望尺寸。
5.根据权利要求4所述的方法,其特征在于,所述根据所述子节点的主轴测量模式测量所述子节点的主轴,得到所述子节点在主轴上的期望尺寸,包括:
若所述子节点的主轴测量模式为精确模式,则将所述子节点在主轴上的预设尺寸作为所述子节点在主轴上的期望尺寸;
若所述子节点的主轴测量模式为最大值模式,则将所述子节点在主轴上的预设最大尺寸作为所述子节点在主轴上的期望尺寸;
若所述子节点的主轴测量模式为未定义模式,则获取所述子节点的下一级节点的主轴期望尺寸,根据所述子节点的下一级节点的主轴期望尺寸获取所述子节点在主轴上的期望尺寸。
6.根据权利要求1所述的方法,其特征在于,所述获取所述多个子节点中的各个子节点在侧轴上的期望尺寸,包括:
在缓存中查询所述各个子节点对应的侧轴测量信息,所述各个子节点对应的侧轴测量信息包括所述各个子节点的侧轴期望尺寸;
若在所述缓存中查询到所述子节点对应的侧轴测量信息可用,则将在所述缓存中查询到的所述子节点的侧轴期望尺寸作为所述子节点在侧轴上的期望尺寸;
若在所述缓存中查询到所述子节点对应的侧轴测量信息不可用,则根据所述子节点的侧轴测量模式测量所述子节点的侧轴,得到所述子节点在侧轴上的期望尺寸。
7.根据权利要求6所述的方法,其特征在于,所述根据所述子节点的侧轴测量模式测量所述子节点的侧轴,得到所述子节点在侧轴上的期望尺寸,包括:
若所述子节点的侧轴测量模式为精确模式,则将所述子节点在侧轴上的预设尺寸作为所述子节点在侧轴上的期望尺寸;
若所述子节点的侧轴测量模式为最大值模式,则将所述子节点在侧轴上的预设最大尺寸作为所述子节点在侧轴上的期望尺寸;
若所述子节点的侧轴测量模式为未定义模式,则获取所述子节点的下一级节点在侧轴上的期望尺寸,根据所述子节点的下一级节点在侧轴上的尺寸获取所述子节点在侧轴上的期望尺寸。
8.根据权利要求1至7中任一项所述的方法,其特征在于,所述方法还包括:
在得到指定子节点在主轴上的位置和实际尺寸之后,若接收到主轴重排版请求,则重新根据所述各个子节点在主轴上的期望尺寸,对所述各个子节点进行主轴方向的排版;
在得到指定子节点在侧轴上的位置和实际尺寸之后,若接收到侧轴重排版请求,则重新根据所述各个子节点在侧轴上的期望尺寸,对所述各个子节点进行侧轴方向的排版。
9.根据权利要求1至7中任一项所述的方法,其特征在于,所述方法还包括:
根据所述各个子节点在主轴上的位置和实际尺寸,以及所述各个子节点在侧轴上的位置和实际尺寸,对所述各个子节点进行界面渲染,生成排版后的用户界面。
10.一种排版装置,其特征在于,所述排版装置包括:
节点获取单元,用于获取具有层级关系的多个待排版节点,所述多个待排版节点包含有父节点和所述父节点的多个子节点;
主轴尺寸获取单元,用于获取所述多个子节点中的各个子节点在主轴上的期望尺寸;
主轴方向排版单元,用于根据所述各个子节点在主轴上的期望尺寸对所述各个子节点进行主轴方向的排版,得到所述各个子节点在主轴上的位置和实际尺寸;
侧轴尺寸获取单元,用于获取所述各个子节点在侧轴上的期望尺寸;
侧轴方向排版单元,用于根据所述各个子节点在侧轴上的期望尺寸,对所述各个子节点进行侧轴方向的排版,得到所述各个子节点在侧轴上的位置和实际尺寸。
CN202110489137.8A 2021-04-30 2021-04-30 排版方法、排版装置 Pending CN115270710A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110489137.8A CN115270710A (zh) 2021-04-30 2021-04-30 排版方法、排版装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110489137.8A CN115270710A (zh) 2021-04-30 2021-04-30 排版方法、排版装置

Publications (1)

Publication Number Publication Date
CN115270710A true CN115270710A (zh) 2022-11-01

Family

ID=83745214

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110489137.8A Pending CN115270710A (zh) 2021-04-30 2021-04-30 排版方法、排版装置

Country Status (1)

Country Link
CN (1) CN115270710A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117539491A (zh) * 2024-01-09 2024-02-09 腾讯科技(深圳)有限公司 页面布局方法、装置、电子设备、存储介质及程序产品

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117539491A (zh) * 2024-01-09 2024-02-09 腾讯科技(深圳)有限公司 页面布局方法、装置、电子设备、存储介质及程序产品
CN117539491B (zh) * 2024-01-09 2024-04-26 腾讯科技(深圳)有限公司 页面布局方法、装置、电子设备、存储介质及程序产品

Similar Documents

Publication Publication Date Title
CN108984714B (zh) 页面渲染方法、装置、电子设备及计算机可读介质
EP3893154A1 (en) Recommendation model training method and related apparatus
US9032282B2 (en) Method and web content management system for A/B testing or multivariate testing of websites on computers being connected to a web content management system
US20090265611A1 (en) Web page layout optimization using section importance
CN110851757A (zh) 页面资源加载方法及终端
US10268655B2 (en) Method, device, server and storage medium of searching a group based on social network
US20190333256A1 (en) Methods and Systems For Simplified Graphical Depictions of Bipartite Graphs
CN109543209B (zh) 一种构件数据库的管理方法及装置
CN109597810B (zh) 一种任务切分方法、装置、介质及电子设备
CN111125057A (zh) 一种业务请求的处理方法、装置及计算机系统
CN115270710A (zh) 排版方法、排版装置
CN111402000A (zh) 一种业务页面的生成方法、装置、系统及计算机系统
CN113094444A (zh) 数据处理方法、数据处理装置、计算机设备和介质
CN113918267B (zh) 地图交互方法、装置、电子设备及存储介质
CN115016754A (zh) 设备间的页面同步显示方法、装置、电子设备及介质
CN114610802A (zh) 词轮播方法、装置、设备及存储介质
CN114676272A (zh) 多媒体资源的信息处理方法、装置、设备及存储介质
CN107562845A (zh) 推送方法、系统及电子设备
CN114004209A (zh) Pdf格式数据导出方法、装置、电子设备及可读存储介质
CN110764860A (zh) 用户界面中的项目配置方法、装置、服务器及存储介质
CN114489915B (zh) 基于移动设备的开屏图片展示方法、装置、设备及介质
CN102968593A (zh) 用于多租户环境下定位应用程序的隔离点的方法和系统
CN116931889B (zh) 一种基于对象树的软件建模方法及系统
CN110457122B (zh) 任务处理方法、任务处理装置和计算机系统
CN116385652B (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