CN113961296A

CN113961296A - Page element layout method and device, readable medium and electronic equipment

Info

Publication number: CN113961296A
Application number: CN202111320784.2A
Authority: CN
Inventors: 李洋; 陈思慧; 王宇飞; 邓涛
Original assignee: Beijing Youzhuju Network Technology Co Ltd
Current assignee: Beijing Youzhuju Network Technology Co Ltd
Priority date: 2021-11-09
Filing date: 2021-11-09
Publication date: 2022-01-21
Anticipated expiration: 2041-11-09
Also published as: CN113961296B

Abstract

The disclosure relates to a page element layout method, a page element layout device, a readable medium and electronic equipment. The method comprises the following steps: extracting layout parameters of elements to be filled from the grid layout code, wherein the layout parameters of the elements comprise element identifications, associated objects associated with the elements and element sizes; filling each element into a target container according to the layout parameters of the elements; after filling, for each target associated object associated with more than one element, determining elements capable of being merged according to the positions of the elements associated with the target associated object in the target container, and merging the elements capable of being merged. Therefore, the elements related to the same object are combined by taking the elements as units, and the attributes of the elements contained in the elements are uniformly set by taking the result obtained by combination as a unit, so that the flexibility and the fineness of the element setting can be improved, and the workload of developers can not be excessively increased.

Description

Page element layout method and device, readable medium and electronic equipment

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a page element layout method and apparatus, a readable medium, and an electronic device.

Background

Currently, interactive editors are provided with a variety of preset interactive materials (e.g., interactive components, interactive templates, etc.), and interactive works can be produced based on the interactive materials through the interactive editors. When the interactive material is used, the editable attribute of the interactive material can be set so as to select whether the editing authority of the interactive material is opened or not. Generally, the interactive material includes a plurality of elements, and the editable attributes of the interactive material are usually set by using groups as dimensions, that is, the editable attributes of all the elements in the interactive material are uniformly set, and the setting mode is not fine enough, and the use difficulty of the material is increased by too many elements. Meanwhile, if the attribute settings of each element in the interactive material are separated from each other, the developer needs to set the attribute of each element separately in the setting process, which may increase the workload of the developer.

Disclosure of Invention

This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detailed description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.

In a first aspect, the present disclosure provides a page element layout method, including:

extracting layout parameters of elements to be filled from the grid layout code, wherein the layout parameters of the elements comprise element identifications, associated objects associated with the elements and element sizes;

filling each element into a target container according to the layout parameters of the elements;

after filling, for each target associated object associated with more than one element, determining elements capable of being merged according to the positions of the elements associated with the target associated object in the target container, and merging the elements capable of being merged.

In a second aspect, the present disclosure provides a page element layout apparatus, the apparatus comprising:

the parameter extraction module is used for extracting layout parameters of elements to be filled from the grid layout codes, wherein the layout parameters of the elements comprise element identifications, associated objects associated with the elements and element sizes;

the filling module is used for filling each element into a target container according to the layout parameters of the elements;

and the merging module is used for determining elements capable of being merged according to the positions of the elements associated with the target associated object in the target container and merging the elements capable of being merged aiming at each target associated object associated with more than one element after filling.

In a third aspect, the present disclosure provides a computer readable medium having stored thereon a computer program which, when executed by a processing apparatus, performs the steps of the method of the first aspect of the present disclosure.

In a fourth aspect, the present disclosure provides an electronic device comprising:

a storage device having a computer program stored thereon;

processing means for executing the computer program in the storage means to implement the steps of the method of the first aspect of the present disclosure.

According to the technical scheme, the layout parameters of the elements to be filled are extracted from the grid layout code, and the elements are filled into the target container according to the layout parameters of the elements, wherein the layout parameters of the elements comprise element identifications, associated objects associated with the elements and element sizes, and after filling is finished, for each target associated object associated with more than one element, elements capable of being combined are determined according to the position of each element associated with the target associated object in the target container, and the elements capable of being combined are combined. Thus, after the elements are filled in the target container based on the grid layout, the elements which are associated with the same association object are adaptively combined with each other according to the positions of the elements in the grid layout. Therefore, the elements related to the same object are combined by taking the elements as units, and meanwhile, the combined elements can be uniformly set by taking the result obtained by combination as a unit to the attributes of the elements contained in the combined elements, so that the flexibility and the fineness of the element setting can be improved, and the workload of developers can not be excessively increased.

Additional features and advantages of the disclosure will be set forth in the detailed description which follows.

Drawings

The above and other features, advantages and aspects of various embodiments of the present disclosure will become more apparent by referring to the following detailed description when taken in conjunction with the accompanying drawings. Throughout the drawings, the same or similar reference numbers refer to the same or similar elements. It should be understood that the drawings are schematic and that elements and features are not necessarily drawn to scale. In the drawings:

FIG. 1 is an exemplary illustration of a page with interactive material and an interactive work page;

FIG. 2 is a flow diagram of a page element layout method provided in accordance with one embodiment of the present disclosure;

FIG. 3 is an exemplary flowchart of the step of filling each element into a target container according to the layout parameters of the elements in the page element layout method provided by the present disclosure;

4A-4C are exemplary diagrams of a target container in a page element layout method provided by the present disclosure;

FIG. 5 is an exemplary flowchart of the step of determining a target fill area for a target element based on the element size and target status parameters of the target element in the page element layout method provided in accordance with the present disclosure;

6A-6C are exemplary diagrams of a target container in the page element layout method provided by the present disclosure;

FIG. 7 is an exemplary flowchart of the step of determining elements that can be merged according to the positions of the elements associated with the target associated object in the target container in the page element layout method provided by the present disclosure;

8A-8F are exemplary diagrams of a target container in the page element layout method provided by the present disclosure;

fig. 9 is an exemplary schematic diagram of a page for setting editable properties of interactive materials in the page element layout method provided by the present disclosure;

FIG. 10 is a block diagram of a page element layout apparatus provided in accordance with one embodiment of the present disclosure;

FIG. 11 shows a schematic structural diagram of an electronic device suitable for use in implementing embodiments of the present disclosure.

Detailed Description

Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is to be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but rather are provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the disclosure are for illustration purposes only and are not intended to limit the scope of the disclosure.

It should be understood that the various steps recited in the method embodiments of the present disclosure may be performed in a different order, and/or performed in parallel. Moreover, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present disclosure is not limited in this respect.

The term "include" and variations thereof as used herein are open-ended, i.e., "including but not limited to". The term "based on" is "based, at least in part, on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions for other terms will be given in the following description.

It should be noted that the terms "first", "second", and the like in the present disclosure are only used for distinguishing different devices, modules or units, and are not used for limiting the order or interdependence relationship of the functions performed by the devices, modules or units.

