Page layout method, device, equipment and medium

Abstract

The present application provides a page layout method, apparatus, device, and medium. The page layout method includes: obtaining original layout data of a target page, the original layout data including the positions and sizes of multiple page elements on the target page; determining multiple page areas of the target page based on the original layout data, wherein page elements in the same page area are associated page elements; and determining target layout data suitable for the display window based on a display window for displaying the target page, the multiple page areas, and the original layout data. Thus, automatic page layout is achieved, and associated page elements are grouped into the same page area during the automatic layout, preventing significant changes in the positional relationship of associated page elements due to changes in the size of the display window, improving the page display effect after automatic layout, and enhancing the user's browsing experience.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page layout method, apparatus, device, and medium. Background Art

[0002] Page layout is an important part of building data visualization. Convenient layout operations can help users quickly build data report pages. Layout can also arrange related page elements together, making it easier for users to obtain data information in a more centralized manner.

[0003] Currently, users need to browse data report pages on multiple devices, for example, on both mobile phones and computers. Different devices have different display screen sizes, and the same page often requires different layouts on different devices. One layout approach is for front-end developers to prepare page layouts for different devices in advance, which is time-consuming. Another approach is to use automatic layout methods to quickly generate page layouts for other devices based on the page layout of one device.

[0004] The traditional multi-terminal adaptation method for automatic layout mainly crops each element on the page according to the order of elements. However, under this scheme, the positional relationship of the associated page elements in the wide-screen layout will change significantly in the narrow-screen layout, resulting in the user being unable to perceive the relationship between the page elements through the positional relationship of the page elements in the narrow screen, which in turn leads to a poor page browsing experience for users on the narrow screen. Summary of the Invention

[0005] The present application provides a page layout method, apparatus, device, and medium to solve the problem of significant changes in the positional relationship of page elements in automatic page layout, resulting in a poor user browsing experience.

[0006] In a first aspect, an embodiment of the present application provides a page layout method, comprising: obtaining original layout data of a target page, the original layout data including positions and sizes of multiple page elements on the target page; determining multiple page areas of the target page based on the original layout data, wherein page elements in the same page area are associated page elements; determining target layout data suitable for the display window based on a display window for displaying the target page, multiple page areas and the original layout data; and displaying the target page in the display window based on the target layout data.

[0007] In a second aspect, an embodiment of the present application provides a page layout device, comprising: an acquisition unit, for acquiring original layout data of a target page, the original layout data including positions, sizes and identifiers of multiple page elements on the target page; an area determination unit, for determining multiple page areas of the target page based on the original layout data, wherein page elements in the same page area are associated page elements; a layout determination unit, for determining target layout data suitable for a display window based on a display window for displaying the target page, multiple page areas and the original layout data; and a display unit, for displaying the target page in the display window based on the target layout data.

[0008] In a third aspect, an embodiment of the present application provides an electronic device comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the electronic device to execute the page layout method provided in any one of the first aspects of the present application.

[0009] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the page layout method provided in any one of the first aspects of the present application.

[0010] In an embodiment of the present application, multiple page areas of the target page are determined based on the original layout data of the target page, and page elements in the same page area are associated page elements; then, based on the display window of the target page, the multiple page areas, and the original layout data, target layout data suitable for the display window is determined, thereby achieving an adaptive layout of the target page in the display window; then, based on the target layout data, the target page is displayed in the display window. Therefore, by dividing the associated page elements into the same page area, a significant change in the positional relationship of the originally associated page elements after the adaptive layout is avoided, allowing the user to still perceive the relationship between the page elements based on the positional relationship of the page elements after the adaptive layout, thereby improving the page layout effect and enhancing the user browsing experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0012] Figure 1 Example of page layout Figure 1 ;

[0013] Figure 2 Example of page layout Figure 2 ;

[0014] Figure 3 A schematic diagram of a scenario of a page layout method provided in an embodiment of the present application;

[0015] Figure 4 Schematic diagram of the page layout method provided in this embodiment of the application Figure 1 ;

[0016] Figure 5 Schematic diagram of the page layout method provided in this embodiment of the application Figure 2 ;

[0017] Figure 6 A schematic diagram of a process for segmenting a target page in a page layout method according to an embodiment of the present application;

[0018] Figure 7 A schematic diagram of a flow chart of performing row segmentation on a target area in the Nth segmentation in the page layout method provided in an embodiment of the present application;

[0019] Figure 8 An example diagram of a page with adaptive layout in the page layout method provided in an embodiment of the present application;

[0020] Figure 9 A schematic diagram of a flow chart of performing row segmentation on a first region in the Nth segmentation in the page layout method provided in an embodiment of the present application;

[0021] Figure 10 Schematic diagram of the page layout method provided in this embodiment of the application Figure 3 ;

[0022] Figure 11 A schematic diagram of a process for adjusting the position and size of a target node in a page layout method provided in an embodiment of the present application;

[0023] Figure 12 A structural block diagram of a page layout device provided in an embodiment of the present application;

[0024] Figure 13 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application.

[0025] The above drawings illustrate specific embodiments of the present application, which will be described in more detail below. These drawings and the textual description are not intended to limit the scope of the present application in any way, but rather to illustrate the concepts of the present application to those skilled in the art by reference to specific embodiments. DETAILED DESCRIPTION

[0026] To make the purpose, technical solutions, and advantages of the embodiments of this application more clear, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the described embodiments are part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0027] The terms "first," "second," "third," and the like in the specification and claims of this application and the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a particular order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate, such that the embodiments of the application described herein can be practiced in orders other than those illustrated or described herein.

[0028] In addition, the terms "comprise" and "have" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or apparatus that includes a series of steps or modules is not necessarily limited to those steps or modules explicitly listed, but may include other steps or modules not explicitly listed or inherent to such process, method, product or apparatus.

[0029] First, some of the terms used in the embodiments of this application are explained:

[0030] Page: can be a World Wide Web (Web), such as a Web page written based on HyperText Markup Language (HTML), or can also be a client native page.

[0031] Page elements: Also known as page elements, they refer to the information displayed on a page, such as images, text, tables, audio, and video. During page construction, front-end developers can define the content displayed by page elements, their location, and their dimensions.

[0032] On a wide screen, developers can arrange page elements related to the displayed data together, allowing users to perceive the relationship between page elements through their positional relationships. When the screen becomes narrower, that is, the page display window becomes smaller, the page elements on the page need to be rearranged to adapt to the changed display window. Layout method one is to scale the page elements proportionally based on the size ratio before and after the display window changes. This method will cause the page elements to be too small, which is not conducive to viewing and user interaction with the page elements. Layout method two is to crop the page elements in order of their position on the page, and then rearrange the cropped page elements in the narrowed display window based on this positional order. In this method, originally related page elements may be inserted with unrelated elements after rearrangement, that is, the originally related page elements are separated, resulting in the user being unable to perceive the relationship between the page elements through their positional relationships. Layout method three is to move down the page elements that exceed the display window one by one. This method will also cause the related page elements to be separated. The following are examples for layout methods one and two:

[0033] As an example, Figure 1 Example of page layout Figure 1 Among them, Figure 1 In the figure, (a) is the data report page under the original layout, (b) is the data report page obtained by using layout mode 1 after the display window is narrowed, and (c) is the data report page obtained by using layout mode 2 after the display window is narrowed. Figure 1 As shown, the datagram page under the original layout includes page elements A, B, C, D, E, and F. After adopting layout method 1, the size of these page elements is significantly reduced, which is not conducive to users viewing the content displayed by the page elements and interacting with the page elements. After adopting layout method 2, page element E is inserted between the originally associated page elements C and D. The user cannot perceive the association between page elements C and D based on the positional relationship between page elements C and D in (c).

[0034] As an example, Figure 2 Example of page layout Figure 2 .like Figure 2 As shown, in the data report page under the wide screen, page element one and page element two are positioned adjacent to each other and the displayed data are related. The user can perceive the correlation between page element one and page element two through the positional relationship between page element one and page element two; in the data report page under the narrow screen, page element three is inserted between page element one and page element two, and the user cannot perceive the correlation between page element one and page element two through the positional relationship between page element one and page element two.

[0035] In order to solve the above problems, an embodiment of the present application proposes a page layout method. In this method, based on the original layout data of the page, multiple page areas of the page are determined, and the page elements in the same page area are associated page elements; based on the display window for displaying the page, multiple page areas and the original layout data, the layout data suitable for the display window is determined, and then based on the layout data, the page is displayed in the display window. Thus, by dividing the associated page elements into the same page area by arranging the page, it is ensured that the page elements in the same page area (that is, the page elements associated in the original layout data) are arranged together as much as possible, so that after the page is adaptively laid out, the user can still perceive the association between the page elements based on the position arrangement of the page elements.

[0036] For example, Figure 3 A schematic diagram of a scenario of a page layout method provided in an embodiment of the present application, such as Figure 3 As shown, when a user accesses a target page on a terminal, the terminal needs to obtain the original layout data of the target page from the server, perform adaptive layout based on the original layout data of the target page, and finally display the target page after adaptive layout. Figure 3 Take the terminal as a mobile phone as an example.

