Typesetting methods and devices

Abstract

This application provides a typesetting method and apparatus, applied in the field of computer technology. The method includes: acquiring a plurality of nodes to be typed, having a hierarchical relationship, wherein the plurality of nodes to be typed include a parent node and a plurality of child nodes of the parent node; acquiring the expected size of each child node on the main axis; typesetting the child nodes along the main axis according to the expected size of each child node on the main axis, obtaining the position and actual size of each child node on the main axis; after determining the position and actual size of the child nodes on the main axis, acquiring the expected size of each child node on a side axis; and typesetting the child nodes along the side axis according to the expected size of each child node on the side axis, obtaining the position and actual size of each child node on the side axis. The technical solution of this application embodiment can improve typesetting speed and efficiency.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically, to a typesetting method and typesetting device. Background Technology

[0002] Currently, most browser engines support the Flexbox layout engine. The Flexbox layout engine obtains the size of items through a measurement process and their position within the container through a layout process; the measurement and layout processes are used together to complete the layout. However, current layout engines suffer from long measurement times when measuring items, affecting layout speed and efficiency. Summary of the Invention

[0003] The embodiments of this application provide a typesetting method and typesetting apparatus, which can at least to some extent improve the speed and efficiency of typesetting.

[0004] Other features and advantages of this application will become apparent from the following detailed description, or may be learned in part from practice of this application.

[0005] According to one aspect of the embodiments of this application, a typesetting method is provided, the method comprising:

[0006] Obtain multiple nodes to be formatted that have a hierarchical relationship, wherein the multiple nodes to be formatted include a parent node and multiple child nodes of the parent node;

[0007] Obtain the desired size of each of the plurality of child nodes on the main axis;

[0008] Based on the expected size of each child node on the main axis, the child nodes are arranged in the main axis direction to obtain the position and actual size of each child node on the main axis.

[0009] Obtain the desired dimensions of each child node on the lateral axis;

[0010] Based on the expected size of each child node on the side axis, the child nodes are arranged in the side axis direction to obtain the position and actual size of each child node on the side axis.

[0011] According to one aspect of the embodiments of this application, a typesetting apparatus is provided, the typesetting apparatus comprising:

[0012] A node acquisition unit is used to acquire multiple nodes to be typed that have a hierarchical relationship, wherein the multiple nodes to be typed include a parent node and multiple child nodes of the parent node;

[0013] A spindle dimension acquisition unit is used to acquire the expected dimension of each of the plurality of child nodes on the spindle.

[0014] The main axis layout unit is used to layout each child node in the main axis direction according to the expected size of each child node on the main axis, so as to obtain the position and actual size of each child node on the main axis.

[0015] A lateral axis dimension acquisition unit is used to acquire the desired dimensions of each child node on the lateral axis.

[0016] The side-axis layout unit is used to arrange the child nodes in the side-axis direction according to the expected size of each child node on the side axis, so as to obtain the position and actual size of each child node on the side axis.

[0017] In some embodiments of this application, based on the foregoing scheme, the typesetting device further includes:

[0018] The spindle cache query unit is used to query the spindle layout information corresponding to each child node in the cache. The spindle layout information corresponding to each child node includes the position and actual size of each child node on the spindle. If the spindle layout information corresponding to the child node is available in the cache, then the spindle layout information corresponding to the child node in the cache is used as the layout information of the child node. If the spindle layout information corresponding to the child node is not available in the cache, then the expected size of each child node on the spindle is obtained.

[0019] In some embodiments of this application, based on the foregoing scheme, the typesetting device further includes:

[0020] The main axis layout information storage unit is used to store the position and actual size of each child node on the main axis in a cache after the main axis layout unit determines the position and actual size of each child node on the main axis.

[0021] In some embodiments of this application, based on the foregoing scheme, the spindle dimension acquisition unit includes:

[0022] The spindle measurement information query subunit is used to query the spindle measurement information corresponding to each child node in the cache. The spindle measurement information corresponding to each child node includes the expected spindle size of each child node. If the spindle measurement information corresponding to the child node is available in the cache, the expected spindle size of the child node found in the cache will be used as the expected size of the child node on the spindle.

[0023] The spindle measurement subunit is used to measure the spindle of the child node according to the spindle measurement mode of the child node if the spindle measurement information corresponding to the child node is not available in the cache, so as to obtain the expected size of the child node on the spindle.

[0024] In some embodiments of this application, based on the foregoing scheme, the spindle measurement subunit is configured as follows: if the spindle measurement mode of the child node is the precision mode, then the preset size of the child node on the spindle is taken as the expected size of the child node on the spindle; if the spindle measurement mode of the child node is the maximum value mode, then the preset maximum size of the child node on the spindle is taken as the expected size of the child node on the spindle; if the spindle measurement mode of the child node is the undefined mode, then the expected size of the spindle of the next-level node of the child node is obtained, and the expected size of the child node on the spindle is obtained according to the expected size of the spindle of the next-level node of the child node.

[0025] In some embodiments of this application, based on the foregoing scheme, the side shaft dimension acquisition unit includes:

[0026] The lateral axis measurement information query subunit is used to query the lateral axis measurement information corresponding to each child node in the cache. The measurement information corresponding to each child node includes the expected lateral axis dimension of each child node. If the lateral axis measurement information corresponding to the child node is available in the cache, the expected lateral axis dimension of the child node found in the cache will be used as the expected lateral axis dimension of the child node.

[0027] The lateral axis measurement subunit is used to measure the lateral axis of the child node according to its lateral axis measurement mode if the lateral axis measurement information corresponding to the child node is not available in the cache, so as to obtain the expected size of the child node on the lateral axis.

[0028] In some embodiments of this application, based on the foregoing scheme, the side-axis measurement subunit is configured as follows: if the side-axis measurement mode of the child node is the precise mode, then the preset size of the child node on the side axis is taken as the expected size of the child node on the side axis; if the side-axis measurement mode of the child node is the maximum value mode, then the preset maximum size of the child node on the side axis is taken as the expected size of the child node on the side axis; if the side-axis measurement mode of the child node is the undefined mode, then the expected size of the next-level node of the child node on the side axis is obtained, and the expected size of the child node on the side axis is obtained based on the size of the next-level node of the child node on the side axis. In some embodiments of this application, based on the foregoing scheme, the typesetting device further includes:

[0029] The spindle relayout unit is used to relay out each child node along the spindle direction according to the expected size of each child node on the spindle after obtaining the position and actual size of the specified child node on the spindle and receiving a spindle relayout request.

[0030] The side axis relayout unit is used to relay out each child node in the side axis direction according to the expected size of each child node in the side axis after obtaining the position and actual size of the specified child node on the side axis and receiving a side axis relayout request.

[0031] In some embodiments of this application, based on the foregoing scheme, the typesetting device further includes:

[0032] The rendering unit is used to render the interface of each child node according to the position and actual size of each child node on the main axis and the position and actual size of each child node on the side axis, and generate the layout user interface.

[0033] According to one aspect of the embodiments of this application, a computer program product or computer program is provided, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the typesetting method described in the above embodiments.

[0034] According to one aspect of the embodiments of this application, a computer-readable medium is provided having a computer program stored thereon, which, when executed by a processor, implements the typesetting method as described in the above embodiments.

[0035] According to one aspect of the embodiments of this application, an electronic device is provided, including: one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the one or more processors to implement the typesetting method as described in the above embodiments.

