Page element layout method and device, electronic equipment and storage medium
By using an adaptive page element layout method, the layout position is determined based on the position and size of the page elements, which solves the problems of element overlap and overflow in the template matching method, and improves layout efficiency and aesthetics.
Patent Information
- Application Number
- CN202411129821.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-08-16
- Publication Date
- 2026-03-03
AI Technical Summary
In current page design, template matching methods cannot effectively consider the semantic information and spatial structure of page elements, resulting in problems such as element overlap and page overflow after beautification. This requires multiple rounds of iterative processing, which is time-consuming and costly.
By obtaining the original layout data of the target page, the page element blocks, their sizes, and layout positions are adaptively determined based on the position, size, and layout structure of the page elements, and the layout is performed directly, avoiding manual preset templates and iterative processing.
It improves the efficiency of page element layout, reduces costs, enhances page aesthetics, and avoids abnormal issues such as element overlap or overflow.
Smart Images
Figure CN121597205A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of computer technology, and in particular to a page element layout method, apparatus, electronic device, and storage medium. Background Technology
[0002] In the process of page design, it is often necessary to lay out page elements to beautify the page. In related technologies, template matching is often used. That is, a library of aesthetically pleasing and standard templates is pre-set manually. During the beautification process, the corresponding preset template is matched according to the statistical classification results of the elements on the page, and then the preset template is applied to the page elements to lay out the page elements.
[0003] However, after applying the template to the page elements, the beautification result may contain errors and often requires multiple rounds of post-processing to deal with unsightly situations such as element overlap and elements overflowing the page caused by the template matching not being able to adapt to the original page. The post-processing process is time-consuming and costly. Summary of the Invention
[0004] Based on this, the purpose of the present invention is to provide a page element layout method, apparatus, electronic device, and storage medium, which have the advantages of improving page element layout efficiency, reducing costs, and enhancing the aesthetics of page layout.
[0005] According to a first aspect of the embodiments of this application, a page element layout method is provided, comprising the following steps:
[0006] Obtain the original layout data of the target page; the original layout data includes the size of the target page, the page layout structure of the target page, the position of each page element in the target page, and the size of each page element;
[0007] Based on the position and size of each page element, as well as the page layout structure of the target page, determine the page element block corresponding to each page element and the size of the page element block.
[0008] Based on the page layout structure of the target page, the size of the target page, and the size of each page element block, determine the first layout position of each page element block on the target page;
[0009] Based on the size of each page element and the size of the page element block corresponding to each page element, determine the second layout position of each page element in the corresponding page element block;
[0010] Based on the first and second layout positions, lay out each page element on the target page.
[0011] According to a second aspect of the embodiments of this application, a page element layout apparatus is provided, comprising:
[0012] The original layout data acquisition module is used to acquire the original layout data of the target page; the original layout data includes the size of the target page, the page layout structure of the target page, the position of each page element in the target page, and the size of each page element.
[0013] The page element block determination module is used to determine the page element block corresponding to each page element and the size of the page element block based on the position of each page element, the size of each page element, and the page layout structure of the target page.
[0014] The first layout position determination module is used to determine the first layout position of each page element block on the target page based on the page layout structure of the target page, the size of the target page, and the size of each page element block.
[0015] The second layout position determination module is used to determine the second layout position of each page element in the corresponding page element block based on the size of each page element and the size of the page element block corresponding to each page element.
[0016] The page element layout module is used to lay out each page element on the target page based on the first layout position and the second layout position.
[0017] According to a third aspect of the embodiments of this application, an electronic device is provided, including: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and executed as a page element layout method as described above.
[0018] According to a fourth aspect of the embodiments of this application, a computer-readable storage medium is provided, on which a computer program is stored, which, when executed by a processor, implements a page element layout method as described in any of the above.
[0019] This application's embodiments obtain the original layout data of the target page. The original layout data includes the target page's size, page layout structure, the position of each page element, and the size of each page element. Based on the position, size, and layout structure of each page element, the corresponding page element block and its size are determined. Based on the page layout structure, size, and size of each page element block, a first layout position for each page element block on the target page is determined. Based on the size and corresponding page element block, a second layout position for each page element is determined. Based on the first and second layout positions, each page element is laid out on the target page. This application can adaptively lay out page elements based on the page layout structure, position, and size of each page element, without disrupting the original layout logic and structure of the target page. It eliminates the need for manual template pre-setting and post-processing iterations, avoiding issues such as element overlap or overflow, improving layout efficiency, reducing costs, and enhancing page aesthetics.
[0020] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application.
[0021] To better understand and implement this invention, the following detailed description is provided in conjunction with the accompanying drawings. Attached Figure Description
[0022] Figure 1 A flowchart illustrating a page element layout method provided in one embodiment of this application;
[0023] Figure 2 A structural block diagram of a page element layout device provided in one embodiment of this application;
[0024] Figure 3 This is a schematic block diagram of the structure of an electronic device provided in one embodiment of this application. Detailed Implementation
[0025] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.
[0026] It should be understood that the described embodiments are merely some, not all, of the embodiments in this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.
[0027] The terminology used in the embodiments of this application is for the purpose of describing particular embodiments only and is not intended to limit the embodiments of this application. The singular forms “a,” “the,” and “the” used in the embodiments of this application and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any or all possible combinations of one or more of the associated listed items.
[0028] In the following description, when referring to the accompanying drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims. In the description of this application, it should be understood that the terms "first," "second," "third," etc., are used only to distinguish similar objects and are not necessarily used to describe a specific order or sequence, nor should they be construed as indicating or implying relative importance. Those skilled in the art can understand the specific meaning of the above terms in this application according to the specific circumstances.
[0029] Furthermore, in the description of this application, unless otherwise stated, "multiple" means two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.
[0030] The page element layout method provided in this application embodiment can be applied to courseware beautification scenarios, web page design scenarios, and document processing scenarios. Taking courseware beautification as an example, for instance, teachers beautify courseware documents such as PPTs and slides. In related technologies, template matching-based beautification methods are often adopted, that is, a library of aesthetically pleasing and standard courseware templates is pre-set manually. During beautification, the corresponding preset template is matched according to the statistical classification results of elements on the courseware page, and then the template is applied to the courseware page for beautification.
[0031] In the process of developing this invention, the inventors discovered that in related technologies, template matching methods cannot take into account higher-level, structured potential information such as semantic information and spatial location structure between page elements on the original courseware page. After beautifying the courseware with templates, it is very easy to destroy the original design intent and layout logic of the courseware page, resulting in a "negative optimization" phenomenon. Furthermore, the beautification scheme based on template matching simply fits the courseware page into the template, and cannot predict the beautification effect. This can lead to unsightly situations such as overlapping page elements and page elements overflowing the page, requiring subsequent fine-tuning and iterative post-processing, resulting in high labor costs, lengthy processes, and increased time consumption.
[0032] Therefore, this application adaptively lays out page elements according to the page layout structure, the position of each page element, and the size of each page element. This does not disrupt the original layout logic and page layout structure of the target page. It does not require manual template pre-setting or post-iteration processing, avoids abnormal issues such as overlapping or overflowing page elements, improves the efficiency of page element layout, reduces costs, and enhances the aesthetics of the page layout.
[0033] Please see Figure 1 This is a flowchart illustrating a page element layout method provided in one embodiment of this application. This application provides a page element layout method, including the following steps:
[0034] S10: Obtain the original layout data of the target page; the original layout data includes the size of the target page, the page layout structure of the target page, the position of each page element in the target page, and the size of each page element.
[0035] The execution subject of the page element layout method can be the page element layout device, which includes, but is not limited to, computers, tablets, and mobile phones.
[0036] The target page is the page whose page elements need to be laid out. Specifically, the target page can be a courseware page, a webpage, or a document processing page.
[0037] Page elements refer to the various basic components that make up a page. They are defined and displayed using technologies such as HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. Page elements constitute the page content, layout, and interactive functions that users see. Page elements include, but are not limited to, text, images, links, tables, buttons, controls, and icons.
[0038] The dimensions of the target page include its width and height.
[0039] The page layout structure of the target page refers to the overall layout structure of the target page, including the top-bottom structure and the left-right structure.
[0040] The position of each page element includes the coordinates of its corresponding reference point. The reference point can be a vertex of the bounding box of the page element. Specifically, the bounding box of a page element is a rectangular region, and the reference point is the top-left vertex of this rectangular region. The coordinates of the reference point for each page element include the x-coordinate and y-coordinate of the top-left vertex, determined with the target page as the reference coordinate system.
[0041] The dimensions of each page element include its width and height.
[0042] The original layout data of the target page also includes the categories of page elements, which include, but are not limited to, first-level headings, second-level headings, body text, and images.
[0043] In this embodiment, the original layout data of the target page can be obtained from the local machine or a server. For example, if the target page is a courseware page displayed on the client, the original layout data of the target page can be obtained from the local client. If the target page is a webpage, the original layout data of the target page can be obtained from the server.
[0044] S20: Determine the page element block and its size corresponding to each page element based on the position and size of each page element and the page layout structure of the target page.
[0045] Each page element block includes at least one page element, and the page elements within the same page element block may overlap in the horizontal or vertical direction.
[0046] Specifically, if the target page has a top-bottom layout, the elements within the same page element block will overlap vertically. If the target page has a left-right layout, the elements within the same page element block will overlap horizontally.
[0047] In this context, horizontal overlap of page elements refers to the intersection of the horizontal coordinate ranges of all points within the area occupied by one page element and the horizontal coordinate ranges of all points within the area occupied by another page element. Vertical overlap of page elements refers to the intersection of the vertical coordinate ranges of all points within the area occupied by one page element and the vertical coordinate ranges of all points within the area occupied by another page element.
[0048] The dimensions of a page element block include its width and height. The width of the page element block is determined by the position and width of the page elements within it, and the height of the page element block is determined by the position and height of the page elements within it.
[0049] S30: Determine the first layout position of each page element block on the target page based on the page layout structure, the size of the target page, and the size of each page element block.
[0050] The first layout position can be the specific page position of the page element block in the target page, or it can be page coordinates, which are determined with the target page as the reference coordinate system.
[0051] The reference point coordinates for the page element block are the vertices of the bounding box corresponding to the page element block. Specifically, the bounding box corresponding to the page element block is a rectangular area, and the reference point is the top-left vertex of the rectangular area. The coordinates of the reference point include the x and y coordinates of the top-left vertex, and are determined with the target page as the reference coordinate system.
[0052] In this embodiment of the application, if the page layout structure of the target page is a top-bottom structure, the first layout position of each page element block on the target page can be determined based on the height of the target page and the height of each page element block.
[0053] If the target page has a left-right layout structure, the first layout position of each page element block on the target page can be determined based on the width of the target page and the width of each page element block.
[0054] S40: Determine the second layout position of each page element in the corresponding page element block based on the size of each page element and the size of the page element block corresponding to each page element.
[0055] The second layout position can be the specific page position of the page element within the corresponding page element block, or it can be page coordinates, which are determined with the page element block corresponding to the page element as the reference coordinate system.
[0056] In this embodiment of the application, if the page layout structure of the target page is a top-bottom structure and there is no horizontal overlap between the page elements in the page element block, the second layout position of each page element in the corresponding page element block can be determined based on the width of each page element and the width of the page element block corresponding to each page element.
[0057] If the target page has a left-right layout structure and there is no vertical overlap between the page elements within the page element block, the second layout position of each page element in the corresponding page element block can be determined based on the height of each page element and the height of the page element block corresponding to each page element.
[0058] S50: Based on the first layout position and the second layout position, lay out each page element on the target page.
[0059] In this embodiment of the application, the layout position of each page element on the target page can be determined based on the first layout position of each page element block relative to the target page and the second layout position of each page element relative to the corresponding page element block, and each page element is laid out in the corresponding layout position.
[0060] By applying the embodiments of this application, the original layout data of the target page is obtained. This original layout data includes the size of the target page, the page layout structure of the target page, the position of each page element in the target page, and the size of each page element. Based on the position, size, and layout structure of each page element, the corresponding page element block and its size are determined. Based on the page layout structure, size, and size of each page element block, a first layout position of each page element block on the target page is determined. Based on the size and size of the corresponding page element block, a second layout position of each page element on the corresponding page element block is determined. Based on the first and second layout positions, each page element is laid out on the target page. This application can adaptively lay out page elements based on the page layout structure, the position, and size of each page element, without disrupting the original layout logic and structure of the target page. It eliminates the need for manual template pre-setting and iterative post-processing, avoiding abnormal issues such as element overlap or overflow, improving page element layout efficiency, and reducing costs.
[0061] In one embodiment, before step S10, steps S101 to S105 are included, as follows:
[0062] S101: Get the position of each page element in the target page, the maximum and minimum coordinates of each page element in the horizontal direction, and the maximum and minimum coordinates of each page element in the vertical direction.
[0063] Here, page elements are denoted as Where n is the total number of page elements excluding first-level headings, x i y i w i h i These are the x-coordinate of the top-left corner, y-coordinate of the top-left corner, width of the bounding box, and height of the bounding box, respectively.
[0064] The page layout structure is determined based solely on page elements other than the first-level headings. Since the position of the first-level headings is relatively fixed and they have preset aesthetic styles, they can be handled independently. Their spatial position does not affect the aesthetics of other page elements, so they are excluded from consideration here.
[0065] In this embodiment of the application, the maximum horizontal coordinate value of each page element is max{x i +w i The minimum horizontal coordinate of each page element is min_x = min{x}. i The maximum vertical coordinate of each page element is max{y}. i +h i The minimum coordinate of each page element in the vertical direction is min_y = min{y} i}
[0066] S102: Determine the maximum layout width of the page element based on the maximum and minimum coordinate values in the horizontal direction; determine the maximum layout height of the page element based on the maximum and minimum coordinate values in the vertical direction.
[0067] In this embodiment of the application, the maximum layout width of the page element is x_width = max{x i +w i}-min_x, the maximum layout height of a page element is y_height=max{y i +h i}-min_y.
[0068] S103: Determine the horizontal layout width and vertical layout height indicators based on the position of each page element, the maximum layout width of the page element, and the maximum layout height of the page element.
[0069] In this embodiment of the application, the horizontal layout width index is The vertical arrangement height index is
[0070] S104: If the horizontal layout width index is greater than or equal to the vertical layout height index, the page layout structure of the target page is determined to be a left-right structure.
[0071] In this embodiment of the application, if index_x >= index_y, the page layout structure of the target page is determined to be a left-right structure.
[0072] S105: If the horizontal layout width is less than the vertical layout height, the page layout structure of the target page is determined to be a top-bottom structure.
[0073] In this embodiment of the application, if index_x < index_y, the page layout structure of the target page is determined to be a top-bottom structure.
[0074] By analyzing the position, width, and height of each page element on the target page, the page layout structure of the target page can be determined automatically and quickly.
[0075] In one embodiment, step S20 includes steps S201 to S202, as follows:
[0076] S201: When the page layout structure of the target page is a top-bottom structure, divide the page elements that overlap in the vertical direction into the same page element block, and take the page elements that do not overlap in the vertical direction as the page element blocks corresponding to the page elements.
[0077] In this embodiment of the application, when the page layout structure of the target page is a top-bottom structure, any two page elements that overlap in the vertical direction are divided into the same page element block.
[0078] Specifically, when the target page has a top-bottom layout, if page element A and page element B overlap vertically, page element A and page element B are assigned to the same page element block 1. If page element B and page element C overlap vertically, but page element A and page element C do not overlap vertically, page element B and page element C are also assigned to page element block 1, thus page element A and page element C are located in the same page element block 1.
[0079] When the target page has a top-bottom layout, if page element A and page element B overlap vertically, and if page element B and page element C do not overlap vertically, and page element A and page element C also do not overlap vertically, then page element C is assigned to page element block 2.
[0080] When the target page has a top-bottom layout, if there is a page element on the target page that does not overlap with any other page element in the vertical direction, then that page element will be treated as a separate page element block.
[0081] S202: Use the size of the smallest rectangle containing all page elements in the page element block as the size of the page element block.
[0082] In this embodiment, if a page element block includes at least two page elements, the size of the smallest rectangle containing at least two page elements is used as the size of the page element block. If a page element block includes only one page element, the size of the page element can be used as the size of the page element block.
[0083] When the target page has a top-bottom layout structure, the page element block and its size can be automatically and quickly determined based on the layout structure, the position of each page element, and the size of each page element.
[0084] In one embodiment, step S20 includes steps S21 to S22, as follows:
[0085] S21: When the page layout structure of the target page is a left-right structure, divide the page elements that overlap horizontally in the target page into the same page element block, and take the page elements that do not overlap horizontally in the target page as the page element blocks corresponding to the page elements.
[0086] In this embodiment of the application, when the page layout structure of the target page is a left-right structure, any two page elements that overlap in the horizontal direction are divided into the same page element block.
[0087] Specifically, when the target page has a left-right layout, if page element D and page element E overlap horizontally, page element D and page element E are assigned to the same page element block 3. If page element E and page element F overlap horizontally, but page element D and page element F do not overlap horizontally, page element E and page element F are also assigned to page element block 3, thus page element D and page element F are located in the same page element block 3.
[0088] When the target page has a left-right layout, if page element D and page element E overlap horizontally, and if page element E and page element F do not overlap horizontally, and page element D and page element F also do not overlap horizontally, then page element F is assigned to page element block 4.
[0089] When the target page has a left-right layout, if there is a page element on the target page that does not overlap with any other page element in the horizontal direction, then that page element will be treated as a separate page element block.
[0090] S22: Use the size of the smallest rectangle containing all page elements in the page element block as the size of the page element block.
[0091] In this embodiment, if a page element block includes at least two page elements, the size of the smallest rectangle containing at least two page elements is used as the size of the page element block. If a page element block includes only one page element, the size of the page element can be used as the size of the page element block.
[0092] When the target page has a left-right layout structure, the page element block and its size can be automatically and quickly determined based on the page layout structure, the position of each page element, and the size of each page element.
[0093] In one embodiment, step S30 includes steps S301 to S304, as follows:
[0094] S301: If the page layout structure of the target page is a top-bottom structure, sum the heights of each page element block to obtain a first summation result; multiply the first summation result by a preset value to obtain a first product result; determine the first minimum value between the first product result and the height of the target page; wherein the first minimum value is the smaller value between the first product result and the height of the target page.
[0095] The process first determines whether the target page contains a first-level heading element. If the target page contains a first-level heading, the page space occupied by the first-level heading is removed, and the remaining page space is used as the layout space that the page element block can use. The height of the remaining page space is then used as the height of the target page. If the target page does not contain a first-level heading, the space occupied by the target page is directly used as the layout space that the page element block can use.
[0096] In this embodiment of the application, the page element block is denoted as The first minimum value is represented as:
[0097]
[0098] Where whitespace_y2-whitespace_y1 represents the height of the target page, h j This indicates the height of the page element block j. C represents a preset value that can be manually set according to actual needs. For example, C is 5 / 4.
[0099] S302: Multiply the first minimum value by the height of each page element block to obtain the second product result; divide the second product result by the first summation result to obtain the first ratio.
[0100] In this embodiment of the application, the first ratio is represented as follows:
[0101]
[0102] S303: Determine the first layout space for each page element block based on the first ratio and the width of the target page.
[0103] In this embodiment of the application, the height of the first layout space of each page element block is the first ratio corresponding to each page element block, and the width of the first layout space of each page element block is the width of the target page.
[0104] S304: The center position of each page element block in the first layout space is taken as the first layout position of each page element block on the target page.
[0105] In this embodiment of the application, each page element block is centered in the corresponding first layout space.
[0106] When the target page has a top-bottom layout structure, the first layout position of each page element block on the target page can be automatically and quickly determined based on the height of the target page and the height of each page element block.
[0107] In one embodiment, step S30 includes steps S31 to S34, as follows:
[0108] S31: If the page layout structure of the target page is a left-right structure, sum the widths of each page element block to obtain a second summation result; multiply the second summation result by a preset value to obtain a third product result; determine the second minimum value between the third product result and the width of the target page; wherein the second minimum value is the smaller value between the third product result and the width of the target page.
[0109] In this embodiment of the application, the page element block is denoted as The second minimum value is represented as:
[0110]
[0111] Where whitespace_x2-whitespace_x1 represents the width of the target page, w j This indicates the width of the page element block j. C represents a preset value that can be manually set according to actual needs. For example, C is 5 / 4.
[0112] S32: Multiply the second minimum value by the width of each page element block to obtain the fourth product result; divide the fourth product result by the second summation result to obtain the second ratio.
[0113] In this embodiment of the application, the second ratio is expressed as:
[0114]
[0115] S33: Determine the second layout space for each page element block based on the second ratio and the height of the target page.
[0116] In this embodiment of the application, the width of the first layout space of each page element block is the second ratio corresponding to each page element block, and the height of the first layout space of each page element block is the height of the target page.
[0117] S34: The center position of each page element block in the second layout space is taken as the first layout position of each page element block on the target page.
[0118] In this embodiment of the application, each page element block is centered in the corresponding second layout space.
[0119] When the target page has a left-right layout structure, the first layout position of each page element block on the target page can be automatically and quickly determined based on the width of the target page and the width of each page element block.
[0120] In one embodiment, step S40 includes steps S401 to S404, as follows:
[0121] S401: If the page layout structure of the target page is a top-bottom structure, and each page element in the page element block does not overlap horizontally, sum the widths of each page element to obtain a third summation result; multiply the third summation result by a preset value to obtain a fifth product result; determine the third minimum value between the fifth product result and the width of the page element block; wherein the third minimum value is the smaller value between the fifth product result and the width of the page element block.
[0122] In this embodiment, if the target page has a top-bottom layout and each page element within the page element block does not overlap horizontally, it indicates that all page elements within the page element block do not form a nested structure, and all page elements within the page element block are arranged from left to right. Therefore, the process of calculating the third minimum value in step S401 is similar to that in step S31, and will not be repeated here.
[0123] S402: Multiply the third minimum value by the width of each page element to obtain the sixth product result; divide the sixth product result by the third summation result to obtain the third ratio.
[0124] In the embodiments of this application, the process of calculating the third ratio in step S402 is similar to that in step S32, and will not be described again here.
[0125] S403: Determine the third layout space for each page element based on the third ratio and the height of the page element block.
[0126] In the embodiments of this application, the width of the third layout space of each page element is the third ratio corresponding to each page element, and the height of the third layout space of each page element is the height of the page element block corresponding to each page element.
[0127] S404: The center position of each page element in the third layout space is taken as the second layout position of each page element in the corresponding page element block.
[0128] In this embodiment of the application, each page element is centered in the corresponding third layout space.
[0129] When the target page has a top-bottom layout structure and each page element within a page element block does not overlap horizontally, the second layout position of each page element in its corresponding page element block can be automatically and quickly determined based on the width of each page element and the width of the page element block it corresponds to.
[0130] In one embodiment, step S40 includes steps S41 to S44, as follows:
[0131] S41: If the target page has a left-right layout structure and each page element in the page element block does not overlap vertically, sum the heights of each page element to obtain the fourth summation result; multiply the fourth summation result by a preset value to obtain the seventh product result; determine the fourth minimum value between the seventh product result and the height of the page element block; wherein the fourth minimum value is the smaller value between the seventh product result and the height of the page element block.
[0132] In this embodiment, if the target page has a left-right layout and each page element within the page element block does not overlap vertically, it indicates that all page elements within the page element block do not form a nested structure, and all page elements within the page element block are arranged in a top-to-bottom order. Therefore, the process of calculating the fourth minimum value in step S41 is similar to that in step S301, and will not be described again here.
[0133] S42: Multiply the fourth minimum value by the height of each page element to obtain the eighth product result; divide the eighth product result by the fourth summation result to obtain the fourth ratio.
[0134] In the embodiments of this application, the process of calculating the third ratio in step S42 is similar to that in step S302, and will not be described again here.
[0135] S43: Determine the fourth layout space for each page element based on the fourth ratio and the width of the page element block.
[0136] In the embodiments of this application, the height of the fourth layout space of each page element is the fourth ratio corresponding to each page element, and the width of the fourth layout space of each page element is the width of the page element block corresponding to each page element.
[0137] S44: The center position of each page element in the fourth layout space is taken as the second layout position of each page element in the corresponding page element block.
[0138] In this embodiment of the application, each page element is centered in the corresponding fourth layout space.
[0139] When the target page has a left-right layout structure and each page element in the page element block does not overlap vertically, the second layout position of each page element in the corresponding page element block can be automatically and quickly determined based on the height of each page element and the height of the page element block corresponding to each page element.
[0140] In one embodiment, step S40 includes steps S405 to S408, as follows:
[0141] S405: If the target page has a top-bottom layout structure and at least two page elements within a page element block overlap horizontally, determine the page element sub-block corresponding to each page element and the size of the page element sub-block.
[0142] Each page element sub-block includes at least one page element, and the page elements within the same page element sub-block may overlap in the horizontal or vertical direction.
[0143] Specifically, if the target page has a top-bottom layout, then the page elements within the same page element block will overlap horizontally. If the target page has a left-right layout, then the page elements within the same page element block will overlap vertically.
[0144] In this embodiment, if the target page has a top-bottom layout and at least two page elements within a page element block overlap horizontally, it indicates that all page elements within the page element block constitute a nested structure. Some page elements within the page element block are arranged from top to bottom, while others are arranged from left to right. The process of determining the page element sub-block and its size for each page element in step S405 is similar to steps S201-S203 and will not be repeated here.
[0145] S406: Determine the third layout position of the corresponding page element sub-block within the corresponding page element block based on the size of the page element block corresponding to each page element and the size of the page element sub-block corresponding to each page element.
[0146] In the embodiments of this application, the process of step S406 is similar to that of steps S301 to S304, and will not be described again here.
[0147] S407: Determine the fourth layout position of each page element in its corresponding page element sub-block based on the size of each page element and the size of each page element sub-block.
[0148] In the embodiments of this application, the process of step S407 is similar to that of steps S401 to S404, and will not be described again here.
[0149] S408: Determine the second layout position of each page element in the corresponding page element block based on the third and fourth layout positions.
[0150] In this embodiment of the application, based on the third layout position of each page element sub-block in the corresponding page element block and the fourth layout position of each page element in the corresponding page element sub-block, the second layout position of each page element in the corresponding page element block can be determined, and each page element is laid out in the corresponding second layout position.
[0151] When the target page has a top-bottom layout structure, and at least two page elements within a page element block overlap horizontally, the second layout position of each page element in the corresponding page element block can be automatically and quickly determined based on the size of each page element, the size of the page element block corresponding to each page element, and the size of the page element sub-block corresponding to each page element.
[0152] In one embodiment, step S40 includes steps S45 to S48, as follows:
[0153] S45: If the target page has a left-right layout structure and at least two page elements within a page element block overlap vertically, determine the page element sub-block corresponding to each page element and the size of the page element sub-block.
[0154] In this embodiment, if the target page has a left-right layout structure and at least two page elements within a page element block overlap vertically, it indicates that all page elements within the page element block constitute a nested structure. Some page elements within the page element block are arranged from top to bottom, while others are arranged from left to right. The process of determining the page element sub-block and its size for each page element in step S45 is similar to steps S201-S203 and will not be repeated here.
[0155] S46: Determine the fifth layout position of the corresponding page element sub-block within the corresponding page element block based on the size of the page element block corresponding to each page element and the size of the page element sub-block corresponding to each page element.
[0156] In the embodiments of this application, the process of step S406 is similar to that of steps S31 to S34, and will not be described again here.
[0157] S47: Determine the sixth layout position of each page element in its corresponding sub-page element block based on the size of each page element and the size of the sub-page element block corresponding to each page element.
[0158] In the embodiments of this application, the process of step S407 is similar to that of steps S41 to S44, and will not be described again here.
[0159] S48: Determine the second layout position of each page element in the corresponding page element block based on the fifth and sixth layout positions.
[0160] In this embodiment of the application, based on the fifth layout position of each page element sub-block in the corresponding page element block and the sixth layout position of each page element in the corresponding page element sub-block, the second layout position of each page element in the corresponding page element block can be determined, and each page element is laid out in the corresponding second layout position.
[0161] When the target page has a left-right layout structure, and at least two page elements within a page element block overlap vertically, the second layout position of each page element in the corresponding page element block can be automatically and quickly determined based on the size of each page element, the size of the page element block corresponding to each page element, and the size of the page element sub-block corresponding to each page element.
[0162] The following are embodiments of the apparatus described in this application, which can be used to execute the methods described in this application. For details not disclosed in the apparatus embodiments of this application, please refer to the methods described in the embodiments of this application.
[0163] Please see Figure 2This illustration shows a structural schematic diagram of the page element layout device provided in an embodiment of this application. The page element layout device 6 provided in an embodiment of this application includes:
[0164] The original layout data acquisition module 61 is used to acquire the original layout data of the target page; the original layout data includes the size of the target page, the page layout structure of the target page, the position of each page element in the target page, and the size of each page element.
[0165] The page element block determination module 62 is used to determine the page element block corresponding to each page element and the size of the page element block based on the position of each page element, the size of each page element and the page layout structure of the target page.
[0166] The first layout position determination module 63 is used to determine the first layout position of each page element block on the target page based on the page layout structure of the target page, the size of the target page, and the size of each page element block.
[0167] The second layout position determination module 64 is used to determine the second layout position of each page element in the corresponding page element block based on the size of each page element and the size of the page element block corresponding to each page element.
[0168] Page element layout module 65 is used to lay out each page element on the target page according to the first layout position and the second layout position.
[0169] By applying the embodiments of this application, the original layout data of the target page is obtained. This original layout data includes the size of the target page, the page layout structure of the target page, the position of each page element in the target page, and the size of each page element. Based on the position, size, and layout structure of each page element, the corresponding page element block and its size are determined. Based on the page layout structure, size, and size of each page element block, a first layout position of each page element block on the target page is determined. Based on the size and size of the corresponding page element block, a second layout position of each page element on the corresponding page element block is determined. Based on the first and second layout positions, each page element is laid out on the target page. This application can adaptively lay out page elements based on the page layout structure, the position, and size of each page element, without disrupting the original layout logic and structure of the target page. It eliminates the need for manual template pre-setting and iterative post-processing, avoiding abnormal issues such as element overlap or overflow, improving page element layout efficiency, and reducing costs.
[0170] The following are embodiments of the device described in this application, which can be used to execute the methods described in the embodiments of this application. For details not disclosed in the embodiments of the device described in this application, please refer to the methods described in the embodiments of this application.
[0171] Please see Figure 3 This application also provides an electronic device 300, which may specifically be a computer, mobile phone, tablet computer, page element layout device, etc. In an exemplary embodiment of this application, the electronic device 300 is a page element layout device, which may include: at least one processor 301, at least one memory 302, at least one display, at least one network interface 303, user interface 304, and at least one communication bus 305.
[0172] The user interface 304 is primarily used to provide an input interface for the user and to acquire user input data. Optionally, the user interface may also include a standard wired interface or a wireless interface.
[0173] The network interface 303 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface).
[0174] The communication bus 305 is used to enable communication between these components.
[0175] The processor 301 may include one or more processing cores. The processor connects to various parts of the electronic device using various interfaces and lines, and performs various functions and processes data by running or executing instructions, programs, code sets, or instruction sets stored in memory, and by calling data stored in memory. Optionally, the processor may be implemented using at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), or Programmable Logic Array (PLA). The processor may integrate one or a combination of several of the following: Central Processing Unit (CPU), Graphics Processing Unit (GPU), and modem. The CPU primarily handles the operating system, user interface, and applications; the GPU is responsible for rendering and drawing the content required for display; and the modem handles wireless communication. It is understood that the modem may also be implemented as a separate chip without being integrated into the processor.
[0176] The memory 302 may include random access memory (RAM) or read-only memory. Optionally, the memory may include a non-transitory computer-readable storage medium. The memory can be used to store instructions, programs, code, code sets, or instruction sets. The memory may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as touch functionality, sound playback functionality, image playback functionality, etc.), instructions for implementing the various method embodiments described above, etc.; the data storage area may store data involved in the various method embodiments described above, etc. The memory may also optionally be at least one storage device located remotely from the aforementioned processor. Figure 3 As shown, a memory, as a computer storage medium, may include an operating system, a network communication module, a user interface module, and operating applications.
[0177] The processor can be used to call the application program that stores the page element layout method in the memory, and specifically execute the method steps of the above embodiment. For the specific execution process, please refer to the detailed description shown in the embodiment, which will not be repeated here.
[0178] This application also provides a computer-readable storage medium storing a computer program thereon, the instructions of which are adapted to be loaded by a processor and executed by the method steps of the embodiments shown above. For details of the execution process, please refer to the specific descriptions shown in the embodiments, which will not be repeated here. The device containing the storage medium can be an electronic device such as a personal computer, laptop computer, smartphone, or tablet computer.
[0179] For the device embodiments, since they basically correspond to the method embodiments, the relevant parts can be referred to in the description of the method embodiments. The device embodiments described above are merely illustrative, wherein the components described as separate parts may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this application according to actual needs. Those skilled in the art can understand and implement this without creative effort.
[0180] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0181] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 The computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function selected in one or more boxes.
[0182] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function selected in one or more boxes.
[0183] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.
[0184] Memory may include non-persistent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.
[0185] Computer-readable media, including both permanent and non-permanent, removable and non-removable media, can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape storage, disk storage, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.
[0186] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.
[0187] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.
Claims
1. A method for laying out page elements, characterized in that, The method includes the following steps: Obtain the original layout data of the target page; the original layout data includes the size of the target page, the page layout structure of the target page, the position of each page element in the target page, and the size of each page element; Based on the position of each page element, the size of each page element, and the page layout structure of the target page, determine the page element block corresponding to each page element and the size of the page element block; Based on the page layout structure of the target page, the size of the target page, and the size of each page element block, determine the first layout position of each page element block on the target page; The second layout position of each page element in the corresponding page element block is determined based on the size of each page element and the size of the page element block corresponding to each page element. Based on the first layout position and the second layout position, each page element is laid out on the target page.
2. The page element layout method according to claim 1, characterized in that: The step of determining the page element block corresponding to each page element and the size of the page element block based on the position of each page element, the size of each page element, and the page layout structure of the target page includes: When the page layout structure of the target page is a top-bottom structure, page elements that overlap in the vertical direction are divided into the same page element block, and page elements that do not overlap in the vertical direction are taken as the page element block corresponding to the page element. The size of the smallest rectangle containing all page elements in the page element block is taken as the size of the page element block.
3. The page element layout method according to claim 1, characterized in that: The step of determining the page element block corresponding to each page element and the size of the page element block based on the position of each page element, the size of each page element, and the page layout structure of the target page includes: When the page layout structure of the target page is a left-right structure, page elements that overlap in the horizontal direction in the target page are divided into the same page element block, and page elements that do not overlap in the horizontal direction in the target page are taken as the page element block corresponding to the page element. The size of the smallest rectangle containing all page elements in the page element block is taken as the size of the page element block.
4. The page element layout method according to claim 1, characterized in that: The step of determining the first layout position of each page element block on the target page based on the page layout structure of the target page, the size of the target page, and the size of each page element block includes: If the page layout structure of the target page is a top-bottom structure, the height of each page element block is summed to obtain a first summation result; the first summation result is multiplied by a preset value to obtain a first product result; a first minimum value is determined between the first product result and the height of the target page; wherein, the first minimum value is the smaller value between the first product result and the height of the target page. Multiply the first minimum value by the height of each page element block to obtain a second product result; divide the second product result by the first summation result to obtain a first ratio. Based on the first ratio and the width of the target page, determine the first layout space for each page element block; The centered position of each page element block in the first layout space is taken as the first layout position of each page element block on the target page.
5. The page element layout method according to claim 1, characterized in that: The step of determining the first layout position of each page element block on the target page based on the page layout structure of the target page, the size of the target page, and the size of each page element block includes: If the page layout structure of the target page is a left-right structure, sum the widths of each page element block to obtain a second summation result; multiply the second summation result by a preset value to obtain a third product result; determine the second minimum value between the third product result and the width of the target page; wherein, the second minimum value is the smaller value between the third product result and the width of the target page; Multiply the second minimum value by the width of each page element block to obtain a fourth product result; divide the fourth product result by the second summation result to obtain a second ratio. Based on the second ratio and the height of the target page, determine the second layout space for each page element block; The centered position of each page element block in the second layout space is taken as the first layout position of each page element block on the target page.
6. The page element layout method according to claim 1, characterized in that: The step of determining the second layout position of each page element in the corresponding page element block based on the size of each page element and the size of the page element block corresponding to each page element includes: If the target page has a top-bottom layout and each page element in the page element block does not overlap horizontally, sum the widths of each page element to obtain a third summation result; multiply the third summation result by a preset value to obtain a fifth product result; determine the third minimum value between the fifth product result and the width of the page element block; wherein the third minimum value is the smaller value between the fifth product result and the width of the page element block; Multiply the third minimum value by the width of each page element to obtain the sixth product result; divide the sixth product result by the third summation result to obtain the third ratio; Based on the third ratio and the height of the page element block, determine the third layout space for each page element; The centered position of each page element in the third layout space is taken as the second layout position of each page element in the corresponding page element block.
7. The page element layout method according to claim 1, characterized in that: The step of determining the second layout position of each page element in the corresponding page element block based on the size of each page element and the size of the page element block corresponding to each page element includes: If the target page has a left-right layout and each page element in the page element block does not overlap vertically, sum the heights of each page element to obtain a fourth summation result; multiply the fourth summation result by a preset value to obtain a seventh product result; determine the fourth minimum value between the seventh product result and the height of the page element block; wherein the fourth minimum value is the smaller value between the seventh product result and the height of the page element block. Multiply the fourth minimum value by the height of each page element to obtain the eighth product result; divide the eighth product result by the fourth summation result to obtain the fourth ratio. Based on the fourth ratio and the width of the page element block, determine the fourth layout space for each page element; The centered position of each page element in the fourth layout space is taken as the second layout position of each page element in the corresponding page element block.
8. The page element layout method according to claim 1, characterized in that: The step of determining the second layout position of each page element in the corresponding page element block based on the size of each page element and the size of the page element block corresponding to each page element includes: If the page layout structure of the target page is a top-bottom structure, and at least two page elements within a page element block overlap horizontally, determine the page element sub-block corresponding to each page element and the size of the page element sub-block; Based on the size of the page element block corresponding to each page element and the size of the page element sub-block corresponding to each page element, determine the third layout position of the corresponding page element sub-block in the corresponding page element block; Based on the size of each page element and the size of the page element sub-block corresponding to each page element, determine the fourth layout position of each page element in the corresponding sub-page element block; Based on the third layout position and the fourth layout position, the second layout position of each page element in the corresponding page element block is determined.
9. The page element layout method according to claim 1, characterized in that: The step of determining the second layout position of each page element in the corresponding page element block based on the size of each page element and the size of the page element block corresponding to each page element includes: If the page layout structure of the target page is a left-right structure, and at least two page elements within the page element block have overlapping positions in the vertical direction, determine the page element sub-block corresponding to each page element and the size of the page element sub-block; Based on the size of the page element block corresponding to each page element and the size of the page element sub-block corresponding to each page element, determine the fifth layout position of the corresponding page element sub-block in the corresponding page element block; Based on the size of each page element and the size of the page element sub-block corresponding to each page element, determine the sixth layout position of each page element in the corresponding sub-page element block; Based on the fifth layout position and the sixth layout position, determine the second layout position of each page element in the corresponding page element block.
10. The page element layout method according to any one of claims 1 to 9, characterized in that: Before the step of obtaining the original layout data of the target page, the following steps are included: Obtain the position of each page element in the target page, the maximum and minimum coordinate values of each page element in the horizontal direction, and the maximum and minimum coordinate values of each page element in the vertical direction; Determine the maximum layout width of the page element based on the maximum and minimum coordinate values in the horizontal direction; determine the maximum layout height of the page element based on the maximum and minimum coordinate values in the vertical direction. Based on the position of each page element, the maximum layout width of the page element, and the maximum layout height of the page element, determine the horizontal layout width index and the vertical layout height index. If the horizontal layout width index is greater than or equal to the vertical layout height index, the page layout structure of the target page is determined to be a left-right structure. If the horizontal layout width index is less than the vertical layout height index, the page layout structure of the target page is determined to be a top-bottom structure.
11. A page element layout device, characterized in that, include: The original layout data acquisition module is used to acquire the original layout data of the target page; The original layout data includes the size of the target page, the page layout structure of the target page, the position of each page element in the target page, and the size of each page element; The page element block determination module is used to determine the page element block corresponding to each page element and the size of the page element block based on the position of each page element, the size of each page element and the page layout structure of the target page. The first layout position determination module is used to determine the first layout position of each page element block on the target page based on the page layout structure of the target page, the size of the target page, and the size of each page element block. The second layout position determination module is used to determine the second layout position of each page element in the corresponding page element block based on the size of each page element and the size of the page element block corresponding to each page element. The page element layout module is used to lay out each page element on the target page according to the first layout position and the second layout position.
12. An electronic device, characterized in that, include: A processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and executed as described in any one of claims 1 to 10.
13. A computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by a processor, the computer program implements the page element layout method as described in any one of claims 1 to 10.