[0037] Among them, the process of adaptive layout of the target page includes: obtaining the original layout data of the target page; determining multiple page areas of the target page based on the original layout data of the target page; determining target layout data suitable for the display window based on the display window, page area and original layout data used to display the target page; and displaying the target page in the display window according to the target layout data.

[0038] like Figure 3 As shown, when determining the page layout, page elements within the same page layout are considered associated elements. For example, associated page elements A and B are located in the same page area. After adaptive layout, page elements A and B are still arranged in the same page area. For another example, associated page elements C and E are located in the same page area. After adaptive layout, page elements C and E are still arranged in the same page area and are not separated. Users can perceive the association between page elements C and E based on the target page after adaptive layout.

[0039] The above is only an exemplary application scenario, and the arrangement order of the above page elements is also only an exemplary arrangement. The embodiment of the present application can be applied to any page display scenario on the Internet, such as application page display scenario, Web page display scenario, etc.

[0040] The technical solution of the present application is described in detail below through specific embodiments. It should be noted that the following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0041] It should be noted that the method execution subject of the embodiment of the present application is an electronic device, and the electronic device is, for example, a terminal. The terminal can be a personal digital assistant (PDA) device, a handheld device with wireless communication function (such as a smart phone, a tablet computer), a computing device (such as a personal computer (PC)), a vehicle-mounted device, a wearable device (such as a smart watch, a smart bracelet), a smart home device (such as a smart display device), etc.

[0042] refer to Figure 4 , Figure 4 Schematic diagram of the page layout method provided in this embodiment of the application Figure 1 The present application provides a page layout method, which specifically includes the following steps:

[0043] S401: Acquire original layout data of the target page.

[0044] The target page is the page to be adaptively laid out, and the display window used to display the target page is smaller than the original page size of the target page. The original page size refers to the page size reflected by the original layout data of the target page, that is, the page size of the target page before scaling and / or cropping.

[0045] The original layout data for the target page includes attribute information for multiple page elements on the target page. This attribute information includes the position and size of the page elements, and can be designed by front-end developers with full consideration of the relationships between page elements. For example, in the original layout data, page elements displaying related content are arranged in the same column or row.

[0046] Optionally, in the original layout data, the attribute information of the page element may also include the content displayed by the page element and the page element identifier. The content displayed by the page element may be displayed when the target page is displayed. For example, the content displayed by the page element may be an image or text displayed by the page element. The page element identifier is unique and is used to distinguish page elements.

[0047] In this embodiment, the original layout data of the target page can be obtained locally or from the server. For example, when the target page is a web page, the original layout data of the target page can be obtained from the server; when the target page is a client-native page, the original layout data of the target page can be obtained locally.

[0048] Optionally, in response to a request to access a target page, the original layout data of the target page is obtained. For example, when a user enters the URL of the target page to access the target page, the original layout data of the target page is obtained. This improves the layout effect of the page when the user accesses the page.

[0049] Optionally, upon detecting a size change in the display window used to display the target page, the original layout data of the target page is obtained. For example, upon detecting that the user has reduced the size of the browser window, the original layout data of the page displayed in the browser window is obtained to promptly adapt the layout of the page to the size change of the display window containing the page. The size change of the display window includes an increase in the size of the display window and / or a decrease in the size of the display window, with the changed size of the display window being smaller than the original size of the target page.

[0050] S402: Determine multiple page areas of the target page according to the original layout data, and the page elements in the same page area are associated page elements.

[0051] Among the multiple page areas, at least one page area includes at least two page elements. Different page areas may overlap or not overlap.

[0052] In this embodiment, after obtaining the original layout data of the target page, since the original layout data includes the positions and sizes of multiple page elements on the target page, the original layout data can reflect the position distribution of multiple page elements on the target page. Based on the position distribution of multiple page elements reflected by the original layout data, the association relationship between the multiple page elements can be determined. Based on the association relationship between the multiple page elements, multiple page areas of the target page are determined, so that the page elements within the same page area are associated page elements.

[0053] Optionally, based on the positions and sizes of the multiple page elements on the target page, the multiple page elements are clustered, and multiple page regions of the target page are determined based on the clustering results. Thus, the association relationship between the page elements is determined by clustering, thereby improving the accuracy of page region division.

[0054] In this optional approach, when clustering, adjacent page elements on the target page can be grouped into the same category. Alternatively, adjacent page elements on the target page whose size similarity exceeds a similarity threshold can be grouped into one category. When determining page regions, the union of all page elements in each category can be determined as the page region corresponding to each category, thereby obtaining multiple page regions. Size similarity includes at least one of the following: height similarity, width similarity, and shape similarity.

[0055] In addition to the clustering method, other methods can also be used to determine the page area. Optionally, a condition for determining whether two page elements are associated can be pre-set. When determining the page area, the original layout data can be used to determine whether the two page elements meet the association condition in turn. If the two page elements meet the association condition, the two page elements are determined to be a pair of associated page elements, thus obtaining multiple associated page elements, and then determining the page area containing the multiple associated page elements based on the positions and sizes of the multiple associated page elements.

[0056] Wherein, in the case where the size of the page elements includes the height and width of the page elements, the association condition may include at least one of the following: the positions of the page elements are parallel and the widths of the page elements are consistent, or the page elements are side by side and the heights of the page elements are consistent. Figure 3 For example, first judge page element A and page element B, determine that page element A and page element B meet the association condition of "page elements are side by side and the heights of page elements are consistent", and determine that page element A and page element B are associated page elements. Then judge page element C and page element E, determine that page element C and page element E meet the association condition of "page elements are positioned side by side and the widths of page elements are consistent", and determine that page element C and page element E are associated page elements.

[0057] S403: Determine target layout data suitable for the display window according to the display window for displaying the target page, the multiple page areas, and the original layout data.

[0058] The display window for displaying the target page may be, for example, a browser window for displaying the target page; or, for example, a display area occupied by a client application to which the target page belongs on a terminal.

[0059] The target layout data includes the adjusted positions and sizes of multiple page elements on the target page.

[0060] In this embodiment, in an adaptive layout, the size of the page area is subject to the constraints of the size of the display window, and the size of the page elements in the page area is subject to the constraints of the size of the page area. Therefore, the page area can be position-adjusted and / or resized (such as size cropping) within the scope of the display window used to display the target page. The page elements in the page area can be position-adjusted and / or resized within the page area after position-adjustment and / or resizing, so as to ensure that the page elements in the same page area remain in the same page area and no irrelevant page elements are inserted. Ultimately, the target layout data suitable for the display window is obtained. Among them, the position adjustment and size adjustment here are both performed on the basis of the original layout data to improve the rationality of the position adjustment and size adjustment.

[0061] S404: Display the target page in the display window according to the target layout data.

[0062] In this embodiment, according to the positions and sizes of the multiple page elements in the target layout data, the multiple page elements on the target page are rendered in the display window to complete the display of the target page. Here, there is no restriction on the rendering operation of the page elements.

[0063] In an embodiment of the present application, by dividing the page into regions and assigning related page elements to the same page region, it is ensured that irrelevant page elements will not be inserted between related page elements in the original layout data after adaptive layout, so that after the page is adaptively laid out, the user can still perceive the relationship between the page elements based on the position arrangement of the page elements, thereby improving the page layout effect.

[0064] Based on the above embodiment, in addition to clustering and pre-setting association conditions, the target area can also be determined by row segmentation and / or column segmentation. For details, please refer to Figures 5 to 9 The embodiment shown.

[0065] Reference Figure 5 , Figure 5 Schematic diagram of the page layout method provided in this embodiment of the application Figure 2 .like Figure 5 As shown, the page layout method specifically includes the following steps:

[0066] S501: Acquire original layout data of the target page.

[0067] The implementation principle and technical effects of S501 may refer to the aforementioned embodiments and will not be described in detail.

[0068] S502 : Based on the original layout data, perform row segmentation and / or column segmentation on the target page to obtain a plurality of page regions, where the page regions include row regions and / or column regions.

[0069] Among them, the row area is the page area obtained by dividing the target page into rows, and the column area is the page area obtained by dividing the target page into columns. Row segmentation refers to segmentation by rows, such as segmentation based on one or more row positions. The row position can be the row number of the page, or the page can be regarded as a two-dimensional coordinate system, and the Y coordinate in the two-dimensional coordinate system is used to represent the row position. Column segmentation refers to segmentation by columns, such as segmentation based on one or more column positions. The column position can be the column number of the page, or the page can be regarded as a two-dimensional coordinate system, and the X coordinate in the two-dimensional coordinate system is used to represent the column position.