[0036] In some embodiments of this application, the technical solutions provided by obtaining only the expected size of child nodes on the main axis when performing layout in the main axis direction allows for targeted acquisition of only the expected size of child nodes on the main axis in scenarios where the attributes of child nodes or parent nodes, such as size and layout mode, change frequently. After performing layout in the main axis direction, the expected size of child nodes on the side axis is then acquired for layout in the side axis direction. This avoids the problem of needing to acquire the expected size of child nodes on the side axis multiple times due to changes in node attributes, and reduces the computational load caused by acquiring the expected size of child nodes multiple times, which is beneficial to improving the speed and efficiency of layout.

[0037] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application. Attached Figure Description

[0038] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. It is obvious that the drawings described below are merely some embodiments of this application, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort. In the drawings:

[0039] Figure 1 A schematic diagram of an exemplary system architecture to which the technical solutions of the embodiments of this application can be applied is shown.

[0040] Figure 2 A schematic diagram illustrating the layout effect of an embodiment of this application applied to a terminal device is shown.

[0041] Figure 3 A flowchart of a typesetting method according to an embodiment of this application is shown.

[0042] Figure 4 A flowchart illustrating a typesetting method according to an embodiment of this application is shown.

[0043] Figure 5 A schematic diagram of a typesetting method according to an embodiment of this application is shown.

[0044] Figure 6 A schematic diagram of a layout according to an embodiment of this application is shown.

[0045] Figure 7 A detailed flowchart of a typesetting method according to an embodiment of this application is shown.

[0046] Figure 8 A flowchart of a typesetting method according to an embodiment of this application is shown.

[0047] Figure 9 A flowchart illustrating the layout along the main axis according to one embodiment of this application is shown.

[0048] Figure 10 A detailed flowchart of the layout along the main axis according to one embodiment of this application is shown.

[0049] Figure 11 The diagram shown is a flowchart detailing the side-axis layout according to one embodiment of this application.

[0050] Figure 12 A schematic diagram illustrating the layout effect according to an embodiment of this application is shown.

[0051] Figure 13 A flowchart illustrating the desired spindle dimensions of each child node according to an embodiment of this application is shown.

[0052] Figure 14 A schematic diagram of spindle measurement according to an embodiment of this application is shown.

[0053] Figure 15 A flowchart illustrating the desired lateral axis dimensions of each child node according to one embodiment of this application is shown.

[0054] Figure 16 A schematic diagram of lateral axis measurement according to an embodiment of this application is shown.

[0055] Figure 17 A caching architecture diagram according to an embodiment of this application is shown.

[0056] Figure 18 A flowchart of a typesetting method according to an embodiment of this application is shown.

[0057] Figure 19 A schematic diagram of a rearranged version according to an embodiment of this application is shown.

[0058] Figure 20 A block diagram of a typesetting apparatus according to one embodiment of the present application is shown.

[0059] Figure 21 A layout system framework diagram according to an embodiment of this application is shown.

[0060] Figure 22 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown. Detailed Implementation

[0061] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, these exemplary embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided to make this application more comprehensive and complete, and to fully convey the concept of the exemplary embodiments to those skilled in the art.

[0062] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a thorough understanding of embodiments of this application. However, those skilled in the art will recognize that the technical solutions of this application can be practiced without one or more of the specific details, or other methods, components, apparatuses, steps, etc., can be employed. In other instances, well-known methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring various aspects of this application.

[0063] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0064] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0065] It should be noted that "multiple" in this article refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0066] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such uses of these terms can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described.

[0067] Figure 1 A schematic diagram of an exemplary system architecture to which the technical solutions of the embodiments of this application can be applied is shown.

[0068] like Figure 1 As shown, the system architecture may include terminal devices (such as...) Figure 1 The device shown includes one or more of a smartphone 101, a tablet 102, and a portable computer 103, a network 104, and a server 105. The network 104 serves as a medium for providing a communication link between the terminal device and the server 105. The network 104 may include various connection types, such as wired communication links, wireless communication links, etc.

[0069] In one embodiment of this application, the terminal device may obtain multiple nodes to be laid out from the server 105, which have a hierarchical relationship. The multiple nodes to be laid out include a parent node and multiple child nodes of the parent node. The expected size of each child node on the main axis is obtained. Based on the expected size of each child node on the main axis, the child nodes are laid out in the main axis direction to obtain the position and actual size of each child node on the main axis. The expected size of each child node on the side axis is obtained. Based on the expected size of each child node on the side axis, the child nodes are laid out in the side axis direction to obtain the position and actual size of each child node on the side axis. Finally, the nodes to be laid out are rendered on the page of the terminal device.

[0070] Figure 2 This illustration shows the layout effect of an embodiment of this application applied to a terminal device. For example... Figure 2 As shown, each page element in the terminal device is arranged on the terminal's display interface according to certain rules. The layout method of this application embodiment can calculate the layout rules of each page element on the display interface, that is, the position and size of each page element on the display interface.

[0071] It should be noted that the typesetting method provided in this application embodiment can be executed by a terminal device, and correspondingly, the typesetting device is generally installed in the terminal device. However, in other embodiments of this application, the server may also have similar functions to the terminal device, thereby executing the typesetting method provided in this application embodiment.

[0072] It should also be noted that, Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, servers can be independent physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. Terminals can be smartphones, tablets, laptops, desktop computers, smart TVs, etc., but are not limited to these, and this application does not impose any restrictions.

[0073] It's important to explain that cloud computing, as described above, is a computing model that distributes computing tasks across a resource pool comprised of numerous computers, enabling various application systems to access computing power, storage space, and information services as needed. The network providing these resources is called the "cloud." From the user's perspective, the resources in the "cloud" appear infinitely scalable and can be accessed, used on demand, and expanded at any time. By establishing a cloud computing resource pool (referred to as a cloud platform, generally called an IaaS (Infrastructure as a Service) platform), various types of virtual resources are deployed within the resource pool for external customers to choose from. The cloud computing resource pool mainly includes: computing devices (virtualized machines containing operating systems), storage devices, and network devices.

[0074] The implementation details of the technical solutions in the embodiments of this application are described in detail below:

[0075] Figure 3 A flowchart of a typesetting method according to an embodiment of this application is shown, as follows: Figure 3 As shown, the layout method includes the following steps.

[0076] Step 310: Obtain multiple nodes to be formatted that have a hierarchical relationship. These nodes include a parent node and multiple child nodes of the parent node.

[0077] In this embodiment, the node to be formatted can be a UI element in the application's visual interface or a page element in an HTML webpage. For example, after the terminal device's browser sends a webpage loading request to the target webpage content server and obtains the webpage data, the browser's parser parses the webpage data into a Document Object Model (DOM) tree corresponding to the webpage data and Cascading Style Sheets (CSS) properties corresponding to the nodes in the DOM tree. The DOM tree displays the collection of page elements to be formatted in the webpage and the relationships between them.

[0078] Step 320: Obtain the expected size of each child node on the main axis among multiple child nodes.

[0079] In this embodiment of the application, the expected size of each child node on the main axis can be obtained by querying the size of each child node on the main axis in the cache, or by measuring the size of each child node on the main axis.

[0080] When the size of a child node on the main axis is available in the cache, the main axis size of the child node can be used directly, saving the process of measuring the main axis size of the child node and improving the speed and efficiency of typesetting.

[0081] Step 330: Based on the expected size of each child node on the main axis, arrange each child node along the main axis to obtain the position and actual size of each child node on the main axis.