It is noted that references to "a", "an", and "the" modifications in this disclosure are intended to be illustrative rather than limiting, and that those skilled in the art will recognize that "one or more" may be used unless the context clearly dictates otherwise.

The names of messages or information exchanged between devices in the embodiments of the present disclosure are for illustrative purposes only, and are not intended to limit the scope of the messages or information.

As described in the background art, the editable attribute of the interactive material can be set at present to select whether to open the editing right of the interactive material. In the related art, when the editable attribute of the interactive material is set, a group is usually used as a dimension, as shown in a left page diagram of fig. 1, for the interactive material of "transform", if the editable attribute is set as editable, preset elements (transparency, anchor point X, anchor point Y, horizontal scaling, vertical scaling, and rotation angle) included in the interactive material of "transform" are set as editable in a group, and accordingly, a finished interactive product page is shown in a right page diagram of fig. 1, where all the preset elements of "transform" appear in the interactive product page. However, developers do not always need to interact with all preset elements in the material (e.g., anchor X, anchor Y, and vertical scaling are needed without transparency, horizontal scaling, and rotation angles), so this set-up in group dimensions is not fine enough to be accurate to a single element, and too many elements will increase the difficulty of using the material.

In addition, the same interactive material may include two or more related elements (for example, anchor point X and anchor point Y in the left page diagram of fig. 1) with correlation, and the editable attributes of these related elements need to be uniformly set, so that blindly setting the editable attributes to a single element will increase the workload of developers, which is not favorable for improving the development efficiency.

In order to solve the technical problem, the present disclosure provides a page element layout method, device, readable medium and electronic device, which can improve flexibility and fineness of element setting and do not cause excessive increase of workload of developers.

Fig. 2 is a flowchart of a page element layout method provided according to an embodiment of the present disclosure. As shown in fig. 2, the method provided by the present disclosure may include steps 11 to 13:

in step 11, extracting layout parameters of elements to be filled from the grid layout code;

in step 12, filling each element into a target container according to the layout parameters of the elements;

in step 13, after the filling is completed, for each target associated object associated with more than one element, determining elements capable of being merged according to the positions of the elements associated with the target associated object in the target container, and merging the elements capable of being merged.

Grid layout (i.e., Grid) is a common CSS (Cascading Style Sheets) layout scheme, which divides a web page into small grids (the minimum unit of a Grid will be referred to as a unit Grid hereinafter), and different grids can be arbitrarily combined to make various layouts.

The grid layout code contains information about the layout of the elements, so based on the grid layout code, the layout parameters of the elements to be filled can be extracted therefrom, via step 11. In general, the layout parameters of the elements exist in the specified positions in the grid layout code and in the specified data format, and conform to the uniform writing rule, so that the data in the specified data format can be extracted from the specified positions in the grid layout code based on the writing rule of the grid layout code, and thus, the layout parameters of the elements to be filled are extracted.

The layout parameters of the elements may include, but are not limited to, element identifications, associated objects and element sizes associated with the elements, and the like. The element identification is used to uniquely identify the element. The associated object associated with the element can be understood as identifying information associated with the element, for example, if a certain interactive material contains elements of transparency, horizontal zoom, vertical zoom, width and height, and the width and the height are associated, the width and the height can be associated with the same associated object, and if the horizontal zoom and the vertical zoom are associated, the horizontal zoom and the vertical zoom can be associated with the same associated object, and the associated objects can be assigned with different identifying information for distinguishing. The element size can be the number of rows and columns of the unit grid occupied by the elements, and the container to be filled is divided into small grids due to the grid layout, so that the element size can be represented by directly utilizing the number of rows and columns of the unit grid.

For example, if the grid layout code is as follows:

according to the writing rule, the related information of element filling is defined in < div class ═ container >, the attribute of grid-row characterizes the size of the element in the grid layout with respect to the row, and the attribute of grid-column characterizes the size of the element in the grid layout with respect to the column. The keyword span is followed by numbers to characterize the number of rows or columns of the element across (i.e., merge) the cell grid, e.g., grid-row: span 5 characterizes the element as occupying a 5-row grid, and grid-column: span 4 characterizes the element as occupying a 4-column cell grid. And, the information contained in the < div > tag within the container, such as "0-5", characterizes the element identity and the associated object with which the element is associated, in its unified form "element identity-associated object".

Based on the grid layout code, the layout parameters in the following format can be extracted:

wherein index is an element identifier, union is an associated object associated with the element, column is the number of columns of the unit grid occupied by the element, and rowSpan is the number of rows of the unit grid occupied by the element. For example, a layout parameter of { index:0, unity: 5, column:6, rowSpan:4} may characterize that the element identified as 0 is associated with an object of 5, and that the element occupies 4 rows and 6 columns of the cell grid.

After the layout parameters of all the elements to be filled are extracted, step 12 may be executed to fill each element into the target container according to the layout parameters of the elements.

In one possible embodiment, as shown in fig. 3, step 12 may include the steps of:

in step 21, according to the element identifier, obtaining a target element of the filling area determined this time from the elements to be filled;

in step 22, acquiring the current state parameter of the target container as the target state parameter;

in step 23, determining a target filling area of the target element according to the element size and the target state parameter of the target element;

in step 241, it is determined whether each element to be filled has determined a corresponding target filling area;

if it is determined in step 241 that there are elements for which the filling area has not been determined (i.e., the corresponding target filling area has not been determined for each element to be filled), execute step 242;

in step 242, the state parameters of the target container are updated, and step 21 is executed again until each element to be filled determines a corresponding target filling area;

in step 25, each element is filled into the target filling area corresponding to the element.

There is typically a preset order of determining the filling positions for a number of elements to be filled. Taking the layout parameters shown above as an example, the element identifiers are respectively represented by numbers of 0 to 12, so that the filling positions can be determined one by one according to the sequence of the element identifiers from small to large, that is, the first filling is performed, the target element filled at this time (for the first time) is determined to be the element with the element identifier of 0, the filling position of the element is determined for the second time after the filling position of the element is determined (or the filling is completed), the target element with the filling position determined at this time (for the second time) is determined to be the element with the element identifier of 1, and so on.

In the case of acquiring the target element for this determination of the filling area through step 21, the current state parameter of the target container (i.e., the target state parameter) also needs to be acquired. Wherein, as described above, the target container is a mesh container. The state parameters of the target container can reflect the fill situation inside the target container, i.e. which grids within the target container have been filled (or have been determined to be used for filling) in order to select the fill position of an element when the element is filled next time.

The state parameters of the target container may include, but are not limited to, the following: the number of filled rows, the number of filled columns, the preferred filled row information, and the number of empty rows per column of filled rows within the target container.