[0070] In this embodiment, considering that page elements arranged side by side (i.e., in the same row or line) are likely to be associated page elements and that the original layout data can reflect the distribution of page elements in row positions, the positions and sizes of the page elements in the original layout data can be traversed, and based on the positions and sizes of the page elements, the target page can be segmented into rows to obtain row regions. And / or, considering that page elements arranged side by side (i.e., in the same column) are likely to be associated page elements and that the original layout data can reflect the distribution of page elements in column positions, the positions and sizes of the page elements in the original layout data can be traversed, and based on the positions and sizes of the page elements, the target page can be segmented into columns to obtain column regions.

[0071] Optionally, when the target page is divided into rows, it can be determined based on the position and size of the page elements in the original layout data whether there is any intersection (i.e., overlap) between two page elements in the row where the target page is located. If so, it is determined that the two page elements belong to the same row area, thus determining one or more row areas; when the target page is divided into columns, it can be determined based on the position and size of the page elements in the original layout data whether there is any intersection between two page elements in the column where the target page is located. If so, it is determined that the two page elements belong to the same column area, thus determining one or more column areas.

[0072] S503: Determine target layout data suitable for the display window according to the display window for displaying the target page, multiple page areas, and original layout data.

[0073] S504: Display the target page in the display window according to the target layout data.

[0074] The implementation principles and technical effects of S503 and S504 can be referred to the aforementioned embodiments and will not be described in detail.

[0075] In an embodiment of the present application, the target page is segmented into rows and / or columns by utilizing the characteristic that side-by-side and / or parallel page elements have a high probability of being associated page elements, thereby obtaining multiple page areas of the target page, improving the accuracy of the page area division, and making the associated page elements fall more accurately within the same page area, thereby improving the accuracy of the page adaptive layout.

[0076] based on Figure 5 In the embodiment shown, in some embodiments, the number of times the target page is segmented is greater than or equal to 1. Based on this, an optional embodiment of page segmentation is provided below.

[0077] refer to Figure 6 , Figure 6 This is a flow chart of a target page segmentation process in the page layout method provided in an embodiment of the present application. The target page segmentation process specifically includes the following steps:

[0078] S601, determining a target area to be segmented for the Nth time, where the target area includes multiple page elements;

[0079] The target region to be segmented for the Nth time refers to the page region to be segmented during the Nth segmentation process of the target page. Since segmentation is necessary only for a page region containing at least two page elements, the target region must be a page region containing multiple page elements. There can be one or more target regions. If there are multiple target regions, each target region can be segmented by row and / or column to obtain row regions and / or column regions within each target region.

[0080] In this embodiment, when N is equal to 1, since the target page has not been segmented into regions, the target region can be determined to be the target page; when N is greater than 1, the target region can be determined to be the page region obtained by the last segmentation (i.e., the N-1th time) and containing multiple page elements. When the page region includes row regions and / or column regions, further, the target region can be determined to be the row region and / or column region obtained by the last segmentation and containing multiple page elements.

[0081] S602: Determine the position order of the page elements in the target area, the positions of the page elements in the target area, and the sizes of the page elements in the target area according to the original layout data.

[0082] In this embodiment, the position and size of the target area are known. The positions and sizes of the page elements in the target area can be obtained from the original layout data. The page elements in the target area are then sorted from left to right and from top to bottom to determine the position order of the page elements in the target area. That is, the page element in the upper left corner of the target area is the first page element in the target area. The second page element, the third page element, and so on are then determined in order from left to right and from top to bottom.

[0083] S603 : Segment the target area into rows and / or columns according to the position sequence, position, and size of the page elements in the target area to obtain row areas and / or column areas in the target area.

[0084] In this embodiment, the page elements in the target area are traversed in sequence according to the position order of the page elements in the target area. The row area and / or column area related to the traversed page elements can be determined in the target area according to the position and size of the traversed page elements. In this way, the Nth segmentation of the target page is completed. If the target page is segmented only once, N is equal to 1. Subsequently, the target layout data suitable for the display window can be determined based on the display window of the target page, the row area and / or column area obtained by the segmentation, and the original layout data; if the target page is segmented multiple times, N is greater than or equal to 1. The row area and / or column area obtained by the Nth segmentation can be determined as the target area to be segmented in the next segmentation. In this way, the segmentation of the target page is iteratively performed until the segmentation of the target page meets the preset segmentation conditions. Among them, the preset segmentation conditions may include one or more of the following: N is greater than or equal to a preset number threshold (that is, if N is greater than or equal to the preset number threshold, the segmentation of the target page is terminated), and the row area and / or column area obtained after N segmentations only contains one page element (that is, if the row area and / or column area obtained after the Nth segmentation only contains one page element, the segmentation of the target page is terminated).

[0085] When performing row segmentation on the target area, the first row area can be determined based on the first page element in the target area. A determination is made as to whether the second page element in the target area should belong to the first row area. If so, the position and size of the first row area are updated so that the first row area encompasses the first and second page elements. Otherwise, a second row area is determined based on the second page element. In this manner, each page element is traversed sequentially to obtain one or more row areas.

[0086] When splitting the target area into columns, the first column area can be determined based on the first page element in the target area. A determination is made as to whether the second page element in the target area should belong to the first column area. If so, the position and size of the first column area are updated so that the first column area encompasses the first and second page elements. Otherwise, the second column area is determined based on the second page element. In this way, each page element is traversed sequentially to obtain one or more column areas.

[0087] When performing row and column segmentation on the target area, you can first perform row segmentation and then column segmentation, or you can first perform column segmentation and then row segmentation. For row segmentation and column segmentation, refer to the above description.

[0088] In an optional embodiment, when column segmentation is performed first and then row segmentation, the target area can be segmented into rows to obtain one or more row areas, and the row areas containing multiple page elements in the one or more row areas can be segmented into columns. When column segmentation is performed first and then row segmentation, the target area can be segmented into columns to obtain one or more column areas, and the column areas containing multiple page elements in the one or more column areas can be segmented into rows. Thus, by combining row segmentation and column segmentation in this way, the accuracy of page area division is improved, thereby improving the page adaptive layout effect.

[0089] In this optional embodiment, considering that the degree of association of page elements in the same row is usually lower than that of page elements in the same column during page layout, for example Figure 2 The correlation between page elements 1 and 3 in the same row is lower than the correlation between page elements 1 and 2 in the same column. Therefore, performing row segmentation first and then column segmentation can more accurately divide related page elements into the same page area, stratifying the correlation from lowest to highest. Therefore, performing row segmentation first and then column segmentation is more effective than performing column segmentation first and then row segmentation.

[0090] Based on first row segmentation and then column segmentation, such as Figure 6 As shown, S603 includes:

[0091] S6031. Segment the target area into rows according to the position sequence, position, and size of the page elements in the target area to obtain a first region, where the first region is a row region in the target area.

[0092] In this embodiment, when performing row segmentation on a target area, the position and size of the first row area can be determined based on the position and size of the first page element in the target area. Based on the position and size of the first row area and the position of the second page element, it is determined whether the second page element in the target area should belong to the first row area. If so, the position and size of the first row area are updated so that the first row area includes the second page element in addition to the first page element. Otherwise, the position and size of the second row area are determined based on the position and size of the second page element. In this manner, each page element is traversed sequentially to obtain one or more row areas, i.e., one or more first areas.

[0093] S6032: If the first region contains multiple page elements, the first region is divided into columns according to the position sequence, position, and size of the page elements in the first region to obtain a second region, which is a column region in the target region.

[0094] Among them, the position order of page elements in the first area is determined from left to right and from top to bottom, wherein the page element in the upper left corner of the first area is the first page element, the page element adjacent to the right of the first page element is the second page element, and so on.

[0095] In this embodiment, after the target area is segmented into rows, it is only necessary to continue segmenting the first area containing multiple page elements obtained by the row segmentation. Therefore, if the first area contains multiple page elements, that is, in the first area obtained by column segmentation of the target area, if there is a first area containing multiple page elements, column segmentation is performed on the first area containing multiple page elements. When the first area is segmented into columns, the position and size of the first column area in the first area can be determined based on the position and size of the first page element in the first area; based on the position and size of the first column area and the position of the second page element, it is determined whether the second page element in the target area should belong to the first column area. If so, the position and size of the first column area are updated so that the first column area also wraps the second page element in addition to the first page element. Otherwise, the position and size of the second column area are determined based on the position and size of the second page element. In this way, each page element is traversed in turn to obtain one or more column areas, that is, one or more second areas.

[0096] In this way, the Nth segmentation of the target page is completed. If the target page is segmented only once, N is equal to 1, and the target layout data suitable for the display window can be determined based on the display window of the target page, the row area and / or column area obtained by the segmentation, and the original layout data; if the target page is segmented multiple times, N is greater than or equal to 1, and the column area obtained by the Nth segmentation can be determined as the target area to be segmented in the next segmentation. In this way, the segmentation of the target page is iteratively performed until the segmentation of the target page meets the preset segmentation conditions. Among them, the preset segmentation conditions may include one or more of the following: N is greater than or equal to a preset number threshold (that is, if N is greater than or equal to the preset number threshold, the segmentation of the target page is terminated), and the column area obtained after N segmentations contains only one page element (that is, if the column area obtained by the Nth segmentation contains only one page element, the segmentation of the target page is terminated).