[0082] This application embodiment can employ a flex one-dimensional layout model. Therefore, in specific implementation, step 330 can involve arranging all child nodes of the parent node along the main axis according to the flex rules to obtain the position and actual size of each child node on the main axis. After layout, the actual size of the child node on the main axis may change relative to the expected size on the main axis.

[0083] Step 340: Obtain the expected size of each child node on the side axis.

[0084] After arranging the child nodes along the main axis, it is necessary to arrange them along the side axis. Similar to the arrangement along the main axis, the expected dimensions of the child nodes along the side axis need to be obtained before arranging them along the side axis. In this embodiment, the expected dimensions of each child node along the side axis can be obtained by querying the cache for the dimensions of each child node along the side axis, or by measuring the dimensions of each child node along the side axis.

[0085] When the cross axis dimension of a child node is available in the cache, the cross axis dimension of the child node can be used directly, saving the process of measuring the cross axis dimension of the child node and improving the speed and efficiency of typesetting.

[0086] Step 350: Based on the expected size of each child node on the side axis, arrange each child node in the side axis direction to determine the position and actual size of each child node on the side axis.

[0087] In this embodiment, step 350 can be implemented by arranging all child nodes of the parent node along the cross axis according to the flex rule to obtain the position and actual size of all child nodes on the cross axis. After cross axis arrangement, the actual cross axis size of the child nodes may change relative to the expected cross axis size of the child nodes.

[0088] The child nodes to be laid out need to be placed in the container (parent container) corresponding to their parent nodes. The layout method of this application embodiment can determine the position and size of each child node to be laid out in the parent container, that is, how to display it on the screen of the terminal device or server.

[0089] It should be noted that the embodiments of this application are also applicable to trees to be laid out with multi-layered structural relationships. By traversing the parent nodes of the tree to be laid out from top to bottom, the layout method of this application is used to determine the position and size of each child node in its parent container layer by layer, and then the child nodes are laid out until the layout of all nodes in the tree to be laid out is completed, and the position and size of all nodes in the container corresponding to the root node are determined, so as to prepare for subsequent rendering.

[0090] Figure 4 A flowchart illustrating a typesetting method according to an embodiment of this application is shown. Figure 4 As shown, the typesetting method of this application is applied to a terminal device browser. The browser can use the typesetting method of this application to determine the position and size (width, height) of each node in the tree to be typed, i.e., the page element, on the web page. Finally, the browser rendering engine renders the page element on the display screen of the terminal device.

[0091] This application embodiment obtains only the expected size of child nodes on the main axis when performing layout along the main axis. This allows for targeted acquisition of only the expected size of child nodes on the main axis in scenarios where the attributes of child or parent nodes, such as size and layout mode, change frequently. After performing layout along the main axis, the expected size of child nodes on the side axis is then obtained for layout along the side axis. This avoids the problem of having to obtain the expected size of child nodes on the side axis multiple times due to changes in node attributes, and reduces the computational load caused by obtaining the expected size of child nodes multiple times, thus improving the speed and efficiency of layout.

[0092] Figure 5 A schematic diagram of a typesetting method according to an embodiment of this application is shown, such as... Figure 5 As shown, the entire typesetting method includes the following three main processes.

[0093] Obtaining nodes to be formatted: The implementation details of this process are similar to those of step 310 above, and will not be repeated here.

[0094] Cache check: Check if the layout information corresponding to the node to be layout is available in the cached data. If it is available, use the layout information corresponding to the node to be layout as the layout result. If it is not available, execute the layout process.

[0095] The layout result includes the position and size of each child node in the node to be laid out within the parent container.

[0096] Layout and typesetting: Arrange the nodes to be typed along the main axis and side axis to obtain the typesetting result, and store the typesetting result in the cache.

[0097] Figure 6A schematic diagram of a layout according to one embodiment of this application is shown. Figure 6 As shown, the nodes to be laid out include a root node Root, two child nodes Node1 and Node2, and three leaf nodes Node3, Node4 and Node5. After the layout process, the position and size of each node in its parent container can be obtained. The position is represented by coordinates position(xn, yn), and the size is represented by the main axis width and the cross axis height.

[0098] This application's embodiments introduce a caching mechanism into the layout method. Before layout, it is first determined whether the layout information corresponding to the node to be layout in the cache can be used directly. If it can be used directly, the subsequent layout process does not need to be executed. If it cannot be used directly, the layout process needs to be executed. The layout result, i.e., the position and size of each child node in the parent container, is calculated through the layout process.

[0099] Since the above layout process includes layout along the main axis and the side axis, Figure 7 A detailed flowchart of a typesetting method according to an embodiment of this application is shown, as follows: Figure 7 As shown, the typesetting method of this application also includes the following steps.

[0100] Step 710: Obtain multiple nodes to be formatted that have a hierarchical relationship. These nodes include a parent node and multiple child nodes of the parent node. The implementation details of step 710 are similar to those of step 310 above, and will not be repeated here.

[0101] Step 720: Query the main axis layout information corresponding to each child node in the cache. The layout information corresponding to each child node includes the position and actual size of each child node on the main axis.

[0102] The typesetting method in this embodiment of the application adopts a caching mechanism. After obtaining the node to be typed, it first checks whether the typesetting information corresponding to the child node is stored in the cache. If the typesetting information corresponding to the child node exists in the cache, the typesetting information corresponding to the child node is obtained to prepare for subsequent determination of whether the typesetting information is available.

[0103] Step 730: If the main axis layout information corresponding to the child node is available in the cache, then the main axis layout information corresponding to the child node in the cache is used as the main axis layout information of the child node; if the main axis layout information corresponding to the child node is not available in the cache, then the process of obtaining the expected size of each child node on the main axis in step 740 is executed.

[0104] In this embodiment, the criterion for determining whether the main axis layout information corresponding to a child node is available in the cache is that the available main axis size of the child node is the same as the available main axis size corresponding to the child node in the cache, and the main axis layout mode of the child node is the same as the main axis layout mode corresponding to the child node in the cache. The available main axis size of the child node means the available main axis size provided by the parent container to the child node, that is, the main axis size of the parent container's content area. The main axis layout mode includes whether there is a line break, the main axis alignment, etc.

[0105] This standard means that the main axis space for the parent node to accommodate child nodes remains unchanged, and the layout and arrangement of child nodes within the main axis space also remain unchanged. Only when both remain unchanged can the layout information corresponding to child nodes be directly used in the cache.

[0106] Step 740: Obtain the expected size of each child node on the main axis. The implementation details of step 740 are similar to those of step 320 above, and will not be repeated here.

[0107] Step 750: Based on the expected size of each child node on the main axis, arrange the child nodes along the main axis to obtain the position and actual size of each child node on the main axis. The implementation details of step 750 are similar to those of step 330 above, and will not be repeated here.

[0108] Step 760: Query the cross-axis layout information corresponding to each child node in the cache. The cross-axis layout information corresponding to each child node includes the position and actual size of each child node on the cross-axis.

[0109] In this embodiment of the application, after obtaining the node to be formatted, it queries whether the formatting information corresponding to the child node is stored in the cache. If the formatting information corresponding to the child node exists in the cache, the formatting information corresponding to the child node is obtained to prepare for subsequent determination of whether the formatting information is available.

[0110] Step 770: If the cross-axis layout information corresponding to the child node is available in the cache, then the cross-axis layout information corresponding to the child node in the cache is used as the cross-axis layout information of the child node; if the cross-axis layout information corresponding to the child node is not available in the cache, then the process of obtaining the expected size of each child node on the cross-axis in step 780 is executed.

