A software interface entity design method, device, terminal and storage medium

Abstract

The embodiment of the present invention provides a software interface layout method, device, terminal and storage medium. The method determines the dividing edge according to the relative position of each entity on a given plane, the plane is composed of rectangular units of preset size, and the area occupied by the entity is a rectangle; the plane is divided according to all the dividing edges in a dividing direction to obtain each group; the plane is divided according to the dividing edges of each group of planes until there is no dividing edge in the group; the size of the entities in the group is restored to the actual view; in some implementation processes, a reasonable tree grouping structure can be generated according to the relative position of the entities on the operation plane without any other configuration information, which facilitates the further processing of these entities by the downstream, and restores the layout that can adapt to a variety of physical sizes through the grouped entities, greatly reducing the repetitive work of manually adapting to a variety of physical sizes, improving efficiency and reducing skill requirements.

Description

Technical Field

[0001] The embodiments of the present invention relate to, but are not limited to, the field of software technology, and specifically, relate to, but are not limited to, a software interface entity design method, device, terminal, and storage medium. Background Art

[0002] With the continuous development of software technology, there are more and more scenarios where some tools are developed by software to replace and assist manual work. Most of these tools have the characteristics of what you see is what you get, so this type of tool is called a visual development tool. Visual development tools can transform the original abstract process that requires human participation into a visual process. Most of the visual means of such tools are to use some rectangles to represent the entities to be operated, and these rectangles representing the entities are laid out on a plane. The tool user can easily operate one or more entities through this plane.

[0003] A typical example is the software interface development process. Traditionally, people describe the interface through lines of code, which is an extremely abstract process. Visual development tools provide a plane that is almost the same as the actual effect. People complete the software interface development through mouse actions such as clicking, dragging, and dropping. Visual development tools need to correctly classify these entities (controls) laid out on the plane before they can assist people in generating appropriate codes.

[0004] In the related technology, the traditional method of developing software interfaces is to describe the interfaces through lines of code. On the one hand, this is very abstract, and on the other hand, it requires considerable professional knowledge and skills. A developer needs to go through a long period of learning and trial and error before he can adapt to such an abstract development process and master the relevant knowledge and skills. There is a contradiction between the high skill threshold required for professional software interface development and the fact that most people who need to participate in the development of these interfaces do not have the relevant skills, and thus these interface developers are unable to complete the software interface layout. Summary of the invention

[0005] The embodiments of the present invention provide a software interface entity design method, device, terminal and storage medium, which mainly solve the technical problem that the skill threshold required for professional software interface development in the related technology is too high, and the contradiction between the fact that most people who need to participate in the development of these interfaces do not have the relevant skills, and thus these interface developers are unable to complete the software interface layout.

[0006] In order to solve the above technical problems, an embodiment of the present invention provides a software interface entity design method, comprising:

[0007] The segmentation edge is determined according to the relative positions of the entities on the current operation plane. The operation plane is composed of rectangular units of preset sizes, and the area occupied by the entity is a rectangle.

[0008] The operation plane is divided according to all the dividing edges in a dividing direction to obtain sub-planes;

[0009] Each sub-plane is further divided according to its dividing edges until no dividing edges exist on the sub-plane; the entity of the given plane is restored to size and restored to the actual view.

[0010] The embodiment of the present invention also provides a device, including a determination module, a grouping module and a restoration module;

[0011] A determination module, used to determine the segmentation edge according to the relative positions of the entities on the current operation plane, the operation plane is composed of rectangular units of preset sizes, and the area occupied by the entity is a rectangle;

[0012] A grouping module is used to divide the operation plane according to all the dividing edges in a dividing direction to obtain each sub-plane; and is also used to divide each sub-plane again according to the dividing edges of each sub-plane until there is no dividing edge in the sub-plane;

[0013] The restoration module is used to restore the size of the entities on a given plane to the actual view.

[0014] An embodiment of the present invention further provides a terminal, the terminal comprising a processor, a memory and a communication bus;

[0015] The communication bus is used to realize the connection and communication between the processor and the memory;

[0016] The processor is used to execute one or more programs stored in the memory to implement the steps of the software interface entity design method according to any one of claims 1 to 10.

[0017] An embodiment of the present invention further provides a storage medium, which stores one or more programs. The one or more programs can be executed by one or more processors to implement the steps of the above software interface entity design method.

[0018] The beneficial effects of the present invention are:

[0019] The embodiment of the present invention provides a software interface entity design method, device, terminal and storage medium, which determines the dividing edge according to the relative position of each entity on a given plane, the plane is composed of rectangular units of preset size, and the area occupied by the entity is a rectangle; the plane is divided according to all the dividing edges in a dividing direction to obtain each group; the plane is divided according to the dividing edges of each group of planes until there is no dividing edge in the group; the size of the entities in the group is restored to the actual view; in some implementation processes, a reasonable tree-like grouping structure can be generated according to the relative position of the entities on the operation plane without any other configuration information, which provides convenience for further processing of these entities downstream; manual labor only needs to complete the arrangement of each entity once according to actual needs, and the grouped entities of the present invention can restore the layout that can adapt to a variety of physical sizes; this can greatly reduce the repetitive work of manual adaptation to a variety of physical sizes, improve efficiency, and reduce skill requirements.

[0020] Other features and corresponding beneficial effects of the present invention are described in the latter part of the specification, and it should be understood that at least part of the beneficial effects become obvious from the description in the specification of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Figure 1 A schematic diagram of a flow chart of a software interface entity design method according to a first embodiment of the present invention;

[0022] Figure 2 A schematic diagram of an operation plane according to a first embodiment of the present invention;

[0023] Figure 3 It is a schematic diagram of an entity on an operation plane of the first embodiment of the present invention;

[0024] Figure 4 It is a schematic diagram of entity distribution on an operation plane according to a first embodiment of the present invention;