[0097] In some embodiments, the position of the page element includes the row position of the page element, and the size of the page element includes the height of the page element. Figure 7 As shown, the process of performing row segmentation on the target area in the Nth segmentation may include:

[0098] S701: Determine the Mth page element to be divided in the target area based on the position sequence of the page elements in the target area.

[0099] The position order of the page elements in the target area may refer to the aforementioned embodiment and will not be described in detail.

[0100] In this embodiment, according to the position sequence of the page elements in the target area, the first page element, the second page element, ... in the target area can be determined in sequence as the first page element to be divided, the second page element to be divided, ... respectively.

[0101] S702: Is M equal to 1?

[0102] In this embodiment, M is a positive integer. When M is equal to 1, that is, when the Mth page element is the first page element in the target area, there is no row area in the target area, and the first row area needs to be determined directly based on the first page element, so S703 is executed. When M is not equal to 1 (that is, M is greater than 1), there is at least one row area in the target area, and the row association relationship between the Mth page element and the row area in the target area needs to be determined, that is, the row association relationship between the Mth page element and the page element arranged before the Mth page element in the target area needs to be determined, so S704 is executed.

[0103] S703 : Determine a first row area in the target area according to the row position of the Mth page element, the height of the Mth page element, and the target area, and the first row area wraps the Mth page element.

[0104] In this embodiment, when M is equal to 1, the row position of the Mth page element can be determined as the row position of the first row area, the height of the Mth page element can be determined as the height of the first row area, the column position of the target area can be determined as the column position of the first row area, and the width of the target area can be determined as the width of the first row area. In this way, the first row area is obtained.

[0105] Optionally, the row position of the page element is the upper side position and / or lower side position of the page element. In this case, the upper side position of the Mth page element can be determined as the upper side position of the first row area, and / or the lower side position of the Mth page element can be determined as the lower side position of the first row area.

[0106] Optionally, the column position of the target area includes the left edge position and / or right edge position of the target area. In this case, the left edge position of the target area can be determined as the left edge position of the first row area, and / or the right edge position of the target area can be determined as the right edge position of the first row area.

[0107] S704: Determine, based on the row position of the Mth page element, whether there is a row association relationship between the Mth page element and the target row area.

[0108] The target row region includes the row region of the M-1th page element in the target region obtained in the Nth segmentation. For example, when M=2, the target row region includes the row region of the first page element in the target region obtained in the Nth segmentation, including the first row region in the target region.

[0109] Optionally, the target row region includes multiple row regions in the target region in the Nth segmentation, where the multiple row regions include a row region that wraps at least one page element located before the Mth page element. For example, when M=3, the target row region includes a row region that wraps the first page element in the target region and / or a row region that wraps the second page element in the target region.

[0110] In this embodiment, when M is greater than 1, and when the position and size of the target row area are known, it can be determined based on the row positions of the M page elements whether the Mth page element and the target row area overlap in row. If the Mth page element and the target row area overlap in row (that is, the local area in the Mth page element and the local area in the target row area fall at the same row position, for example, the Mth page element and the target row area are side by side in the target area), it is determined that the Mth page element and the target row area have a row association relationship, and S705 can be executed. Otherwise, it is determined that the Mth page element and the target row area do not have a row association relationship, and S706 can be executed.

[0111] The Mth page element has a row association relationship with the target row area, which is equivalent to the Mth page element having a row association relationship with the page elements in the target row area.

[0112] Optionally, the row position of the page element includes the upper side position of the page element, and the row position of the target row area includes the upper side position of the target row area. In this case, determining whether a row association relationship exists between the Mth page element and the target row area includes: determining whether the upper side position of the Mth page element is greater than or equal to the upper side position of the target row area and less than or equal to the sum of the upper edge position of the target row area and the height of the target row area (i.e., the lower edge position of the target row area). If the upper side position of the Mth page element is greater than or equal to the upper side position of the target row area and less than or equal to the sum of the upper edge position of the target row area and the height of the target row area, then it can be determined that a row association relationship exists between the Mth page element and the target row area. This improves the accuracy of row association determination.

[0113] In this optional method, if the top edge position of the Mth page element is greater than or equal to the top edge position of the target row area, it indicates that the top edge position of the Mth page element is located below the top edge position of the target row area. If the top edge position of the Mth page element is less than or equal to the sum of the top edge position of the target row area and the height of the target row area, it indicates that the top edge position of the Mth page element is located above the bottom edge position of the target row area. Therefore, if the top edge position of the Mth page element is greater than or equal to the top edge position of the target row area and the top edge position of the Mth page element is less than or equal to the sum of the top edge position of the target row area and the height of the target row area, it indicates that the Mth page element and the target row area overlap in terms of row, and it can be determined that the Mth page element and the target row area have a row association relationship.

[0114] Of course, in addition to the comparison based on the upper side position, the row association relationship between the page element and the target row area can also be determined based on the lower side position of the page element, which will not be described in detail here.

[0115] S705: Update the target row area, and the updated target row area wraps the Mth page element.

[0116] In this embodiment, when there is a row association relationship between the Mth page element and the target row area, since the column position of the target row area is the column position of the target area, and the width of the target row area is the width of the target area, that is, the width of the target row area is already the maximum width that the target area can accommodate, and the column position of the target row area is also the limit that the target area can accommodate, so the column position and width of the target row area do not need to be adjusted. The target row area can be updated by adjusting the row position and / or height of the target row area. Therefore, in addition to the page elements located in the target row area before the update, the Mth page element is also located in the target row area after the update.

[0117] Optionally, when the row position of a page element includes the top position of the page element, and the row position of the target row area includes the top position of the target row area, updating the target row area includes: determining the minimum top position among the top positions of all page elements in the target row area and the top position of the Mth page element, determining the maximum bottom position among the bottom positions of all page elements in the target row area (which can be determined based on the top position and height) and the bottom position of the Mth page element, and updating the height of the target row area to the difference between the maximum bottom position and the minimum top position. Thus, the updated target row area includes the Mth page element, and the updating complexity of the target row area is reduced.

[0118] S706 : Determine the next row area according to the row position of the Mth page element, the height of the Mth page element, and the target area, and the next row area wraps the Mth page element.

[0119] In this embodiment, if there is no row association relationship between the Mth page element and the target row region, this indicates that there is no row association relationship between the Mth page element and the page elements within the target row region. Therefore, a next row region can be created based on the row position of the Mth page element, the height of the Mth page element, and the target region. The row position of the Mth page element can be determined as the row position of the first row region, the height of the Mth page element can be determined as the height of the first row region, the column position of the target region can be determined as the column position of the first row region, and the width of the target region can be determined as the width of the first row region. In this way, the next row region is obtained.

[0120] Afterwards, if the Mth page element is the last page element in the target area, the row segmentation of the target area is terminated. In the case of combining row segmentation with column segmentation, the column segmentation of multiple row areas in the target area can be completed until the column segmentation of multiple row areas in the target area is completed. The Nth segmentation of the target page is completed only after the segmentation of all target areas to be segmented in the Nth segmentation is completed. If the Mth element is not the last page element in the target area, update M=M+1 and continue to execute Figure 7 The above steps are shown.

[0121] As an example, assume that N=1, the target area is the target page, such as Figure 8 As shown in the figure, in order from top to bottom and from left to right, the page elements in the target page before adaptive layout are: page element A, page element B, page element C, page element E, page element D, and page element F. The first row splitting process of the target page is as follows:

[0122] First, when M=1, the first row area c1 can be determined based on the upper side position and height of the page element A and the left side position and width of the target page. At this time, the upper side position of c1 is the upper side position of the page element A, the height of c1 is the height of the page element A, the left side position of c1 is the left side position of the target page, and the width of c1 is the width of the target page.

[0123] Next, in the case of M=2, it can be determined whether the upper side position of the page element B is greater than or equal to the upper side position of c1 and less than or equal to the sum of the upper side position of c1 and the height of c1. Figure 8 It can be seen that the upper side position of page element B is greater than or equal to the upper side position of c1 and less than or equal to the sum of the upper side position of c1 and the height of c1, so the height of c1 is updated to be the difference between the lower side position of page element B and the upper side position of page element A (from Figure 8 It can be seen that the lower side position of page element B is greater than the upper side position of page element A).

[0124] Next, in the case of M=3, Figure 8 As can be seen, page element C does not meet the aforementioned condition for a row association between page elements and row regions. That is, page element C does not have a row association with c1. Therefore, the next row region c2 of the target page can be established based on the top edge position and height of page element C and the left edge position and width of the page region. Similarly, page elements E, D, and F are sequentially evaluated to obtain row region c2 encompassing page elements C, E, and D, and row region c3 including page element F, completing the row segmentation of the page region.