[0111] Step 780: Obtain the expected size of each child node on the side axis. The implementation details of step 780 are similar to those of step 340 above, and will not be repeated here.

[0112] Step 790: Based on the expected size of each child node on the side axis, arrange the child nodes along the side axis to obtain the position and actual size of each child node on the side axis. The implementation details of step 790 are similar to those of step 350 above, and will not be repeated here.

[0113] In this embodiment, the criterion for determining whether the layout information corresponding to a child node is available in the cache is that the available crossaxis size of the child node is the same as the available crossaxis size of the child node in the cache, and the crossaxis layout mode of the child node is the same as the crossaxis layout mode of the child node in the cache. The available crossaxis size of the child node means the available crossaxis size provided by the parent container to the child node, that is, the crossaxis size of the content area of ​​the parent container. Crossaxis layout modes include single-line alignment, multi-line alignment, etc.

[0114] This standard means that the cross axis space that the parent node can accommodate child nodes has not changed, and the layout and arrangement of child nodes within the cross axis space has also not changed. Only when neither of these changes can the layout information corresponding to child nodes be directly used in the cache.

[0115] Step 7100: Store the position and actual size of each child node on the main axis, and the position and actual size of each child node on the side axis in the cache.

[0116] In this embodiment, after the child nodes are laid out along the main axis or side axis, the layout information of each child node is stored in the cache. If the child nodes are re-laid out, their layout information also needs to be stored in the cache so that when the child nodes are laid out again later, the cached layout information can be queried to see if it is available.

[0117] In this embodiment, a caching mechanism is used. If the layout information corresponding to the child node in the cache is directly usable, then there is no need to layout the child node, which can reduce the layout calculation process and improve layout efficiency.

[0118] Figure 8 A flowchart of a typesetting method according to an embodiment of this application is shown, as follows: Figure 8 As shown, in a specific implementation, the typesetting method includes the following steps.

[0119] Step 810: Obtain the nodes to be formatted.

[0120] The implementation details of step 810 are similar to those of step 710 mentioned above, and will not be repeated here.

[0121] Step 820: Perform a cache availability check.

[0122] The implementation details of step 820 are similar to those of steps 720 and 760 mentioned above. Step 820 also determines whether the main axis layout information and cross axis layout information corresponding to the child nodes in the cache are available, and will not be described in detail here.

[0123] Step 830: Obtain the expected size of the child nodes.

[0124] The implementation details of step 830 are similar to those of steps 740 and 780 mentioned above. Step 830 also involves obtaining the expected size of each child node on the main axis and the expected size on the side axis among multiple child nodes, which will not be described in detail here.

[0125] Step 840: Analyze the principal axis.

[0126] In practice, child nodes are divided into inelastic dimension items and elastic dimension items. The elasticity factor of the inelastic item is 0, and its main axis dimension is frozen, meaning its main axis dimension does not change. The elasticity factor of the elastic dimension item is not 0, and its main axis dimension can elastically expand or contract according to its elasticity factor and the remaining available space of the main axis. In step 840, after calculating the remaining available space of the main axis based on the expected main axis dimension of each child node, iteratively checks whether the main axis dimension of each elastic item is frozen. If the main axis dimension of the elastic item can still expand or contract within the remaining available space of the main axis, then the main axis dimension of the elastic item is not frozen; otherwise, the main axis dimension of the elastic item is frozen. If the main axis dimension of the elastic item is not frozen, then the main axis dimension of the elastic item is adjusted, and the main axis dimension of the elastic item is recalculated until the main axis dimensions of all elastic items are frozen, thus determining the actual size of the elastic item.

[0127] Step 850: Analyze the side axis.

[0128] In practice, the cross axis of a child node can be stretched according to its single-element cross axis alignment attribute. Step 850 iteratively checks whether the cross axis of each child node has been stretched. If the cross axis of a child node has been stretched, the cross axis size of the child node needs to be recalculated to obtain the actual cross axis size of the child node.

[0129] Step 860: Main axis alignment.

[0130] In practice, child nodes are arranged along the main axis according to the main axis alignment method, including alignment along the midpoint of the main axis, alignment along the start point of the main axis, and alignment along the end point of the main axis. Different alignment methods result in different positions of child nodes on the main axis.

[0131] In this embodiment of the application, steps 840 and 860 together complete the implementation details of step 330.

[0132] Step 870: Side axis alignment.

[0133] In practice, child nodes are arranged along the side axis according to side axis alignment methods, including alignment along the midpoint of the side axis, alignment along the starting point of the side axis, and alignment along the ending point of the side axis. Different alignment methods result in different positions of child nodes on the side axis.

[0134] In this embodiment of the application, steps 850 and 870 together complete the implementation details of step 350.

[0135] Step 880: Obtain the layout result.

[0136] Based on the actual dimensions of the main axis and the actual dimensions of the cross axis of the child nodes, as well as the alignment of the main axis and the cross axis, obtain the main axis position, main axis size, cross axis position, and cross axis size of each child node in the parent container.

[0137] Figure 9 A flowchart illustrating the layout along the main axis according to one embodiment of this application is shown, as follows: Figure 9 As shown in the embodiment of this application, step 750 includes the following steps.

[0138] Step 951: Determine the available space for each child node on the main axis.

[0139] In this embodiment, child nodes are placed inside the parent container corresponding to their parent nodes. The parent container follows the flex box model, and the available space of each child node on the main axis represents the main axis size of the content area of ​​the parent container.

[0140] Step 952: Determine the main axis direction and the lateral axis direction of the parent node.

[0141] In this embodiment, the main axis direction of the parent container is determined by the flex-direction property of the parent node. The side axis intersects the main axis perpendicularly, and the main axis direction is horizontal to the right by default.

[0142] Step 953: Based on the parent node's main axis layout properties, the child node's element properties, and the expected size of each child node on the main axis, arrange the child nodes in the main axis direction within the available space on the main axis to determine the position and actual size of each child node on the main axis.

[0143] In this embodiment of the application, the main axis layout attribute includes the line alignment attribute justify-content, which represents the alignment method of the child nodes of the parent node in the main axis direction. The alignment direction in the main axis direction includes alignment to the beginning position of the main axis, alignment to the end position of the main axis, center alignment, etc.

[0144] In this embodiment, the main axis layout property includes the `flex-wrap` property, which indicates whether and how the child nodes of the parent node are allowed to wrap. If `flex-wrap` is set to no wrapping, the child nodes will be compressed when the sum of the sizes of all child nodes on the main axis exceeds the width of the parent container's content area. If `flex-wrap` is set to wrap, the child nodes will wrap when the sum of the sizes of all child nodes on the main axis exceeds the width of the parent container's content area.

[0145] In this embodiment, the child node element attribute includes order, which represents the order in which the child node is arranged in the parent container. The smaller the order value of the child node, the earlier the child node is arranged.

[0146] In this embodiment, the child node element attributes include the child node's flex-grow and flex-shrink factors, which characterize the scaling factor of the child node when there is remaining or insufficient available space on the main axis.

[0147] As can be seen from the above explanation, the main axis size of the child node may be reduced or enlarged after being arranged along the main axis direction. Therefore, the actual main axis size of the child node may not be consistent with the expected size.

[0148] Based on the above descriptions of the parent node's main axis layout properties and the child node's element properties, Figure 10 A detailed flowchart of the layout along the main axis according to one embodiment of this application is shown. Figure 10 As shown, step 953 of this application embodiment includes the following steps.

[0149] Step 10531: Based on the parent node's flex-wrap, the child node's size on the main axis, and the child node's order, determine the child nodes in each row within the available space on the main axis.