The number of filled rows of the target container is used to characterize the total number of rows of the grid in the target container determined to be used to fill the element, i.e., how many rows of the grid in the target container have been determined to be used to fill the element. The number of columns filled in the target container is used to characterize the total number of columns of the grid in the target container that are determined to be used to fill the element, i.e., how many columns of the grid in the target container have been determined to be used to fill the element. The first filling line information of the target container is used to represent a position where the element currently fills the target container, which is the first attempt to fill, and a filling rule for filling the target container is generally set, for example, first, element filling is performed from left to right in a certain line, and if the line cannot continue to fill the element, the next line next to the left is moved to an unfilled position, which is the leftmost position, in the line, and then filling is continued. Therefore, the priority fill line information is used at least to indicate the most priority fill target line in the target container. In addition, the priority filling row information may further include the column number of the most priority filling column in the target row, which is accurate to the column in the target row, i.e., accurate to the most priority filling cell grid position. The number of empty rows per column of filled rows is used to indicate how many rows per column, respectively, can be used for element filling in the rows of the determined filled elements in the target container. For example, assuming that the total number of columns in the grid of the target container is 12, the state parameter of the target container can be expressed as follows:

wherein column is the number of columns filled, rowSpan is the number of rows filled, curRow is the information of the row filled preferentially, curRow is the target row, curRow is the column number of the target row, and gaps is the array for representing the number of rows in each column. Therefore, based on the above, it can be seen that the target container is not filled with any element in the initial state, the number of filled rows and filled columns is 0, the target row number is 0 (usually starting with 0 in the code writing process, where the row number is 0 indicates that the row is the first row of the target container), the column number of the target row is 0 (i.e., the 0 th column of the 0 th row, where the column number is 0 indicates that the column is the first column of the target container), the number of empty rows in each column is 0, and the corresponding array is {0,0,0,0,0,0,0,0 }.

As another example, taking the target container shown in fig. 4A as an example, the target container is a grid container with 8 rows (0 th row to 7 th row) and 8 columns (0 th column to 7 th column), each grid is distinguished by lines (when actually filling, the lines representing the grids do not need to be shown, and are drawn here for convenience of description), in the target container shown in fig. 4A, the grid area occupied by the thick-frame rectangular representation elements filled with oblique lines is known, in the target container shown in fig. 4A, the filling areas of two elements are determined, namely, the element B1 occupying 4 rows and 4 columns and the element B2 occupying 2 rows and 3 columns, and the cell grid most preferentially used for filling at present is C1, accordingly, the current state parameters of the target container are: the number of filled rows is 4, the number of filled columns is 7, the information of the preferentially filled rows is 0 th row and 7 th column, and each column has an array of spare rows [0,0,0,0,2,2,2,4 ].

After the target elements for determining the filling area and the current state parameters (target state parameters) of the target container are obtained, the filling area can be determined.

In step 23, a target fill area for the target element is determined based on the element size and the target state parameter for the target element.

In one possible implementation, in step 23, determining the target filling area of the target element according to the element size and the target state parameter of the target element may include the following steps, as shown in fig. 5:

in step 41, determining the target cell grid which is filled with the highest priority in the target row corresponding to the current target state parameter;

in step 42, judging whether the target element can be filled in the target line according to the element size of the target element and the target unit grid;

in step 43, if it is determined that the target element can be filled in the target line, a region having the target cell grid as a vertex grid and a size matching the element size of the target element is determined as a target filling region.

The target cell grid is the cell grid of the target container which is most preferably filled currently, and taking the target container shown in fig. 4A as an example, the target cell grid is C1.

In one possible embodiment, if the priority padding row information includes not only the target row but also the column number of the most-priority-padded column in the target row, the target cell grid may be determined according to the priority padding row information.

In another possible implementation, if the preferred fill row information only includes the target row and does not include the column number of the most preferred column in the target row, then the target cell grid may be determined according to the number of empty rows per column of the filled row in the target container. Taking the target container shown in fig. 4A as an example, the target row is the 0 th row in the target container, and the number of the free rows in each column is [0,0,0,0,2,2,2,4], and then according to the currently filled row number 4 of the target container, it can be determined that the last column in the 0 th row is not filled, and therefore, the target cell grid can be determined as the cell grids in the 0 th row and the 7 th column of the target container.

After the target cell grid is determined, step 42 may be performed to determine whether the target element can be filled in the target row based on the element size of the target element and the target cell grid.

In one possible embodiment, step 42 may include the steps of:

determining the number of vacant columns of the target row by taking the column of the target unit grid as an initial column;

if the number of the spare columns is not less than the number of the columns occupied by the target elements, determining that the target elements can be filled in the target rows;

and if the number of the vacant columns is less than the number of the columns occupied by the target element, determining that the target element cannot be filled in the target row.

As mentioned above, the element size of the target element includes the number of rows and columns occupied by the target element, i.e., the number of rows and columns of the target element across the grid.

The column of the target cell grid is taken as the initial column, and the number of the vacant columns of the target row is determined, that is, the number of the remaining columns of the target row from the column of the target cell grid is determined. If the number of the free columns is not less than the number of columns occupied by the target element, it indicates that the target row has enough columns to be filled by the target element, and thus it can be determined that the target element can be filled in the target row. Otherwise, if the number of the vacant columns is smaller than the number of the columns occupied by the target element, it indicates that the remaining columns of the target row are not enough for the target element to fill, and the target element cannot fill the target row. Taking the target container shown in fig. 4A as an example, if the target cell grid is C1, assuming that the element size of the target element is 3 rows and 1 column, the number of free columns of the target row is 1, which is not less than the number of columns 1 of the target element, and therefore it can be determined that the target element can be filled in the target row. For another example, if the target cell grid is C1 in the target container shown in fig. 4A, assuming that the target element is 1 row and 3 columns, the number of free columns of the target row is 1, which is smaller than the number of columns 3 of the target element, and thus it can be determined that the target element cannot be filled in the target row.

In case it is determined that the target element can be filled in the target row, step 43 is performed, that is, a region having the target cell grid as a vertex grid and a size consistent with the element size of the target element is determined as a target filling region. That is, in the case where it is determined that the target element can be filled in the target line, the region including the target cell lattice may be determined as the target filling region according to the element size of the target element. Wherein, on the basis of following the basic filling rule from top to bottom and from left to right, the target cell grid will be in the upper left corner of the target filling area, i.e. the target cell grid is the upper left corner grid of the target filling area. The target fill area may be a rectangle, for example, a rectangular target fill area may be characterized by coordinates of four vertices at the target container.

Taking the target container shown in fig. 4A as an example, if the target cell grid is C1, and assuming that the element size of the target element B3 is 3 rows and 1 column, it is known from the above that the target element B3 can be filled in the target row, then the region of 3 rows and 1 columns with the target cell grid C1 as the vertex grid can be determined as the target filling region. Accordingly, the subsequently filled target element B3 would be as shown in FIG. 4B.