[0125] In some embodiments, the position of the page element includes the column position of the page element, and the size of the page element includes the width of the page element. Figure 9 As shown, the process of performing column segmentation on the first region (i.e., the row region obtained by performing row segmentation on the target region) in the Nth segmentation may include:

[0126] S901: If the first region includes multiple page elements, determine the Kth page element to be divided in the first region based on the position sequence of the page elements in the first region.

[0127] The determination of the position sequence of the page elements in the first area may refer to the process of determining the position sequence of the page elements in the target area in the aforementioned embodiment, and will not be repeated here.

[0128] In this embodiment, according to the position sequence of the page elements in the target area, the first page element, the second page element, ... in the first area can be determined in sequence as the first page element to be divided, the second page element to be divided, ... respectively.

[0129] S902: Is K equal to 1?

[0130] In this embodiment, K is a positive integer. When K is equal to 1, that is, when the Kth page element is the first page element in the first region, there is no column region in the first region, and the first column region needs to be determined directly based on the first page element, so S903 is executed. When K is not equal to 1 (that is, K is greater than 1), there is at least one column region in the first region, and the column association relationship between the Kth page element and the column region in the first region needs to be determined, that is, the column association relationship between the Kth page element and the page element arranged before the Kth page element in the first region needs to be determined, so S904 is executed.

[0131] S903 : Determine a first column region in the first region according to the column position of the K-th page element, the width of the K-th page element, and the first region, wherein the first column region wraps the K-th page element.

[0132] In this embodiment, when K is equal to 1, the column position of the Kth page element can be determined as the column position of the first column area, the width of the Kth page element can be determined as the width of the first column area, the row position of the first area can be determined as the row position of the first column area, and the height of the first area can be determined as the height of the first column area. In this way, the first column area is obtained.

[0133] Optionally, the column position of the page element is the left edge position and / or right edge position of the page element. In this case, the left edge position of the Kth page element can be determined as the left edge position of the first column area, and / or the right edge position of the Kth page element can be determined as the right edge position of the first column area.

[0134] Optionally, the row position of the first area includes the upper side position and / or lower side position of the first area. In this case, the upper side position of the first area can be determined as the upper side position of the first column area, and / or the lower side position of the first area can be determined as the lower side position of the first column area.

[0135] S904: Determine whether there is a column association relationship between the K-th page element and the target column area according to the column position of the K-th page element.

[0136] The target column region includes the column region that encloses the K-1th page element in the first region obtained in the Nth segmentation; for example, when K=2, the target column region is the column region that encloses the first page element in the first region obtained in the Nth segmentation, that is, the first column region in the first region.

[0137] Optionally, the target column region includes multiple column regions in the first region in the Nth segmentation, where the multiple column regions include a column region encompassing at least one page element located before the Kth page element. For example, when K=3, the target column region includes a column region encompassing the first page element in the first region and / or a column region encompassing the second page element in the target region.

[0138] In this embodiment, when K is greater than 1, and when the position and size of the target column area are known, it can be determined based on the column positions of the K page elements whether the K-th page element and the target column area overlap in the column. If the K-th page element and the target column area overlap in the column (that is, the local area in the K-th page element and the local area in the target column area fall at the same column position, for example, in the first area, the K-th page element and the target column area are parallel areas), it is determined that there is a column association relationship between the K-th page element and the target column area, and S905 can be executed. Otherwise, it is determined that there is no column association relationship between the K-th page element and the target column area, and S906 can be executed.

[0139] Among them, there is a column association relationship between the Kth page element and the target column area, which is equivalent to there being a column association relationship between the Kth page element and the page elements in the target column area.

[0140] Optionally, when the column position of the page element includes the left edge position of the page element, and the column position of the target column area includes the left edge position of the target row area, determining whether there is a column association relationship between the Kth page element and the target column area includes: determining whether the left edge position of the Kth page element is greater than or equal to the left edge position of the target column area and less than or equal to the sum of the left edge position of the target column area and the width of the target column area (i.e., the right edge position of the target column area); if the left edge position of the Kth page element is greater than or equal to the left edge position of the target column area and less than or equal to the sum of the left edge position of the target column area and the width of the target column area, then it can be determined that there is a column association relationship between the Kth page element and the target column area. Thus, the accuracy of the column association relationship judgment is improved.

[0141] In this optional method, if the left edge position of the Kth page element is greater than or equal to the left edge position of the target column area, it means that the left edge position of the Kth page element is located to the right of the left edge position of the target column area. If the left edge position of the Kth page element is less than or equal to the sum of the left edge position of the target column area and the width of the target column area, it means that the left edge position of the Kth page element is located to the left of the right edge position of the target column area. Therefore, if the left edge position of the Kth page element is greater than or equal to the left edge position of the target column area and less than or equal to the sum of the left edge position of the target column area and the height of the target column area, it means that the Kth page element and the target column area overlap in terms of columns, and it can be determined that the Kth page element and the target column area have a column association relationship.

[0142] Of course, in addition to the comparison based on the left edge position, the column association relationship between the page element and the target column area can also be determined based on the right edge position of the page element, which will not be described in detail here.

[0143] S905 . Update the target column area, where the updated target column area wraps the Kth page element.

[0144] In this embodiment, when there is a column association relationship between the Kth page element and the target column area, since the row position of the target column area is the column position of the first area, the height of the target column area is the height of the first area, that is, the height of the target column area is already the maximum height that the first area can accommodate, and the row position of the target column area is also the limit that the first area can accommodate, so the row position and height of the target column area do not need to be adjusted, and the target column area can be updated by adjusting the column position and / or width of the target column area. Therefore, in addition to the page elements located in the target column area before the update, the Kth page element is also located in the target column area after the update.

[0145] Optionally, when the column position of the page element includes the left edge position of the page element, and the column position of the target column area includes the left edge position of the target column area, the method for updating the target column area includes: determining the minimum left edge position among the left edge positions of all page elements in the target column area and the left edge position of the K-th page element, determining the maximum right edge position among the right edge positions of all page elements in the target column area (which can be determined based on the left edge position and width) and the right edge position of the K-th page element, and updating the height of the target column area to the difference between the maximum right edge position and the minimum left edge position. Thus, the updated target column area includes the K-th page element, and the updating complexity of the target column area is reduced.

[0146] S906 : Determine a next column region according to the column position of the K-th page element, the width of the K-th page element, and the first region, and the next column region wraps the K-th page element.

[0147] In this embodiment, if there is no column association relationship between the Kth page element and the target column region, it indicates that there is no column association relationship between the Kth page element and the page elements within the target column region. Therefore, based on the column position of the Kth page element, the width of the Kth page element, and the first region, a next column region within the first region can be created. The column position of the Kth page element can be determined as the row position of the next column region, the width of the Kth page element can be determined as the width of the next row region, the row position of the first region can be determined as the row position of the first column region, and the height of the target region can be determined as the height of the next column region. In this way, the next column region is obtained.

[0148] Afterwards, if the Kth page element is the last page element in the first region, the column segmentation of the first region is terminated. When the column segmentation of all first regions containing multiple page elements is completed, the Nth segmentation of the target page is terminated. If the Kth element is not the last page element in the first region, K is updated to K+1 and the execution continues. Figure 9 The above steps are shown.

[0149] As an example, assume that N=1, the target area is the target page, such as Figure 8 As shown, in the order from top to bottom and from left to right, the page elements of the target page are page element A, page element B, page element C, page element E, page element D, and page element F. The first regions obtained after row segmentation include: row region c1 that wraps page elements A and page elements B, row region c2 that wraps page elements C, page elements E, and page elements D, and row region c3 that wraps page element F. Column segmentation is required for c1 and c2. The column segmentation process for c2 is as follows:

[0150] First, when K=1, it can be determined that: the left edge position of the first column area r3 in c2 is the upper edge position of the page element C, the width of r3 is the width of the page element C, the upper edge position of r3 is the upper edge position of c2, and the height of r3 is the height of c2.

[0151] Next, in the case of K=2, it can be determined whether the left edge position of the page element E is greater than or equal to the left edge position of r3 and less than or equal to the sum of the left edge position of r3 and the width of r3. Figure 8 It can be seen that the left edge position of the page element E does not meet the condition, so based on the left edge position and width of the page element E and the top edge position and height of c2, the second column area r4 in c2 is determined.

[0152] Next, in the case of K=3, Figure 8 It can be seen that the left edge position of page element D is greater than or equal to the left edge position of r3 and less than or equal to the sum of the left edge position of r3 and the width of r3. Therefore, there is a column correlation relationship between page element D and r3. Since the column position of page element D is the same as the column position of page element C, r3 has wrapped page element D, and there is no need to update r3.

[0153] refer to Figure 10 , Figure 10 Schematic diagram of the page layout method provided in this embodiment of the application Figure 3 The present application provides a page layout method, which specifically includes the following steps:

[0154] S1001: Acquire original layout data of a target page.

[0155] S1002: Determine multiple page areas of a target page according to the original layout data, and the page elements in the same page area are associated page elements.