[0150] Step 10532: Determine the remaining space of the child nodes in a row on the main axis based on the size of the child nodes in any row on the main axis.

[0151] Step 10533: Based on the flex-grow and flex-shrink properties of any row of child nodes, stretch or shrink the child node within the remaining space of the main axis corresponding to that row of child nodes, and calculate the actual size of the child node's main axis.

[0152] The implementation details of steps 10533 and 840 are the same. Both involve iteratively checking whether the spindle size of each child node is frozen until the spindle size of all child nodes is frozen, thus determining the actual spindle size of the child nodes.

[0153] Step 10534: Determine the main axis alignment of the child node based on the parent node's justify-content.

[0154] Step 10535: Determine the position of the child node on the main axis based on the parent node's main axis alignment and the actual size of each child node.

[0155] Figure 11 This is a flowchart illustrating the details of side-axis layout according to one embodiment of this application. Figure 11 As shown, step 790 includes the following steps.

[0156] Step 1191: Determine the available space for each child node on the side axis.

[0157] In this embodiment, the parent container follows the flex box model, and each child node is arranged in the content area of ​​the parent container. The available space of each child node on the cross axis represents the cross axis size of the content area of ​​the parent container.

[0158] Step 1192: Determine the cross-axis alignment of each child node in each row based on the single-element cross-axis alignment attribute of each child node in each row and the single-row cross-axis alignment attribute of the parent node.

[0159] In this embodiment of the application, the cross axis layout attributes of the parent node include the single-line alignment attribute align-items, which represents the alignment method of the single-line child nodes, including alignment along the start of the cross axis, alignment along the end of the cross axis, alignment along the baseline of the first line of text, and alignment of the node to fill the entire cross axis.

[0160] In this embodiment, the single-element cross-axis alignment attribute of the child node includes align-self, which represents the cross-axis alignment method of a single child node, including alignment along the start point of the cross axis, alignment along the end point of the cross axis, alignment along the midpoint of the cross axis, and the node filling the entire cross axis.

[0161] In this embodiment of the application, if either the single-element cross-axis alignment of a child node or the single-row cross-axis alignment of the parent node is an alignment in which the node occupies the entire cross axis, then the child node will be stretched.

[0162] Step 1193: Determine the overall cross-axis alignment of the multi-row child nodes based on the cross-axis alignment attribute of the parent node.

[0163] In this embodiment, the cross-axis layout attribute of the parent node includes the multi-line alignment attribute align-content, which characterizes the alignment method of the multi-line child nodes in the parent container, including alignment along the start point of the cross axis, alignment along the end point of the cross axis, alignment along the midpoint of the cross axis, alignment with both ends of the cross axis, average spacing between nodes, and nodes filling the entire cross axis.

[0164] If the parent node's multi-row cross axis alignment property is set to fill the entire cross axis, then the child nodes will be stretched.

[0165] Step 1194: Determine the position of each sub-node on the side axis. If any sub-node is stretched, remeasure the actual side axis dimension of that sub-node.

[0166] In this embodiment, after determining the position of the child node to be removed by the alignment method and the expected size of the child node's side axis, if the child node is stretched in the side axis direction, its side axis size will change, and its actual side axis size needs to be recalculated.

[0167] To illustrate the above typesetting method in a clear and simple way, Figure 12 A schematic diagram illustrating the layout effect according to an embodiment of this application is shown below. (The following is in conjunction with...) Figure 12 The typesetting method of this application is illustrated by an example.

[0168] 1. Obtain multiple nodes to be formatted.

[0169] In this example, the nodes to be formatted include parent node A and its associated child nodes B, C, and D.

[0170] 2. Obtain the expected size of each child node on the main axis.

[0171] In this example, the expected sizes of child nodes B, C, and D on the main axis are obtained by querying the cache or by measurement: 50px, 60px, and 30px, respectively.

[0172] 3. Determine the available space for the child node's main axis.

[0173] In this example, the size of the content area of ​​the parent container corresponding to parent node A on the main axis is determined to be 100px.

[0174] 4. Determine the direction of the main axis and the direction of the side axis.

[0175] In this example, the parent container A is positioned with its main axis pointing horizontally to the right and its side axis pointing vertically downwards.

[0176] 5. Arrange the child nodes along the main axis within the available space on the main axis to obtain the position and actual size of each child node on the main axis.

[0177] In this example, the flex-wrap of the parent node A is a line wrap, and the order values ​​of the child nodes B, C, and D are 1, 3, and 2 respectively. Therefore, the child nodes in the first row of the parent container are child nodes B and D, and the child nodes in the second row are child node C.

[0178] In this example, the remaining space on the main axis for the child nodes in the first row is 100-50-30=20px, and the remaining space on the main axis for the child nodes in the second row is 100-60=40px.

[0179] In this example, the flex-grow of child nodes B, C, and D are 3, 0, and 1 respectively. Therefore, the remaining 20px space on the main axis for the first row of child nodes is divided into 4 parts of 5px each. Child node B's size on the main axis increases to 50 + 5 * 3 = 65px, and child node D's size on the main axis increases to 30 + 5 = 35px. The second child node has a flex-grow of 0, so it does not stretch and its size on the main axis remains 60px.

[0180] In this example, the parent node's justify-content is centered, and the child nodes in the first and second rows are also centered.

[0181] In this example, assuming the intersection of the main axis and side axis of the parent container's content area is (0,0), then the starting position of the first row child node B on the main axis is 0, the starting position of the first row child node D on the main axis is 66, and the starting position of the second row child node C on the main axis is 21.

[0182] 6. Obtain the expected size of each child node on the side axis.

[0183] In this example, the expected sizes of child nodes B, C, and D on the main axis are obtained by querying the cache or by measurement: 50px, 20px, and 10px, respectively.

[0184] 7. Determine the available space on the side axis of the child node.

[0185] In this example, the size of the content area of ​​the parent container corresponding to parent node A on the cross axis is determined to be 100px.

[0186] 8. Determine the single-line alignment of child nodes.

[0187] In this example, the parent node A's align-items is aligned along the end of the cross axis. Therefore, the cross axis dimension of the first row of child node B is larger than that of child node D, and child node D is aligned along the bottom of child node B.

[0188] 9. Determine the multi-line alignment of child nodes.

[0189] In this example, the parent node A's align-content is aligned along the starting point of the cross axis.

[0190] 10. Determine the position and actual size of the child nodes on the side axis.

[0191] In this example, the first row child node B is positioned at 0 on the cross axis, the first row child node D is positioned at 41 on the cross axis, and the second row child node C is positioned at 51 on the cross axis. Child nodes B, C, and D are not stretched, and their actual cross axis dimensions are 50px, 20px, and 10px, respectively.

[0192] As can be seen from the above examples, the layout method of this application can be used to obtain the position and size of the node to be layout in the parent container, which prepares the node for subsequent rendering on the terminal device or server.

[0193] Figure 13 A flowchart illustrating the process of obtaining the desired spindle dimensions of each child node according to an embodiment of this application is shown, as follows: Figure 13 As shown in the embodiment of this application, step 740 includes the following steps.

[0194] Step 1341: Query the spindle measurement information corresponding to each child node in the cache. The spindle measurement information corresponding to each child node includes the expected spindle size of each child node.

[0195] Step 1342: If the spindle measurement information corresponding to the child node is available in the cache, the expected spindle size of the child node found in the cache will be used as the expected size of the child node on the spindle.