However, if it is determined that the target element cannot be filled in the target line, the next line of the current target line may be determined as a new target line to update the target state parameter, and step 41 and the subsequent steps are performed again until the target filling area is determined.

Taking the target container shown in fig. 4A as an example, if the target cell grid is C1, assuming that the element size of the target element B4 is 1 row and 3 columns, it is known from the above that the target element B4 cannot be filled in the target row, then the next row (row 1) of the current target row (row 0) may be taken as a new target row, and the current state parameter (i.e., the target state parameter) of the target container is updated accordingly, and step 41 and the subsequent steps are performed again, that is, a new target cell grid is determined again in the new target row (row 1) and a target filling area capable of accommodating the target element B4 is continuously searched.

Then, as can be seen from fig. 4A, in the new processing procedure, the current target row is row 1, and further the target cell grid can be determined to be C2, and as can be seen, the target element B4 still cannot be filled in the current target row. Then the next line (line 2) of the current target line (line 1) may be taken as a new target line and the current state parameter (i.e., the target state parameter) of the target container is updated accordingly, and step 41 and the following steps are performed again, i.e., a new target cell grid is determined again in the new target line (line 2) and the search for a target fill area capable of accommodating the target element B4 is continued.

Then, as can be seen from fig. 4A, in the new processing procedure, the current target is the 2 nd row, and the target cell grid is further determined to be C3, it can be seen that the number of free columns 4 of the target row is greater than the number of columns 3 of the target element B4, and thus it can be determined that the target element B3 can be filled in the 3 rd row. Thus, a region of 1 row and 3 columns having the target cell grid C3 as a vertex grid can be determined as a target filling region. Accordingly, the subsequently filled target element B4 would be as shown in FIG. 4C.

After the target filling area of the target element is determined, if there is an element for which the filling area is not determined yet, updating the state parameters of the target container, and executing step 21 again until each element to be filled determines a corresponding target filling area.

If the target filling area of the current target element is determined, there are elements which do not determine the filling area, which indicates that not all elements which need to be filled have found the corresponding filling area, and therefore, the state parameters of the target container need to be updated, and the method returns to step 21, determines a new target element from the elements which do not determine the filling area, and determines the target filling area of the target element until all elements determine the corresponding target filling area. Wherein, the state parameters of the target container need to be updated according to the state of the target container filled with the current target element.

Therefore, the elements are filled into the target filling areas corresponding to the elements based on the target filling areas corresponding to the elements respectively, so that filling of the elements is realized. Wherein, since the state parameter of the target container characterizes the state parameter after the element of the determined filling area is filled into the target container, that is, which unit grids have been predetermined as the filling area of the element, the state parameter of the target container is not affected as long as the filling area of the element is determined whether the element is actually filled into the target container or not. Therefore, the element may be filled after the target filling area of the element is determined, or may be filled after the target filling areas of all the elements are determined, which is not limited in the present disclosure.

The following explains a process of determining an element filling position (i.e., a filling region) in the present disclosure, taking the layout parameter extracted based on the grid layout code provided above as an example. Wherein the target container is a 12-column (column 0 to column 11) grid container provided in the foregoing example, and the determining of the element filling areas is performed in order of the element identifications from small to large.

When the fill area is determined for the first time, the target element is an element with an element identification of 0 (hereinafter referred to as element D1), the layout parameters are { index:0, unity: 5, column:6, and rowSpan:4}, it can be known that element D1 is 4 rows and 6 columns, the target container is empty at this time, and the state parameters are the state parameters of 12 columns of the target container when no element is filled, wherein currRow: { span:0, index:0}, therefore, the target cell grid can be determined to be the cell grid of column 0 of row 0 of the target container (i.e., the cell grid of the upper left corner of the target container), and the filling should be started from column 0 of row 0 of the target container this time, and further, based on the size of element D1, the four vertices of the target fill area can be determined to be (6,0), (6,4), (0,0), and after the element D1 is filled into the target fill area, the target container may be as shown in fig. 6A.

At this time, there are also unfilled elements, so the state parameters of the update target container are:

where curRow is { span:0, index:6} indicating that the next fill starts from column 6 of row 0 of the target container to find the fill location. After the first element D1 is filled, the number of filled rows rowSpan of the target container will be 4, so that the number of first 6 columns of empty rows filled with element D1 will be 0, and the number of subsequent 6 columns of empty rows will be 4, i.e., gaps ═ 0,0,0,0,0,4,4,4, 4.

After that, the determination of the second filling area is performed. In the second determination of the filling area, the target element is the element with the element identification 1 (hereinafter referred to as element D2), the layout parameters are { index:1, unity: 5, column:4, rowSpan:2}, it is known that element D2 is 2 rows and 4 columns, and the state parameter of the target container is taken as the target state parameter, where currrow is { span:0, index:6}, therefore, it can be determined that the target cell grid is the cell grid of the 6 th column of the 0 th row of the target container (i.e., cell grid E1 in fig. 6A), the filling should be started from the 6 th column of the 0 th row of the target container this time, the filling can be known at the current position based on the target state parameter, and further, the four vertices of the target filling area can be determined to be (10,0), (10,2), (6,0) in order based on the size of element D2, after the element D2 is filled into the target filling area, the target container may be as shown in fig. 6B. At this time, there are also unfilled elements, so the state parameters of the update target container are:

where curRow is { span:0, index:10} indicating that the next fill starts from column 10 of row 0 of the target container to find the fill location. After the second element D2 is filled, since the number of rows of element D2 is less than the number of filled rows, the number of filled rows rowSpan of the target container is still 4, so that the number of columns 6 to 9 with element D2 filled will become 2, and the number of remaining rows of the subsequent 2 columns will still be 4, i.e., gaps ═ 0,0,0,0,0,2,2,2,2,4, 4.