[0156] Among them, the implementation principles and technical effects of S1001 and S1002 in this embodiment can refer to the above embodiments and will not be repeated here.

[0157] S1003: Determine a tree structure according to the positional wrapping relationship between the page area and the page element, the positional wrapping relationship between different page areas, and the positional wrapping relationship between different page elements.

[0158] In this embodiment, after determining multiple page areas of the target page, the page area may wrap (i.e., contain) one or more page elements, and the page elements may also wrap other page elements, and the page area may also wrap other page areas. For example, when the row area is segmented into columns, the row area wraps one or more column areas obtained by segmentation. Therefore, a tree structure can be constructed based on the positional wrapping relationship between the page area and the page elements, the positional wrapping relationship between different page areas, and the positional wrapping relationship between different page elements. In this tree structure, the nodes include the target page, page area, and page elements, where the root node is the target page, and the edges of the tree structure represent the positional wrapping relationship.

[0159] Therefore, the target page can be determined as the root node first, the page area directly wrapped by the target page can be determined as the child node of the root node, and then the page area and page elements directly included in the child node can be determined as the child node of the child node, and so on to obtain a tree structure.

[0160] by Figure 8 Taking the target page before adaptive layout shown as an example, in the tree structure: the root node is the target page; the child nodes of the root node include c1, c2 and c3; the child nodes of c1 include r1 and r2, the child nodes of r1 include page element A, and the child nodes of r2 include page element B; the child nodes of c2 include r3 and r4, the child nodes of r3 include page element C and page element D, and the child nodes of r4 include page element E.

[0161] S1004 . Starting from the root node in the tree structure, the positions and sizes of the child nodes of the parent node are adjusted in sequence according to the positions and sizes of the parent node.

[0162] In this embodiment, the adaptive layout of the target page must satisfy that the adjusted target page is located within the display window, the adjusted page area is located within the target page, and the adjusted page elements are located within the page area that wraps the page elements. Therefore, starting from the root node, the position and size of each node in the tree structure can be adjusted. First, with the width of the display window as a constraint, the size of the root node is adjusted, that is, the width of the target page is adjusted; then, with the position and size of the adjusted target page as constraints, the position and size of the child nodes of the target page are adjusted; in this way, according to the position and size of the parent node, the position and size of the child nodes of the parent node are adjusted until the adjustment of all nodes in the tree structure is completed. This adjustment process clearly reflects the constraints of the page area on the layout of page elements, ensuring that the related page elements are still located in the same page area after re-layout and no irrelevant page elements are inserted, thereby improving the page layout effect.

[0163] Optionally, to avoid the page elements from being too small after adaptive layout, the page elements can be laid out in rows, that is, different page elements are laid out in different rows. Considering the narrowing of the display window, the width of the page elements can be cropped during the row layout process. In this process, based on the tree structure, the width and position of each node are adjusted in sequence starting from the root node to adapt to the width of the child nodes and arranged in rows. Figure 8 As shown, in the page after adaptive layout, page elements are arranged in rows in each page area, which avoids the inconvenience of operation caused by page elements being too small, while ensuring that related page elements are still arranged together after adaptive layout.

[0164] S1005 : Obtain target layout data according to the adjusted positions and sizes of the nodes in the tree structure and the corresponding relationships between page elements in the target page and the nodes in the tree structure.

[0165] In this embodiment, after adjusting the position and size of each node in the tree structure, the tree structure can be converted into an array structure to obtain the adjusted position and size of each node. Among the adjusted positions and sizes of each node, the adjusted positions and sizes of the nodes corresponding to the page area can be deleted, and the adjusted positions and sizes of the nodes corresponding to the page elements can be retained, that is, the positions and sizes of the page elements after adaptive layout are retained. In this way, the target layout data is obtained based on the positions and sizes of the multiple page elements after adaptive layout. Of course, in addition to the positions and sizes of the page elements, the target layout data can also include the content displayed by the page elements and the identification of the page elements.

[0166] S1006: Display the target page in the display window according to the target layout data.

[0167] The implementation principle and technical effects of S1006 may refer to the aforementioned embodiments and will not be described in detail.

[0168] In an optional embodiment, in S1004, the position and size of the child nodes of the parent node are adjusted in sequence according to the position and size of the parent node, including: determining the target node to be cropped and laid out in the tree structure; adjusting the position and size of the target node according to the width of the target node, the width of the parent node of the target node, the position of the remaining child nodes belonging to the same parent node as the target node, and the size of the remaining child nodes.

[0169] In this optional method, in the tree structure, the target nodes to be cropped and laid out are determined in order from the root node downwards, and the positions and sizes of the target nodes are adjusted. Figure 11 As shown, it may include:

[0170] S1101: Determine whether the width of a target node is less than or equal to the difference between the width of the parent node to which the target node belongs and the widths of the remaining child nodes in the parent node to which the target node belongs.

[0171] The remaining child nodes include the previous sibling node of the target node and other sibling nodes whose adjusted positions are parallel to the adjusted position of the previous sibling node.

[0172] In this embodiment, the sum of the widths of the remaining child nodes is determined, the difference between the width of the parent node and the sum of the widths of the remaining child nodes is determined, and whether the width of the target node is less than or equal to the difference is determined. If the width of the target node is less than or equal to the difference, it indicates that the target node can be arranged side by side with the previous sibling node in the target page of the adaptive layout, and S1102 can be executed. Otherwise, it indicates that the target node and the previous sibling node need to be arranged in separate rows, and S1103 can be executed.

[0173] Among them, when there are no remaining child nodes, such as when the target node is the first child node of the parent node or the target node is the only child node of the parent node, the width of the remaining child nodes can be determined to be 0, that is, determine whether the width of the target node is less than or equal to the width of the parent node where the target node is located. If so, execute S1102, otherwise, execute S1103.

[0174] S1102 : Adjust the row position of the target node according to the row positions of the remaining child nodes, and adjust the column position of the target node according to the column positions and sizes of the remaining child nodes.

[0175] The column position of the parent node refers to the adjusted column position of the parent node, and the column positions of the remaining nodes also refer to the adjusted column positions of the remaining nodes.

[0176] In this embodiment, the width of the target node is less than or equal to the difference between the width of the parent node to which the target node belongs and the width of the remaining child nodes of the parent node. This indicates that the width of the target node does not need to be adjusted and the target node can be arranged side by side with the remaining child nodes. Therefore, the width of the target node can be kept unchanged, and the row position of the target node can be adjusted to the row position of the remaining child nodes. The column position of the target node is adjusted based on the column position and size of the remaining child nodes so that the target node is located to the right of the remaining child nodes. As a result, the target node is ultimately placed side by side with the remaining child nodes and to the right of the remaining child nodes.

[0177] Optionally, when the row position includes the upper side position and the column position includes the left side position, the row position of the target node is adjusted to the row position of the remaining child nodes, and the column position of the target node is adjusted according to the column position of the remaining child nodes and the size of the remaining child nodes, including: adjusting the upper side position of the target node to the upper side position of the remaining child nodes, and adjusting the left side position of the target node to the sum of the left side position of the remaining child nodes and the width of the remaining child nodes. If there are multiple remaining child nodes, the adjusted left side position of the target node can be adjusted to: the sum of the maximum left side position among the left side positions of the remaining child nodes and the width of the remaining child nodes to which the maximum left side position belongs. Thereby, the target child nodes are located side by side on the right side of the remaining child nodes, thereby improving the layout accuracy.

[0178] S1103. Adjust the row position of the target node according to the row position and height of the remaining child nodes, adjust the width of the target node according to the width of the parent node and the width of the target node, and determine the column position of the target node as the starting column position of the display window.

[0179] In this embodiment, the width of the target node is greater than the difference between the width of the parent node to which the target node belongs and the width of the remaining child nodes in the parent node, indicating that the target node needs to be arranged in a new row, that is, the target node and the remaining child nodes need to be arranged in separate rows. Therefore, based on the row position of the remaining child nodes and the height of the remaining child nodes, the row position of the target node can be adjusted so that the target node is located below the remaining child nodes. Based on the width of the parent node and the width of the target node, the width of the target node can be adjusted so that the width of the target node does not exceed the width of the parent node. The column position of the target node is determined to be the starting column position of the display window, so that the target node is arranged as the first node in a new row.

[0180] Optionally, when the row position includes an upper side position, adjusting the row position of the target node based on the row position of the remaining child nodes and the height of the remaining child nodes includes adjusting the upper side position of the target node to the sum of the upper side positions of the remaining child nodes and the height of the remaining child nodes. If there are multiple remaining child nodes, the upper side position of the target child node can be adjusted to the sum of the maximum upper side position among the upper side positions of the remaining child nodes and the height of the remaining child nodes to which the maximum upper side position belongs. This allows the target child node to be positioned below the remaining child nodes, improving the layout effect.