[0025] Figure 5 A schematic diagram of a virtual entity according to the first embodiment of the present invention;

[0026] Figure 6 is a schematic diagram of another virtual entity according to the first embodiment of the present invention;

[0027] Figure 7 A schematic diagram of a physical design on a plane according to a first embodiment of the present invention;

[0028] Figure 8 This is a schematic diagram of mixed reduction according to Embodiment 1 of the present invention;

[0029] Fig. 9 It is a schematic diagram of an entity on an operation plane according to a second embodiment of the present invention;

[0030] Fig.10 A schematic diagram of a method for grouping operation planes according to a second embodiment of the present invention;

[0031] Fig.11 This is a schematic diagram of a second embodiment of the present invention restored to its actual size;

[0032] Fig.12 A schematic diagram of calculating the number of grids according to the second embodiment of the present invention;

[0033] Fig.13 This is a schematic diagram of mixed reduction in Example 2 of the present invention;

[0034] Fig.14 It is a schematic diagram of a physical design in a vertical direction on a plane of the second embodiment of the present invention;

[0035] Fig.15 It is a schematic diagram of mixed reduction in the vertical direction of the second embodiment of the present invention;

[0036] Fig.16 A schematic diagram of a flow chart of a software interface entity design method according to Embodiment 3 of the present invention;

[0037] Fig.17 It is a schematic diagram of a physical design on a plane of the third embodiment of the present invention;

[0038] Fig.18 This is a schematic diagram of a tree structure formed by groups according to Embodiment 3 of the present invention;

[0039] Fig.19 This is a schematic diagram of the structure of a device according to a fourth embodiment of the present invention;

[0040] Fig. 20 This is a schematic diagram of the structure of a terminal according to Embodiment 4 of the present invention. DETAILED DESCRIPTION

[0041] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the following is a further detailed description of the embodiments of the present invention through specific implementation methods combined with the accompanying drawings. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0042] Embodiment 1:

[0043] There is a contradiction between the high skill threshold required for professional software interface development and the fact that most people who need to participate in the development of these interfaces do not have the relevant skills. The traditional method of developing software interfaces is to describe the interface through lines of code. On the one hand, this is very abstract, and on the other hand, it requires considerable professional knowledge and skills. A developer needs to go through a long period of learning and trial and error before he can adapt to such an abstract development process and master the relevant knowledge and skills. The grouping and restoration method proposed in the embodiment of the present invention effectively solves the problem of software layout in this contradiction. A software interface entity design method is provided in the embodiment of the present invention. For details, please refer to Figure 1 , Figure 1 The software interface entity design method provided by the embodiment of the present invention includes:

[0044] S101. Determine a segmentation edge according to the relative positions of entities on a current operation plane, where the operation plane is composed of rectangular units of a preset size, and the area occupied by the entity is a rectangle.

[0045] In the embodiment of the present invention, the operation plane mentioned actually refers to a two-dimensional data area (or a matrix). When implemented in a computer, a two-dimensional array structure is usually used to represent it. The rectangular unit mentioned below is actually an element in the matrix, but this is not the only available structure; the operation plane is not a plane in the usual physical sense, but a logical mapping of the physical plane. Of course, the operation plane mentioned in the embodiment of the present invention has many similarities with the physical plane, and the physical plane can be used to assist in understanding the detailed implementation of the present invention.

[0046] It should be noted that the operation plane is composed of rectangular units of preset sizes. For example, in the horizontal direction of the operation plane, the operation plane is divided into multiple columns with the preset fixed size as the width according to the preset fixed size. Similarly, in the vertical direction, the operation plane is divided into multiple rows with the preset fixed size as the width according to the preset fixed size, so that the operation plane forms multiple small rectangular grids, each of which is the same, and the unit lengths of the small rectangular grids in the vertical and horizontal directions can be equal or unequal. In the embodiment of the present invention, the small rectangular grid is regarded as a rectangular unit, which has atomicity and cannot be subdivided, such as Figure 2 As shown, Figure 2 is a schematic diagram of an operation plane, where the grid lines in the figure are only used to visually distinguish each rectangular unit, but are not necessary. Figure 2 The rectangular units in the image have equal unit lengths in the vertical and horizontal directions.

[0047] In the embodiment of the present invention, the operation plane includes an entity, the area occupied by the entity is a rectangle, and cannot be other shapes, and the rectangle can only include N grids, where N≥1, and N can be decomposed into prime factors: N=N1*N2, where N1 N2 are both integers ≥1. The rectangular unit occupied by the entity includes a unique mark of the entity, which includes but is not limited to numbers, graphics, text, etc. For example, a same value is filled in each rectangular unit occupied by the entity, and the value can uniquely represent the entity, such as Figure 3 As shown, the plane includes entity 301 and entity 302, the unique identifier of entity 301 is 1, the unique identifier of entity 302 is 2, and the mark of the rectangular unit not occupied by the entity is empty.

[0048] Here, the determination of the split edge according to the relative position of each entity on the operation plane is described; the split edge includes a vertical split edge in the vertical direction and a horizontal split edge in the horizontal direction. Traverse each column on the operation plane, and when the non-empty mark of each rectangular unit on the left side of a column is inconsistent with the non-empty mark of the adjacent rectangular unit on the right side, the column is regarded as a vertical split edge in the vertical direction. For example Figure 3 The operation plane in includes 10 rows and 20 columns. Starting from the 1st column, each column on the operation plane is traversed. The entity has a unique value, and the rectangular unit not occupied by the entity does not include a value. For example, the value of each non-empty value rectangular unit on the left side of the 4th column is 1, and the value of the rectangular unit on the right side of the rectangular unit is also 1, then the 4th column is not a vertical cutting edge; if the value 1 of each non-empty value rectangular unit on the left side of the 11th column is inconsistent with the value 2 of the adjacent right rectangular unit, then the 11th column is a vertical cutting edge. It can be understood that when all the rectangular units on one side of a column are empty marks, and any rectangular unit on the other side of the column is a non-empty mark, then the column is a vertical cutting edge, such as Figure 3 In the figure, the rectangular cells on the left side of the third column are all empty, and the rectangular cells on the right side have a value of 1, so the third column is a vertical dividing edge. Figure 3 All vertical dividing edges on the current operation plane are given (the bold edges in the figure); similarly, each row on the operation plane is traversed. When the non-empty mark of each rectangular unit above a row is inconsistent with the non-empty mark of the adjacent rectangular unit below, the row is regarded as a horizontal dividing edge in the horizontal direction. The specific determination method is similar to that of the vertical dividing edge, which will not be repeated here.