After that, determination of the third filling area is performed. When the filling area is determined for the third time, the target element is the element with the element identifier 2 (hereinafter referred to as element D3), the layout parameters are { index:2, unity: 5, column:6, and rowSpan:2}, it can be known that element D3 is 2 rows and 6 columns, and the state parameter of the target container at this time is the target state parameter, where currrow is { span:0, index:10}, so that the target cell grid can be determined to be the cell grid of the 10 th column of the 0 th row of the target container (i.e., cell grid E2 in fig. 6B), and the filling should be started from the 10 th column of the 0 th row of the target container this time. When the combined gaps is [0,0,0,0,0,0,2,2,2, 4,4], it is known that there is no position where the lower element D3 can be filled in the 0 th row, that is, the current position cannot be filled. Therefore, it can be seen that the target cell grid is the cell grid of the 10 th column of the 1 st row of the target container (i.e., cell grid E3 in fig. 6B) and that this time, the filling should be started from the 10 th column of the 1 st row of the target container, when the state parameter of the update target container is currrow of { span:1, index:0}, and gaps ═ is [0,0,0,0,2,2,2,4, 4 ]. When the combined gaps is [0,0,0,0,0,0,2,2,2, 4,4], it is known that there is no position where the next element D3 can be filled in row 1, that is, the current position cannot be filled. Therefore, it can be seen that the target cell grid is the cell grid of column 6 of row 3 of the target container (i.e., cell grid E4 in fig. 6B) and that this time, the filling should be started from column 6 of row 2 of the target container, as the currrow in the state parameters of the update target container is { span:2, index:0}, and in conjunction with the condition that gaps is [0,0,0,0,2,2,2, 2,4,4 ]. When the combination of gaps ═ 0,0,0,0,0,2,2,2, 4,4] indicates that there is a position in row 2 where the element D3 can be filled, and further, based on the size of the element D3, it can be determined that the four vertices of the target filling region are (12,2), (12,4), (6,2) in this order, and after the element D3 is filled into the target filling region, the target container can be as shown in fig. 6C. At this time, there are also unfilled elements, so the state parameters of the update target container are:

where curRow is { span:3, index:0} indicating that the next fill starts from column 0 of row 3 of the target container to find the fill location. After the third element D3 is filled, the entire row 2 is filled.

By analogy, the target filling area of each element can be determined, and then the elements can be filled into the corresponding target filling areas respectively.

In a possible implementation manner, in step 13, determining elements that can be merged according to the positions of the elements associated with the target associated object in the target container may include the following steps, as shown in fig. 7:

in step 71, determining a first element to be subjected to mergence identification from the elements associated with the target associated object;

in step 72, for the first element, determining an element which can be merged with the first element from the elements associated with the target associated object;

in step 73, it is determined whether there is an element that has not been subjected to mergence identification among the elements associated with the target associated object;

if it is determined in step 73 that there are elements for which merging identification has not been performed, go to step 74;

in step 74, the element which has not undergone mergence recognition is taken as a new first element, and step 72 is executed again until all the elements associated with the target associated object undergo mergence recognition.

The mergence identification is used to determine elements that can be merged with each other, that is, to determine whether the current first element can be merged with other elements that are also associated with the target association object, and if so, which elements can be merged.

In general, for elements associated with the same target associated object, the mergence identification may be performed according to a preset rule. For example, if the element identifiers are numbers, the element identifiers may be sequentially identified from small to large. Taking the layout parameters of 12 elements as an example, wherein the 6 elements with element identifiers of 0, 1, 2, 3, 4, and 5 are associated with the same associated object 5, therefore, the element with element identifier of 0 can be first subjected to merge recognition, and after recognition is completed, the element with the smallest element identifier is selected from the elements without merge recognition for next merge line recognition until all the elements associated with the target associated object are subjected to merge line recognition.

In one possible embodiment, step 72 may include the steps of:

selecting at least one second element which can be used as a merging object of the first element from the elements associated with the target associated object;

determining a target rectangular area capable of covering the entirety of the first element and the second element;

if the target rectangular area is not overlapped with other elements except the first element and the second element, determining that the first element and the second element can be combined;

and if the target rectangular area covers the whole of a third element associated with the target associated object besides the first element and the second element, determining that the first element, the second element and the third element can be combined.

That is, when determining an element that can be merged with the current first element among elements associated with the target associated object, different second elements are sequentially selected for proceeding. Typically, a second element is first selected to determine whether the second element can be merged with the first element.

And determining an element which can be merged with the first element from the elements associated with the target associated object, and the method further comprises the following steps:

after the first element and the second element are determined to be capable of being combined, or after the first element, the second element and the third element are determined to be capable of being combined, if an alternative element which is not selected as a combined object of the first element exists in the elements associated with the target associated object, the alternative element is used as a new second element except the current second element, and the step of determining the target rectangular area capable of covering the whole of the first element and the second element is performed again until the elements associated with the target associated object are all selected as the combined object of the first element.

That is, in the case where it is determined that the current second element can be merged with the first element, a new element is further added as an additional element of the second element on the basis of the current second element to determine whether the first element can be merged with more elements on the basis of being merged with the current second element.

Furthermore, determining an element that can be merged with the first element from the elements associated with the target associated object may further include the steps of:

if the target rectangular region covers a part of the third element besides the first element, or if the target rectangular region covers a fourth element which is not associated with the target associated object besides the first element, the step of selecting at least one second element which can be used as a merging object of the first element from the elements associated with the target associated object is executed again until the elements which can be merged with the first element are determined.

That is, if the target rectangular region does not cover the whole of the third element but only a part of the third element, it cannot be determined whether the first element and the second element can be combined currently, and therefore, the second element may be reselected to perform a new attempt. In the subsequent process, if the combination of the current first element and other elements can cover the whole of the current second element, the current first element has an opportunity to be combined with the current second element. If the target rectangular area covers the elements which are not associated with the target associated object, the current first element cannot be merged with the second element, and the second element needs to be reselected for a new attempt.

In addition, the method provided by the present disclosure may further include the steps of:

and if the elements associated with the target associated object are all selected as the combined objects of the first element and the elements which can be combined with the first element are not determined yet, determining that the first element cannot be combined with other elements.

That is, if a certain element cannot be merged with another element after attempting to merge the element with the other element, it is determined that the element cannot be merged with the other element, and the element is still an independent element without being merged.

If there are any elements associated with the target related object that have not been subjected to mergence recognition, the elements are set as new first elements, and step 72 is executed again until all the elements associated with the target related object are subjected to mergence recognition.

FIG. 8A shows the target container with the elements filled, wherein 0 in "0-5" is the element ID, and 5 is the associated object associated with the element ID of 0. As can be seen from fig. 8, the elements identified as 0, 1, 2, 3, 4, 5 are all associated with the association object 5, and the same applies. In the following description example process, elements associated with the associated object 5 and having an element identification of 0 will be represented by 0-5.

Assuming that the current target associated object is the associated object 5, when determining which of the elements associated with the associated object 5 can be merged, first, the elements 0-5 may be taken as the first element, and with reference to the first element, it is determined which elements can be merged therewith. Next, determining 1 to 5 as the second element, it is understood that the target rectangular region capable of covering the entirety of both may be a shaded region as shown in fig. 8B. The target rectangular area covers parts of the elements 2 to 5 in addition to the first elements 0 to 5 and the second elements 1 to 5, and thus the target rectangular area covers parts of the third elements and cannot be combined at present. Thus, the step of selecting at least one second element, optionally elements 2-5, 3-5, 4-5 and 5-5, which can be a merging object of the first element, among the elements associated with the target associated object, can be performed again.