[0181] Optionally, adjusting the width of the target node based on the width of the parent node and the width of the target node includes: determining a minimum value between the width of the parent node and the width of the target node, and adjusting the width of the target node to the minimum value. Thus, when the width of the target node is less than or equal to the width of the parent node, the width of the target node remains unchanged; when the width of the target node is greater than the width of the parent node, the width of the target node is adjusted to the width of the parent node, thereby preventing the width of the target node from being too small, which would make the target node inconvenient for users to browse and interact with due to its small size.

[0182] Optionally, when the column position includes a left edge position and the starting column position of the display window is the left edge position of the display window, determining the column position of the target node to be the starting column position of the display window includes: determining the left edge position of the target node to be the left edge position of the display window. Furthermore, when the left edge position of the display window is 0, the left edge position of the target node may be determined to be 0. This allows the target node to be rearranged in a new row, improving the layout effect.

[0183] S1104: Determine whether the target node has any child nodes.

[0184] If the target node has a child node, execute S1105; otherwise, execute S1106.

[0185] S1105. Determine the target node as the parent node in the next iteration, determine the child node of the target node as the target node in the next iteration, perform recursive calls, and adjust the height of the target node according to the height of the child node after recursion, the row position of the child node after recursion, and the row position of the target node.

[0186] In this embodiment, if the target node has child nodes, the target node is used as the parent node in the next iteration, and the child nodes of the target node are used as the target nodes in the next iteration. The process jumps to S1101 to perform the next round of node position and size adjustment, and obtains the height of the child nodes of the target node after recursion and the row position of the child nodes of the target node after recursion through a recursive call. Based on the height of the child nodes after recursion, the row position of the child nodes after recursion, and the row position of the target node, the height of the target node is adjusted to improve the accuracy of the adjusted height of the target node.

[0187] Optionally, when the row position includes the upper side position, the height of the target node is adjusted based on the recursive height of the child node, the recursive row position of the child node, and the row position of the target node, including: determining the maximum value of the sum of the recursive height of the child node and the recursive upper side position of the child node, and adjusting the height of the target node to the difference between the maximum value and the upper side position of the target node.

[0188] In this optional method, the target node may have multiple child nodes. When determining the maximum value of the sum of the height of the child node after recursion and the upper side position of the child node after recursion, the height and upper side position are summed for each child node respectively, so as to obtain multiple sums, and the maximum value of the multiple sums is determined. The maximum value reflects the lower side position of the child node located at the bottom of all the child nodes. In this way, by adjusting the height of the target node to the difference between the maximum value and the upper side position of the target node, the target node can wrap its own child nodes, ensuring that the wrapping relationship between the nodes remains unchanged during the adaptive layout process, that is, the wrapping relationship between the page area and the page element remains unchanged, the wrapping relationship between the page area and the page area remains unchanged, and the wrapping relationship between the page element and the page element remains unchanged, ensuring that the associated page elements are still located in the same page area after the adaptive layout.

[0189] S1106. Keep the height of the target node unchanged.

[0190] In this embodiment, when the target node has no child nodes, the height of the target node is kept unchanged.

[0191] In an embodiment of the present application, based on the original layout data of the target page, the page area of ​​the target page is determined so that the page elements in the same page area are associated. Then, based on the wrapping relationship between the page area and the page elements, the wrapping relationship between the page areas and the page areas, and the wrapping relationship between the page elements and the page elements, a tree structure is constructed, and the position and size of the nodes in the tree structure are adjusted using the tree structure and recursive calling method, thereby improving the effect of adjusting the position and size of the page area and page elements, ensuring that the associated page elements are still located in the same page area in the adaptive layout, and will not be inserted into irrelevant page elements, thereby improving the page layout effect.

[0192] refer to Figure 12 , Figure 12 This is a structural block diagram of the page layout device 120 provided in one embodiment of the present application. Figure 12 As shown, the page layout device 120 provided in the embodiment of the present application includes: an acquisition unit 121, an area determination unit 122, a layout determination unit 123 and a display unit 124, wherein:

[0193] An acquiring unit 121 is configured to acquire original layout data of a target page, wherein the original layout data includes positions, sizes, and identifiers of multiple page elements on the target page;

[0194] The region determining unit 122 is configured to determine multiple page regions of the target page based on the original layout data, wherein page elements in the same page region are associated page elements;

[0195] a layout determining unit 123 for determining target layout data suitable for the display window according to the display window for displaying the target page, the plurality of page areas, and the original layout data;

[0196] The display unit 124 is configured to display the target page in a display window according to the target layout data.

[0197] In one embodiment of the present application, the page area includes row areas and / or column areas. In the process of determining multiple page areas of the target page based on the original layout data, the area determination unit 122 is specifically used to: based on the original layout data, perform row segmentation and / or column segmentation on the target page to obtain row areas and / or column areas.

[0198] In one embodiment of the present application, the number of times the target page is segmented is greater than or equal to 1. During one segmentation process of the target page, the area determination unit 122 is specifically used to: determine the target area to be segmented for the Nth time, where the target area contains multiple page elements; determine the position order of the page elements in the target area, the position of the page elements in the target area, and the size of the page elements in the target area based on the original layout data; perform row segmentation and / or column segmentation on the target area based on the position order, position, and size of the page elements in the target area to obtain row areas and / or column areas in the target area.

[0199] In one embodiment of the present application, in the process of performing row segmentation and / or column segmentation on the target area according to the position sequence, position and size of the page elements in the target area to obtain the row area and / or column area in the target area, the area determination unit 122 is specifically used to: perform row segmentation on the target area according to the position sequence, position and size of the page elements in the target area to obtain the first area, which is the row area in the target area; if the first area contains multiple page elements, perform column segmentation on the first area according to the position sequence, position and size of the page elements in the first area to obtain the second area, which is the column area in the target area.

[0200] In one embodiment of the present application, the position of the page element includes the row position of the page element, the size of the page element includes the height of the page element, and the first area is one or more. In the process of performing row segmentation on the target area according to the position sequence, position and size of the page elements in the target area to obtain the first area, the area determination unit 122 is specifically used to: determine the Mth page element to be divided in the target area based on the position sequence of the page elements in the target area; when M is equal to 1, determine the first row area in the target area, the Mth page element height and the target area according to the row position of the Mth page element, the Mth page element height and the target area. A row area wraps the Mth page element; when M is greater than 1, it is determined whether there is a row association relationship between the Mth page element and the target row area based on the row position of the Mth page element, and the target row area includes the row area of ​​the M-1th page element in the wrapped target area obtained in the Nth segmentation; if there is a row association relationship between the Mth page element and the target row area, the target row area is updated, and the updated target row area wraps the Mth page element; otherwise, the next row area is determined based on the row position of the Mth page element, the height of the Mth page element and the target area, and the next row area wraps the Mth page element.

[0201] In one embodiment of the present application, the position of the page element includes the column position of the page element, the size of the page element includes the width of the page element, and the second area is one or more. If the first area contains multiple page elements, the first area is divided into columns according to the position sequence, position and size of the page elements in the first area. In the process of obtaining the second area, the area determination unit 122 is specifically used to: if the first area contains multiple page elements, determine the Kth page element to be divided in the first area based on the position sequence of the page elements in the first area; when K is equal to 1, determine the Kth page element to be divided in the first area according to the column position of the Kth page element, the width of the Kth page element and the first area. , determine the first column area in the first area, and the first column area wraps the K-th page element; when K is greater than 1, determine whether there is a column association relationship between the K-th page element and the target column area according to the column position of the K-th page element, and the target column area includes the column area wrapping the K-1-th page element in the first area obtained in the N-th segmentation; if there is a column association relationship between the K-th page element and the target column area, update the target column area, and the updated target column area wraps the K-th page element; otherwise, determine the next column area according to the column position of the K-th page element, the width of the K-th page element and the first area, and the next column area wraps the K-th page element.

[0202] In one embodiment of the present application, in the process of determining the target area to be segmented for the Nth time, the area determination unit 122 is specifically used to: when N is equal to 1, determine the target area as the target page; when N is greater than 1, determine the target area as the row area and / or column area obtained in the previous segmentation and containing multiple page elements.

[0203] In one embodiment of the present application, in the process of determining target layout data suitable for a display window based on a display window for displaying a target page, multiple page areas and original layout data, the layout determination unit 123 is specifically used to: determine a tree structure based on the positional wrapping relationship between a page area and a page element, the positional wrapping relationship between different page areas and the positional wrapping relationship between different page elements, the nodes of the tree structure include a target page, a page area and a page element, wherein the root node is the target page and the edges of the tree structure represent the positional wrapping relationship; in the tree structure, starting from the root node, the position and size of the child nodes of the parent node are adjusted in turn according to the position and size of the parent node; the target layout data is obtained based on the adjusted position and size of the node in the tree structure and the correspondence between the page elements in the target page and the nodes in the tree structure.

[0204] In one embodiment of the present application, in a tree structure, starting from the root node, in the process of adjusting the position and size of the child nodes of the parent node according to the position and size of the parent node, the layout determination unit 123 is specifically used to: determine the target node to be cropped and laid out in the tree structure; adjust the position and size of the target node according to the width of the target node, the width of the parent node of the target node, the position of the remaining child nodes belonging to the same parent node as the target node, and the size of the remaining child nodes.