[0049] S102 , dividing the operation plane according to all dividing edges in a dividing direction to obtain sub-planes.

[0050] In the embodiment of the present invention, the operation plane can be divided into two independent sub-planes by a cutting edge; when the operation plane is cut, it can only be cut in one direction, and the cutting action can only be performed at the boundary of a rectangular unit, and cannot be performed in any part in the middle of a rectangular unit. When the operation plane is cut according to the cutting edge, it can only be cut along the vertical or horizontal direction, and cannot be turned, cut diagonally, or cut in half. Figure 3 As shown in the figure, after splitting along the vertical splitting edges, four independent sub-planes will be obtained.

[0051] It is worth noting that the embodiments of the present invention can be split from any direction. Preferably, a direction with a larger number of split edges is selected for splitting. Splitting from any direction can always complete the grouping process. The advantage of selecting a direction with a larger number of edges as the splitting direction is that the splitting action can converge as quickly as possible, thereby making the splitting algorithm more efficient, and the length of the tree obtained by grouping can be made smaller and the complexity lower.

[0052] Specifically, determine the number of all vertical and horizontal cutting edges on the operation plane; take the direction of the cutting edge with the largest number as the cutting direction, for example, if the operation plane includes 5 vertical cutting edges and 4 horizontal cutting edges, then take the vertical direction as the cutting direction; of course, when the number of vertical cutting edges is equal to the number of horizontal cutting edges and is not 0, you can choose any direction for cutting. Then, according to the cutting direction, cut the entities distributed on the operation plane, cut from the vertical cutting edge to the bottom, cut the operation plane into multiple sub-planes, and complete the grouping work at the current level.

[0053] S103 , splitting is performed according to the splitting edges of each sub-plane until no splitting edges exist on the sub-plane.

[0054] In an embodiment of the present invention, the above steps S101 and S102 are repeated for each sub-plane, that is, the number of all vertical cutting edges and all horizontal cutting edges of each sub-plane is determined, a direction with a larger number is selected as the current cutting direction, the positions of each cutting edge in this direction are determined, the cutting action is executed, and each sub-plane is further cut and grouped until only one entity remains in the sub-plane or it cannot be cut any further.

[0055] When the number of vertical and horizontal edges of a sub-plane is zero, it means that the current sub-plane cannot be split any further, but it does not mean that there is only one entity on the current sub-plane. When multiple entities appear in certain specific arrangements, they may not be split any further, such as Figure 4 shown.

[0056] It is worth noting that the software layout method provided by the embodiment of the present invention also includes determining whether two entities overlap, and merging all overlapping entities together. Specifically, when two different entities in the operation plane occupy at least one same rectangular unit at the same time, it is determined that the two different entities overlap; all overlapping entities on the operation plane are determined, and all overlapping entities are combined into a group of virtual entities. Figure 5 As shown, entity 501 and entity 502 simultaneously cover rectangular unit 503. The forming of all overlapping entities into a group of virtual entities specifically includes determining the upper leftmost rectangular unit and the lower rightmost rectangular unit of all overlapping entities, and taking the rectangle formed by the determined rectangular units as a group of virtual entities, such as Figure 5 In the example, find the upper leftmost rectangular unit 503 and the lower rightmost rectangular unit 504 of the overlapping entities 501 and 502, and form a rectangle 505 by these two rectangular units, and the rectangle can frame all the overlapping entities, and then use the rectangle 505 as a virtual entity. Of course, a virtual entity can also be formed by the lower leftmost and upper rightmost rectangular units.

[0057] It should be noted that when a virtual entity covers surrounding entities, a new virtual entity is determined based on all covered entities and virtual entities until the new virtual entity no longer covers entities; that is, a virtual entity may cover more entities around it. At this time, the original virtual entity should be discarded, and all covered entities are put together to recalculate a new virtual entity; this cycle repeats until the new virtual entity no longer covers any new entities. Figure 6 As shown, the operation plane includes a virtual entity 601 , which covers the surrounding entity 602 , and a new virtual entity 603 is redefined to frame the virtual entity 601 and the entity 602 .

[0058] S104. Restore the dimensions of the entity on the given plane to the actual view.

[0059] In the embodiment of the present invention, the importance of logical mapping, grouping and restoration of the physical plane lies in that humans only need to arrange each entity once according to actual needs, and through the present invention, a layout that can adapt to a variety of physical sizes can be restored; this can greatly reduce the repetitive work of manually adapting to a variety of physical sizes, improve efficiency, and reduce skill requirements.

[0060] A given plane includes an operation plane or a sub-plane. A sub-plane can be a single sub-plane or a combination of multiple sub-planes. That is, all entities on the operation plane can be restored as a whole, or a single entity on the operation plane can be restored, or all entities on the sub-plane can be restored. The size of the entity on the given plane is restored. The entity can be a non-overlapping entity or a virtual entity composed of overlapping entities. Specifically, there are three restoration methods:

[0061] Restore according to actual size: The actual size of an entity in a given plane in the horizontal direction = the number of rectangular units of the entity in the horizontal direction * the horizontal unit length of the rectangular unit; for example, if the unit length of a rectangular unit in the horizontal direction is 8px, and an entity occupies 100 rectangular units in the horizontal direction, then the actual length of the entity in the horizontal direction is 800px; similarly, the actual size of an entity in the vertical direction = the number of rectangular units of the entity in the vertical direction * the vertical unit length of the rectangular unit. Although the method of restoring according to actual size is simple, it has very large constraints: the actual rendered size must be strictly equal to the design size, which greatly restricts the rendering scene of the visualization tool.

[0062] Relative restoration by proportion: This method avoids the shortcomings of the actual size restoration method. It allows the size during design to be inconsistent with the actual rendered size. This size restoration method actually uses proportional scaling to restore each entity, which is not applicable in most situations where a refined layout is required. Specifically, the actual horizontal size of an entity on a given plane = realWidth*(entityWidth / totalWidth) (unit: px), entityWidth is the horizontal width of the entity (unit: rectangular unit), realWidth is the total horizontal width of the operating plane (unit: rectangular unit), and realWidth is the actual horizontal size after restoration (unit: px); for example, an entity occupies 100 rectangular units in the horizontal direction, the total rectangular units of the operating plane are 200 rectangular units, and the actual horizontal size after restoration is 800px, then the actual horizontal size of the entity is 800*(100 / 200)=400px. Similarly, the actual size of an entity in a given plane in the vertical direction = realHeight*(entityHeight / totalHeight) (unit: px), entityHeight is the vertical height of the entity (unit: rectangular unit), totalHeight is the total vertical height of the operation plane (unit: rectangular unit), and realHeight is the actual height size after restoration (unit: px).

[0063] Restoration by actual size and relative restoration by proportion: On any row on a given plane, there may be multiple entities, and the expected restoration methods of these entities are either restoration by actual size when they were designed or restoration by proportion, which is called a hybrid restoration method. The hybrid restoration method can be degenerated into a single actual size restoration method or a single relative size restoration method; that is, in the embodiment of the present invention, a single size restoration method is also a hybrid restoration method.

[0064] In the mixed restoration mode, it is very important to correctly calculate the number of rectangular units occupied by a single entity or a group of entities (at least two entities form a group of entities) restored in proportion. It is very simple to calculate the number of rectangular units for a single entity. According to the definition of the number of rectangular units, it can be directly accumulated, and the result must be a positive integer. Figure 7 In the given plane shown (formed by a sub-plane composed of a single entity and a sub-plane composed of a group of entities), the rightmost entity 701 restored in proportion has 6 horizontal rectangular units. The method for calculating the number of rectangular units of a group of entities is to calculate the number of rectangular units of all entities in the group and finally take the maximum value. For example Figure 7 In the figure, there are 4 entities in the left sub-plane 702 (the 4 entities form a group), and the number of its horizontal rectangular units is: Max(11, 4, 0, 0) = 11, that is, the number of rectangular units of the entity restored to the original size is 0.

[0065] The number of rectangular units of each entity on the given plane is formed into a series (N 1 ,N 2 ,...,N m ), N i is an integer and N i ≥0, i=0,1…m, such as Figure 7 The number of rectangular units of each entity in (6, 11, 0, 0), where N i = 0, the entity i of a given plane is restored to its actual size. At this time, the horizontal actual size of the entity r = the number of rectangular units of the entity in the horizontal direction * the horizontal unit length of the rectangular unit, such as Figure 7 Entities 703 and 704 in the figure are restored according to the actual size. 703,704 =0, the actual horizontal size of the entities 703 and 704 = 3*8 = 24px.

[0066] All N i The actual dimensions of all entities with a value of 0 are calculated first, and the total dimension R restored according to the actual dimensions in the current given plane is obtained. r =r 1 +r 2 +...+r n , Figure 7R r Equal to the actual total horizontal size of entities 703 and 704, 48px;

[0067] When N i >0, the entity on the given plane is restored relatively in proportion, and the actual horizontal size of the entity = N i / (N 1 +N 2 +...+N m )*(realWidth-R r ), realWidth is the actual horizontal size after restoration, for example, entity 701 is restored in proportion, N 701 = 11, the horizontal actual size of entity 701 = 6 / (11+0+0+6)*(600-48) = 194.82px; the horizontal actual size of entity group 702 = 11 / (11+0+0+6)*(600-48) = 357.18px. It is worth noting that when realWidth≤R r The above formula is meaningless. At this time, we take 0 as the actual size. It is not difficult to imagine that the physical meaning at this time is: the entity restored according to the relative size is "flattened" due to insufficient physical size.

[0068] Similarly, in the vertical direction, the number of rectangular units of the entity on a given plane is formed into a series (M 1 ,M 2 ,...,M m ), M i is an integer and M i ≥0, i=0,1…m; when M i = 0, the entity of the given plane is restored according to the actual size; the vertical actual size of the entity h = the number of rectangular units of the entity in the vertical direction * the vertical unit length of the rectangular unit; when M i When >0, the entity of a given plane is restored relatively in proportion;

[0069] The actual vertical size of the entity = M i / (M 1 +M 2 +...+M m )*(realHeight—R h );

[0070] R h For all M i The actual vertical total size of the entity is 0, R h =h 1 +h 2 +...+h n , realHeight is the actual height after restoration; Figure 8As shown, Figure 8 Schematic diagram after mixed reduction.

[0071] In the embodiment of the present invention, a restoration method can be selected according to actual needs to restore the actual size of the entity to the actual view.

[0072] In the software interface entity design method provided by the embodiment of the present invention, the operation plane is a logical mapping of the physical plane. The operation plane is composed of multiple rectangular units. It is agreed that each rectangular unit has atomicity and cannot be further subdivided. The space actually occupied by each entity on the operation plane must be a rectangle. Based on the above two agreements, the dividing edges of an entity on the operation plane in the vertical or horizontal direction are calculated, and then the entities with any distribution can be divided by these dividing edges. Each division will generate a new sub-plane, and then the above process is repeated for each sub-plane until only one entity is left in the sub-plane or the position cannot be divided any more; finally, all entities on the plane will be classified into a tree-like grouping structure according to their relative positions, so as to facilitate the further processing of these entities by the downstream;