Next, in a preset order, the elements 2-5 may be selected as new second elements, and it is known that the target rectangular area capable of covering the whole of the two may be a shaded area as shown in fig. 8C. The target rectangular area covers the entirety of elements 1-5 in addition to the first elements 0-5 and the second elements 2-5, and the elements 1-5 are also associated with the associated object 5, which corresponds to the entirety of the third element. Thus, it can be determined that elements 0-5, elements 1-5, and elements 2-5 can be combined, where elements 1-5 are the third elements.

At this time, the elements 3 to 5, 4 to 5 and 5 to 5 remained undetermined whether or not they could be combined with the first elements 0 to 5. Then the element 3-5 can be taken as the second element to be added, i.e. it is determined whether elements 0-5, elements 1-5, elements 2-5 and elements 3-5 can be combined. Based on the positions of the several, a target rectangular region that can cover the several can be determined as a shaded region as shown in fig. 8D. Besides the first element and the second element, the target rectangular area also covers the whole of the elements 4-5, 5-5, 6-4 and 7-6, and thus, the target rectangular area covers the element associated with the associated object 4 and the element associated with the associated object 6, namely the fourth element, which cannot be combined currently. Thus, the step of choosing at least one second element that can be a merging object of the first element among the elements associated with the target associated object may be performed again to subsequently determine whether elements 0-5, elements 1-5, elements 2-5 can be merged with elements 4-5 or elements 5-5, respectively. As can be seen from the figure, the cases of the elements 4 to 5 and the elements 5 to 5 are similar and cannot be combined, and therefore, the elements 1 to 5 and the elements 2 to 5 can be determined to be combined with the elements 0 to 5.

In this case, there is also no combination of elements 3-5, 4-5 and 5-5. Then the determination of elements that can be merged with elements 3-5 can continue with elements 3-5 as the first element. First, the elements 4-5 may be determined to be the second element, and the target rectangular region may be determined to be a shaded region as shown in fig. 8E. There are no overlapping elements within the target rectangular region other than the first element 3-5 and the second element 4-5, and thus it can be determined that the element 3-5 and the element 4-5 can be merged.

At this point, the remaining element 5-5 has not yet been determined to be able to be combined with the first element 3-5. Then next, element 5-5 may be taken as the second element that is added newly, i.e., it is determined whether elements 3-5, 4-5, and 5-5 can be combined. Based on the positions of the elements, a target rectangular area capable of covering the elements can be determined to be a shaded area as shown in fig. 8F, the target rectangular area covers the elements 7-6 in addition to the first element and the second element, and the target rectangular area covers the fourth element associated with the associated object 6, which cannot be merged currently. Also, no other element can be regarded as a new second element, and thus, it can be determined that there are elements 4 to 5 that can be combined with elements 3 to 5.

At this time, there is also an element 5-5 that is not merged with other elements, and if the element 5-5 is not successfully merged with the other 5 elements, the element 5-5 cannot be merged with other elements and remains as an independent element. So far, for the target associated object 5, elements capable of being combined in the associated elements are determined.

In the above manner, it can be determined which elements of the elements associated with the target object are combinable. Therefore, the above operation is performed for each target associated object, and it can be determined which elements in the target container can be merged. Elements that can be merged can then be merged.

The merging of elements that can be merged may include the following steps:

for each group of mergeable elements, the group of mergeable elements is merged into the target region.

Wherein the target area is a rectangular area that can cover the entirety of the set of elements that can be merged.

That is, for each group of elements that can be merged, a rectangular area that can cover the entirety of the group of elements that can be merged is determined as a target area, and the target area is taken as an area occupied by the group of elements after merging.

It should be noted that, for the same associated object, there may be multiple groups of elements that can be combined, and these elements are combined in units of groups, and do not affect each other. For example, with 6 elements associated with the associated object 5 in FIG. 8A, as can be seen from the merger identification, elements 0-5, elements 1-5 and elements 2-5 can be merged, and elements 3-5 and elements 4-5 can be merged, then the two groups are merged separately. That is, elements 0-5, elements 1-5, and elements 2-5 are merged into the form shown by the shaded area in FIG. 8C, and elements 3-5 and elements 4-5 are merged into the form shown by the shaded area in FIG. 8E.

In a practical application scenario, a page for setting editable attributes of interactive material may be as shown in fig. 9, taking the interactive material of "size", as an example, where the interactive material includes a plurality of elements, such as elements M1, descriptive text information M2, replacement setting item M3, reset size setting item M4, width M5 and height M6, where M1, M2, M3 and M4 are merged, and M5 and M6 are merged, so that the elements, such as the schematic diagram, the descriptive text information, the replacement setting item and the reset size setting item, may set editable attributes thereof through one tick option N1, and both width and height may also set editable attributes thereof through one tick option N2.

Therefore, the interactive materials do not need to be set by taking the group as a unit, the setting freedom degree is improved, meanwhile, the mutually-associated elements can be combined under the appropriate condition, the combined elements can be uniformly set, the setting for each single element is not needed, and the setting efficiency is improved.

Fig. 10 is a block diagram of a page element layout apparatus provided in accordance with an embodiment of the present disclosure.

As shown in fig. 10, the apparatus 100 may include:

a parameter extraction module 1001, configured to extract layout parameters of an element to be filled from a grid layout code, where the layout parameters of the element include an element identifier, an associated object associated with the element, and an element size;

a filling module 1002, configured to fill each element into a target container according to the layout parameter of the element;

a merging module 1003, configured to, after the filling is completed, determine, for each target association object associated with more than one element, elements that can be merged according to positions of the elements associated with the target association object in the target container, and merge the elements that can be merged.

Optionally, the filling module 1002 includes:

the first obtaining submodule is used for obtaining the target elements of the determined filling area from the elements to be filled according to the element identification;

a second obtaining submodule, configured to obtain a current state parameter of the target container as a target state parameter, where the target container is a grid container, the state parameter of the target container includes a number of filled rows, a number of filled columns, priority filling row information, and a number of empty rows in each column of filled rows in the target container, and the priority filling row information is at least used to indicate a target row that is filled most preferentially in the target container;

the first determining submodule is used for determining a target filling area of the target element according to the element size of the target element and the target state parameter;

the first updating submodule is used for updating the state parameters of the target container if the elements of which the filling areas are not determined exist after the target filling areas of the target elements are determined, and triggering the first obtaining submodule to obtain the target elements of which the filling areas are determined again from the elements to be filled according to the element identifications until all the elements to be filled determine the corresponding target filling areas;

and the filling submodule is used for filling each element into the target filling area corresponding to the element.

Optionally, the first determining sub-module includes:

the second determining submodule is used for determining a target unit grid which is filled with the highest priority in a target row corresponding to the current target state parameter;