[0196] In this embodiment, the criterion for determining whether the spindle measurement information corresponding to a child node in the cache is available is that the available spindle size of the child node is the same as the available spindle size corresponding to the child node in the cache, and the spindle measurement mode of the child node is the same as the spindle measurement mode corresponding to the child node in the cache. In this embodiment, the spindle measurement mode of the child node includes precise mode, maximum value mode, and undefined mode.

[0197] This standard implies that the parent node's spindle space for accommodating child nodes remains unchanged, as does the child node's spindle measurement pattern. Only when both remain unchanged can the measurement information corresponding to the child node be directly used in the cache.

[0198] Step 1343: If the spindle measurement information corresponding to the child node is not available in the cache, measure the spindle of the child node according to the spindle measurement mode of the child node to obtain the expected size of the child node on the spindle.

[0199] If the spindle measurement mode of the child node is in precise mode, then the preset size of the child node on the spindle will be used as the expected size of the child node on the spindle.

[0200] In precise mode, when a child node receives a preset flex-basis, the preset flex-basis is used as the expected size of the child node on the main axis. When a child node does not receive a preset flex-basis, the preset width or preset height is taken as the expected size of the child node on the main axis according to the parent node's main axis direction.

[0201] If the spindle measurement mode of the child node is the maximum value mode, then the preset maximum size of the child node on the spindle will be used as the expected size of the child node on the spindle.

[0202] In maximum value mode, the preset max-width or max-height is taken as the expected size of the child node on the main axis based on the parent node's main axis direction.

[0203] If the main axis measurement mode of the child node is undefined, then obtain the expected main axis size of the next-level node of the child node, and obtain the expected size of the child node on the main axis based on the expected main axis size of the next-level node of the child node.

[0204] In undefined mode, the expected size of the child node on the main axis is unknown. The expected size of the child node on the main axis is obtained by accumulating the expected sizes of the child node's next-level nodes. This process involves traversing multiple levels of the child node's lower-level nodes from bottom to top to obtain the expected size of the child node on the main axis.

[0205] Figure 14 A schematic diagram of spindle measurement according to an embodiment of this application is shown. Figure 14 As shown, the spindle size of a node with an unknown spindle size is obtained after measurement in step 1343.

[0206] Step 1344: Store the expected size of the child nodes on the main axis in the cache.

[0207] This application embodiment utilizes a caching mechanism. Before measuring the expected size of the child node's main axis, it first checks whether the measurement information corresponding to the child node in the cache is available. If it is available, the measurement information corresponding to the child node is used directly. If it is not available, the expected size of the child node's main axis is measured, and the measurement result is saved in the cache for use when the expected size of the child node's main axis is needed later.

[0208] Meanwhile, the embodiments of this application measure the main axis and the lateral axis of the child node respectively, that is, only the size of the child node in one dimension is measured at a time. In scenarios where the attributes of the child node or parent node, such as size and layout mode, change frequently, only the main axis or only the lateral axis size of the child node can be obtained, which reduces the amount of simultaneous calculation of the size of the child node on the main axis and the lateral axis, and improves the speed and efficiency of layout.

[0209] Figure 15A flowchart illustrating the process of obtaining the desired lateral axis dimensions of each child node according to an embodiment of this application is shown, as follows: Figure 15 As shown in the embodiment of this application, step 780 includes the following steps.

[0210] Step 1581: Query the lateral axis measurement information corresponding to each child node in the cache. The lateral axis measurement information corresponding to each child node includes the expected lateral axis size of each child node.

[0211] Step 1582: If the cross-axis measurement information corresponding to the child node is available in the cache, the expected cross-axis size of the child node found in the cache will be used as the expected size of the child node on the cross-axis.

[0212] In this embodiment, the criterion for determining whether the crossaxis measurement information corresponding to a child node in the cache is available is that the available crossaxis size of the child node is the same as the available crossaxis size corresponding to the child node in the cache, and the crossaxis measurement mode of the child node is the same as the crossaxis measurement mode corresponding to the child node in the cache. In this embodiment, the main axis measurement mode of the child node includes precise mode, maximum value mode, and undefined mode.

[0213] This standard implies that the cross-axis space of the parent node to accommodate child nodes remains unchanged, as does the cross-axis measurement mode of the child nodes. Only when both remain unchanged can the measurement information corresponding to the child nodes be directly used in the cache.

[0214] Step 1583: If the cross axis measurement information corresponding to the child node is not available in the cache, measure the cross axis of the child node according to the cross axis measurement mode of the child node to obtain the expected size of the child node on the cross axis.

[0215] If the side axis measurement mode of the child node is in precise mode, then the preset size of the child node on the side axis will be used as the expected size of the child node on the side axis.

[0216] In precise mode, the preset width or preset height is taken as the expected cross axis size of the child node based on the parent node's main axis direction.

[0217] If the side axis measurement mode of the child node is the maximum value mode, then the preset maximum size of the child node on the side axis will be used as the expected size of the child node on the side axis.

[0218] In maximum value mode, the preset max-height or max-width is taken as the expected size of the child node on the main axis based on the parent node's main axis direction.

[0219] If the side axis measurement mode of the child node is undefined, then obtain the expected size of the next-level node of the child node on the side axis, and obtain the expected size of the child node on the side axis based on the size of the next-level node of the child node on the side axis.

[0220] In undefined mode, the expected size of the child node on the lateral axis is unknown. The expected size of the child node on the lateral axis is obtained by accumulating the expected size of the next level node of the child node.

[0221] Figure 16 A schematic diagram of lateral axis measurement according to an embodiment of this application is shown. Figure 16 As shown, the lateral axis dimension of a node with an unknown lateral axis dimension is obtained after measurement in step 1583.

[0222] Step 1584: Store the expected size of the child nodes on the side axis in the cache.

[0223] This application embodiment utilizes a caching mechanism. Before measuring the expected lateral axis size of a child node, it first checks whether the measurement information corresponding to the child node in the cache is available. If it is available, the measurement information corresponding to the child node is used directly. If it is not available, the expected lateral axis size of the child node is measured, and the measurement result is saved in the cache for use when the expected lateral axis size of the child node needs to be obtained later.

[0224] Meanwhile, the embodiments of this application measure the main axis and the lateral axis of the child node respectively, that is, only the size of the child node in one dimension is measured at a time. In scenarios where the attributes of the child node, such as size and layout mode, change frequently, only the main axis or only the lateral axis size of the child node can be obtained, which reduces the amount of simultaneous calculation of the size of the child node on the main axis and the lateral axis, and improves the speed and efficiency of layout.

[0225] Based on the above description of the layout method in the embodiments of this application, the entire layout method can be divided into a measurement stage and a layout stage. After the measurement stage, the expected size of the child node to be layout can be obtained along the main axis or the expected size along the cross axis. After the layout stage, the position and size of the child node to be layout in the parent container can be obtained.

[0226] In this embodiment of the application, during the measurement phase, the measurement information corresponding to the child node is queried from the cache; during the layout phase, the measurement information corresponding to the child node is queried from the cache. Figure 17 A caching architecture diagram according to one embodiment of this application is shown. Figure 17As shown, in a specific implementation of this application embodiment, when the cache receives a query request, it determines whether the current stage is the measurement stage or the layout stage. If the current stage is the measurement stage, it determines whether the main axis or cross axis measurement information corresponding to the child node is available in the cache. If it is available, the cache is hit; otherwise, the cache is missed. If the current stage is the layout stage, it determines whether the main axis or cross axis layout information corresponding to the child node is available in the cache. If it is available, the cache is hit; otherwise, the cache is missed.