[0073] During the grouping process, a reliable method is provided for determining whether the operation plane entity can be further divided. At the same time, a reliable method is also provided for determining whether two entities overlap. In addition, the present invention also provides a method for finding all overlapping entities when entities overlap, and how to merge all overlapping entities together; while providing the grouping of entities, the present invention can also provide additional information such as whether the entities overlap, so as to assist further downstream processing.

[0074] After the grouping is completed, the present invention also provides three methods for restoring the entity size: restoration according to the actual design, relative restoration according to proportion, and mixed restoration of size. When the downstream processor restores the entity to the actual view, more flexible restoration methods can be provided, which significantly improves the usability and user experience of the tools that apply this algorithm, so that these tools have more significant advantages over similar tools that do not use the present invention, thereby gaining a head start in the competition.

[0075] Embodiment 2:

[0076] For ease of understanding, the embodiments of the present invention illustrate the basic concepts involved:

[0077] Operation plane: actually refers to a two-dimensional data area, which is a logical mapping of the physical plane and is composed of multiple rectangular units. The embodiment of the present invention uses a grid to represent the rectangular unit, and the unit length of the grid is not equal in the vertical and horizontal directions.

[0078] The operation plane includes entities. Fill in a value in each grid. This value must uniquely represent the entity currently covering this grid. The simplest way is to give each entity an integer number, such as Fig. 9 As shown, this integer can uniquely represent an entity.

[0079] It is worth noting that on an operating plane, on a plane, two different entities simultaneously cover at least the same grid. At this time, we call the two entities "overlapping"; among multiple overlapping entities, find the upper leftmost grid and the lower rightmost grid of these overlapping entities. A rectangle formed by these two grids can just frame all the overlapping entities. This invention calls this rectangle a virtual entity. Figure 5 , the one in the bold box 505 is a virtual entity. According to this definition, a virtual entity may cover more entities around it. At this time, the original virtual entity should be discarded, and all covered entities should be put together to recalculate a new virtual entity. Repeat this process until the new virtual entity no longer covers any new entities; that is, find all overlapping entities and combine them into one virtual entity in advance.

[0080] Edge: It can be divided into horizontal and vertical directions. In a given "plane" (which can be an operation plane or a sub-plane after the operation plane is cut), traverse each column c on the plane starting from the first column. If each non-empty value on the left side of the column is inconsistent with the adjacent non-empty value on the right side, then c is an "edge" in the vertical direction. Fig. 9 As shown, Fig. 9 All vertical edges on the current plane are given. Horizontal edges are defined in a very similar way to vertical edges: starting from the first row, we traverse each row r on the plane. If each non-empty value in the row is inconsistent with the adjacent non-empty value below, then r is an edge in the horizontal direction.

[0081] "Cut" is the process of dividing a given "plane" into two independent sub-planes. "Cut" can and can only be performed in the horizontal or vertical direction at the same time. The "cut" action can only be performed at the boundary of a grid, and cannot be performed at any position in the middle of a grid. The action of "cut" can be understood as follows: it can only be completed along the vertical or horizontal direction, and it cannot be turned, cut diagonally, or cut in half. It is not difficult to infer from this that all sub-planes "cut" in this way meet the definition of "operation plane" in the previous article. For example Fig. 9 As shown, after cutting along the vertical lines, we will get 5 sub-planes.

[0082] "Group": If we "cut" strictly according to the "edges" of all entities, all the sub-planes obtained in this cutting method are called "groups". Some characteristics of "groups": 1. "Groups" are hierarchical, and members within a "group" can be further divided into sub-groups. 2. Each member within a "group" may contain multiple entities or only one entity. 3. An entity can only belong to a single member within the group.

[0083] Based on the above basic concepts, the software interface entity design method of the embodiment of the present invention is as follows: Fig.10 As shown, including:

[0084] S1001. Determine the number of all vertical cutting edges and horizontal cutting edges on the operation plane, and take the direction of the cutting edge with the largest number as the cutting direction.

[0085] Find the number of vertical edges in the current operation plane, record it as m; find the number of horizontal edges, record it as n. Take the direction with the larger number of edges as the current segmentation direction.

[0086] If m=n=0, it means that the current operation plane cannot be split any further and the splitting action should be terminated. When the number of edges of an operation plane in the horizontal and vertical directions is 0, it does not mean that there is only one entity on the current plane. When multiple entities appear in some specific arrangements, they may not be split any further. A possible example is Figure 4 There are a total of 5 entities in the figure. According to the definition of "edge" in the present invention, there is no legal edge in the figure, either vertically or horizontally. Therefore, the plane with such an arrangement cannot be divided any further. Conversely, if a group (≥2) of entities form a plane, and no edge can be found in the horizontal and vertical directions, we believe that this plane cannot be divided any further. The significance of distinguishing multi-entity planes that cannot be divided any further is that the present invention needs to have a special processing method for such planes in the subsequent size restoration algorithm. For multi-entity planes that cannot be divided, their relative size restoration method must be reverted to the actual size restoration method.

[0087] S1002: Split the operation plane according to a splitting direction and splitting edges in the splitting direction to obtain sub-planes.

[0088] After determining the splitting direction, the positions of the edges in this direction are taken out and the splitting action is performed, so that the operation plane can be split into several sub-planes. The multiple sub-planes obtained here can form a group, thus completing the grouping work at the current level.

[0089] S1003, traverse each sub-plane, execute the first step and subsequent actions for each sub-plane, and perform further segmentation and grouping.

[0090] Embodiment three:

[0091] Based on the above-mentioned embodiment 2, after the grouping is completed, the actual size of each entity can be restored according to actual needs, including three methods: restoration according to the actual design size, relative restoration according to proportion, and a mixture of these two restoration methods. For example, a single entity is restored according to the actual design size, a group of entities are mixed and restored, etc., and the entity is restored to the actual view in the downstream processor.

[0092] Restoring according to the actual size is the simplest way to restore the size. According to the method of plane mapping, it is not difficult to see that the actual size algorithm of an entity in the horizontal direction is: the number of horizontal grids * the horizontal unit length of the grid. For example, a grid is 8px long in the horizontal direction, and an entity occupies 100 grids in the horizontal direction, then the actual length of this entity in the horizontal direction is 800px. Similarly, the actual size algorithm of an entity in the vertical direction is: the number of vertical grids * the vertical unit length of the grid. Although the method of restoring according to the actual size is simple, it has very large constraints: the actual rendered size must be strictly equal to the design size, which greatly restricts the rendering scene of the visualization tool. Fig.11 Shown is Figure 3 After restoring to the actual size, you can see that the actual effect after restoring to the actual size is exactly the same as the effect when designed.

[0093] This method avoids the disadvantages of the actual size restoration method by restoring the entity size in proportion. It allows the size during design to be inconsistent with the actual rendered size. Taking the horizontal direction as an example, let the horizontal width of the current entity be entityWidth (unit: grid), the total width of the operation plane be totalWidth (unit: grid), and the actual horizontal size after restoration be realWidth (unit: px). Then the algorithm for the horizontal direction is:

[0094] realWidth*(entityWidth / totalWidth) (unit: px)

[0095] The algorithm in the vertical direction is the same as that in the horizontal direction, which is:

[0096] realHeight*(entityHeight / totalHeight)(unit: px)

[0097] Among them, realHeight is the actual height after restoration (unit: px), entityHeight is the vertical height of the current entity (unit: grid), and totalHeight is the total vertical height of the current operation plane (unit: grid). This size restoration method actually uses proportional scaling to restore each entity, which is not applicable in most occasions that require refined layout.

[0098] By mixing the previous two restoration methods, the restored actual size can be suitable for more complex scenarios, such as perfectly restoring any layout of a modern software interface. Before we begin, we need to explain the concept of "mixing". Similarly, "mixing" is divided into two directions: horizontal and vertical. Mixing in the horizontal direction means that there may be multiple entities on any row of the plane, and the expected restoration methods of these entities are either restored according to the actual size at the time of design or restored in proportion. Please note that the "mixed" restoration method can degenerate into a single actual size restoration method, or degenerate into a single relative size restoration method. That is, in the present invention, a single size restoration method is also a "mixed" restoration method. The concept of "mixing" in the vertical direction is very similar to that in the horizontal direction, and "mixing" in the vertical reverse direction can also degenerate into a single restoration method.

[0099] In the mixed restoration mode, it is very important to correctly calculate the number of grids occupied by a single entity or a group of entities restored in proportion. For the sake of simplicity, the number of grids in the following embodiments of the present invention refers specifically to the number of grids occupied by a single entity or a group of entities restored in proportion. It is very simple to calculate the number of grids for a single entity. According to the definition of the number of grids, it can be directly accumulated, and the result must be a positive integer. Fig.12 In the example, the rightmost entity has 11 horizontal grids. The method to calculate the number of grids of a group of entities is to calculate the number of grids of all entities in the group and finally take the maximum value. Fig.12 In the figure, there are 6 entities in the first grouping layer. The middle part is a "group" containing 4 entities, and its horizontal grid number is: Max(21,7,0,0)=21.

[0100] The algorithm in the vertical direction is the same as that in the horizontal direction. The following takes the horizontal direction as an example to give a specific method of mixed restoration size.

[0101] Given a group of entities, according to the characteristics of the group, we can know that each member of the group may contain a single entity or multiple entities. The previous article has given a method for calculating the number of grids restored proportionally for a single or multiple entities. Through calculation, we can get a sequence of grid numbers: (N 1 ,N2 ,...,N m ), where N i is an integer and N i ≥0. When N i When it is 0, it means that member i in the group is restored according to its actual size. Its actual size is:

[0102] r i = number of grids occupied * grid width;

[0103] All N i The actual size of 0 is calculated first, and a new series is obtained: (r 1 ,r 2 ,...,r n ), add up the members of this sequence to get the total size R of the current group restored according to the actual size h =r 1 +r 2 +...+r n .

[0104] When N i When >0, it means that member i in the group is restored according to the relative size, and its actual size algorithm is:

[0105] N i / (N 1 +N 2 +...+N m )*(realWidth-R h );

[0106] Among them, realWidth is the actual horizontal size after restoration. Note that when realWidth≤R h The above formula is meaningless. At this time, we take 0 as the actual size. It is not difficult to imagine that the physical meaning at this time is: the entity restored according to the relative size is "flattened" due to insufficient physical size.

[0107] like Fig.13 As shown, Fig.13 Shown is Fig.12 From the effect after restoration, it can be seen that the present invention can well handle the situation where different size restoration methods are mixed. Under different target sizes, after restoration according to the actual size, the size consistent with the design is still maintained, and after restoration according to the relative size, the present invention can calculate the correct ratio according to the target size and distribute the calculated real size to all entities restored according to the relative size. Fig.14 What is shown is a proportional restoration entity designed on a plane with vertical dimensions. Fig.15 is its corresponding restoration effect, Fig.15Three target sizes with different heights are shown in Figure 2.

[0108] Embodiment three:

[0109] The embodiment of the present invention uses a specific example to illustrate the software interface entity design method. Fig.16 As shown,

[0110] S1601. Determine a segmentation edge and a segmentation direction according to the relative positions of the entities on the current operation plane.

[0111] like Fig.17 As shown, the current operation plane includes 8 entities. The rectangular units (hereinafter referred to as grids) on the operation plane have equal unit lengths in the vertical and horizontal directions. The text on the entity in the figure is the mapping value of the entity.

