Page generation method and device
By obtaining and updating page layout information in low-code canvas, determining the displacement and scaling amount of fixed nodes and scaling nodes, the problem of inability to adaptive layout in the prior art is solved, and page generation of adaptive scaling is realized, improving flexibility and application scenarios.
Patent Information
- Application Number
- CN202411845068.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-13
- Publication Date
- 2025-03-28
- Estimated Expiration
- 2044-12-13
AI Technical Summary
The existing low-code canvas page construction scheme cannot be responsively layout and cannot adapt to the size of different display devices or browser windows, which limits its application scenarios.
By obtaining page layout information, including coordinate information of fixed nodes and scaling nodes, determining the relative displacement of fixed nodes and scaling nodes according to adjustment requests, synchronously updating the page layout information to realize adaptive scaling page generation.
It realizes the generation of adaptively scalable pages based on page layout based on absolute positioning, solves the problem of inability to adaptive layout in the existing technology, improves the flexibility of page layout conversion, and enriches the application scenarios of page construction solutions.
Smart Images

Figure CN119718317A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer technology, and in particular to a page generation method and device. Background Art
[0002] In the field of page development, low-code page designers support users to build pages that meet their expectations through the canvas they provide. Users can freely drag the required page components on the canvas. This visual and convenient page building solution is gaining more and more attention.
[0003] In the process of implementing the present invention, the inventors found that the prior art has the following problems:
[0004] In the existing low-code canvas page building solutions, the positions of the various page elements can only be expressed by two-dimensional coordinates, which is an absolute positioning method. In actual use, the size of the page needs to be dynamically responsive and adaptive according to the size of different display devices or browser windows. Accordingly, the position and size of the page elements also need to be adjusted. The existing low-code canvas page building solution is implemented in an absolute positioning scenario, and the position and size of each page element are fixed, so it is impossible to perform responsive layout, which limits its application in different usage scenarios. Summary of the invention
[0005] In view of this, an embodiment of the present invention provides a page generation method and device, which realizes the generation of adaptively scalable pages based on absolutely positioned page layouts, effectively solving the problem of the inability to adaptively layout in existing low-code canvas construction pages, and not only improves the flexibility of page layout conversion, but also enriches the application scenarios of existing page construction solutions.
[0006] To achieve the above object, according to one aspect of an embodiment of the present invention, a page generation method is provided, comprising:
[0007] Acquire page layout information of a page to be generated, wherein the page layout information includes a node set 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;
[0008] Determine the relative displacement of the fixed node according to the adjustment request for the page layout information, and perform relative displacement on the fixed node according to the relative displacement 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 scaling amount according to the coordinate information of the scaling node; and synchronously update the page layout information according to the displacement result of the fixed node and the scaling result of the scaling node;
[0009] 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 a target page.
[0010] Optionally, before determining the relative displacement of the fixed node, the method also includes: determining the adjacency relationship between each node in the node set based on the coordinate information of each node; 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 the right endpoint respectively, to generate a bidirectional multi-link table for 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.
[0011] Optionally, based on the received adjustment request for the page layout information, the relative displacement of the fixed node is determined, including: determining the 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, taking the left endpoint in the bidirectional multi-link table as the starting point, and calculating the relative displacement of the fixed node step by step from left to right according to the layout adjustment amount and the alignment configuration; in response to the layout adjustment amount being a stretching amount, taking the right endpoint in the bidirectional multi-link table as the starting point, and calculating the relative displacement of the fixed node step by step from right to left according to the layout adjustment amount and the alignment configuration.
[0012] Optionally, the relative displacement of the fixed nodes is calculated step by step according to the layout adjustment amount and the alignment configuration, including: determining the fixed nodes participating in the calculation at each level; for the fixed nodes participating in the calculation at each level: calculating the corresponding relative displacement according to the layout adjustment amount and the alignment configuration of the fixed nodes participating in the calculation, and taking the relative displacement as the theoretical displacement; then backtracking the fixed nodes in the reverse direction of the step-by-step calculation direction as the backtracking direction, judging whether there is interference between the theoretical displacement and the position of the fixed node whose relative displacement has been determined at the previous level of the fixed node, and updating the theoretical displacement according to the judgment result to obtain the relative displacement.
[0013] Optionally, the scaling amount of the scaling node is determined according to the relative displacement of the fixed node, and the scaling node is scaled according to the scaling amount according to the coordinate information of the scaling node, including: looping 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 the scaling nodes between each fixed node pair from the bidirectional multi-link table, and forming the scaling nodes between the fixed node pairs into scaling paths, thereby obtaining a scaling path set between all fixed node pairs; calculating 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 selecting a target scaling path corresponding to the minimum scaling amount, determining the scaling amount of each scaling node in the target scaling path according to the scaling amount of the target scaling path, scaling 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 modifying the scaled scaling node to a fixed node.
[0014] Optionally, before determining the scaling amount of the scaling node according to 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 according to the minimum width value of each node in the node set; judging whether the width of the page to be generated is less than the compression width threshold, and in response to the width of the page to be generated being less than the compression width threshold, adding a scroll bar for 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 of the nodes according to the projection result, and obtaining a projection node group, so as to perform relative displacement on the fixed nodes in each of the projection node groups and scale the scaled nodes in turn.
[0016] Optionally, the method further includes: monitoring height data of each node in the node set, and when a change in the height data is detected, re-rendering the page according to the changed height data in combination with updated page layout information to generate a target page.
[0017] According to a second aspect of an embodiment of the present invention, there is provided a page generating device, comprising:
[0018] A layout information acquisition module, used to acquire page layout information of a page to be generated, wherein the page layout information includes a node set 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;
[0019] A layout zoom processing module, used to determine the relative displacement of the fixed node according to the adjustment request for the page layout information, and relatively displace the fixed node according to the relative displacement according to the coordinate information of the fixed node; determine the zoom amount of the zoom node according to the relative displacement of the fixed node, and zoom the zoom node according to the zoom amount according to the coordinate information of the zoom node; and synchronously update the page layout information according to the displacement result of the fixed node and the zoom result of the zoom node;
[0020] The target page generation module is used to determine the updated coordinate information of each node in the updated page layout information, perform page rendering according to the updated coordinate information of each node, and generate a target page.
[0021] According to a third aspect of an embodiment of the present invention, there is provided an electronic device for generating a page, including:
[0022] one or more processors;
[0023] a 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 embodiment of the present invention.
[0025] According to a fourth aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored, and when the program is executed by a processor, the method provided by the first aspect of the embodiment of the present invention is implemented.
[0026] According to a fifth aspect of an embodiment of the present invention, a computer program product is provided. When the computer program is executed by a processor, the method provided by the first aspect of the embodiment of the present invention is implemented.
[0027] An embodiment of the invention has the following advantages or beneficial effects: by obtaining page layout information of a page to be generated, the page layout information includes a node set 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; according to a request for adjusting the page layout information, determining the relative displacement of the fixed node, and performing relative displacement on the fixed node according to the coordinate information of the fixed node; determining the scaling amount of the scaling node according to the relative displacement of the fixed node, and scaling the scaling node according to the scaling amount according to the coordinate information of the scaling node; synchronously updating the page layout information according to the displacement results of the fixed node and the scaling results of the scaling node; 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 a technical solution for a target page, realizing the generation of an adaptively scaled page based on an absolutely positioned page layout, effectively solving the problem of the inability to adaptively layout in existing low-code canvas page construction, not only improving the flexibility of page layout conversion, but also enriching the application scenarios of existing page construction solutions. BRIEF DESCRIPTION OF THE DRAWINGS
[0028] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.
[0029] Figure 1 is a schematic diagram of the main process of the page generation method according to an embodiment of the present invention;
[0030] Figure 2 is an example diagram of page layout information according to an embodiment of the present invention;
[0031] Figure 3 is a schematic diagram of a bidirectional multi-link table according to an embodiment of the present invention;
[0032] Figure 4 is a schematic diagram of backtracking calculation of a fixed node in an embodiment of the present invention;
[0033] FIG5( a ) is a schematic diagram of a zoom path of a minimum zoom amount before zooming according to an embodiment of the present invention;
[0034] FIG5( b ) is a schematic diagram of a zoomed zoom path of a minimum zoom amount according to an embodiment of the present invention;
[0035] Figure 6 It is a schematic diagram of the main flow of a page generation method according to a reference embodiment of the present invention;
[0036] Figure 7 is a schematic diagram of node layout projection according to an embodiment of the present invention;
[0037] Figure 8This is a schematic diagram of traversing the minimum width value in a page layout stacking scenario according to an embodiment of the present invention;
[0038] Fig. 9 is a schematic diagram of node height adaptation according to an embodiment of the present invention;
[0039] Fig.10 It is a schematic diagram of the overall flow of the page generation method according to an embodiment of the present invention;
[0040] Fig.11 is a schematic diagram of main modules of a page generating device according to an embodiment of the present invention;
[0041] Fig.12 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;
[0042] Fig.13 It is a schematic diagram of the structure of a computer system of a terminal device suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION
[0043] It should be noted that the acquisition, storage and application of user personal information involved in the technical solution of the present disclosure are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.
[0044] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.
[0045] In the existing low-code canvas page building solutions, the positions of the various page elements can only be expressed by two-dimensional coordinates, which is an absolute positioning method. In actual use, the size of the page needs to be dynamically responsive and adaptive according to the size of different display devices or browser windows. Accordingly, the position and size of the page elements also need to be adjusted. The existing low-code canvas page building solution is implemented in an absolute positioning scenario, and the position and size of each page element are fixed, so it is impossible to perform responsive layout, which limits its application in different usage scenarios.
[0046] In order to solve the above-mentioned problems existing in the prior art, the present invention proposes a page generation method, which is based on the page layout information obtained by coordinate positioning, according to the received adjustment request, according to the node type in the page layout information, first determines the relative displacement of the fixed nodes in the page layout information, and then determines the scaling amount of the scaling nodes in the page layout information, and synchronously updates the page layout information to generate a target page, thereby realizing the generation of adaptively scaled pages based on the absolutely positioned page layout, effectively solving the problem of the inability to adaptively layout in the existing low-code canvas construction page, which not only improves the flexibility of page layout conversion, but also enriches the application scenarios of existing page construction solutions.
[0047] In the introduction of the embodiments of the present invention, the terms 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 build the page they want;
[0049] ResizeObserver: A web browser API that monitors the size changes of an element and triggers a callback function when the size change occurs.
[0050] Figure 1 is a schematic diagram of the main process of the page generation method according to an embodiment of the present invention. Figure 1 As shown, the page generation method of the embodiment of the present invention includes the following steps S101 to S103.
[0051] Step S101: acquiring page layout information of a page to be generated, wherein the page layout information includes a node set 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.
[0052] Specifically, the user selects page components on the low-code canvas, and builds the page layout information of the page to be generated by dragging and dropping. The canvas is a construction system based on a two-dimensional grid. In the actual construction scenario, the width of the canvas can be set to an integer n (in px), and the height will be automatically adjusted according to the height change of the page components. The grid takes the upper left corner as the origin coordinate (0, 0), and the width and height of each grid are 1px. The width and height of each page component are based on 1px as the minimum unit. With the help of the two-dimensional grid, we can accurately locate the coordinate information of each page component element in the grid. That is, the entire page layout information mainly includes each page component element, and the two-dimensional coordinate information of each page component element in the two-dimensional grid.
[0053] It should be noted that, considering that in order to achieve layout adaptation in the embodiment of the present invention, it is necessary to adjust the position and scale each page component element, for the sake of ease of description and understanding, the page component element will be referred to as a node in the following. Accordingly, each page component element in the page layout information constitutes a node set, 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] In addition, considering that the scaling characteristics of each node in the page layout information are determined by the type of node, and according to the browsing habits of the page, the scaling usually mentioned refers to horizontal scaling. The nodes of the embodiment of the present invention are mainly divided into fixed nodes and scaling nodes. The width size of the fixed node always remains unchanged and will not be compressed or stretched, which is a fixed width node. The width size of the scaling node can be compressed or stretched as needed, which is an elastic width node.
[0055] Step S102: determine the relative displacement of the fixed node according to the received adjustment request for the page layout information, and relatively displace the fixed node according to the relative displacement 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 scaling amount according to the coordinate information of the scaling node; and synchronously update the page layout information according to the displacement result of the fixed node and the scaling result of the scaling node.
[0056] Specifically, based on the above-mentioned page layout information that each node is absolutely positioned, the embodiment of the present invention converts the absolutely positioned page layout information into relatively positioned page layout information to achieve the generation of an adaptively scaled page. Based on the fact that the node set includes fixed nodes and scaling nodes, in order to ensure the stability of the layout, the present invention first adjusts the relative position of the fixed nodes to obtain the displacement result of the relative displacement. Then, the scaling node is scaled to obtain the scaling result of the scaling node. Finally, according to the displacement result and the scaling result, the page layout information is synchronously updated to obtain the relatively positioned page layout information that meets the adjustment request.
[0057] According to one embodiment of the present invention, before determining the relative displacement of the fixed node, the method also includes: determining the adjacency relationship between each of the nodes based on the coordinate information of each node in the node set; using each of the nodes as a linked list node, establishing connections 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 the right endpoint respectively, to 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.
[0058] Specifically, in order to process each fixed node and scaling node in a more organized and orderly manner, before determining the relative displacement of the fixed node, the embodiment of the present invention first clarifies the adjacency relationship between each node based on the coordinate information of each node in the page layout information. It should be noted that the adjacency relationship in the embodiment of the present invention refers to the left and right adjacency relationship of the node, which can be searched layer by layer, or by traversing each node to search within the entire layout range. Each node is used as a linked list node, and the type of node (fixed node or scaling node) is identified on the linked list node. According to the determined adjacency relationship, the connection between adjacent nodes in the page layout information is established. On the linked list, the corresponding linked list nodes are connected with connecting lines, and the left boundary in the page layout information is used as the left endpoint and the right boundary is used as the right endpoint to generate a bidirectional multi-link table that can characterize the adjacency relationship of each node.
[0059] For example, Figure 2 This is an example diagram of page layout information of an embodiment of the present invention, where each box represents a node, the f node represents a scaling node, the s node represents a fixed node, and the center, left, and right below the s node are preset alignment configurations for the fixed node. Figure 3 is a schematic diagram of a bidirectional multi-link table according to an embodiment of the present invention. Figure 2 The page layout information is created Figure 3 A bidirectional multi-link table, Figure 2 Each node in corresponds to a linked list node of a bidirectional multi-link table. The left and right borders in the page layout information can be regarded as fixed nodes with a width of 0 and a height of infinity, such as the Left endpoint and the Right endpoint in the figure. The gray in the figure is the scaling node. Figure 2 The adjacency relationship between each node in the bidirectional multi-link table is generated layer by layer. The adjacency relationship in the embodiment of the present invention only refers to the left and right adjacencies of the nodes. For example, f1 is right adjacent to f3 and f4, f2 is right adjacent to s1 and s5, but f1 and f2 are not adjacent.
[0060] According to another embodiment of the present invention, the relative displacement of the fixed node is determined according to the received adjustment request for the page layout information, including: determining the 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, taking the left endpoint in the bidirectional multi-link table as the starting point, and calculating the relative displacement of the fixed node step by step from left to right according to the layout adjustment amount and the alignment configuration; in response to the layout adjustment amount being a stretching amount, taking the right endpoint in the bidirectional multi-link table as the starting point, and calculating the relative displacement of the fixed node step by step from right to left according to the layout adjustment amount and the alignment configuration.
[0061] Specifically, the layout adjustment amount of this adjustment request is determined based on the page size required by the display device or the browser contained in the adjustment request, combined with the layout size of the page layout information. In addition, considering that the alignment configurations of different fixed nodes are also different, the relative displacements corresponding to different alignment configurations are also different. For example, if the layout adjustment amount is determined to be a page compression ΔX based on the page size and layout size in the adjustment request, the relative displacement of the left-aligned fixed node is 0, and the relative displacement of the center-aligned fixed node is 1 / 2. ΔX, and the relative displacement of the fixed node aligned to the right is ΔX. Therefore, the alignment configuration of the fixed node 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, in the order from left to right in the bidirectional multi-link table, according to the compression amount and the alignment configuration of each fixed node, refer to the algorithm of the above example, and calculate the relative displacement of the fixed nodes in the table step by step. Similarly, when the layout adjustment amount determined according to the adjustment request is a stretching amount, each node is stretched to the right, based on the bidirectional multi-link table generated above, starting from the right endpoint, in the order from right to left in the bidirectional multi-link table, according to the stretching amount and the alignment configuration of each fixed node, the relative displacement of the fixed nodes in the table is calculated step by step.
[0063] According to another embodiment of the present invention, the relative displacement of the fixed nodes is calculated step by step according to the layout adjustment amount and the alignment configuration, including: determining the fixed nodes participating in the calculation at each level; for the fixed nodes participating in the calculation at each level: calculating the corresponding relative displacement according to the layout adjustment amount and the alignment configuration of the fixed nodes participating in the calculation, and taking the relative displacement as the theoretical displacement; then backtracking the fixed nodes in the reverse direction of the step-by-step calculation direction as the backtracking direction, judging whether the theoretical displacement interferes with the position of the fixed node whose relative displacement has been determined at the previous level of the fixed node, and updating the theoretical displacement according to the judgment result to obtain the relative displacement.
[0064] Specifically, when the above layout adjustment amount is compression or stretching, since the fixed nodes of each layer are calculated hierarchically, the time to determine 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. It is possible that the relative displacement determined by the previous level blocks the relative displacement of the fixed nodes determined by the preliminary calculation of the current level. Therefore, it is necessary to calculate the relative displacement first and use the relative displacement as the theoretical displacement. Then, the theoretical displacement is backtracked in the opposite direction of the calculation direction (for example, when the amount is compressed, backtrack to the left, when the amount is stretched, backtrack to the right) to check whether the theoretical displacement has been determined by the previous level, and the position of the displaced fixed nodes has interfered, blocking the fixed nodes currently being calculated from being displaced according to the preliminary calculated theoretical displacement. And the backtracking check should be comprehensive. According to the bidirectional multi-link table, all possible paths are traversed and backtracked. If there is an interference, the critical value of the interference (i.e., the displacement that has not interfered yet) is used to update the theoretical displacement to obtain 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 compression scenario, after calculating the theoretical displacement, backtrack to the left from the bidirectional multi-link table to verify its theoretical displacement. From the figure, it can be seen that s2, s1, and the left endpoint are fixed nodes, so there are 4 backtracking paths. The smallest displaceable amount in each backtracking path 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 according to the relative displacement of the fixed node, and the scaling node is scaled according to the scaling amount according to the coordinate information of the scaling node, including: looping 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 the bidirectional multi-link table for scaling nodes between each fixed node pair, and forming scaling paths with the scaling nodes between the fixed node pairs, thereby obtaining a scaling path set between all fixed node pairs; calculating 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 selecting a target scaling path corresponding to the minimum scaling amount, determining the scaling amount of each scaling node in the target scaling path according to the scaling amount of the target scaling path, scaling 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 modifying the scaled scaling node to a fixed node.
[0067] Specifically, after the relative displacement of the fixed nodes is determined, the layout of the page is guaranteed to be stable by these fixed nodes, and then the scaling of the scaling nodes is calculated. First, the fixed nodes in the bidirectional multi-link table are combined in pairs to obtain multiple fixed node pairs, and the scaling nodes between each fixed node pair are found. According to the bidirectional multi-link table, multiple scaling nodes with a connection relationship between the same fixed node pair are combined into a scaling path. Each non-scaled node pair may have multiple scaling paths. 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, Figure 3 For example, from Figure 3 ,f9,f11], [f1,f4,f6,f7,f8,f10,f12], [f8,f9,f11], [f8,f10,f12], [f6,f7,f8], [f6,f7,f8,f10,f12], [f6,f7,f8,f11], [f6,f7,f8,f10,f12], [f6,f7,f8,f10,f12], [f6,f7,f8,f11], [f6,f7,f8,f10,f12], [f6,f7,f8,f11], [f6,f7,f8,f10,f12], [f6,f7,f8,f10,f12], [f6,f7,f8,f11], [f6,f7,f8,f10,f12], [f6,f7,f8,f11] [f2,f5,f7,f8,f9,f11], [f2,f5,f7,f8,f10,f12]}.
[0069] Further, the scaling amount of each scaling path is calculated according to the distance between the nodes in the fixed node pair corresponding to each scaling path in the scaling path set. The scaling amount in the embodiment of the present invention is equally divided to each scaling node. For example, the distance between the nodes in the fixed node pair is x. For the compression 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)] x, the scaling amount of f7 is [w7 / (w6 + w7+ w8)] x, the scaling amount of f8 is [w8 / (w6 + w7 + w8)] x, then the scaling amount of this compression path is the sum of the scaling amounts of the three scaling nodes. According to this method, the target scaling path corresponding to the minimum scaling amount is selected from the scaling amounts of each scaling path, and then the scaling amount of each scaling node in the target scaling path is calculated according to the scaling amount of the target scaling path. 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 corresponding scaling amount, and finally the scaled scaling node is modified to a fixed node in the bidirectional multi-link table.
[0070] According to the above method, the scaling amount of the scaling node is calculated in sequence, and the scaled scaling node is modified to a fixed node in the table until there is no scaling node in the table, that is, the scaling of the scaling node is completed.
[0071] FIG5 (a) is a schematic diagram of the scaling path of the minimum scaling amount of the embodiment of the present invention before scaling, and FIG5 (b) is a schematic diagram of the scaling path of the minimum scaling amount of the embodiment of the present invention after scaling. FIG5 (a) represents [f6, f7, f8] as the scaling path of the minimum scaling amount through the fill color of the node. After scaling f6, f7, f8, the f6, f7, f8 nodes are identified as fixed nodes, as shown in FIG5 (b), and the fill color of the node is the fill color of the fixed node.
[0072] The embodiment of the present invention calculates the relative displacement of the fixed nodes first, and scales the scaling nodes between the fixed nodes based on the relative displacement, thereby ensuring the stability and consistency of the layout and achieving adaptive adjustment of the layout.
[0073] Step S103: determining updated coordinate information of each node in the updated page layout information, performing page rendering according to the updated coordinate information of each node, and generating a target page.
[0074] Specifically, based on the above updated page layout information, combined with the two-dimensional grid, the updated coordinate values of each node in the updated page layout information are calculated, the absolute positioning of the updated nodes is obtained, and then the page is rendered by absolute positioning to generate an adaptively adjusted target page.
[0075] Based on the above page generation method, the present invention provides another embodiment of a page generation method. Figure 6 1 is a schematic diagram of the main flow of a page generation method according to a reference embodiment of the present invention. As another embodiment of the present invention, Figure 6 As shown, the page generation method may include:
[0076] Step S601: Obtain page layout information of a page to be generated, wherein the page layout information includes a node set 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.
[0077] Step S602: Project the layout of each node in the node set, group each node according to the projection result to obtain a projection node group, and perform relative displacement on the fixed nodes in each projection node group and scale the scaled nodes in turn.
[0078] Specifically, since the nodes between different rows in the page layout information are independent of each other and do not affect each other, in order to reduce the computational complexity and improve the performance of the prompt algorithm, we can distinguish the nodes located in different row spaces through the projection method, thereby reducing the number of nodes involved in each scaling process.
[0079] The embodiment of the present invention adopts a projection method to project the layout of each node in the node set. Exemplarily, Figure 7 This is a schematic diagram of the node layout projection of an embodiment of the present invention. For example, if a beam of horizontal light is projected onto a node from the left to the right, the result of the projection on the wall is the number of discontinuous dark boxes. As shown in the figure, each of the three dark boxes on the far right represents a row. Therefore, the number of groups can be determined based on the number of dark boxes obtained by projection. It can be seen from the figure that the entire page layout is divided into 3 rows, that is, three groups, so that nodes in different rows can be effectively distinguished. Each row is a group, and each node is grouped to obtain a projection node group.
[0080] It can be understood that the nodes in the same projection node group are regarded as a group, and each projection group is used to determine the relative displacement of subsequent fixed nodes and the scaling of scaling nodes in turn, as well as the relative displacement of fixed nodes and the scaling of scaling nodes, and then grouped to synchronously update page layout information.
[0081] Step S603, for each projection node group: according to the adjustment request for the page layout information, determine the relative displacement of the fixed nodes in the projection node group, and according to the coordinate information of the fixed nodes, relatively displace the fixed nodes according to the relative displacement; according to the relative displacement of the fixed nodes, determine the scaling amount of the scaling nodes in the projection node group, and according to the coordinate information of the scaling nodes, scale the scaling nodes according to the scaling amount; according to 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-mentioned projection of the layout of each node, the projection node group is obtained. In the embodiment of the present invention, each projection node group is taken as a scaling processing set, and each projection node group is scaled. According to the adjustment request of the page layout information, the relative displacement of the fixed nodes in the projection node group is determined, and then the fixed nodes are relatively displaced according to the relative displacement in combination with the coordinate position of the fixed nodes in the current page layout information. Then, according to the relative displacement of the fixed nodes in the projection node group, the scaling amount of the scaling node is determined, and the scaling is performed in combination with the coordinate position of the scaling node in the current page layout information. Finally, the page layout information is synchronously updated according to the displacement result of the relative displacement of the fixed nodes and the scaling result of the scaling of the scaling nodes.
[0083] The embodiment of the present invention utilizes node layout projection to group all nodes in batches for scaling processing, thereby avoiding the pressure on the system caused by a large number of node operations and also avoiding affecting the processing of other services due to occupying too many resources.
[0084] According to another embodiment of the present invention, before determining the scaling amount of the scaling node according to 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 according to the minimum width value of each node in the node set; judging whether the width of the page to be generated is less than the compression width threshold, and in response to the width of the page to be generated being less than the compression width threshold, adding a scroll bar for 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 the embodiment of the present invention does not have the ability to automatically wrap when the width of the page to be generated is not enough to accommodate these nodes during the node compression process, it is necessary to calculate the compression width threshold of the current page layout information. It can be understood that each scaling node has a configured minimum width value, which means that when the compression amount is greater than the minimum width value, it will not affect the scaling of the scaling node, and when the compression amount is less than the minimum width value, it will affect the scaling of the scaling node. 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 3This process can be obtained by the formula: minimum compressible width = Math.max(f1.minCompressW, f2.minCompressW, ...). The maximum value is subtracted from the initial width of the page in the page layout information to obtain the compression width threshold. Then, it is determined whether the width of the current page to be generated is less than the compression width threshold. If it is less than the compression width threshold, a page scroll bar is added to support horizontal viewing of the complete node content through the scroll bar. In addition, when determining the scaling amount of the scaling node, the minimum width value of each scaling node is also considered to avoid excessive compression.
[0086] Understandably, in actual page construction, multiple page layout information may be combined and nested with each other, forming a stacked layout structure. From the perspective of data structure, this scenario will form a tree structure. Figure 8 It is a schematic diagram of the traversal of the minimum width value in the page layout stacking scenario of an embodiment of the present invention. According to the stacked tree structure, each page layout information is taken as a leaf node, and a breadth-first traversal algorithm is used to find the minimum compressible width from each page layout information.
[0087] Step S604: determining updated coordinate information of each node in the updated page layout information, performing page rendering according to the updated coordinate information of each node, and generating a 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 according to the changed height data in combination with the updated page layout information to generate a target page.
[0089] Specifically, in most scenarios, nodes in the page need to be displayed according to their real heights. For example, the data in the table needs to be fully displayed, and the dynamic deletion of form content causes the node height to change. In order to reflect these dynamic heights in real time, we need to dynamically monitor the height changes of the nodes and display the real height information.
[0090] In order to achieve this function, the embodiment of the present invention uses an API (ResizeObserver) that can monitor the size change of the node to monitor the width and height of the node in real time. Fig. 9 It is a schematic diagram of node height adaptation in an embodiment of the present invention, which uses ResizeObserver to monitor the height changes of nodes in real time. When the height changes of nodes are monitored, height adaptation is triggered. The system re-renders the changed nodes according to the updated page layout information and the changed height data, and generates a target page with adaptive node height changes.
[0091] Fig.10 The present invention is a schematic diagram of the overall process of the page generation method of the embodiment of the present invention. Based on the absolutely positioned page layout information, the relative positioning conversion algorithm is used to first project the layout of each node in the node set, and then group each of the nodes according to the projection result to obtain a projection node group. For each projection node group, a bidirectional multi-way linked list of each projection node group is established according to the above-mentioned scaling processing method, and when the adjustment request is a compression request, the compression width threshold is calculated based on the minimum width value of each scaling node, and it is determined 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. Then, 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. According to the displacement result of the fixed node and the scaling result of the scaling node, the page layout information is synchronously updated. 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. At the same time, the system will monitor the adjustment requirements of the page display size in real time. If a new adjustment request is received, the node will be scaled according to the relative positioning conversion algorithm of this case to achieve responsive generation of the required page.
[0092] Fig.11 FIG. 1 is a schematic diagram of the main modules of the page generation device according to an embodiment of the present invention. Fig.11 As shown, the page generating device 1100 mainly includes a layout information acquiring module 1101 , a layout zoom processing module 1102 and a target page generating module 1103 .
[0093] The layout information acquisition module 1101 is used to acquire page layout information of a page to be generated, wherein the page layout information includes a node set 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;
[0094] The layout zoom processing module 1102 is used to determine the relative displacement of the fixed node according to the adjustment request for the page layout information, and perform relative displacement on the fixed node according to the relative displacement according to the coordinate information of the fixed node; determine the zoom amount of the zoom node according to the relative displacement of the fixed node, and zoom the zoom node according to the zoom amount according to the coordinate information of the zoom node; and synchronously update the page layout information according to the displacement result of the fixed node and the zoom result of the zoom node;
[0095] The target page generating module 1103 is used to determine the updated coordinate information of each node in the updated page layout information, perform page rendering according to the updated coordinate information of each node, and generate the target page.
[0096] According to one embodiment of the present invention, the page generation device 1100 also includes a linked list generation module (not shown in the figure), which is used to: before determining the relative displacement of the fixed node, determine the adjacency relationship between each of the nodes according to the coordinate information of each node in the node set; use each of the nodes as a linked list node, establish connections between adjacent nodes according to the adjacency relationship, and use the left and right boundaries in the page layout information as the left endpoint and the right endpoint respectively to 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 used 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, taking the left endpoint in the bidirectional multi-link table as the starting point, and calculating the relative displacement of the fixed node step by step from left to right according to the layout adjustment amount and the alignment configuration; in response to the layout adjustment amount being a stretching amount, taking the right endpoint in the bidirectional multi-link table as the starting point, and calculating the relative displacement of the fixed node step by step from right to left according to the layout adjustment amount and the alignment configuration.
[0098] According to another embodiment of the present invention, the layout scaling processing module 1102 is further used to: determine the fixed nodes participating in the calculation at each level; for the fixed nodes participating in the calculation at each level: calculate the corresponding relative displacement according to 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 backtrack the fixed nodes in the reverse direction of the step-by-step calculation direction as the backtracking direction, determine whether the theoretical displacement interferes with the position of the fixed node whose relative displacement has been determined at the previous level of the fixed node, and update the theoretical displacement according to the determination result to obtain the relative displacement.
[0099] According to another embodiment of the present invention, the layout zoom processing module 1102 is further used to: loop through the following operations until there are no zoom nodes in the bidirectional multi-link table: perform pairwise combinations of the fixed nodes in the bidirectional multi-link table to obtain a plurality of fixed node pairs, search for zoom nodes between the fixed node pairs from the bidirectional multi-link table, and form zoom paths with the zoom nodes between the fixed node pairs, thereby obtaining a zoom path set between all fixed node pairs; calculate the zoom amount of each zoom path according to the distance between nodes in the fixed node pairs corresponding to each zoom path in the zoom path set, and select a target zoom path corresponding to the minimum zoom amount, determine the zoom amount of each zoom node in the target zoom path according to the zoom amount of the target zoom path, scale the zoom nodes according to the coordinate information of each zoom node in the target zoom path and the zoom amount of each zoom node, and modify the scaled zoom nodes to fixed nodes.
[0100] According to another embodiment of the present invention, the page generating device 1100 further includes a compression processing module (not shown in the figure), which is used to: before determining the scaling amount of the scaling node according to the relative displacement of the fixed node, in response to the adjustment request being a compression request, determine a compression width threshold according to 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, and 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 also includes a node projection module (not shown in the figure), which is used to: before determining the relative displacement of the fixed nodes in the node set, project the layout of each node in the node set, group each of the nodes according to the projection result, and obtain a projection node group, so as to perform relative displacement on the fixed nodes in each of the projection node groups and scale the scaled nodes in turn.
[0102] According to another embodiment of the present invention, the page generation device 1100 also includes a height adaptation module (not shown in the figure), which is used to: monitor the height data of each node in the node set, and when it is monitored that the height data changes, re-render the page according to the changed height data in combination with the updated page layout information to generate the target page.
[0103] Fig.12 is an exemplary system architecture diagram to which embodiments of the present invention can be applied.
[0104] like Fig.12As shown, the system architecture 1200 may include terminal devices 1201, 1202, 1203, a network 1204, and a server 1205. The network 1204 is used to provide a medium for communication links between the terminal devices 1201, 1202, 1203 and the server 1205. The network 1204 may include various connection types, such as wired, wireless communication links, or optical fiber cables, etc.
[0105] Users can use terminal devices 1201, 1202, 1203 to interact with server 1205 through network 1204 to receive or send messages, etc. Various communication client applications, such as page generation applications, etc. (only as an example) can be installed on terminal devices 1201, 1202, 1203.
[0106] The terminal devices 1201, 1202, and 1203 may be various electronic devices with display screens and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers, etc. The terminal devices may obtain page layout information of a page to be generated, wherein the page layout information includes a node set 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; according to an adjustment request for the page layout information, determining a relative displacement of the fixed node, and performing relative displacement on the fixed node according to the relative displacement according to the coordinate information of the fixed node; determining a scaling amount of the scaling node according to the relative displacement of the fixed node, and scaling the scaling node according to the scaling amount according to the coordinate information of the scaling node; synchronously updating the page layout information according to the displacement result of the fixed node and the scaling result of the scaling node; determining updated coordinate information of each node in the updated page layout information, performing page rendering according to the updated coordinate information of each node, generating a target page, and other processing.
[0107] The server 1205 may be a server that provides various services, such as a background management server that provides support for page generation performed by users using the terminal devices 1201 , 1202 , and 1203 (only as an example).
[0108] It should be noted that the page generation method provided in the embodiment of the present invention is generally executed by the terminal devices 1201 , 1202 , and 1203 , and accordingly, the page generation apparatus is generally disposed in the terminal devices 1201 , 1202 , and 1203 .
[0109] It should be understood that Fig.12 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.
[0110] Reference below Fig.13 , Fig.13 It is a schematic diagram of the structure of a computer system of a terminal device suitable for implementing an embodiment of the present invention. Fig.13 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.
[0111] like Fig.13 As shown, the computer system 1300 includes a central processing unit (CPU) 1301, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1302 or a program loaded from a storage part 1308 into a random access memory (RAM) 1303. In the RAM 1303, various programs and data required for the operation of the system 1300 are also stored. The CPU 1301, the ROM 1302, and the RAM 1303 are connected to each other through a bus 1304. An input / output (I / O) interface 1305 is also connected to the bus 1304.
[0112] The following components are connected to the I / O interface 1305: an input section 1306 including a keyboard, a mouse, etc.; an output section 1307 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, 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, a modem, etc. The communication section 1309 performs communication processing via a network such as the Internet. A drive 1310 is also connected to the I / O interface 1305 as needed. A removable medium 1311, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 1310 as needed, so that a computer program read therefrom is installed into the storage section 1308 as needed.
[0113] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 1309, and / or installed from the removable medium 1311. When the computer program is executed by the central processing unit (CPU) 1301, the above-mentioned functions defined in the system of the present invention are executed.
[0114] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination thereof.
[0115] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a sequence different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.
[0116] The units involved in the embodiments of the present invention may be implemented by software or hardware. The units described may also be set in a processor, for example, it may be described as: a processor includes: a layout information acquisition module, a layout scaling processing module and a target page generation module.
[0117] Among them, the names of these modules do not constitute a limitation of the modules themselves in certain cases. For example, the target page generation module can also be described as "a module used to determine the updated coordinate information of each node in the updated page layout information, render the page according to the updated coordinate information of each node, and generate a 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 embodiment; or may exist independently and not be assembled into the device. The computer-readable medium carries one or more programs, and when the one or more programs are executed by a device, the device includes: obtaining page layout information of a page to be generated, the page layout information includes a node set 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 node according to the adjustment request for the page layout information, and performing relative displacement on the fixed node according to the relative displacement according to the coordinate information of the fixed node; determining the scaling amount of the scaling node according to the relative displacement of the fixed node, and scaling the scaling node according to the scaling amount according to the coordinate information of the scaling node; synchronously updating the page layout information according to the displacement result of the fixed node and the scaling result of the scaling node; determining the updated coordinate information of each node in the updated page layout information, and performing page rendering according to the updated coordinate information of each node to generate a target page.
[0119] According to the technical solution of the embodiment of the present invention, it has the following advantages or beneficial effects: by obtaining the page layout information of the page to be generated, the page layout information includes the node set 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 for the page layout information, the relative displacement of the fixed node is determined, and according to the coordinate information of the fixed node, the fixed node is relatively displaced according to the relative displacement; according to the relative displacement of the fixed node, the scaling amount of the scaling node is determined, and according to the coordinate information of the scaling node, the scaling node is scaled according to the scaling amount; according to the displacement result of the fixed node and the scaling result of the scaling node, the page layout information is synchronously updated; 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, and the technical solution of generating the target page realizes the generation of an adaptively scaled page based on an absolutely positioned page layout, effectively solving the problem of the inability to adaptively layout in the existing low-code canvas construction page, which not only improves the flexibility of page layout conversion, but also enriches the application scenarios of the existing page construction solutions.
[0120] The specific implementation methods described herein do not constitute limitations on the scope of protection of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention shall be included in the scope of protection of the present invention.
Claims
1. A page generation method, characterized in that: include: Acquire page layout information of a page to be generated, wherein the page layout information includes a node set 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; Determine the relative displacement of the fixed node according to the adjustment request for the page layout information, and perform relative displacement on the fixed node according to the relative displacement 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 scaling amount according to the coordinate information of the scaling node; and synchronously update the page layout information according to the displacement result of the fixed node and the scaling result of the scaling node; 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 a 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: Determine the adjacency relationship between each node according to the coordinate information of each node in the node set; Using each of the nodes as a linked list node, establishing connections 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 the right endpoint 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 of a fixed node or a scaling node.
3. The method according to claim 2, characterized in that Determining the relative displacement of the fixed node according to the received adjustment request for the page layout information includes: Determining a layout adjustment amount from the adjustment request, and obtaining an 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, and in order from left to right, calculating the relative displacement of the fixed node step by step according to the layout adjustment amount and the alignment configuration; In response to the layout adjustment amount being a stretching amount, starting from the right endpoint in the bidirectional multi-link table, the relative displacement of the fixed node is calculated step by step from right to left according to the layout adjustment amount and the alignment configuration.
4. The method according to claim 3, characterized in that Calculating the relative displacement of the fixed node step by step according to the layout adjustment amount and the alignment configuration, including: Determine the fixed nodes involved in the calculation at each level; For each level of fixed nodes involved in the calculation: calculate the corresponding relative displacement according to the layout adjustment amount and the alignment configuration of the fixed nodes involved in the calculation, and use the relative displacement as the theoretical displacement; then backtrack the fixed nodes in the reverse direction of the step-by-step calculation direction to determine whether the theoretical displacement interferes with the position of the fixed node whose relative displacement has been determined at the previous level of the fixed node; based on the determination result, update the theoretical displacement to obtain the relative displacement.
5. The method according to claim 2, characterized in that: Determining a scaling amount of the scaling node according to the relative displacement of the fixed node, and scaling the scaling node according to the scaling amount according to the coordinate information of the scaling node, including: The following operations are performed in a loop 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 a plurality of fixed node pairs, searching for scaling nodes between each of the fixed node pairs from the bidirectional multi-link table, and forming scaling paths from the scaling nodes between the fixed node pairs, thereby obtaining a scaling path set between all fixed node pairs; According to the distance between the nodes of the fixed node pair corresponding to each zoom path in the zoom path set, the zoom amount of each zoom path is calculated, and the target zoom path corresponding to the minimum zoom amount is selected, and the zoom amount of each zoom node in the target zoom path is determined according to the zoom amount of the target zoom path, and according to the coordinate information of each zoom node in the target zoom path, the zoom node is scaled according to the zoom amount of each zoom node, and the scaled zoom node is modified to a fixed node.
6. The method according to claim 1, characterized in that Before determining the scaling amount of the scaling node according to the relative displacement amount of the fixed node, the method further includes: In response to the adjustment request being a compression request, determining a compression width threshold according to a minimum width value of each node in the node set; It is determined 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, a scroll bar is added to the page to be generated, and each of the minimum width values is used as a compression lower limit of the corresponding zoom 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 each node is grouped 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 scaled nodes in turn.
8. The method according to claim 1, characterized in that The method further comprises: The height data of each node in the node set is monitored, and when a change in the height data is detected, the page is re-rendered according to the changed height data in combination with the updated page layout information to generate a target page.
9. A page generating device, characterized in that: include: A layout information acquisition module, used to acquire page layout information of a page to be generated, wherein the page layout information includes a node set 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; A layout zoom processing module, used to determine the relative displacement of the fixed node according to the adjustment request for the page layout information, and relatively displace the fixed node according to the relative displacement according to the coordinate information of the fixed node; determine the zoom amount of the zoom node according to the relative displacement of the fixed node, and zoom the zoom node according to the zoom amount according to the coordinate information of the zoom node; and synchronously update the page layout information according to the displacement result of the fixed node and the zoom result of the zoom node; The target page generation module is used to determine the updated coordinate information of each node in the updated page layout information, perform page rendering according to the updated coordinate information of each node, and generate a target page.
10. A mobile electronic device terminal, characterized in that: include: one or more processors; a 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 according to any one of claims 1 to 8.
11. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 8 is implemented.
12. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the method according to any one of claims 1 to 8 is implemented.
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
Systems and methods for interactively presenting a visible portion of a rendering surface on a user device
US20170039169A1
Page layout adaptive adjustment method, and computing device
WO2023029171A1