[0205] The page layout device provided in the embodiment of the present application is used to execute the technical solution in any of the above method embodiments. Its implementation principle and technical effects are similar and will not be repeated here.

[0206] Figure 13 Schematic diagram of the hardware structure of the electronic device provided in the embodiment of the present application. Figure 13 As shown, the electronic device 130 of the embodiment of the present application may include: at least one processor 131 ( Figure 13 Only one processor is shown); and a memory 132 in communication with the at least one processor. Memory 132 stores instructions executable by at least one processor 131. The instructions are executed by at least one processor 131 to enable electronic device 130 to implement the technical solution of any of the aforementioned method embodiments.

[0207] Optionally, the memory 132 may be independent or integrated with the processor 131 .

[0208] When the memory 132 is a device independent of the processor 131 , the electronic device 130 further includes a bus 133 for connecting the memory 132 and the processor 131 .

[0209] Optionally, the electronic device 130 is a mobile terminal.

[0210] The electronic device provided in the embodiments of the present application can execute the technical solution of any of the aforementioned method embodiments, and its implementation principles and technical effects are similar, which will not be repeated here.

[0211] An embodiment of the present application further provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, it is used to implement the technical solution in any of the aforementioned method embodiments.

[0212] An embodiment of the present application provides a computer program product, including a computer program, which implements the technical solution of any of the aforementioned method embodiments when executed by a processor.

[0213] An embodiment of the present application further provides a chip, including: a processing module and a communication interface, wherein the processing module can execute the technical solution in the aforementioned method embodiment.

[0214] Furthermore, the chip also includes a storage module (such as a memory), the storage module is used to store instructions, the processing module is used to execute the instructions stored in the storage module, and the execution of the instructions stored in the storage module enables the processing module to execute the technical solution in the aforementioned method embodiment.

[0215] It should be understood that the processor described above may be a central processing unit (CPU), other general-purpose processors, digital signal processors (DSP), or application-specific integrated circuits (ASICs). A general-purpose processor may be a microprocessor or any conventional processor. The steps of the method disclosed in the present invention may be directly executed by a hardware processor or by a combination of hardware and software modules within the processor.

[0216] The memory may include a high-speed RAM memory, and may also include non-volatile storage NVM, such as at least one disk memory, and may also be a USB flash drive, a mobile hard disk, a read-only memory, a magnetic disk or an optical disk.

[0217] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus. Buses can be classified into address buses, data buses, and control buses. For ease of illustration, the buses in the drawings of this application are not limited to just one bus or just one type of bus.

[0218] The storage medium may be implemented by any type of volatile or non-volatile memory device, or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The storage medium may be any available medium that can be accessed by a general-purpose or special-purpose computer.

[0219] An exemplary storage medium is coupled to a processor so that the processor can read information from the storage medium and write information to the storage medium. Of course, the storage medium can also be an integral part of the processor. The processor and storage medium can be located in an application-specific integrated circuit (ASIC). Of course, the processor and storage medium can also exist as discrete components in an electronic device.

[0220] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some or all of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A page layout method, characterized in that: include: Acquire original layout data of a target page, wherein the original layout data includes positions and sizes of multiple page elements on the target page; Determining, based on the original layout data, a plurality of page regions of the target page, wherein page elements in the same page region are associated page elements; determining target layout data suitable for the display window according to the display window for displaying the target page, the plurality of page areas, and the original layout data; Displaying the target page in the display window according to the target layout data; The page area includes a row area and a column area, and the multiple page areas of the target page are determined based on the original layout data, including: based on the position order, position and size of the page elements in the target area, the target area is divided into rows to obtain a first area, and the first area is the row area in the target area; if the first area contains multiple page elements, the first area is divided into columns to obtain a second area based on the position order, position and size of the page elements in the first area, and the second area is the column area in the target area, wherein the target area is the determined area to be divided, the page elements in the same row area or the same column area are associated page elements, the position of the page element includes the row position of the page element, and the size of the page element includes the height of the page element.

2. The page layout method according to claim 1, characterized in that: The number of times the target page is split is greater than or equal to 1, and the method further includes: Determining a target area to be segmented for an Nth time, where the target area includes a plurality of page elements; The position order of the page elements in the target area, the positions of the page elements in the target area, and the sizes of the page elements in the target area are determined according to the original layout data.

3. The page layout method according to claim 1, characterized in that: The first region may be one or more, and the target region is segmented into rows according to the position sequence, position, and size of the page elements in the target region to obtain the first region, including: Determining an Mth page element to be divided in the target area based on a position order of the page elements in the target area; When M is equal to 1, determining a first row area in the target area according to the row position of the M-th page element, the height of the M-th page element, and the target area, wherein the first row area wraps the M-th page element; When M is greater than 1, determining whether there is a row association relationship between the Mth page element and a target row region based on the row position of the Mth page element, where the target row region includes the row region obtained in the Nth segmentation that encloses the M-1th page element in the target region; If the Mth page element has a row association relationship with the target row area, the target row area is updated, and the updated target row area wraps the Mth page element; otherwise, the next row area is determined based on the row position of the Mth page element, the height of the Mth page element and the target area, and the next row area wraps the Mth page element.

4. The page layout method according to claim 1, wherein: The position of the page element includes the column position of the page element, the size of the page element includes the width of the page element, and the second area is one or more. If the first area contains multiple page elements, the first area is divided into columns according to the position order, position and size of the page elements in the first area to obtain the second area, including: If the first area includes multiple page elements, determining a Kth page element to be divided in the first area based on the position order of the page elements in the first area; When K is equal to 1, determining a first column area in the first area according to the column position of the K-th page element, the width of the K-th page element, and the first area, wherein the first column area wraps the K-th page element; When K is greater than 1, determining whether a column association relationship exists between the K-th page element and a target column region based on the column position of the K-th page element, where the target column region includes the column region enclosing the K-1-th page element in the first region obtained in the N-th segmentation; If the K-th page element has a column association relationship with the target column area, the target column area is updated, and the updated target column area wraps the K-th page element; otherwise, the next column area is determined based on the column position of the K-th page element, the width of the K-th page element and the first area, and the next column area wraps the K-th page element.

5. The page layout method according to claim 2, characterized in that: The determining of the target area to be segmented for the Nth time includes: When N is equal to 1, the target area is determined to be the target page; When N is greater than 1, the target area is determined to be a row area and / or column area obtained by the previous segmentation and containing multiple page elements.

6. The page layout method according to any one of claims 1 to 5, characterized in that: The determining, based on the display window for displaying the target page, the plurality of page areas, and the original layout data, target layout data suitable for the display window includes: Determine a tree structure based on the positional parcel relationship between the page region and the page element, the positional parcel relationship between different page regions, and the positional parcel relationship between different page elements, wherein the nodes of the tree structure include the target page, the page region, and the page element, wherein the root node is the target page, and the edges of the tree structure represent the positional parcel relationship; In the tree structure, starting from the root node, the positions and sizes of the child nodes of the parent node are adjusted in sequence according to the positions and sizes of the parent nodes; The target layout data is obtained according to the adjusted positions and sizes of the nodes in the tree structure and the corresponding relationships between the page elements in the target page and the nodes in the tree structure.

7. The page layout method according to claim 6, characterized in that: The step of adjusting the positions and sizes of the child nodes of the parent node starting from the root node in the tree structure according to the positions and sizes of the parent node comprises: In the tree structure, determining target nodes to be pruned and laid out; The position and size of the target node are adjusted according to the width of the target node, the width of the parent node of the target node, the positions of the remaining child nodes belonging to the same parent node as the target node, and the sizes of the remaining child nodes.

8. A page layout device, characterized in that: include: an acquiring unit, configured to acquire original layout data of a target page, wherein the original layout data includes positions, sizes, and identifiers of a plurality of page elements on the target page; an area determination unit, configured to determine a plurality of page areas of the target page according to the original layout data, wherein page elements in the same page area are associated page elements; a layout determining unit, configured to determine target layout data suitable for the display window based on the display window for displaying the target page, the plurality of page areas, and the original layout data; A display unit, configured to display the target page in the display window according to the target layout data; The page area includes a row area and a column area, and the multiple page areas of the target page are determined based on the original layout data, including: based on the position order, position and size of the page elements in the target area, the target page area is divided into rows to obtain a first area, and the first area is the row area in the target area; if the first area contains multiple page elements, the first area is divided into columns to obtain a second area based on the position order, position and size of the page elements in the first area, and the second area is the column area in the target area, wherein the target area is the determined area to be divided, the page elements in the same row area or the same column area are associated page elements, the position of the page element includes the row position of the page element, and the size of the page element includes the height of the page element.

9. An electronic device, characterized in that: include: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the electronic device to perform the page layout method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the page layout method according to any one of claims 1 to 7 is implemented.

Images