[0112] Starting from the first column, traverse each column on the operation plane. If any non-empty value on the left side of the column is inconsistent with the adjacent non-empty value on the right side, then the column is a "splitting edge" in the vertical direction; starting from the first row, traverse each row r on the "plane". If any non-empty value in the row is inconsistent with the adjacent non-empty value below, then r is a "splitting edge" in the horizontal direction. The bold ones in the figure are split edges. The vertical split edge is larger than the horizontal split edge, and the vertical direction is used as the split vertical direction.

[0113] S1602, performing first-level segmentation and grouping on the operation plane according to all segmentation edges in the segmentation direction to generate groups;

[0114] The cutting results in 7 sub-planes, which form a group 170a.

[0115] S1603: Repeat the above process for the members of the group to generate a new group, until only one entity remains in the group or there is no split position.

[0116] The second group: the sub-planes including the entities are grouped into 170a1, 170a2, and 170a3 respectively. The third group: the sub-plane 17016 is divided again to obtain 170a4 and 170a5. All entities on the plane are classified into a tree-like grouping structure according to their relative positions, such as Fig.18 shown.

[0117] S1604. Restore the entity of a given plane in actual size and / or relatively in proportion, and restore it to the actual view.

[0118] In an actual view, the entity of the first layer group 170a is restored in size by a mixed restoration method; in an actual view, the entity of the second layer group 170a1 is restored in size by a proportional restoration method; in an actual entity, the entity of the second layer group 170a2 is restored in a mixed restoration method; in an actual entity, the entity of the third layer group 170a4 is restored in an actual size restoration method, and the plane corresponding to each group is a given plane. The specific restoration method is as shown in the above-mentioned embodiments one and two, and will not be repeated again.

[0119] Embodiment 4:

[0120] An embodiment of the present invention provides a device, such as Fig.19 As shown, it includes a determination module 1901, a grouping module 1902 and a restoration module 1903;

[0121] A determination module 1901 is used to determine the segmentation edge according to the relative positions of the entities on the current operation plane, the operation plane is composed of rectangular units of a preset size, and the area occupied by the entity is a rectangle;

[0122] A grouping module 1902 is used to divide the operation plane according to all the dividing edges in a dividing direction to obtain sub-planes; and further divide each sub-plane according to the dividing edges of each sub-plane until there is no dividing edge in the sub-plane;

[0123] The restoration module 1903 is used to restore the size of the entity of a given plane to the actual view.

[0124] The embodiment of the present invention further provides a terminal, such as Fig. 20 As shown, it includes a first processor 2001, a first memory 2002 and a first communication bus 2003, wherein:

[0125] The first communication bus 2003 is used to realize the connection and communication between the first processor 2001 and the first memory 2003;

[0126] The first processor 2001 is used to execute one or more first programs in the first memory 2003 to implement the steps of the software interface entity design method as described in each embodiment.

[0127] The embodiment of the present invention also provides a storage medium, which includes volatile or non-volatile, removable or non-removable media implemented in any method or technology for storing information (such as computer-readable instructions, data structures, computer program modules or other data). The storage medium includes, but is not limited to, RAM (Random Access Memory), ROM (Read-Only Memory), EEPROM (Electrically Erasable Programmable read only memory), flash memory or other memory technology, CD-ROM (Compact Disc Read-Only Memory), digital versatile disk (DVD) or other optical disk storage, magnetic cassette, magnetic tape, magnetic disk storage or other magnetic storage device, or any other medium that can be used to store the desired information and can be accessed by a computer.

[0128] The storage medium in the embodiment of the present invention can be used to store one or more computer programs, and the one or more computer programs stored therein can be executed by a processor to implement the steps of the software interface entity design method in the above-mentioned embodiments.

[0129] It can be seen that those skilled in the art should understand that all or some of the steps, systems, and functional modules / units in the above disclosed methods can be implemented as software (which can be implemented with computer program code executable by a computing device), firmware, hardware, and appropriate combinations thereof. In hardware implementations, the division between the functional modules / units mentioned in the above description does not necessarily correspond to the division of physical components; for example, a physical component can have multiple functions, or a function or step can be performed by several physical components in cooperation. Some or all physical components can be implemented as software executed by a processor, such as a central processing unit, a digital signal processor, or a microprocessor, or implemented as hardware, or implemented as an integrated circuit, such as an application-specific integrated circuit.

[0130] In addition, it is well known to those skilled in the art that communication media generally contain computer readable instructions, data structures, computer program modules or other data in modulated data signals such as carrier waves or other transmission mechanisms, and may include any information delivery media. Therefore, the present invention is not limited to any specific hardware and software combination.

[0131] The above contents are further detailed descriptions of the embodiments of the present invention in combination with specific implementation methods, and it cannot be determined that the specific implementation of the present invention is limited to these descriptions. For ordinary technicians in the technical field to which the present invention belongs, several simple deductions or substitutions can be made without departing from the concept of the present invention, which should be regarded as falling within the protection scope of the present invention.

Claims

1. A software interface entity design method, comprising: Determine a cutting edge according to the relative position of each entity on the current operation plane, the operation plane is composed of rectangular units of preset size, the area occupied by the entity is a rectangle, the rectangular unit occupied by the entity includes a unique mark of the entity, the cutting edge includes a vertical cutting edge in the vertical direction and a horizontal cutting edge in the horizontal direction, and the cutting edge is a line segment passing through the operation plane; The operation plane is divided according to all the dividing edges in a dividing direction to obtain sub-planes; Divide each sub-plane according to its dividing edge until there is no dividing edge on the sub-plane; Restore the dimensions of entities on a given plane to the actual view; Determining the segmentation edge according to the relative positions of the entities on the current operation plane includes: Traversing each column on the operation plane, when the non-empty mark of each rectangular unit on the left side of a column is inconsistent with the non-empty mark of the adjacent rectangular unit on the right side, the column is used as a vertical cutting edge in the vertical direction; Each row on the operation plane is traversed, and when the non-empty mark of each rectangular unit above a row is inconsistent with the non-empty mark of the adjacent rectangular unit below, the row is used as a horizontal cutting edge in the horizontal direction.