[0227] Figure 18 A flowchart of a typesetting method according to an embodiment of this application is shown, as follows: Figure 18 As shown, the typesetting method in this application embodiment further includes:

[0228] Step 1810: Obtain multiple nodes to be formatted that have a hierarchical relationship. These nodes include a parent node and multiple child nodes of the parent node. The implementation details of Step 1810 are similar to those of Step 310 mentioned above, and will not be repeated here.

[0229] Step 1820: Obtain the expected size of each child node on the main axis. The implementation details of Step 1820 are similar to those of Step 320 above, and will not be repeated here.

[0230] Step 1830: Based on the expected dimensions of each child node on the main axis, arrange the child nodes along the main axis to obtain the position and actual size of each child node on the main axis. The implementation details of Step 1830 are similar to those of Step 330 above, and will not be repeated here.

[0231] Step 1840: After obtaining the position and actual size of the specified child node on the main axis, if a main axis re-layout request is received, then re-layout each child node in the main axis direction according to the expected size of each child node on the main axis.

[0232] In this embodiment of the application, receiving a main axis re-layout request means that the main axis size of the child node, the main axis size of the parent node, or the main axis layout attribute of the parent node has changed, and at this time, the child nodes need to be re-layouted in the main axis direction.

[0233] Step 1850: Obtain the desired size of each child node on the side axis. The implementation details of step 1850 are similar to those of step 340 above, and will not be repeated here.

[0234] Step 1860: Based on the expected dimensions of each child node on the side axis, arrange the child nodes along the side axis to determine their positions and actual dimensions. The implementation details of Step 1860 are similar to those of Step 350 above and will not be repeated here.

[0235] Step 1870: After obtaining the position and actual size of the specified child node on the side axis, if a side axis re-layout request is received, then re-layout each child node in the side axis direction according to the expected size of each child node on the side axis.

[0236] In this embodiment of the application, receiving a cross-axis re-layout request means that the cross-axis size of the child node, the cross-axis size of the parent node, or the cross-axis layout attribute of the parent node has changed, and at this time, the child nodes need to be re-layouted in the cross-axis direction.

[0237] Figure 19 A schematic diagram of a reflowed version according to an embodiment of this application is shown, as follows: Figure 19 As shown, for example, if the cross-axis alignment property of the node1 element changes, then node1 and its next-level nodes node3 and node4 will be reflowed, and the positions of node1, node3, and node4 will change, specifically their positions on the cross-axis.

[0238] This application embodiment obtains only the expected size of child nodes on the main axis when performing layout along the main axis. This allows for targeted acquisition of only the expected size of child nodes on the main axis when the attributes of child or parent nodes, such as size and layout mode, frequently change and the child nodes need to be re-layouted along the main axis or cross axis. After the layout along the main axis is performed, the expected size of child nodes on the cross axis is obtained for the layout along the cross axis. This avoids the problem of having to obtain the expected size of child nodes on the cross axis multiple times due to changes in node attributes, and reduces the computational load caused by obtaining the expected size of child nodes multiple times, which is beneficial to improving the speed and efficiency of layout.

[0239] In this embodiment of the application, after obtaining the position and actual size of each child node on the main axis and the position and actual size of each child node on the side axis through the above-described layout method, the interface of each child node can be rendered to generate the layout user interface.

[0240] The following describes an embodiment of the typesetting apparatus of this application, which can be used to execute the typesetting method in the above embodiments of this application. For details not disclosed in the embodiments of the typesetting apparatus of this application, please refer to the embodiments of the typesetting method described above.

[0241] Figure 20 A block diagram of a typesetting apparatus according to one embodiment of this application is shown, such as Figure 20 As shown, the typesetting device 200 includes a node acquisition unit 201, a main axis dimension acquisition unit 202, a main axis direction typesetting unit 203, a side axis dimension acquisition unit 204, and a side axis direction typesetting unit 205.

[0242] The node acquisition unit 201 is used to acquire multiple nodes to be typed that have a hierarchical relationship, and the multiple nodes to be typed include a parent node and multiple child nodes of the parent node.

[0243] The spindle size acquisition unit 202 is used to acquire the expected size of each child node on the spindle among multiple child nodes.

[0244] The main axis direction layout unit 203 is used to layout each child node in the main axis direction according to the expected size of each child node on the main axis, so as to obtain the position and actual size of each child node on the main axis;

[0245] Side axis dimension acquisition unit 204 is used to acquire the expected dimensions of each child node on the side axis;

[0246] The side-axis layout unit 205 is used to arrange the sub-nodes in the side-axis direction according to the expected size of each sub-node on the side axis, so as to obtain the position and actual size of each sub-node on the side axis.

[0247] In this embodiment, the spindle size acquisition unit 202 is configured to: query the spindle measurement information corresponding to each child node in the cache, wherein the spindle measurement information corresponding to each child node includes the expected spindle size of each child node. If the spindle measurement information corresponding to the child node is available in the cache, the expected spindle size of the child node found in the cache is used as the expected size of the child node on the spindle. If the spindle measurement information corresponding to the child node is not available in the cache, the spindle of the child node is measured according to the spindle measurement mode of the child node to obtain the expected size of the child node on the spindle.

[0248] In this embodiment, the lateral axis dimension acquisition unit 203 is configured to: query the lateral axis measurement information corresponding to each child node in the cache, wherein the measurement information corresponding to each child node includes the expected lateral axis dimension of each child node. If the lateral axis measurement information corresponding to the child node is available in the cache, the expected lateral axis dimension of the child node found in the cache is used as the expected lateral axis dimension of the child node. If the lateral axis measurement information corresponding to the child node is not available in the cache, the lateral axis of the child node is measured according to the lateral axis measurement mode of the child node to obtain the expected lateral axis dimension of the child node.

[0249] Based on the above description of the typesetting method of the embodiments of this application, Figure 21 A layout system framework diagram according to an embodiment of this application is shown, such as... Figure 21 As shown, the typesetting system 2100 includes:

[0250] The layout module 2110 includes a measurement module, a layout module, and a re-layout module.

[0251] The measurement module is used to obtain the expected dimensions of the main axis and side axis of the nodes to be laid out.

[0252] The layout module is used to lay out the nodes to be laid out along the main axis and side axis, and to obtain the position of the nodes to be laid out and the expected actual size of the main axis and side axis.

[0253] The Reflow module is used to reflow nodes along the main axis or the cross axis.

[0254] The caching module 2120 includes a measurement caching module and a typesetting caching module.

[0255] The measurement cache module is used to store the spindle measurement information of the nodes to be laid out.

[0256] The layout cache module is used to store the cross-axis measurement information of the nodes to be laid out.

[0257] Figure 22 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown.

[0258] It should be noted that, Figure 22 The computer system 2200 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0259] like Figure 22 As shown, the computer system 2200 includes a Central Processing Unit (CPU) 2201, which can perform various appropriate actions and processes based on programs stored in Read-Only Memory (ROM) 2202 or programs loaded from Storage Unit 2008 into Random Access Memory (RAM) 2203, such as performing the methods described in the above embodiments. Various programs and data required for system operation are also stored in RAM 2203. The CPU 2201, ROM 2202, and RAM 2203 are interconnected via bus 2204. An Input / Output (I / O) interface 2205 is also connected to bus 2204.