the judgment submodule is used for judging whether the target element can be filled in the target line or not according to the element size of the target element and the target unit grid;

and a third determining submodule, configured to determine, if it is determined that the target element can be filled in the target row, a region that takes the target cell grid as a vertex angle grid and has a size that is consistent with an element size of the target element, as the target filled region.

Optionally, the target cell grid is determined according to the number of empty rows per column of filled rows in the target container.

Optionally, the element size of the target element includes the number of rows and columns occupied by the target element;

the judgment submodule includes:

the fourth determining submodule is used for determining the number of the vacant columns of the target row by taking the column where the target unit grid is positioned as the starting column;

a fifth determining submodule, configured to determine that the target element can be filled in the target row if the number of the free columns is not less than the number of columns occupied by the target element;

and a sixth determining submodule, configured to determine that the target element cannot be filled in the target row if the number of the free columns is smaller than the number of columns occupied by the target element.

Optionally, the first determining sub-module further includes:

and the second updating submodule is used for determining the next line of the current target line as a new target line to update the target state parameters if the target elements cannot be filled in the target line, and triggering the second determining submodule to determine the target unit grids which are filled most preferentially in the target line corresponding to the current target state parameters again until the target filling area is determined.

Optionally, the merging module 1003 includes:

a seventh determining submodule, configured to determine, from elements associated with the target associated object, a first element to be subjected to mergence identification, where the mergence identification is used to determine elements that can be merged with each other;

an eighth determining submodule, configured to determine, for the first element, an element that can be merged with the first element from among elements associated with the target associated object;

and the third updating sub-module is configured to, if there are elements that have not been subjected to mergence identification in the elements associated with the target associated object, regard the elements as new first elements, and trigger the eighth determining sub-module to determine, again for the first elements, elements that can be merged with the first elements from the elements associated with the target associated object until all the elements associated with the target associated object are subjected to mergence identification.

Optionally, the eighth determining sub-module includes:

a selection submodule, configured to select, from the elements associated with the target associated object, at least one second element that can be a merged object of the first element;

a ninth determining submodule for determining a target rectangular area capable of covering the entirety of the first element and the second element;

a tenth determining submodule, configured to determine that the first element and the second element can be merged if the target rectangular region is not overlapped with other elements except the first element and the second element;

an eleventh determining sub-module, configured to determine that the first element, the second element, and the third element can be merged if the target rectangular region covers an entirety of a third element associated with the target associated object in addition to the first element and the second element.

Optionally, the eighth determining sub-module further includes:

a fourth updating sub-module, configured to, after determining that the first element and the second element can be merged, or after determining that the first element, the second element, and the third element can be merged, if there is an alternative element that is not selected as a merged object of the first element in the elements associated with the target associated object, regard the alternative element as a new second element other than the current second element, and trigger the ninth determining sub-module to determine again a target rectangular region that can cover the whole of the first element and the second element until the elements associated with the target associated object are all selected as the merged object of the first element.

Optionally, the eighth determining sub-module further includes:

and a fifth updating sub-module, configured to, if the target rectangular region covers a part of the third element in addition to the first element, or if the target rectangular region covers a fourth element that is not associated with the target associated object in addition to the first element, trigger the selection sub-module to select at least one second element that can be a merged object of the first element from the elements associated with the target associated object again until an element that can be merged with the first element is determined.

Optionally, the merging module 1003 further includes:

a twelfth determining sub-module, configured to determine that the first element cannot be merged with other elements if all the elements associated with the target associated object are selected as merging objects of the first element and an element that can be merged with the first element is not determined yet.

Optionally, the merging module 1003 includes:

and the merging submodule is used for merging the group of elements which can be merged into a target area aiming at each group of elements which can be merged, wherein the target area is a rectangular area which can cover the whole group of elements which can be merged.

With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.

Referring now to FIG. 11, shown is a schematic diagram of an electronic device 600 suitable for use in implementing embodiments of the present disclosure. The terminal device in the embodiments of the present disclosure may include, but is not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (personal digital assistant), a PAD (tablet computer), a PMP (portable multimedia player), a vehicle terminal (e.g., a car navigation terminal), and the like, and a stationary terminal such as a digital TV, a desktop computer, and the like. The electronic device shown in fig. 11 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present disclosure.

As shown in fig. 11, electronic device 600 may include a processing means (e.g., central processing unit, graphics processor, etc.) 601 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage means 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data necessary for the operation of the electronic apparatus 600 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.

Generally, the following devices may be connected to the I/O interface 605: input devices 606 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; output devices 607 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 608 including, for example, tape, hard disk, etc.; and a communication device 609. The communication means 609 may allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data. While fig. 11 illustrates an electronic device 600 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided.

In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a non-transitory computer readable medium, the computer program containing program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication means 609, or may be installed from the storage means 608, or may be installed from the ROM 602. The computer program, when executed by the processing device 601, performs the above-described functions defined in the methods of the embodiments of the present disclosure.

It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.

In some implementations, the clients may communicate using any currently known or future developed network Protocol, such as HTTP (HyperText Transfer Protocol), and may interconnect with any form or medium of digital data communication (e.g., a communications network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed network.

The computer readable medium may be embodied in the electronic device; or may exist separately without being assembled into the electronic device.

The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: extracting layout parameters of elements to be filled from the grid layout code, wherein the layout parameters of the elements comprise element identifications, associated objects associated with the elements and element sizes; filling each element into a target container according to the layout parameters of the elements; after filling, for each target associated object associated with more than one element, determining elements capable of being merged according to the positions of the elements associated with the target associated object in the target container, and merging the elements capable of being merged.

Computer program code for carrying out operations for the present disclosure may be written in any combination of one or more programming languages, including but not limited to an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The modules described in the embodiments of the present disclosure may be implemented by software or hardware. Where the name of a module does not in some cases constitute a definition of the module itself, for example, the parameter extraction module may also be described as a "module that extracts layout parameters of elements to be populated from the grid layout code".

The functions described herein above may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), systems on a chip (SOCs), Complex Programmable Logic Devices (CPLDs), and the like.

In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

According to one or more embodiments of the present disclosure, there is provided a page element layout method, including:

According to one or more embodiments of the present disclosure, there is provided a page element layout method, wherein the filling of each element into a target container according to a layout parameter of the element includes:

acquiring target elements of the determined filling area from the elements to be filled according to the element identification;

acquiring current state parameters of the target container as target state parameters, wherein the target container is a grid container, the state parameters of the target container comprise the filled row number, the filled column number, priority filling row information and the number of empty rows in each column of filled rows in the target container, and the priority filling row information is at least used for indicating the target row which is filled most preferentially in the target container;

determining a target filling area of the target element according to the element size of the target element and the target state parameter;