2. The software interface entity design method according to claim 1, characterized in that: The operation plane is divided according to all the dividing edges in a dividing direction to obtain sub-planes including: Determine the number of all vertical cutting edges and horizontal cutting edges on the operation plane; The direction of the segmentation edge with a large number is taken as the segmentation direction; The entities distributed on the operation plane are divided according to the dividing direction to obtain sub-planes.

3. The software interface entity design method according to claim 1, characterized in that: The software interface entity design method also includes: When two different entities in the operation plane occupy at least one same rectangular unit at the same time, determining that the two different entities overlap; All overlapping entities on the operation plane are determined, and all overlapping entities are combined into a group of virtual entities.

4. The software interface entity design method according to claim 3, characterized in that: The method combines all overlapping entities into a set of virtual entities, including: Determine the upper leftmost rectangular unit and the lower rightmost rectangular unit in all the overlapping entities; The rectangle formed by the determined rectangular units is regarded as a group of virtual entities.

5. The software interface entity design method according to claim 4, characterized in that: After the rectangle formed by the determined rectangular units is used as a virtual entity, the method includes: When the virtual entity covers surrounding entities, a new virtual entity is determined according to all covered entities and the virtual entity until the new virtual entity no longer covers entities.

6. The software interface entity design method according to any one of claims 1 to 5, characterized in that: The size restoration of the entity on the given plane includes: The entity of the given plane is restored in actual size and / or relatively restored in proportion, wherein the given plane includes the operation plane, or a sub-plane.

7. The software interface entity design method according to claim 6, characterized in that: The entity of the given plane is restored according to the actual size, including: The actual horizontal size of an entity in the given plane = the number of rectangular units of the entity in the horizontal direction * the horizontal unit length of the rectangular unit; The actual size of an entity in the vertical direction = the number of rectangular units of the entity in the vertical direction * the vertical unit length of the rectangular unit.

8. The software interface entity design method according to claim 6, characterized in that: The relatively restoring the entity of the given plane in proportion comprises: The actual horizontal size of an entity on the given plane = realWidth*(entityWidth / totalWidth), where entityWidth is the horizontal width of the entity, realWidth is the total horizontal width of the operation plane, and realWidth is the actual horizontal size after restoration; The actual size of an entity on the given plane in the vertical direction = realHeight*(entityHeight / totalHeight), wherein entityHeight is the vertical height of the entity, totalHeight is the total vertical height of the operation plane, and realHeight is the actual height size after restoration.

9. The software interface entity design method according to claim 6, characterized in that: The actual size restoration and relative proportional restoration of the entity of the given plane include: The number of rectangular units of the given plane entity on the horizontal plane is composed of a series (N1, N2, ..., N m ), N i is an integer and N i ≥0, i=0,1…m; When N i = 0, the entity of the given plane is restored according to the actual size: The actual horizontal size of the entity r = the number of rectangular units of the entity in the horizontal direction * the horizontal unit length of the rectangular unit; When N i >0, the entities on the given plane are restored relatively in proportion: Horizontal actual size of the entity = N i / (N1+N2+...+N m )*(realWidth-R r ); The R r For all N i The actual horizontal total size of the entity is 0, R r =r1+r2+...+r n , the realWidth is the actual horizontal size after restoration; The number of rectangular units of the entity on the given plane is formed into a series (M1, M2, ..., M m ), M i is an integer and M i ≥0, i=0,1…m; When M i = 0, the entity of the given plane is restored according to the actual size; The vertical actual size of the entity h = the number of rectangular units of the entity in the vertical direction * the vertical unit length of the rectangular unit; When M i >0, the entity of the given plane is relatively restored in proportion; The vertical actual size of the entity = M i / (M1+M2+...+M m )*(realHeight-R h ); The R h For all M i The actual vertical total size of the entity is 0, R h =h1+h2+...+h n , the realHeight is the actual height size after restoration.

10. A software interface entity design device, characterized in that: It includes a determination module, a grouping module and a restoration module; The determination module is used to determine the segmentation edge according to the relative position of each entity on the current operation plane, the operation plane is composed of rectangular units of preset size, the area occupied by the entity is rectangular, the rectangular unit occupied by the entity includes a unique mark of the entity, the segmentation edge includes a vertical segmentation edge in the vertical direction and a horizontal segmentation edge in the horizontal direction, and the segmentation edge is a line segment passing through the operation plane; The grouping module is used to divide the operation plane according to all the dividing edges in a dividing direction to obtain each sub-plane; and is also used to divide each sub-plane again according to the dividing edges of each sub-plane until there is no dividing edge in the sub-plane; The restoration module is used to restore the size of the entity on a given plane to the actual view; The determining module is further used for: Traversing each column on the operation plane, when the non-empty mark of each rectangular unit on the left side of a column is inconsistent with the non-empty mark of the adjacent rectangular unit on the right side, the column is used as a vertical cutting edge in the vertical direction; Each row on the operation plane is traversed, and when the non-empty mark of each rectangular unit above a row is inconsistent with the non-empty mark of the adjacent rectangular unit below, the row is used as a horizontal cutting edge in the horizontal direction.

11. A terminal, characterized in that: The terminal includes a processor, a memory and a communication bus; The communication bus is used to realize the connection and communication between the processor and the memory; The processor is used to execute one or more programs stored in the memory to implement the steps of the software interface entity design method as described in any one of claims 1 to 9.

12. A storage medium, characterized in that: The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps of the software interface entity design method as described in any one of claims 1 to 10.

Images