A page generation method and apparatus
By determining the relative displacement of fixed nodes and the scaling of scaling nodes in a low-code canvas, the problem of page components not being able to adapt to the layout in existing technologies is solved, enabling adaptive scaling of page generation and improving layout flexibility and application scenarios.
Patent Information
- Application Number
- CN202411845068.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-13
- Publication Date
- 2025-11-18
- Estimated Expiration
- 2044-12-13
AI Technical Summary
In existing low-code canvas page building solutions, the position and size of page components are fixed, making responsive layout impossible and limiting their application in different use cases.
By obtaining page layout information, determining the relative displacement of fixed nodes and the scaling of scaling nodes, and synchronously updating the page layout information, adaptive scaling is achieved to generate the target page.
It enhances the flexibility of page layout transformation, enriches the application scenarios of page building solutions, and enables adaptive scaling of page layout generation based on absolute positioning.
Smart Images

Figure CN119718317B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of computer technology, and in particular to a page generation method and apparatus. Background Technology
[0002] In the field of web page development, low-code web page designers allow users to build pages that meet their expectations using a provided canvas. Users can freely drag and drop the page components they need on the canvas. This visual and convenient page building solution is gaining increasing attention.
[0003] In the process of realizing this invention, the inventors discovered the following problems in the prior art:
[0004] In existing low-code canvas page building solutions, the positions of page components can only be represented using absolute positioning with two-dimensional coordinates. However, in practical use, the page size needs to dynamically adapt to different display devices or browser window sizes, and correspondingly, the positions and sizes of page components also need to be adjusted. Because existing low-code canvas page building solutions are implemented under absolute positioning, the positions and sizes of page components are fixed, thus preventing responsive layout and limiting their application in different use cases. Summary of the Invention
[0005] In view of this, embodiments of the present invention provide a page generation method and apparatus that realizes the generation of adaptively scaled pages based on absolute positioning page layout, effectively solving the problem of the inability to adaptively scale layout in existing low-code canvas page construction, not only improving the flexibility of page layout transformation, but also enriching the application scenarios of existing page construction schemes.
[0006] To achieve the aforementioned objective, according to one aspect of an embodiment of the present invention, a page generation method is provided, comprising:
[0007] Obtain the page layout information of the page to be generated, the page layout information including the node set that makes up the page to be generated, and the coordinate information of each node in the node set, wherein the node set includes fixed nodes and scaling nodes;
[0008] Based on the request to adjust the page layout information, determine the relative displacement of the fixed node, and perform relative displacement on the fixed node according to the coordinate information of the fixed node; determine the scaling amount of the scaling node according to the relative displacement of the fixed node, and scale the scaling node according to the coordinate information of the scaling node; update the page layout information synchronously based on the displacement result of the fixed node and the scaling result of the scaling node.
[0009] Determine the updated coordinates of each node in the updated page layout information, and render the page based on the updated coordinates of each node to generate the target page.
[0010] Optionally, before determining the relative displacement of the fixed node, the method further includes: determining the adjacency relationship between each node based on the coordinate information of each node in the node set; using each node as a linked list node, establishing a connection between adjacent nodes according to the adjacency relationship, and using the left and right boundaries in the page layout information as the left and right endpoints respectively, generating a bidirectional multi-link table for the page to be generated, wherein each link node in the bidirectional multi-link table has an identifier for a fixed node or a scaling node.
[0011] Optionally, determining the relative displacement of the fixed node based on the received adjustment request for the page layout information includes: determining a layout adjustment amount from the adjustment request and obtaining the alignment configuration of the fixed node; in response to the layout adjustment amount being a compression amount, calculating the relative displacement of the fixed node step by step from left to right, based on the layout adjustment amount and the alignment configuration, starting from the left endpoint in the bidirectional multi-link table; in response to the layout adjustment amount being a stretch amount, calculating the relative displacement of the fixed node step by step from right to left, based on the layout adjustment amount and the alignment configuration, starting from the right endpoint in the bidirectional multi-link table.
[0012] Optionally, the relative displacement of the fixed nodes is calculated level by level based on the layout adjustment amount and the alignment configuration, including: determining the fixed nodes participating in the calculation at each level; for each fixed node participating in the calculation at each level: calculating the corresponding relative displacement based on the layout adjustment amount and the alignment configuration of the fixed nodes participating in the calculation, and using the relative displacement as the theoretical displacement; then, using the opposite direction of the level-by-level calculation direction as the backtracking direction, backtracking is performed on the fixed nodes to determine whether the theoretical displacement and the position of the fixed node whose relative displacement has been determined at the previous level interfere with each other; based on the determination result, the theoretical displacement is updated to obtain the relative displacement.
[0013] Optionally, the scaling amount of the scaling node is determined based on the relative displacement of the fixed node, and the scaling node is scaled according to the scaling amount based on the coordinate information of the scaling node, including: repeatedly performing the following operations until there is no scaling node in the bidirectional multi-link table: combining each fixed node in the bidirectional multi-link table in pairs to obtain multiple fixed node pairs; searching for scaling nodes between each fixed node pair in the bidirectional multi-link table, and forming scaling paths between the scaling nodes of the fixed node pairs to obtain a set of scaling paths between all fixed node pairs; calculating the scaling amount of each scaling path based on the distance between nodes in the fixed node pairs corresponding to each scaling path in the scaling path set, and selecting the target scaling path corresponding to the minimum scaling amount; determining the scaling amount of each scaling node in the target scaling path based on the scaling amount of the target scaling path; scaling the scaling node according to the scaling amount of each scaling node based on the coordinate information of each scaling node in the target scaling path, and modifying the scaled scaling node into a fixed node.
[0014] Optionally, before determining the scaling amount of the scaling node based on the relative displacement of the fixed node, the method further includes: in response to the adjustment request being a compression request, determining a compression width threshold based on the minimum width value of each node in the node set; determining whether the width of the page to be generated is less than the compression width threshold; in response to the width of the page to be generated being less than the compression width threshold, adding a scroll bar to the page to be generated, and using each of the minimum width values as the compression lower limit of the corresponding scaling node.
[0015] Optionally, before determining the relative displacement of the fixed nodes in the node set, the method further includes: projecting the layout of each node in the node set, grouping each node according to the projection result to obtain a projected node group, and sequentially performing relative displacement on the fixed nodes in each projected node group and scaling on the scaling nodes.
[0016] Optionally, the method further includes: monitoring the height data of each node in the node set, and when a change in the height data is detected, re-rendering the page based on the changed height data and the updated page layout information to generate the target page.
[0017] According to a second aspect of the present invention, a page generation apparatus is provided, comprising:
[0018] The layout information acquisition module is used to acquire the page layout information of the page to be generated. The page layout information includes the node set that makes up the page to be generated, and the coordinate information of each node in the node set. The node set includes fixed nodes and scaling nodes.
[0019] The layout scaling processing module is used to determine the relative displacement of the fixed node according to the adjustment request of the page layout information; to perform relative displacement of the fixed node according to the relative displacement based on the coordinate information of the fixed node; to determine the scaling amount of the scaling node according to the relative displacement based on the relative displacement of the fixed node; to scale the scaling node according to the scaling amount based on the coordinate information of the scaling node; and to synchronously update the page layout information based on the displacement result of the fixed node and the scaling result of the scaling node.
[0020] The target page generation module is used to determine the updated coordinate information of each node in the updated page layout information, and to render the page based on the updated coordinate information of each node to generate the target page.
[0021] According to a third aspect of the present invention, an electronic device for page generation is provided, comprising:
[0022] One or more processors;
[0023] Storage device for storing one or more programs.
[0024] When the one or more programs are executed by the one or more processors, the one or more processors implement the method provided in the first aspect of the embodiments of the present invention.
[0025] According to a fourth aspect of the present invention, a computer-readable medium is provided having a computer program stored thereon, which, when executed by a processor, implements the method provided in the first aspect of the present invention.
[0026] According to a fifth aspect of the present invention, a computer program product is provided, wherein when the computer program is executed by a processor, it implements the method provided in the first aspect of the present invention.
[0027] One embodiment of the invention has the following advantages or beneficial effects: By acquiring the page layout information of the page to be generated, which includes a set of nodes constituting the page and the coordinate information of each node in the set, wherein the set of nodes includes fixed nodes and scaling nodes; determining the relative displacement of the fixed nodes according to the adjustment request of the page layout information, and performing relative displacement of the fixed nodes according to the coordinate information of the fixed nodes; determining the scaling amount of the scaling nodes according to the relative displacement of the fixed nodes, and scaling the scaling nodes according to the coordinate information of the scaling nodes; synchronously updating the page layout information according to the displacement result of the fixed nodes and the scaling result of the scaling nodes; determining the updated coordinate information of each node in the updated page layout information, and rendering the page according to the updated coordinate information of each node to generate the target page, the technical solution realizes the generation of an adaptively scaling page based on absolute positioning page layout, effectively solving the problem of the inability to adaptively scale in existing low-code canvas page construction, which not only improves the flexibility of page layout conversion, but also enriches the application scenarios of existing page construction solutions. Attached Figure Description
[0028] The accompanying drawings are provided to better understand the invention and are not intended to unduly limit the scope of the invention. Wherein:
[0029] Figure 1 This is a schematic diagram of the main flow of the page generation method according to an embodiment of the present invention;
[0030] Figure 2 This is an example diagram of page layout information according to an embodiment of the present invention;
[0031] Figure 3 This is a schematic diagram of a bidirectional multi-link table according to an embodiment of the present invention;
[0032] Figure 4 This is a schematic diagram of the backtracking calculation of a fixed node according to an embodiment of the present invention;
[0033] Figure 5(a) is a schematic diagram of the scaling path before scaling in an embodiment of the present invention with minimum scaling amount;
[0034] Figure 5(b) is a scaled schematic diagram of the scaling path with the minimum scaling amount in an embodiment of the present invention;
[0035] Figure 6 This is a schematic diagram of the main process of a page generation method according to a possible embodiment of the present invention;
[0036] Figure 7 This is a schematic diagram of the node layout projection according to an embodiment of the present invention;
[0037] Figure 8This is a schematic diagram illustrating the traversal of the minimum width value in a page layout stacking scenario according to an embodiment of the present invention;
[0038] Figure 9 This is a schematic diagram illustrating the adaptive node height according to an embodiment of the present invention;
[0039] Figure 10 This is a schematic diagram of the overall process of the page generation method according to an embodiment of the present invention;
[0040] Figure 11 This is a schematic diagram of the main modules of a page generation apparatus according to an embodiment of the present invention;
[0041] Figure 12 This is an exemplary system architecture diagram in which embodiments of the present invention can be applied;
[0042] Figure 13 This is a schematic diagram of the structure of a computer system suitable for implementing the terminal device of the present invention. Detailed Implementation
[0043] It should be noted that the acquisition, storage, and application of user personal information involved in the technical solution disclosed herein comply with the provisions of relevant laws and regulations and do not violate public order and good morals.
[0044] The following description, in conjunction with the accompanying drawings, illustrates exemplary embodiments of the present invention, including various details to aid understanding. These details should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the invention. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.
[0045] In existing low-code canvas page building solutions, the positions of page components can only be represented using absolute positioning with two-dimensional coordinates. However, in practical use, the page size needs to dynamically adapt to different display devices or browser window sizes, and correspondingly, the positions and sizes of page components also need to be adjusted. Because existing low-code canvas page building solutions are implemented under absolute positioning, the positions and sizes of page components are fixed, thus preventing responsive layout and limiting their application in different use cases.
[0046] To address the aforementioned problems in existing technologies, this invention proposes a page generation method. Based on the obtained page layout information using coordinate positioning, and according to the received adjustment request, the relative displacement of fixed nodes in the page layout information is first determined according to the node type, and then the scaling amount of scaling nodes in the page layout information is determined. The page layout information is updated synchronously to generate the target page. This method achieves the generation of an adaptively scaling page based on absolute positioning, effectively solving the problem of unadaptive layout in existing low-code canvas page construction. It not only improves the flexibility of page layout transformation but also enriches the application scenarios of existing page construction solutions.
[0047] In the description of the embodiments of the present invention, the terms involved and their meanings are as follows:
[0048] Low-code canvas: A designer for users to build pages in low-code. Low-code users can add materials to the canvas and drag / drop / layout the materials to create the pages they want;
[0049] ResizeObserver: A web browser API used to monitor changes in element size and trigger callback functions when such changes occur.
[0050] Figure 1 This is a schematic diagram of the main flow of the page generation method according to an embodiment of the present invention, such as... Figure 1 As shown, the page generation method of this embodiment includes the following steps S101 to S103.
[0051] Step S101: Obtain the page layout information of the page to be generated. The page layout information includes the node set that makes up the page to be generated, and the coordinate information of each node in the node set. The node set includes fixed nodes and scaling nodes.
[0052] Specifically, users select page components on a low-code canvas and drag and drop to build the page layout information for the page to be generated. The canvas is a two-dimensional grid-based building system. In actual building scenarios, the width of the canvas can be set to an integer n (in pixels), while the height will automatically adjust according to the height changes of the page components. The grid has its origin at the top left corner (0, 0), and each grid cell has a width and height of 1 pixel. The width and height of each page component are also in 1-pixel increments. With the help of the two-dimensional grid, we can accurately locate the coordinate information of each page component within the grid. That is, the entire page layout information mainly includes each page component and the two-dimensional coordinate information of each page component within the two-dimensional grid.
[0053] It should be noted that, considering the need to adjust and scale the positions of each page component element to achieve adaptive layout in this embodiment of the invention, for ease of description and understanding, the page component element will be referred to as a node thereafter. Accordingly, the page component elements in the page layout information form a node set, and each node in the node set is a page component element, and the coordinate information of the node is the coordinate information of the page component element.
[0054] Furthermore, considering that the scaling characteristics of each node in the page layout information are determined by the type of node, and that scaling usually refers to horizontal scaling according to page browsing habits, the nodes in this embodiment of the invention are mainly divided into fixed nodes and scaling nodes. The width of a fixed node remains constant and will not be compressed or stretched, hence it is a fixed-width node. The width of a scaling node can be compressed or stretched as needed, hence it is a flexible-width node.
[0055] Step S102: Based on the received request to adjust the page layout information, determine the relative displacement of the fixed node; based on the coordinate information of the fixed node, perform relative displacement on the fixed node according to the relative displacement; based on the relative displacement of the fixed node, determine the scaling amount of the scaling node; based on the coordinate information of the scaling node, scale the scaling node according to the scaling amount; based on the displacement result of the fixed node and the scaling result of the scaling node, synchronously update the page layout information.
[0056] Specifically, based on the fact that all nodes obtained above are absolutely positioned page layout information, this embodiment of the invention converts the absolutely positioned page layout information into relatively positioned page layout information to generate an adaptively scaled page. Since the node set includes fixed nodes and scaling nodes, to ensure layout stability, this invention first adjusts the relative positions of the fixed nodes to obtain relative displacement results. Then, it scales the scaling nodes to obtain scaling results. Finally, based on the displacement and scaling results, the page layout information is updated synchronously to obtain relatively positioned page layout information that meets the adjustment request.
[0057] According to an embodiment of the present invention, before determining the relative displacement of the fixed node, the method further includes: determining the adjacency relationship between each node according to the coordinate information of each node in the node set; using each node as a linked list node, establishing a connection between adjacent nodes according to the adjacency relationship, and using the left and right boundaries in the page layout information as the left endpoint and right endpoint respectively, generating a bidirectional multi-link table of the page to be generated, wherein each link node in the bidirectional multi-link table has an identifier of a fixed node or a scaling node.
[0058] Specifically, to process the fixed and scaled nodes in a more organized and orderly manner, this embodiment of the invention, before determining the relative displacement of the fixed nodes, first clarifies the adjacency relationships between the nodes based on the coordinate information of each node in the page layout information. It should be noted that the adjacency relationship in this embodiment refers to the left and right adjacency relationships of the nodes, which can be searched layer by layer or by traversing each node throughout the entire layout. Each node is treated as a linked list node, and the node type (fixed node or scaled node) is identified on the linked list node. According to the determined adjacency relationships, connections are established between adjacent nodes in the page layout information. In the linked list, this is done by connecting the corresponding linked list nodes with connecting lines, using the left boundary in the page layout information as the left endpoint and the right boundary as the right endpoint, generating a bidirectional multi-link list that can represent the adjacency relationships of each node.
[0059] For example, Figure 2 This is an example diagram of page layout information in an embodiment of the present invention. Each box represents a node. The f node represents a scaling node, and the s node represents a fixed node. The center, left, and right alignment options below the s node are the preset alignment configurations for the fixed node. Figure 3 This is a schematic diagram of a bidirectional multi-link table according to an embodiment of the present invention. Figure 2 Page layout information, establish Figure 3 Bidirectional multi-link table, Figure 2 Each node in the table corresponds to a linked list node in a bidirectional multi-link table. In the page layout information, the left and right boundaries can be considered as fixed nodes with a width of 0 and an infinite height, as shown in the diagram: Left is the left endpoint, and Right is the right endpoint. Gray in the diagram represents scaling nodes, based on... Figure 2 The adjacency relationships between each node are used to generate a bidirectional multi-link table layer by layer. In this embodiment of the invention, the adjacency relationship only refers to the left and right adjacency of the nodes. For example, f1 is right adjacent to f3 and f4, f2 is right adjacent to s1 and s5, while f1 and f2 are not adjacent.
[0060] According to another embodiment of the present invention, determining the relative displacement of the fixed node based on a received adjustment request for the page layout information includes: determining a layout adjustment amount from the adjustment request and obtaining the alignment configuration of the fixed node; in response to the layout adjustment amount being a compression amount, calculating the relative displacement of the fixed node step by step from left to right, starting from the left endpoint in the bidirectional multi-link table, based on the layout adjustment amount and the alignment configuration; in response to the layout adjustment amount being a stretch amount, calculating the relative displacement of the fixed node step by step from right to left, starting from the right endpoint in the bidirectional multi-link table, based on the layout adjustment amount and the alignment configuration.
[0061] Specifically, based on the page size required by the display device or browser included in the adjustment request, and combined with the layout size in the page layout information, the layout adjustment amount for this adjustment request is determined. Furthermore, considering that different fixed nodes have different alignment configurations, and that different alignment configurations correspond to different relative displacements, for example, if the layout adjustment amount is determined to be page compression ΔX based on the page size and layout size in the adjustment request, then the relative displacement of left-aligned fixed nodes is 0, and the relative displacement of center-aligned fixed nodes is 1 / 2. The relative displacement of a right-aligned fixed node is ΔX, while the relative displacement of the right-aligned fixed node is ΔX. Therefore, the alignment configuration of fixed nodes is an indispensable calculation item for page adjustment.
[0062] Furthermore, when the layout adjustment amount is a compression amount, each node is compressed to the left. Based on the bidirectional multi-link table generated above, starting from the left endpoint, following the left-to-right order in the bidirectional multi-link table, and according to the compression amount and the alignment configuration of each fixed node, the relative displacement of the fixed nodes in the table is calculated level by level, referring to the algorithm in the example above. Similarly, when the layout adjustment amount determined according to the adjustment request is a stretch amount, each node is stretched to the right. Based on the bidirectional multi-link table generated above, starting from the right endpoint, following the right-to-left order in the bidirectional multi-link table, and according to the stretch amount and the alignment configuration of each fixed node, the relative displacement of the fixed nodes in the table is calculated level by level.
[0063] According to another embodiment of the present invention, the relative displacement of the fixed nodes is calculated step by step based on the layout adjustment amount and the alignment configuration, including: determining the fixed nodes participating in the calculation at each level; for each fixed node participating in the calculation at each level: calculating the corresponding relative displacement based on the layout adjustment amount and the alignment configuration of the fixed nodes participating in the calculation, and using the relative displacement as the theoretical displacement; then, using the opposite direction of the step-by-step calculation direction as the backtracking direction, backtracking is performed on the fixed nodes to determine whether the theoretical displacement and the position of the fixed node whose relative displacement has been determined at the previous level interfere with each other; based on the determination result, the theoretical displacement is updated to obtain the relative displacement.
[0064] Specifically, when the aforementioned layout adjustment is a compression or stretching adjustment, since the calculation of fixed nodes at each layer is hierarchical, the time for determining the relative displacement is different. According to the calculation order, the relative displacement of the previous level must be determined earlier than that of the next level. Therefore, it is possible that the relative displacement already determined in the previous level may block the relative displacement of the fixed nodes initially calculated in the current level. Thus, it is necessary to calculate the relative displacement first and use it as the theoretical displacement. Then, in the opposite direction of the calculation (e.g., backtracking to the left for compression, backtracking to the right for stretching), the theoretical displacement is checked against the relative displacement already determined in the previous level, and whether the moved fixed nodes interfere with each other, preventing the currently calculated fixed nodes from moving according to the initially calculated theoretical displacement. Furthermore, the backtracking check should be comprehensive. Based on the bidirectional multi-link table, all possible paths are traversed and backtracked. If interference occurs at any path, the critical value of the interference (i.e., the displacement before or after interference) is used to update the theoretical displacement, obtaining the final feasible relative displacement.
[0065] Figure 4 This is a schematic diagram of the backtracking calculation of a fixed node in an embodiment of the present invention. For the s4 fixed node in the compressed scenario, after calculating the theoretical displacement, the theoretical displacement is verified by backtracking to the left from the bidirectional multi-link table. As can be seen from the figure, s2, s1, and the left endpoint are fixed nodes, so there are 4 backtracking paths. The smallest possible displacement among the backtracking paths is selected as the feasible relative displacement of s4.
[0066] According to another embodiment of the present invention, the scaling amount of the scaling node is determined based on the relative displacement of the fixed node, and the scaling node is scaled according to the scaling amount based on the coordinate information of the scaling node, including: repeatedly performing the following operations until there is no scaling node in the bidirectional multi-link table: combining each fixed node in the bidirectional multi-link table in pairs to obtain multiple fixed node pairs; searching for scaling nodes between each fixed node pair in the bidirectional multi-link table, and forming scaling paths between the scaling nodes of the fixed node pairs to obtain a set of scaling paths between all fixed node pairs; calculating the scaling amount of each scaling path based on the distance between nodes in the fixed node pairs corresponding to each scaling path in the scaling path set, and selecting the target scaling path corresponding to the minimum scaling amount; determining the scaling amount of each scaling node in the target scaling path based on the scaling amount of the target scaling path; scaling the scaling node according to the scaling amount of each scaling node based on the coordinate information of each scaling node in the target scaling path, and modifying the scaled scaling node into a fixed node.
[0067] Specifically, after determining the relative displacement of the fixed nodes, the page layout is stabilized by these fixed nodes. Then, the scaling of the scaling nodes is calculated. First, the fixed nodes in the bidirectional multi-link table are paired to obtain multiple fixed node pairs. The scaling nodes between each fixed node pair are found. According to the bidirectional multi-link table, multiple scaling nodes with connection relationships between the same fixed node pair are combined into scaling paths. There may be multiple scaling paths between each non-scaled node pair. At the same time, multiple fixed node pairs correspond to more scaling paths. The scaling paths between all fixed nodes found in the table are combined into a scaling path set.
[0068] For example, with Figure 3 For example, from Figure 3 As can be seen, there is only one scaling node between the fixed node pairs s2 and s3, so it cannot be included in the scaling path. There is one scaling path [f1, f3] between the left endpoint and s2, two scaling paths [f8, f9, f11] and [f8, f10, f12] between s2 and the right endpoint, and one scaling path [f6, f7, f8] between s1 and s3. Similarly, the final scaling path set for the entire table is {[f1, f3], [f1, f4, f6, f7, f8, f9, f11], [f1, f4, f6, f7, f8, f10, f12], [f8, f9, f11], [f8, f10, f12], [f6, f7, f8], [f6, f7, f8, f9, f11], [f6, f7, f8, f10, f12]}. [f2,f5,f7,f8,f9,f11], [f2,f5,f7,f8,f10,f12]}.
[0069] Furthermore, based on the distance between the center nodes of the fixed nodes corresponding to each scaling path in the scaling path set, the scaling amount of each scaling path is calculated. In this embodiment of the invention, the scaling amount is evenly distributed among each scaling node. For example, if the distance between the center nodes of the fixed nodes is x, and for the compressed path [f6,f7,f8], the widths of f6, f7, and f8 are set to w6, w7, and w8 respectively, then the scaling amount of f6 is [w6 / (w6 + w7 + w8)]. The scaling factor for x and f7 is [w7 / (w6 + w7 + w8)]. The scaling factor for x and f8 is [w8 / (w6 + w7 + w8)]. If x is the scaling factor, then the scaling factor of this compression path is the sum of the scaling factors of these three scaling nodes. Following this method, the target scaling path corresponding to the smallest scaling factor is selected from the scaling factors of each scaling path. Then, based on the scaling factor of the target scaling path, the scaling factor of each scaling node in the target scaling path is calculated. Based on the coordinate position of each scaling node in the target scaling path in the current page layout information, each scaling node is scaled according to the calculated scaling factor. Finally, the scaled scaling nodes are modified to fixed nodes in the bidirectional multi-link table.
[0070] Following the method described above, calculate the scaling amount for each scaling node sequentially, and then modify the scaled nodes in the table to fixed nodes until there are no more scaled nodes in the table. This completes the scaling of the scaling nodes.
[0071] Figure 5(a) is a schematic diagram of the scaling path with minimum scaling amount before scaling according to an embodiment of the present invention, and Figure 5(b) is a schematic diagram of the scaling path with minimum scaling amount after scaling according to an embodiment of the present invention. In Figure 5(a), the scaling path [f6,f7,f8] is represented by the fill color of the nodes as the minimum scaling amount. After scaling f6,f7,f8, the nodes f6,f7,f8 are marked as fixed nodes, as shown in Figure 5(b), and the fill color of the nodes is the fill color of the fixed nodes.
[0072] The embodiments of the present invention first calculate the relative displacement of fixed nodes, and then use the relative displacement as a reference to scale the scaling nodes between fixed nodes, which not only ensures the stability and consistency of the layout, but also realizes the adaptive adjustment of the layout.
[0073] Step S103: Determine the updated coordinate information of each node in the updated page layout information, and render the page according to the updated coordinate information of each node to generate the target page.
[0074] Specifically, based on the updated page layout information and combined with a two-dimensional grid, the updated coordinate values of each node in the updated page layout information are calculated to obtain the absolute positioning of the updated nodes. Then, the page is rendered using absolute positioning to generate the adaptively adjusted target page.
[0075] Based on the above-described page generation method, this invention provides an embodiment of another page generation method. Figure 6 This is a schematic diagram of the main flow of a page generation method according to a possible embodiment of the present invention. As another embodiment of the present invention, such as Figure 6 As shown, the page generation method may include:
[0076] Step S601: Obtain the page layout information of the page to be generated. The page layout information includes the node set that makes up the page to be generated, and the coordinate information of each node in the node set. The node set includes fixed nodes and scaling nodes.
[0077] Step S602: Project the layout of each node in the node set, and group each node according to the projection result to obtain a projection node group, so as to perform relative displacement on the fixed nodes in each projection node group and scale the scaling nodes in turn.
[0078] Specifically, since nodes in different rows are independent of each other and do not affect each other in the page layout information, in order to reduce computational complexity and improve the performance of the prompting algorithm, we can use the projection method to distinguish nodes located in different row spaces, thereby reducing the number of nodes involved in each scaling process.
[0079] This invention employs a projection method to project the layout of each node in the node set. For example, Figure 7 This is a schematic diagram of the node layout projection according to an embodiment of the present invention. Taking a view from left to right as an example, if a beam of horizontal light is projected onto a node, the result projected onto the wall is the number of discontinuous dark boxes. As shown in the diagram, the three dark boxes on the far right each represent a row. Therefore, the number of groups can be determined based on the number of dark boxes projected. The diagram shows that the entire page layout is divided into three rows, or three groups, which effectively distinguishes nodes in different rows. Each row is grouped, and the nodes are grouped to obtain the projected node groups.
[0080] Understandably, nodes within the same projection node group are grouped together. Each projection group is used to determine the relative displacement of the fixed nodes and the scaling of the scaling nodes in sequence, as well as the relative displacement of the fixed nodes and the scaling of the scaling nodes. This grouping is then used to synchronously update the page layout information.
[0081] Step S603: For each projection node group: Based on the adjustment request for the page layout information, determine the relative displacement of the fixed nodes within the projection node group; based on the coordinate information of the fixed nodes, perform relative displacement on the fixed nodes according to the relative displacement; based on the relative displacement of the fixed nodes, determine the scaling amount of the scaling nodes within the projection node group; based on the coordinate information of the scaling nodes, scale the scaling nodes according to the scaling amount; based on the displacement result of the fixed nodes and the scaling result of the scaling nodes, synchronously update the page layout information.
[0082] Specifically, based on the above-described layout projection of each node, the resulting projection node groups are treated as a scaling processing set for each projection node group. Scaling processing is performed on each projection node group. According to the adjustment request for the page layout information, the relative displacement of the fixed nodes within the projection node group is determined. Then, combined with the coordinate positions of the fixed nodes in the current page layout information, the fixed nodes are relatively displaced according to the relative displacement. Next, based on the relative displacement of the fixed nodes within the projection node group, the scaling amount of the scaling nodes is determined. Combined with the coordinate positions of the scaling nodes in the current page layout information, scaling is performed. Finally, the page layout information is synchronously updated based on the displacement results of the relative displacement of the fixed nodes and the scaling results of the scaling nodes.
[0083] This invention utilizes node layout projection to scale all nodes in batches and groups, avoiding the pressure on the system caused by a large number of node operations and preventing the processing of other services from being affected by excessive resource consumption.
[0084] According to another embodiment of the present invention, before determining the scaling amount of the scaling node based on the relative displacement of the fixed node, the method further includes: in response to the adjustment request being a compression request, determining a compression width threshold based on the minimum width value of each node in the node set; determining whether the width of the page to be generated is less than the compression width threshold; in response to the width of the page to be generated being less than the compression width threshold, adding a scroll bar to the page to be generated, and using each of the minimum width values as the compression lower limit of the corresponding scaling node.
[0085] Specifically, considering that in the node compression process of this embodiment of the invention, when the width of the page to be generated is insufficient to accommodate these nodes, it is necessary to calculate the compression width threshold of the current page layout information. Understandably, each scaling node has a configured minimum width value, indicating that when the compression amount is greater than the minimum width value, the scaling of the scaling node is not affected; when the compression amount is less than the minimum width value, the scaling of the scaling node will be affected. Therefore, in this case, it is necessary to select the maximum value from the minimum width values of each scaling node as the minimum compressible width, that is, for... Figure 3The bidirectional multi-link table is used, and this process can be calculated using the formula: Minimum compressible width = Math.max(f1.minCompressW, f2.minCompressW, ...). Then, this maximum value is subtracted from the initial page width in the page layout information to obtain the compression width threshold. Next, it is determined whether the width of the currently generated page is less than the compression width threshold. If it is, a scrollbar is added to support horizontal viewing of the complete node content. Additionally, when determining the scaling amount of scaling nodes, the minimum width value of each scaling node is also considered to avoid over-compression.
[0086] Understandably, in actual page construction, multiple page layout information may be combined and nested, forming a layered layout structure. From a data structure perspective, this scenario would form a tree structure. Figure 8 This is a schematic diagram of the traversal of the minimum width value in the page layout stacking scenario of this invention embodiment. According to the stacked tree structure, each page layout information is treated as a leaf node, and the minimum compressible width is found from each page layout information using a breadth-first traversal algorithm.
[0087] Step S604: Determine the updated coordinate information of each node in the updated page layout information, and render the page according to the updated coordinate information of each node to generate the target page.
[0088] Step S605: Monitor the height data of each node in the node set, and when a change in the height data is detected, re-render the page based on the changed height data and the updated page layout information to generate the target page.
[0089] Specifically, in most scenarios, nodes on a page need to be displayed according to their actual height. For example, table data needs to be displayed in its entirety, and dynamic deletion or addition of form content can cause changes in node height. To reflect these dynamic height changes in real time, we need to dynamically monitor node height changes and display the actual height information.
[0090] To achieve this functionality, this embodiment of the invention utilizes an API (ResizeObserver) that can monitor changes in node size to monitor the width and height of nodes in real time. Figure 9 This is a schematic diagram of node height adaptation in an embodiment of the present invention. ResizeObserver is used to monitor changes in node height in real time. When a change in node height is detected, height adaptation is triggered. The system re-renders the changed node based on the updated page layout information and the changed height data, and generates a target page that adapts to the changes in node height.
[0091] Figure 10 This is a schematic diagram of the overall process of the page generation method according to an embodiment of the present invention. Based on the page layout information of absolute positioning, a relative positioning conversion algorithm is used to first project the layout of each node in the node set. According to the projection result, each node is grouped to obtain a projection node group. For each projection node group, a bidirectional multi-way linked list is established according to the scaling processing method described above. When the adjustment request is a compression request, a compression width threshold is calculated based on the minimum width value of each scaling node to determine whether a horizontal scroll bar needs to be added. Then, according to the received adjustment request, the relative displacement of the fixed node is determined, and the fixed node is relatively displaced according to the relative displacement. Subsequently, according to the relative displacement of the fixed node, the scaling amount of the scaling node is determined, and the scaling node is scaled according to the scaling amount. The page layout information is updated synchronously according to the displacement result of the fixed node and the scaling result of the scaling node. Finally, based on the updated page layout information, the absolute positioning coordinate information of each node is determined, and then the page is rendered according to the coordinate information of each node to generate the target page. Meanwhile, the system will monitor page display size adjustment requests in real time. If a new adjustment request is received, the system will scale the nodes according to the relative positioning conversion algorithm in this case to achieve responsive generation of the required page.
[0092] Figure 11 This is a schematic diagram of the main modules of a page generation apparatus according to an embodiment of the present invention. Figure 11 As shown, the page generation device 1100 mainly includes a layout information acquisition module 1101, a layout scaling processing module 1102, and a target page generation module 1103.
[0093] The layout information acquisition module 1101 is used to acquire the page layout information of the page to be generated. The page layout information includes the node set that makes up the page to be generated, and the coordinate information of each node in the node set. The node set includes fixed nodes and scaling nodes.
[0094] The layout scaling processing module 1102 is used to determine the relative displacement of the fixed node according to the adjustment request of the page layout information; to perform relative displacement of the fixed node according to the relative displacement based on the coordinate information of the fixed node; to determine the scaling amount of the scaling node according to the relative displacement based on the relative displacement of the fixed node; to perform scaling of the scaling node according to the scaling amount based on the coordinate information of the scaling node; and to synchronously update the page layout information according to the displacement result of the fixed node and the scaling result of the scaling node.
[0095] The target page generation module 1103 is used to determine the updated coordinate information of each node in the updated page layout information, and to perform page rendering based on the updated coordinate information of each node to generate the target page.
[0096] According to an embodiment of the present invention, the page generation device 1100 further includes a linked list generation module (not shown in the figure), configured to: determine the adjacency relationship between each node according to the coordinate information of each node in the node set before determining the relative displacement of the fixed node; establish a connection between adjacent nodes according to the adjacency relationship, using each node as a linked list node, and using the left and right boundaries in the page layout information as the left and right endpoints respectively, generate a bidirectional multi-link table of the page to be generated, wherein each link node in the bidirectional multi-link table has an identifier of a fixed node or a scaling node.
[0097] According to another embodiment of the present invention, the layout scaling processing module 1102 is further configured to: determine the layout adjustment amount from the adjustment request and obtain the alignment configuration of the fixed node; in response to the layout adjustment amount being a compression amount, calculate the relative displacement of the fixed node step by step from left to right, based on the layout adjustment amount and the alignment configuration, starting from the left endpoint in the bidirectional multi-link table; and in response to the layout adjustment amount being a stretch amount, calculate the relative displacement of the fixed node step by step from right to left, based on the layout adjustment amount and the alignment configuration, starting from the right endpoint in the bidirectional multi-link table.
[0098] According to another embodiment of the present invention, the layout scaling processing module 1102 is further configured to: determine the fixed nodes participating in the calculation at each level; for each fixed node participating in the calculation at each level: calculate the corresponding relative displacement based on the layout adjustment amount and the alignment configuration of the fixed nodes participating in the calculation, and use the relative displacement as the theoretical displacement; then, using the reverse direction of the step-by-step calculation direction as the backtracking direction, backtrack the fixed nodes to determine whether the theoretical displacement and the position of the fixed node whose relative displacement has been determined at the previous level interfere with each other, and update the theoretical displacement based on the determination result to obtain the relative displacement.
[0099] According to another embodiment of the present invention, the layout scaling processing module 1102 is further configured to: repeatedly perform the following operations until no scaling node exists in the bidirectional multi-link table: combine each fixed node in the bidirectional multi-link table in pairs to obtain multiple fixed node pairs; search for scaling nodes between each fixed node pair in the bidirectional multi-link table, and form scaling paths between the scaling nodes of the fixed node pairs to obtain a set of scaling paths between all fixed node pairs; calculate the scaling amount of each scaling path according to the distance between nodes in the fixed node pairs corresponding to each scaling path in the scaling path set, and select the target scaling path corresponding to the minimum scaling amount; determine the scaling amount of each scaling node in the target scaling path according to the scaling amount of the target scaling path; scale the scaling node according to the coordinate information of each scaling node in the target scaling path, according to the scaling amount of each scaling node, and modify the scaled scaling node to a fixed node.
[0100] According to another embodiment of the present invention, the page generation apparatus 1100 further includes a compression processing module (not shown in the figure), configured to: before determining the scaling amount of the scaling node based on the relative displacement of the fixed node, in response to the adjustment request being a compression request, determine a compression width threshold based on the minimum width value of each node in the node set; determine whether the width of the page to be generated is less than the compression width threshold; in response to the width of the page to be generated being less than the compression width threshold, add a scroll bar to the page to be generated, and use each of the minimum width values as the compression lower limit of the corresponding scaling node.
[0101] According to another embodiment of the present invention, the page generation device 1100 further includes a node projection module (not shown in the figure), which is used to: project the layout of each node in the node set before determining the relative displacement of the fixed nodes in the node set; group each node according to the projection result to obtain a projection node group; and sequentially perform relative displacement on the fixed nodes in each projection node group and scale the scaling nodes.
[0102] According to another embodiment of the present invention, the page generation device 1100 further includes a height adaptive module (not shown in the figure), which is used to: monitor the height data of each node in the node set, and when the height data is detected to have changed, re-render the page based on the changed height data and the updated page layout information to generate the target page.
[0103] Figure 12 This is an exemplary system architecture diagram in which embodiments of the present invention can be applied.
[0104] like Figure 12As shown, system architecture 1200 may include terminal devices 1201, 1202, and 1203, a network 1204, and a server 1205. Network 1204 serves as the medium for providing communication links between terminal devices 1201, 1202, and 1203 and server 1205. Network 1204 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.
[0105] Users can use terminal devices 1201, 1202, and 1203 to interact with server 1205 via network 1204 to receive or send messages, etc. Various communication client applications, such as page generation applications, can be installed on terminal devices 1201, 1202, and 1203 (for example only).
[0106] Terminal devices 1201, 1202, and 1203 can be various electronic devices with displays and supporting web browsing, including but not limited to smartphones, tablets, laptops, and desktop computers. The terminal devices can acquire page layout information of the page to be generated, which includes a set of nodes constituting the page and coordinate information of each node in the set. The set of nodes includes fixed nodes and scaling nodes. Based on an adjustment request for the page layout information, the devices determine the relative displacement of the fixed nodes and, based on the coordinate information of the fixed nodes, perform relative displacement on the fixed nodes according to the relative displacement. Based on the relative displacement of the fixed nodes, the devices determine the scaling of the scaling nodes and, based on the coordinate information of the scaling nodes, scale the scaling nodes according to the scaling. Based on the displacement results of the fixed nodes and the scaling results of the scaling nodes, the devices synchronously update the page layout information. The devices determine the updated coordinate information of each node in the updated page layout information and, based on the updated coordinate information of each node, perform page rendering and generate the target page, among other processes.
[0107] Server 1205 may be a server that provides various services, such as a back-end management server that supports page generation by users using terminal devices 1201, 1202, and 1203 (for example only).
[0108] It should be noted that the page generation method provided in the embodiments of the present invention is generally executed by terminal devices 1201, 1202, and 1203, and correspondingly, the page generation device is generally disposed in terminal devices 1201, 1202, and 1203.
[0109] It should be understood that Figure 12 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.
[0110] The following is for reference. Figure 13 , Figure 13 This is a schematic diagram of the structure of a computer system suitable for implementing the terminal device of the present invention. Figure 13 The terminal device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of the present invention.
[0111] like Figure 13 As shown, the computer system 1300 includes a central processing unit (CPU) 1301, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 1302 or programs loaded from storage portion 1308 into random access memory (RAM) 1303. The RAM 1303 also stores various programs and data required for the operation of the system 1300. The CPU 1301, ROM 1302, and RAM 1303 are interconnected via a bus 1304. An input / output (I / O) interface 1305 is also connected to the bus 1304.
[0112] The following components are connected to I / O interface 1305: an input section 1306 including a keyboard, mouse, etc.; an output section 1307 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 1308 including a hard disk, etc.; and a communication section 1309 including a network interface card such as a LAN card, modem, etc. The communication section 1309 performs communication processing via a network such as the Internet. A drive 1310 is also connected to I / O interface 1305 as needed. Removable media 1311, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 1310 as needed so that computer programs read from them can be installed into storage section 1308 as needed.
[0113] In particular, according to the embodiments disclosed in this invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this invention 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 1309, and / or installed from removable medium 1311. When the computer program is executed by central processing unit (CPU) 1301, it performs the functions defined above in the system of this invention.
[0114] It should be noted that the computer-readable medium shown in this invention 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 or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this invention, 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 invention, 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 propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media can also be any computer-readable medium other than computer-readable storage media, 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, wire, optical fiber, RF, etc., or any suitable combination thereof.
[0115] 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 the present invention. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing 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, may 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.
[0116] The units described in the embodiments of the present invention can be implemented in software or in hardware. The described units can also be housed in a processor; for example, a processor can be described as including: a layout information acquisition module, a layout scaling processing module, and a target page generation module.
[0117] In some cases, the names of these modules do not constitute a limitation on the module itself. For example, the target page generation module can also be described as "a module for determining the updated coordinate information of each node in the updated page layout information, rendering the page according to the updated coordinate information of each node, and generating the target page".
[0118] On the other hand, the present invention also provides a computer-readable medium, which may be included in the device described in the embodiments; or it may exist independently and not assembled into the device. The computer-readable medium carries one or more programs, which, when executed by the device, cause the device to include: acquiring page layout information of a page to be generated, the page layout information including a set of nodes constituting the page to be generated, and coordinate information of each node in the node set, wherein the node set includes fixed nodes and scaling nodes; determining the relative displacement of the fixed nodes according to an adjustment request for the page layout information, and relative displacement of the fixed nodes according to the relative displacement based on the coordinate information of the fixed nodes; determining the scaling amount of the scaling nodes according to the relative displacement of the fixed nodes, and scaling the scaling nodes according to the scaling amount based on the coordinate information of the scaling nodes; synchronously updating the page layout information according to the displacement result of the fixed nodes and the scaling result of the scaling nodes; determining the updated coordinate information of each node in the updated page layout information, and rendering the page according to the updated coordinate information of each node to generate a target page.
[0119] According to the technical solution of the present invention, the following advantages or beneficial effects are achieved: by obtaining the page layout information of the page to be generated, the page layout information includes a set of nodes constituting the page to be generated, and the coordinate information of each node in the node set, wherein the node set includes fixed nodes and scaling nodes; according to the adjustment request of the page layout information, the relative displacement of the fixed nodes is determined, and the fixed nodes are relatively displaced according to the coordinate information of the fixed nodes; according to the relative displacement of the fixed nodes, the scaling amount of the scaling nodes is determined, and the scaling nodes are scaled according to the coordinate information of the scaling nodes; the page layout information is synchronously updated according to the displacement result of the fixed nodes and the scaling result of the scaling nodes; the updated coordinate information of each node in the updated page layout information is determined, and the page is rendered according to the updated coordinate information of each node to generate the target page, the technical solution realizes the generation of an adaptively scaling page based on absolute positioning page layout, effectively solving the problem of the inability to adaptively scale in the existing low-code canvas page construction, which not only improves the flexibility of page layout conversion, but also enriches the application scenarios of the existing page construction scheme.
[0120] The specific embodiments described herein do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.
Claims
1. A page generation method, characterized in that, include: Obtain the page layout information of the page to be generated, the page layout information including the node set that makes up the page to be generated, and the coordinate information of each node in the node set, wherein the node set includes fixed nodes and scaling nodes; Based on the request to adjust the page layout information, determine the relative displacement of the fixed node, and perform relative displacement on the fixed node according to the coordinate information of the fixed node; determine the scaling amount of the scaling node according to the relative displacement of the fixed node, and scale the scaling node according to the coordinate information of the scaling node; update the page layout information synchronously based on the displacement result of the fixed node and the scaling result of the scaling node. Determine the updated coordinates of each node in the updated page layout information, and render the page based on the updated coordinates of each node to generate the target page.
2. The method according to claim 1, characterized in that, Before determining the relative displacement of the fixed node, the method further includes: Based on the coordinate information of each node in the node set, determine the adjacency relationship between each node; Using each of the nodes as linked list nodes, connections are established between adjacent nodes according to the adjacency relationship, and the left and right boundaries in the page layout information are used as the left and right endpoints respectively to generate a bidirectional multi-link table for the page to be generated. Each link node in the bidirectional multi-link table has an identifier for a fixed node or a scaling node.
3. The method according to claim 2, characterized in that, Based on the received request to adjust the page layout information, the relative displacement of the fixed node is determined, including: Determine the layout adjustment amount from the adjustment request and obtain the alignment configuration of the fixed node; In response to the layout adjustment amount being a compression amount, starting from the left endpoint in the bidirectional multi-link table, the relative displacement of the fixed node is calculated step by step according to the layout adjustment amount and the alignment configuration, in order from left to right. In response to the layout adjustment amount being a stretch amount, starting from the right endpoint in the bidirectional multi-link table, the relative displacement of the fixed node is calculated step by step according to the layout adjustment amount and the alignment configuration, in a right-to-left order.
4. The method according to claim 3, characterized in that, Based on the layout adjustment amount and the alignment configuration, the relative displacement of the fixed nodes is calculated step by step, including: Determine the fixed nodes involved in the calculation at each level; For each level of fixed node involved in the calculation: based on the layout adjustment amount and the alignment configuration of the fixed node involved in the calculation, calculate the corresponding relative displacement amount, and use the relative displacement amount as the theoretical displacement amount; then, using the opposite direction of the step-by-step calculation direction as the backtracking direction, backtrack the fixed node to determine whether the theoretical displacement amount and the position of the fixed node whose relative displacement amount has been determined at the previous level interfere with each other; based on the determination result, update the theoretical displacement amount to obtain the relative displacement amount.
5. The method according to claim 2, characterized in that, Based on the relative displacement of the fixed node, the scaling amount of the scaling node is determined. Then, based on the coordinate information of the scaling node, the scaling node is scaled according to the scaling amount, including: Repeat the following operation until no scaling node exists in the bidirectional multilink table: Each fixed node in the bidirectional multi-link table is paired to obtain multiple fixed node pairs. The scaling nodes between each fixed node pair are found in the bidirectional multi-link table, and the scaling nodes between the fixed node pairs are combined to form a scaling path, thereby obtaining a set of scaling paths between all fixed node pairs. Based on the distance between the fixed nodes and the center nodes corresponding to each scaling path in the scaling path set, the scaling amount of each scaling path is calculated, and the target scaling path corresponding to the minimum scaling amount is selected. Based on the scaling amount of the target scaling path, the scaling amount of each scaling node in the target scaling path is determined. Based on the coordinate information of each scaling node in the target scaling path, the scaling nodes are scaled according to the scaling amount of each scaling node, and the scaled scaling nodes are modified into fixed nodes.
6. The method according to claim 1, characterized in that, Before determining the scaling amount of the scaling node based on the relative displacement of the fixed node, the method further includes: In response to the adjustment request being a compression request, a compression width threshold is determined based on the minimum width value of each node in the node set; Determine whether the width of the page to be generated is less than the compression width threshold. If the width of the page to be generated is less than the compression width threshold, add a scroll bar to the page to be generated and use each of the minimum width values as the compression lower limit of the corresponding scaling node.
7. The method according to claim 1, characterized in that, Before determining the relative displacement of the fixed nodes in the node set, the method further includes: The layout of each node in the node set is projected, and the nodes are grouped according to the projection results to obtain projection node groups. The fixed nodes in each projection node group are then relocated relative to each other, and the scaling nodes are scaled.
8. The method according to claim 1, characterized in that, The method further includes: The system monitors the height data of each node in the node set, and when a change in the height data is detected, it re-renders the page based on the changed height data and the updated page layout information to generate the target page.
9. A page generation device, characterized in that, include: The layout information acquisition module is used to acquire the page layout information of the page to be generated. The page layout information includes the node set that makes up the page to be generated, and the coordinate information of each node in the node set. The node set includes fixed nodes and scaling nodes. The layout scaling processing module is used to determine the relative displacement of the fixed node according to the adjustment request of the page layout information; to perform relative displacement of the fixed node according to the relative displacement based on the coordinate information of the fixed node; to determine the scaling amount of the scaling node according to the relative displacement based on the relative displacement of the fixed node; to scale the scaling node according to the scaling amount based on the coordinate information of the scaling node; and to synchronously update the page layout information based on the displacement result of the fixed node and the scaling result of the scaling node. The target page generation module is used to determine the updated coordinate information of each node in the updated page layout information, and to render the page based on the updated coordinate information of each node to generate the target page.
10. A mobile electronic device terminal, characterized in that, include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-8.
11. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-8.
12. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method as described in any one of claims 1-8.
Citation Information
Patent Citations
Method and system for layout of webpage single pages of mobile device
CN106502659A
Page generation method and device, computer equipment and storage medium
CN110704087A