after the target filling area of the target element is determined, if the element of which the filling area is not determined exists, updating the state parameters of the target container, and executing the step of obtaining the target element of which the filling area is determined from the elements to be filled again according to the element identification until each element to be filled determines the corresponding target filling area;

and filling each element into the target filling area corresponding to the element.

According to one or more embodiments of the present disclosure, there is provided a page element layout method, where determining a target filling area of a target element according to an element size of the target element and a target state parameter includes:

determining a target unit grid filled with the highest priority in a target row corresponding to the current target state parameter;

judging whether the target element can be filled in the target line or not according to the element size of the target element and the target unit grid;

and if the target element can be filled in the target row, determining a region which takes the target unit grid as a vertex angle grid and has the size consistent with the element size of the target element as the target filling region.

In accordance with one or more embodiments of the present disclosure, a page element layout method is provided, the target cell grid being determined according to the number of empty rows per column of filled rows within the target container.

According to one or more embodiments of the present disclosure, there is provided a page element layout method, where an element size of a target element includes a number of rows and a number of columns occupied by the target element;

the judging whether the target element can be filled in the target line according to the element size of the target element and the target unit grid comprises the following steps:

determining the number of spare columns of the target row by taking the column of the target unit grid as an initial column;

if the number of the vacant columns is not smaller than the number of the columns occupied by the target elements, determining that the target elements can be filled in the target rows;

and if the number of the vacant columns is smaller than the number of the columns occupied by the target element, determining that the target element cannot be filled in the target row.

According to one or more embodiments of the present disclosure, there is provided a page element layout method, where determining a target filling area of a target element according to an element size of the target element and the target state parameter further includes:

and if the target element cannot be filled in the target row, determining the next row of the current target row as a new target row to update the target state parameters, and executing the step of determining the target unit grids filled with the highest priority in the target rows corresponding to the current target state parameters again until the target filling area is determined.

According to one or more embodiments of the present disclosure, a page element layout method is provided, where determining elements that can be merged according to positions of elements associated with the target associated object in the target container includes:

determining a first element to be subjected to combinability identification from elements associated with the target associated object, wherein the combinability identification is used for determining elements capable of being combined with each other;

for the first element, determining an element which can be merged with the first element from elements associated with the target associated object;

and if the elements which are not subjected to merging identification exist in the elements associated with the target associated object, taking the elements as new first elements, and executing the step of determining the elements which can be merged with the first elements from the elements associated with the target associated object again aiming at the first elements until the elements associated with the target associated object are subjected to merging identification.

According to one or more embodiments of the present disclosure, there is provided a page element layout method, wherein determining an element that can be merged with the first element from elements associated with the target associated object includes:

if the target rectangular area covers the whole of a third element associated with the target associated object besides the first element and the second element, determining that the first element, the second element and the third element can be merged.

According to one or more embodiments of the present disclosure, there is provided a page element layout method, where determining an element that can be merged with the first element from elements associated with the target associated object further includes:

after determining that the first element and the second element can be merged, or after determining that the first element, the second element and the third element can be merged, if an alternative element which is not selected as a merged object of the first element exists in the elements associated with the target associated object, taking the alternative element as a new second element except the current second element, and performing the step of determining a target rectangular region which can cover the whole of the first element and the second element again until the elements associated with the target associated object are all selected as the merged object of the first element.

if the target rectangular region covers a part of the third element besides the first element, or if the target rectangular region covers a fourth element which is not associated with the target associated object besides the first element, the step of selecting at least one second element which can be used as a merging object of the first element from the elements associated with the target associated object is performed again until the elements which can be merged with the first element are determined.

According to one or more embodiments of the present disclosure, there is provided a page element layout method, the method further including:

According to one or more embodiments of the present disclosure, there is provided a page element layout method for merging elements capable of being merged, including:

for each group of elements that can be merged, the group of elements that can be merged is merged into a target region, which is a rectangular region that can cover the entirety of the group of elements that can be merged.

According to one or more embodiments of the present disclosure, there is provided a page element layout apparatus including:

According to one or more embodiments of the present disclosure, there is provided a computer-readable medium, on which a computer program is stored, which when executed by a processing apparatus, implements the steps of the page element layout method described in any of the embodiments of the present disclosure.

According to one or more embodiments of the present disclosure, there is provided an electronic device including:

a storage device having a computer program stored thereon;

processing means for executing the computer program in the storage means to implement the steps of the page element layout method according to any embodiment of the present disclosure.

The foregoing description is only exemplary of the preferred embodiments of the disclosure and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the disclosure herein is not limited to the particular combination of features described above, but also encompasses other embodiments in which any combination of the features described above or their equivalents does not depart from the spirit of the disclosure. For example, the above features and (but not limited to) the features disclosed in this disclosure having similar functions are replaced with each other to form the technical solution.

Further, while operations are depicted in a particular order, this should not be understood as requiring that such operations be performed in the particular order shown or in sequential order. Under certain circumstances, multitasking and parallel processing may be advantageous. Likewise, while several specific implementation details are included in the above discussion, these should not be construed as limitations on the scope of the disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features that are described in the context of a single embodiment can also be implemented in multiple embodiments separately or in any suitable subcombination.

Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims. With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.

Claims

1. A method of page element layout, the method comprising:

2. The method of claim 1, wherein the populating the respective element into the target container according to the layout parameters of the elements comprises:

3. The method of claim 2, wherein determining the target fill area of the target element based on the element size of the target element and the target status parameter comprises:

4. The method of claim 3, wherein the target cell grid is determined based on a number of empty rows per column of filled rows within the target container.

5. The method of claim 3, wherein the element size of the target element comprises a number of rows and a number of columns occupied by the target element;

6. The method of claim 3, wherein determining the target fill area for the target element based on the element size of the target element and the target status parameter further comprises:

7. The method of claim 1, wherein determining elements that can be merged according to the positions of the elements associated with the target associated object in the target container comprises:

8. The method according to claim 7, wherein the determining, from the elements associated with the target associated object, an element that can be merged with the first element comprises:

9. The method of claim 8, wherein determining, from the elements associated with the target associated object, an element that can be merged with the first element further comprises:

10. The method of claim 8, wherein determining, from the elements associated with the target associated object, an element that can be merged with the first element further comprises:

11. The method of claim 10, further comprising:

12. The method of claim 1, wherein the merging elements that can be merged comprises:

13. An apparatus for page element layout, the apparatus comprising:

14. A computer-readable medium, on which a computer program is stored, characterized in that the program, when being executed by processing means, carries out the steps of the method of any one of claims 1-12.

15. An electronic device, comprising:

a storage device having a computer program stored thereon;

processing means for executing the computer program in the storage means to carry out the steps of the method according to any one of claims 1 to 12.