[0260] The following components are connected to I / O interface 2205: an input section 2206 including a keyboard, mouse, etc.; an output section 2207 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 2208 including a hard disk, etc.; and a communication section 2209 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 2209 performs communication processing via a network such as the Internet. A drive 2210 is also connected to I / O interface 2205 as needed. Removable media 2211, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 2210 as needed so that computer programs read from them can be installed into storage section 2208 as needed.

[0261] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 2209, and / or installed from removable medium 2211. When the computer program is executed by central processing unit (CPU) 2201, it performs various functions defined in the system of this application.

[0262] It should be noted that the computer-readable medium shown in the embodiments of this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such transmitted data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

[0263] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0264] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.

[0265] In another aspect, this application also provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the video editing effect verification method described in the above embodiments.

[0266] In another aspect, this application also provides a computer-readable medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to implement the video editing effect verification method described in the above embodiments.

[0267] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of this application, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0268] From the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, and includes several instructions to cause a computing device to execute the method according to the embodiments of this application.

[0269] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the embodiments disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein.

[0270] It should be understood that this application is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A typesetting method, characterized in that, The method includes: Obtain multiple nodes to be formatted that have a hierarchical relationship, wherein the multiple nodes to be formatted include a parent node and multiple child nodes of the parent node; Retrieve the main axis layout information corresponding to each child node from the cache; If the main axis layout information corresponding to the child node is available in the cache, then the main axis layout information corresponding to the child node in the cache is used as the layout information of the child node; the availability of the main axis layout information means that the main axis space in which the parent node can accommodate the child node has not changed, and the layout of the child node in the main axis space has not changed either. If the main axis layout information corresponding to the child node is not available in the cache, then the expected size of each child node on the main axis is obtained. Based on the expected size of each child node on the main axis, the child nodes are arranged in the main axis direction to obtain the position and actual size of each child node on the main axis. After completing the layout of each child node along the main axis, query the cache for the cross axis layout information corresponding to each child node; If the cross-axis layout information corresponding to the child node is available in the cache, then the cross-axis layout information corresponding to the child node in the cache is used as the layout information of the child node; the availability of the cross-axis layout information means that the cross-axis space that the parent node can accommodate the child node has not changed, and the layout of the child node in the cross-axis space has not changed. If the cross-axis layout information corresponding to the child node is not available in the cache, then the expected size of each child node on the cross-axis is obtained. Based on the expected size of each child node on the side axis, the child nodes are arranged in the side axis direction to obtain the position and actual size of each child node on the side axis.

2. The method according to claim 1, characterized in that, The spindle layout information corresponding to each sub-node includes the position and actual size of each sub-node on the spindle.

3. The method according to claim 2, characterized in that, After arranging the child nodes along the main axis according to their expected dimensions on the main axis to obtain their positions and actual dimensions on the main axis, the method further includes: The cache stores the position and actual size of each child node on the main axis.

4. The method according to claim 1, characterized in that, The step of obtaining the expected size of each of the plurality of child nodes on the main axis includes: Query the spindle measurement information corresponding to each child node in the cache. The spindle measurement information corresponding to each child node includes the expected spindle size of each child node. If the spindle measurement information corresponding to the child node is available in the cache, the expected spindle size of the child node found in the cache will be used as the expected size of the child node on the spindle. If the spindle measurement information corresponding to the child node is not available in the cache, the spindle of the child node is measured according to the spindle measurement mode of the child node to obtain the expected size of the child node on the spindle.

5. The method according to claim 4, characterized in that, The step of measuring the main axis of the child node according to the main axis measurement mode of the child node to obtain the expected size of the child node on the main axis includes: If the spindle measurement mode of the child node is the precision mode, then the preset size of the child node on the spindle is taken as the expected size of the child node on the spindle. If the spindle measurement mode of the child node is the maximum value mode, then the preset maximum size of the child node on the spindle is taken as the expected size of the child node on the spindle. If the spindle measurement mode of the child node is undefined, then obtain the expected spindle size of the next-level node of the child node, and obtain the expected size of the child node on the spindle based on the expected spindle size of the next-level node of the child node.

6. The method according to claim 1, characterized in that, The step of obtaining the expected size of each of the plurality of child nodes on the lateral axis includes: Query the lateral axis measurement information corresponding to each child node in the cache. The lateral axis measurement information corresponding to each child node includes the expected lateral axis size of each child node. If the lateral axis measurement information corresponding to the child node is available in the cache, the expected lateral axis size of the child node found in the cache will be used as the expected size of the child node on the lateral axis. If the lateral axis measurement information corresponding to the child node is not available in the cache, the lateral axis of the child node is measured according to the lateral axis measurement mode of the child node to obtain the expected size of the child node on the lateral axis.

7. The method according to claim 6, characterized in that, Measuring the lateral axis of the child node according to its lateral axis measurement mode to obtain the desired size of the child node on the lateral axis includes: If the side-axis measurement mode of the child node is the precision mode, then the preset size of the child node on the side axis is taken as the expected size of the child node on the side axis. If the side axis measurement mode of the child node is the maximum value mode, then the preset maximum size of the child node on the side axis is taken as the expected size of the child node on the side axis. If the side axis measurement mode of the child node is undefined, then obtain the expected size of the next-level node of the child node on the side axis, and obtain the expected size of the child node on the side axis based on the size of the next-level node of the child node on the side axis.

8. The method according to any one of claims 1 to 7, characterized in that, The method further includes: After obtaining the position and actual size of the specified child node on the main axis, if a main axis re-layout request is received, the child nodes are re-layouted in the main axis direction according to the expected size of each child node on the main axis. After obtaining the position and actual size of the specified child node on the side axis, if a side axis re-layout request is received, the child nodes are re-layouted in the side axis direction according to the expected size of each child node on the side axis.

9. The method according to any one of claims 1 to 7, characterized in that, The method further includes: Based on the position and actual size of each child node on the main axis, and the position and actual size of each child node on the side axis, the interface of each child node is rendered to generate the layout user interface.

10. A typesetting device, characterized in that, The typesetting device includes: A node acquisition unit is used to acquire multiple nodes to be typed that have a hierarchical relationship, wherein the multiple nodes to be typed include a parent node and multiple child nodes of the parent node; The spindle size acquisition unit is used to query the spindle layout information corresponding to each child node in the cache; if the spindle layout information corresponding to the child node is available in the cache, the spindle layout information corresponding to the child node in the cache is used as the layout information of the child node; if the spindle layout information corresponding to the child node is not available in the cache, the expected size of each child node on the spindle is obtained. The main axis layout unit is used to layout each child node in the main axis direction according to the expected size of each child node on the main axis, so as to obtain the position and actual size of each child node on the main axis. The side axis dimension acquisition unit is used to query the side axis layout information corresponding to each child node in the cache after completing the layout of each child node in the main axis direction; if the side axis layout information corresponding to the child node is available in the cache, then the side axis layout information corresponding to the child node in the cache is used as the layout information of the child node; if the side axis layout information corresponding to the child node is not available in the cache, then the expected size of each child node in the plurality of child nodes on the side axis is obtained. The side-axis layout unit is used to arrange the child nodes in the side-axis direction according to the expected size of each child node on the side axis, so as to obtain the position and actual size of each child node on the side axis.

11. A computer program product, characterized in that, Includes computer instructions, which are stored in a computer-readable storage medium; The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions to cause the computer device to perform the method as described in any one of claims 1-9.

12. A computer-readable medium having a computer program stored thereon, which, when executed by a processor, implements the method as described in any one of claims 1-9.

13. An electronic device, comprising: One or more processors; A storage device for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the method as described in any one of claims 1-9.

Images