Design tool layer intelligent layout method and device based on flex layout

Abstract

The invention discloses a flex layout-based design tool layer intelligent layout method and device, and the method comprises the steps: analyzing layers of a design draft in a canvas page, and recognizing the layer attribute information of each layer, the layer attribute information comprising layer position coordinates, sizes and alignment modes; according to the layer attribute information, identifying sub-layer groups with the same alignment features in the horizontal or vertical direction, and recording the sub-layers of each sub-layer group and the sequence of the sub-layers; and according to a preset layer arrangement rule and a preset layout priority sequence, performing layer layout on each sub-layer group from the sub-layer at the bottommost end according to a layer processing strategy from bottom to top. According to the method, automatic layout can be quickly carried out on the design manuscripts, various design scenes can be identified, corresponding layout adaptation can be provided, and the difficulty of using automatic layout by a user is remarkably reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and particularly to an intelligent layout method and device for layers of a design tool based on flex layout. Background Art

[0002] In the process of design engineering, automatic layout is a key feature, which helps to improve the efficiency and accuracy of design-to-code (D2C) conversion.

[0003] Through automatic layout, the relationships and constraints between layers can be automatically processed, complex nested layouts can be easily handled, the number of times designers manually adjust positions, sizes, and spacings can be reduced, adaptation to different devices and screen sizes can be processed, the efficiency of D2C (Design to Code) conversion can be improved, and the time and effort spent by designers on complex layouts can be saved.

[0004] To solve the above problems, the present invention develops an intelligent layout method and device for layers of a design tool based on flex layout to perform automatic layout on design drafts, identify various design scenarios, and provide corresponding layout adaptations to improve the efficiency of D2C (Design to Code) conversion. Summary of the Invention

[0005] In view of the above problems, an intelligent layout method and device for layers of a design tool based on flex layout are proposed, which can enable users to quickly and simply add layout information to existing design drafts, identify various design scenarios, and provide corresponding layout adaptations.

[0006] According to one aspect of the present invention, an intelligent layout method for layers of a design tool based on flex layout is provided, including:

[0007] Analyze the layers of the design draft on the canvas page, and identify the layer attribute information of each layer, where the layer attribute information includes layer position coordinates, size, and alignment method;

[0008] Identify sub-layer groups with the same alignment characteristics in the horizontal or vertical direction according to the layer attribute information, and record the sub-layers and their sorting of each sub-layer group;

[0009] According to the preset layer arrangement rules and the preset layout priority order, start from the bottommost sub-layer according to the bottom-up layer processing strategy, and perform layer layout on each sub-layer group.

[0010] In an optional manner, the layout rules of the layer layout include horizontal layout rules and vertical layout rules;

[0011] The horizontal layout rule is as follows: If the member layers of the sub-layer group have the same alignment characteristics in the horizontal direction, horizontal automatic layout is applied.

[0012] The vertical layout rule is as follows: If the member layers of the sub-layer group have the same alignment characteristics in the vertical direction, vertical automatic layout is applied.

[0013] Among them, the alignment characteristics include top-left alignment, top-center alignment, top-right alignment, left alignment, center alignment, right alignment, bottom-left alignment, bottom-center alignment, and bottom-right alignment.

[0014] In an optional manner, the specific preset layout priority order is as follows: The first order is horizontal layout, the second order is vertical layout, and the third order is line break layout.

[0015] In an optional manner, the preset layer arrangement rules include:

[0016] If there is no intersection feature between the layers in the sub-layer group, full arrangement is performed according to automatic layout;

[0017] If there is an intersection feature between the layers in the sub-layer group, automatic layout arrangement is performed according to the index order of the layers;

[0018] If two layers intersect and have a negative spacing, the layer with the larger size is used as the sub-layer for automatic layout, and the layer with the smaller size is used for absolute positioning.

[0019] In an optional manner, the preset layer arrangement rules further include:

[0020] Exclude the layers that are not applicable to automatic layout, including instances, layers with existing automatic layout, layers with layout grids, and mask group layers.

[0021] In an optional manner, the bottom-up layer processing strategy includes:

[0022] Give priority to processing the sub-layer groups with lower levels in the design draft, and then process their parent layers.

[0023] In an optional manner, the layer layout supports responsive layout;

[0024] The responsive layout supports multiple design scenarios and layout parameter adjustment functions, where the layout parameters include spacing, margin, layout direction, alignment method, stacking order, absolute positioning, and layer order.

[0025] In an optional manner, the method further includes:

[0026] Set the effective range of the layer panel for the layers of the design draft on the canvas page, and perform layer layout only for each sub-layer group within the effective range of the layer panel.

[0027] In an alternative approach, the method further includes:

[0028] When performing responsive layout on the layer layout, merge the layouts of each sub-layer group according to the sizes, spacings of the sub-layers within each sub-layer group, and the spacing between each sub-layer group.

[0029] Among them, when the spacing between adjacent sub-layer groups is less than a preset threshold and the layout directions are the same, merge the adjacent sub-layer groups into a new automatic layout group.

[0030] According to another aspect of the present application, there is provided an intelligent layer layout device for a design tool based on flex layout, including:

[0031] A layer extraction module for analyzing the layers of the design draft on the canvas page and identifying the layer attribute information of each layer, where the layer attribute information includes layer position coordinates, size, and alignment method;

[0032] A layer identification module for identifying sub-layer groups with the same alignment characteristics in the horizontal or vertical direction according to the layer attribute information, and recording the sub-layers and their sorting of each sub-layer group;

[0033] A layer layout module for performing layer layout on each sub-layer group starting from the bottommost sub-layer according to the preset layer arrangement rules and the preset layout priority order, following a bottom-up layer processing strategy.

[0034] The solution provided in the above embodiments of the present invention analyzes the layers of the design draft on the canvas page, identifies the layer attribute information of each layer, where the layer attribute information includes layer position coordinates, size, and alignment method; identifies sub-layer groups with the same alignment characteristics in the horizontal or vertical direction according to the layer attribute information, and records the sub-layers and their sorting of each sub-layer group; performs layer layout on each sub-layer group starting from the bottommost sub-layer according to the preset layer arrangement rules and the preset layout priority order, following a bottom-up layer processing strategy. The present invention can quickly perform automatic layout for the design draft, can identify multiple design scenarios and provide corresponding layout adaptations, and significantly reduces the difficulty for users to use automatic layout.

[0035] The above description is only an overview of the technical solution of the present invention. In order to be able to understand the technical means of the present invention more clearly, it can be implemented according to the content of the description. And in order to make the above description and other purposes, features, and advantages of the present invention more obvious and understandable, the following specifically illustrates the embodiments of the present invention. Brief Description of the Drawings

[0036] By reading the following detailed description of the preferred embodiments, various other advantages and benefits will become clear to those of ordinary skill in the art. The drawings are only for the purpose of illustrating the preferred embodiments and are not considered to be a limitation of the present invention. Moreover, throughout the drawings, the same reference numerals are used to represent the same components. In the drawings:

[0037] Figure 1 A flowchart showing the intelligent layout method of the design tool layer based on the flex layout according to an embodiment of the present invention;

[0038] Figures 2a to 2b A schematic diagram showing the intelligent layout toolbar according to an embodiment of the present invention;

[0039] Figure 3 A schematic diagram showing the automatic layout panel according to an embodiment of the present invention;

[0040] Figure 4 A schematic diagram showing the automatic layout alignment operation according to an embodiment of the present invention;

[0041] Figure 5 A schematic diagram showing the effective range operation of the layer panel according to an embodiment of the present invention;

[0042] Figure 6 A schematic diagram showing the automatic layout of the calendar according to an embodiment of the present invention;

[0043] Figure 7 A schematic diagram showing the automatic layout merging according to an embodiment of the present invention;

[0044] Figure 8 A schematic diagram showing the stacking order operation according to an embodiment of the present invention;

[0045] Figure 9 A schematic diagram showing the toolbar response layout operation according to an embodiment of the present invention;

[0046] Figure 10 A schematic diagram showing the adjustment of the layer order according to an embodiment of the present invention;

[0047] Figure 11 A schematic diagram showing the change of the text layer content according to an embodiment of the present invention;

[0048] Figure 12 A schematic diagram showing the scene layout response according to an embodiment of the present invention;

[0049] Figure 13 A schematic diagram showing the functional structure of the device for the intelligent layout method of the design tool layer based on the flex layout according to an embodiment of the present invention. Detailed Description of the Preferred Embodiments

[0050] Exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present invention are shown in the drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided so that the present invention can be more thoroughly understood and the scope of the present invention can be fully conveyed to those skilled in the art.

[0051] Before implementing the embodiments of the present invention, the technical terms or custom terms involved in the following text are uniformly explained herein:

[0052] Component: It allows the UI to be divided into independent and reusable parts. In practical applications, components are often organized into a nested tree structure.

[0053] Container: Formerly known as "drawing board", it is an important design component of design software, such as iPhone container, A4 paper container.

[0054] Instance: An instance refers to a specific reference to a component. What the user drags out from the component list or copies and pastes from a component is an "instance", rather than the component itself.

[0055] Layer: It includes components, containers, and instances.

[0056] The following will elaborate in detail on the intelligent layout method and device for the layers of a design tool based on flex layout proposed by the present invention through specific embodiments.

[0057] Embodiment 1:

[0058] Figure 1 A functional structure diagram of the intelligent layout method for the layers of a design tool based on flex layout according to an embodiment of the present invention is shown. Specifically, as Figure 1 shown, it includes the following steps:

[0059] Step S101, analyze the layers of the design draft on the canvas page, and identify the layer attribute information of each layer, where the layer attribute information includes layer position coordinates, size, and alignment method.

[0060] In this embodiment, all layer information in the design draft file is read through the layer manager, the (x, y) coordinates and (width, height) sizes of the layers are parsed, and the relationship and constraints between the layers are analyzed to determine the alignment method (such as left, right, top, bottom, center, etc.).

[0061] In an alternative manner, the method further includes:

[0062] Set the effective range of the layer panel for the layers in the canvas page, and only perform layer layout for each sub-layer group within the effective range of the layer panel.

[0063] In this embodiment, by setting the effective range of the layer panel, local layer layout processing is performed on a specific area in the canvas page. For the layer areas that do not require layout adjustment, accidental modification can be avoided. As Figure 5 shown, it includes parts such as layers and assets. Among them, the layers include Container 1 (composed of Rectangle 1, Rectangle 2, and groups, etc.) and UI design interfaces (components) such as the toolbar and property bar.

[0064] Step S102: Identify sub-layer groups with the same alignment feature in the horizontal or vertical direction according to the layer attribute information, and record the sub-layers of each sub-layer group and their sorting.

[0065] In this embodiment, the alignment feature refers to whether the positional relationship between sub-layers presents a certain pattern in the horizontal or vertical direction. For example:

[0066] Horizontal alignment: The positions of the sub-layers in the vertical direction (such as the y coordinate, top or bottom attribute) are the same or approximate.

[0067] Vertical alignment: The positions of the sub-layers in the horizontal direction (such as the x coordinate, left or right attribute) are the same or approximate.

[0068] Distributed alignment: The sub-layers are evenly distributed in the horizontal or vertical direction, such as arranged at equal intervals.

[0069] Edge alignment: The edges (left, right, top, bottom) of the sub-layers are aligned with the edges of other layers.

[0070] For example, define the maximum difference between the position attribute values of two layers (which can be a pixel value or a percentage) through a tolerance value to identify sub-layer groups with alignment features. By identifying the layout structure in the UI elements, alignment suggestions can be provided for designers to quickly create a well-structured UI layout.

[0071] For example: In the design draft of the canvas page, there are the following layers:

[0072] {"id":"layer1","x":10,"y":20,"width":50,"height":30},

[0073] {"id":"layer2","x":80,"y":22,"width":50,"height":30},

[0074] {"id":"layer3","x":10,"y":80,"width":50,"height":30},

[0075] {"id":"layer4","x":10,"y":130,"width":50,"height":30}

[0076] {"id":"layer5","x":200,"y":20,"width":50,"height":30},

[0077] {"id":"layer6","x":205,"y":130,"width":50,"height":30}

[0078] Layer 1 and layer 2 are top-aligned (close y-coordinates) in the horizontal direction. Layer 1, layer 2, and layer 5 can be grouped together. Layer 3 and layer 6 are horizontally top-aligned and can be grouped together. Layer 4 forms its own group.

[0079] Step S103: According to the preset layer arrangement rules and the preset layout priority order, starting from the bottommost sub-layer, a layer layout is performed on each sub-layer group according to the bottom-up layer processing strategy.

[0080] In this embodiment, as Figures 2a to 2b shown, the intelligent layout function is enabled, the complex scene is decomposed into multiple sub-layer groups, and managed according to the preset rules. The layer structure is clearer. The layout of each layer is controlled by the preset layout priority order to avoid elements overlapping or the layout being disordered. The bottom-up processing strategy ensures that the layout of the bottom layer will not be affected by the modification of the upper-layer elements.

[0081] In an alternative way, the layout rules of the layer layout include horizontal layout rules and vertical layout rules;

[0082] The horizontal layout rule is: If the member layers of the sub-layer group have the same alignment feature in the horizontal direction, horizontal automatic layout is applied;

[0083] The vertical layout rule is: If the member layers of the sub-layer group have the same alignment feature in the vertical direction, vertical automatic layout is applied;

[0084] Among them, the alignment features include top-left alignment, top-center alignment, top-right alignment, left alignment, center alignment, right alignment, bottom-left alignment, bottom-center alignment, and bottom-right alignment.

[0085] In this embodiment, when the layers in the sub-layer group have the same alignment in the horizontal direction, horizontal auto-layout (from left to right or from right to left) is applied. When the layers in the sub-layer group have the same alignment in the vertical direction, vertical auto-layout (from top to bottom or from bottom to top) is applied. Alignment feature: refers to the alignment of the layers in the horizontal and vertical directions, such as Figure 3 , Figure 4 shown, including top-left alignment, top-center alignment, top-right alignment, left alignment, center alignment, right alignment, bottom-left alignment, bottom-center alignment, and bottom-right alignment.

[0086] In an alternative way, the specific preset layout priority order is: the first order is horizontal layout, the second order is vertical layout, and the third order is line break layout.

[0087] In this embodiment, as Figure 6 shown, when arranging the content, first try to utilize the horizontal space for layout as much as possible. If the horizontal space is insufficient, then try to utilize the vertical space. If the vertical space is also insufficient, then perform a line break.

[0088] In an alternative way, the preset layer arrangement rules include:

[0089] If there is no intersection feature between the layers in the sub-layer group, then perform a full arrangement according to the auto-layout;

[0090] If there is an intersection feature between the layers in the sub-layer group, then perform an auto-layout arrangement according to the index order of the layers;

[0091] If two layers intersect and have a negative spacing, then use the layer with the larger size as the sub-layer for auto-layout, and use the layer with the smaller size for absolute positioning.

[0092] In this embodiment, by intelligently identifying the intersection features and size relationships between the layers, layout chaos and overlap can be avoided. If there is no intersection feature between the layers in the sub-layer group, then perform a full arrangement according to the auto-layout, that is, the index order of the layers can be arbitrarily exchanged without affecting the layout effect. If there is an intersection feature between the layers in the sub-layer group, then perform an auto-layout arrangement according to the index order of the layers to ensure the consistency of the layout. If two layers intersect and have a negative spacing (that is, the distance between the two layers in a certain direction is less than 0), then use the layer with the larger size as the sub-layer for auto-layout to arrange, making full use of the space and avoiding overlap; while the layer with the smaller size is used for absolute positioning and is not restricted by the auto-layout.

[0093] For example, the design draft contains three layers: Layer A, Layer B, and Layer C. Layer A and Layer B have the same alignment features in the horizontal direction and there are no intersection features. Layer C intersects with Layer B in the vertical direction and the size of Layer C is smaller than that of Layer B. According to the preset layer arrangement rules, Layer A and Layer B are identified as a sub-layer group with a horizontal layout and are fully arranged according to the automatic layout (because there are no intersection features). Arrange Layer C and Layer B. Since Layer C intersects with Layer B and the size of Layer C is smaller, Layer B is arranged as a sub-layer for automatic layout, while Layer C is positioned absolutely (for example, placed above Layer B).

[0094] In an alternative approach, the preset layer arrangement rules further include:

[0095] Exclude layers that are not suitable for automatic layout, including instances, layers with existing automatic layouts, layers with layout grids, and mask group layers.

[0096] In this embodiment, not all layers are suitable for using automatic layout. For example, some layers already have specific layout methods or their special functions and are not interfered by automatic layout. Before performing automatic layout, these layers need to be excluded. Among them, instance layers usually reference the main object, and their positions and attributes should be determined by the main object rather than being modified by automatic layout. Layers with existing automatic layouts already have their own specific layout rules, and performing automatic layout again will cause conflicts. Layers with layout grids are usually already laid out according to specific grids. Mask group layers contain mask relationships, and automatic layout will destroy their structures.

[0097] In an alternative approach, the bottom-up layer processing strategy includes:

[0098] Give priority to processing sub-layer groups with lower levels in the design draft, and then process their parent layers.

[0099] In this embodiment, through the bottom-up layer processing strategy, the basic elements (i.e., sub-layer groups) are processed first, and then gradually built into more complex and higher-level layouts, avoiding frequent backtracking and modification of the underlying layout when processing higher-level layers. If there are problems with the underlying sub-layers, it plays a role in error isolation and will not directly affect higher-level layers.

[0100] In an alternative approach, the layer layout supports responsive layout;

[0101] The responsive layout supports multiple design scenarios and layout parameter adjustment functions, where the layout parameters include spacing, margin, layout direction, alignment method, stacking order, absolute positioning, and layer order.

[0102] In this embodiment, the responsive layout automatically adapts to different screen sizes and device types, eliminating the need to create separate design drafts for each device, reducing maintenance costs, and only requiring adjustment of layout parameters to meet different scenarios. The stacking order is as Figure 8 shown, including forward stacking and reverse stacking. The first element in forward stacking will be at the top, and the last element in reverse stacking will be at the top. As Figure 10 shown, the order of two layers can be adjusted by the center point or circle of each layer. As Figure 11 shown, after enabling intelligent layout in the text layer, the content of the text layer will move down as the text content changes. At the same time, the components below the text layer will automatically move down. As Figure 9 、 Figure 12 shown, when changing the size of the container, the size of the container is determined by the total size of each layer in the container, and the method is almost the same as the way div tags are nested in HTML. Just like in a production environment, content can be easily edited and moved in or out of the automatic layout container.

[0103] In an alternative approach, the method further includes:

[0104] When performing responsive layout on the layer layout, layout merging is performed on each sub-layer group according to the sizes, spacings of the sub-layers within each sub-layer group, and the spacings between each sub-layer group;

[0105] Among them, when the spacing between adjacent sub-layer groups is less than a preset threshold and the layout directions are the same, the adjacent sub-layer groups are merged into a new automatic layout group.

[0106] In this embodiment, when the spacing between adjacent sub-layer groups is less than a preset threshold and the layout directions are the same, merging is triggered. The layout structure is simplified through automatic layout merging, reducing unnecessary layer nesting. As Figure 7 shown, when the toolbar is stretched to a certain length, the rectangle and the prototype are automatically merged into Automatic Layout One, and the triangle and the rhombus are automatically merged into Automatic Layout Two. After merging, when the toolbar is stretched, the spacing between the rectangle and the circle remains unchanged (belonging to the same layer group), and the spacing between the triangle and the rhombus remains unchanged. The spacing between Automatic Layout One and Automatic Layout Two changes as the toolbar is stretched. This can ensure that the toolbar has a good display effect on different devices and screen sizes. For example, on a PC device, Automatic Layout One and Automatic Layout Two are displayed side by side, while on a mobile device, they can be adjusted to be arranged vertically as Automatic Layout Group One and Automatic Layout Group Two.

[0107] The solution provided in the above embodiments of the present invention analyzes the layers of the design draft in the canvas page, and identifies the layer attribute information of each layer, where the layer attribute information includes the layer position coordinates, size, and alignment method; according to the layer attribute information, it identifies sub-layer groups with the same alignment characteristics in the horizontal or vertical direction, and records the sub-layers and their sorting of each sub-layer group; according to the preset layer arrangement rules and the preset layout priority order, starting from the bottommost sub-layer according to the bottom-up layer processing strategy, it performs layer layout on each sub-layer group. The present invention can quickly perform automatic layout for the design draft, can identify various design scenarios and provide corresponding layout adaptation, and significantly reduces the difficulty for users to use automatic layout.

[0108] Embodiment 2:

[0109] Figure 13 shows a functional structure diagram of the intelligent layer layout method and device of the design tool based on the flex layout according to the embodiment of the present invention. As Figure 13 shown, the device includes:

[0110] A layer extraction module 1301, configured to analyze the layers of the design draft in the canvas page, and identify the layer attribute information of each layer, where the layer attribute information includes the layer position coordinates, size, and alignment method;

[0111] A layer identification module 1302, configured to identify sub-layer groups with the same alignment characteristics in the horizontal or vertical direction according to the layer attribute information, and record the sub-layers and their sorting of each sub-layer group;

[0112] A layer layout module 1303, configured to perform layer layout on each sub-layer group according to the preset layer arrangement rules and the preset layout priority order, starting from the bottommost sub-layer according to the bottom-up layer processing strategy.

[0113] In an optional manner, the layout rules of the layer layout include horizontal layout rules and vertical layout rules;

[0114] The horizontal layout rule is: if the member layers of the sub-layer group have the same alignment characteristics in the horizontal direction, then apply horizontal automatic layout;

[0115] The vertical layout rule is: if the member layers of the sub-layer group have the same alignment characteristics in the vertical direction, then apply vertical automatic layout;

[0116] Among them, the alignment characteristics include top-left alignment, top-center alignment, top-right alignment, left alignment, center alignment, right alignment, bottom-left alignment, bottom-center alignment, and bottom-right alignment.

[0117] In an alternative manner, the specific preset layout priority order is as follows: the first order is horizontal layout, the second order is vertical layout, and the third order is line break layout.

[0118] In an alternative manner, the layer layout module 1303 is further configured to:

[0119] If there are no intersecting features between the layers in the sub-layer group, perform a full permutation according to the automatic layout;

[0120] If there are intersecting features between the layers in the sub-layer group, perform an automatic layout arrangement according to the index order of the layers;

[0121] If two layers intersect and have a negative spacing, use the layer with the larger size as the sub-layer for automatic layout, and use the layer with the smaller size for absolute positioning.

[0122] In an alternative manner, the layer layout module 1303 is further configured to:

[0123] Exclude the layers that are not applicable to the automatic layout, including instances, layers with existing automatic layouts, layers with layout grids, and mask group layers.

[0124] In an alternative manner, the layer layout module 1303 is further configured to:

[0125] Prioritize processing the sub-layer groups with lower levels in the design draft, and then process their parent layers.

[0126] In an alternative manner, the layer layout supports responsive layout;

[0127] The responsive layout supports multiple design scenarios and layout parameter adjustment functions, where the layout parameters include spacing, margin, layout direction, alignment method, stacking order, absolute positioning, and layer order.

[0128] In an alternative manner, the layer extraction module 1301 is further configured to:

[0129] Set the effective range of the layer panel for the layers in the design draft on the canvas page, and perform layer layout only for each sub-layer group within the effective range of the layer panel.

[0130] In an alternative manner, the layer layout module 1303 is further configured to:

[0131] When performing a responsive layout for the layer layout, merge the layouts of each sub-layer group according to the sizes, spacings of the sub-layers within each sub-layer group, and the spacings between each sub-layer group;

[0132] Among them, when the spacing between adjacent sub-layer groups is less than a preset threshold and the layout directions are the same, the adjacent sub-layer groups are combined into a new automatic layout group.

[0133] The solution provided in the above embodiments of the present invention analyzes the layers of the design draft in the canvas page, identifies the layer attribute information of each layer, where the layer attribute information includes the layer position coordinates, size, and alignment method; identifies sub-layer groups with the same alignment characteristics in the horizontal or vertical direction according to the layer attribute information, and records the sub-layers and their sorting of each sub-layer group; according to the preset layer arrangement rules and the preset layout priority order, starting from the bottommost sub-layer according to the bottom-up layer processing strategy, perform layer layout on each sub-layer group. The present invention can quickly perform automatic layout for the design draft, can identify various design scenarios and provide corresponding layout adaptation, and significantly reduces the difficulty for users to use automatic layout.

[0134] The algorithms or displays provided herein are not inherently related to any particular computer, virtual system, or other device. Various general-purpose systems can also be used in conjunction with the teachings based herein. Based on the above description, the structure required to construct such a system is obvious. In addition, the embodiments of the present invention are not directed to any particular programming language. It should be understood that the content of the present invention described herein can be implemented using various programming languages, and the description of the specific language above is to disclose the best mode of the present invention.

[0135] In the specification provided herein, a large number of specific details are set forth. However, it can be understood that the embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures, and technologies have not been shown in detail so as not to obscure the understanding of this specification.

[0136] Similarly, it should be understood that, in order to streamline the present invention and assist in understanding one or more of the various inventive aspects, in the above description of the exemplary embodiments of the present invention, the various features of the embodiments of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, the disclosed method should not be construed as reflecting the intention that the claimed invention requires more features than are expressly recited in each claim. Rather, as reflected in the following claims, the inventive aspects lie in less than all the features of the single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into the detailed description, where each claim stands on its own as a separate embodiment of the present invention.

[0137] Those skilled in the art can understand that the modules in the devices in the embodiments can be adaptively changed and set in one or more devices different from the embodiments. The modules or units or components in the embodiments can be combined into one module or unit or component, and in addition, they can be divided into multiple sub-modules or sub-units or sub-components. Except that at least some of such features and / or processes or units are mutually exclusive, any combination can be adopted to combine all the features disclosed in this specification (including the accompanying claims, abstract, and drawings) and all the processes or units of any method or device so disclosed. Unless otherwise explicitly stated, each feature disclosed in this specification (including the accompanying claims, abstract, and drawings) can be replaced by an alternative feature that provides the same, equivalent, or similar purpose.

[0138] In addition, those skilled in the art can understand that although some of the embodiments herein include certain features included in other embodiments rather than other features, the combination of the features of different embodiments means that it is within the scope of the present invention and forms different embodiments. For example, in the following claims, any one of the claimed embodiments can be used in any combination.

[0139] Each component embodiment of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art should understand that a microprocessor or a digital signal processor (DSP) can be used in practice to implement some or all of the functions of some or all of the components according to the embodiments of the present invention. The present invention can also be implemented as a device or apparatus program (such as a computer program and a computer program product) for executing part or all of the methods described herein. Such a program for implementing the present invention can be stored on a computer-readable medium, or can be in the form of one or more signals. Such signals can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0140] It should be noted that the above embodiments are illustrative of the present invention and not restrictive thereof, and alternative embodiments can be designed by those skilled in the art without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in the claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention can be implemented by means of hardware including several different elements and by means of a suitably programmed computer. In a unit claim enumerating several devices, several of these devices can be embodied by the same item of hardware. The use of the words first, second, and third, etc. does not denote any order. These words can be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be construed as limiting the order of execution.

Claims

1. A design tool layer intelligent layout method based on flex layout, characterized in that: include: Analyze the layers of the design draft in the canvas page and identify the layer attribute information of each layer, wherein the layer attribute information includes the layer position coordinates, size and alignment; Identify sublayer groups having the same alignment characteristics in the horizontal or vertical direction according to the layer attribute information, and record the sublayers of each sublayer group and their order; According to the preset layer arrangement rules and preset layout priority order, the layer layout is performed for each sublayer group starting from the bottom sublayer according to the bottom-up layer processing strategy.

2. The method for intelligent layout of design tool layers based on flex layout according to claim 1, characterized in that: The layout rules of the layer layout include horizontal layout rules and vertical layout rules; The horizontal layout rule is: if the member layers of the sublayer group have the same alignment characteristics in the horizontal direction, then horizontal automatic layout is applied; The vertical layout rule is: if the member layers of the sublayer group have the same alignment characteristics in the vertical direction, then vertical automatic layout is applied; The alignment features include top left alignment, top center alignment, top right alignment, left alignment, center alignment, right alignment, bottom left alignment, bottom center alignment and bottom right alignment.

3. The method for intelligent layout of design tool layers based on flex layout according to claim 1, characterized in that: The preset layout priority order is specifically: the first order is horizontal layout, the second order is vertical layout, and the third order is line break layout.

4. The method for intelligent layout of design tool layers based on flex layout according to claim 1, characterized in that: The preset layer arrangement rules include: If there are no intersecting features between the layers in the sublayer group, all layers will be arranged according to the automatic layout; If there are intersecting features between the layers in the sublayer group, the automatic layout is arranged according to the index order of the layers; If two layers intersect and have negative spacing, the larger layer is used as a sublayer for automatic layout, and the smaller layer is used as an absolute positioning.

5. The design tool layer intelligent layout method based on flex layout according to claim 1 or 4, characterized in that: The preset layer arrangement rules also include: Excludes layers that are not eligible for Auto Layout, including instances, layers with Auto Layout, layers with a layout grid, and mask group layers.

6. The method for intelligent layout of design tool layers based on flex layout according to claim 1, characterized in that: The bottom-up layer processing strategy includes: Prioritize lower-level sub-layer groups in the design, and then process their parent layers.

7. The method for intelligent layout of design tool layers based on flex layout according to claim 1, characterized in that: The layer layout supports responsive layout; The responsive layout supports multiple design scenarios and layout parameter adjustment functions, wherein the layout parameters include spacing, margins, layout direction, alignment, stacking order, absolute positioning, and layer order.

8. The method for intelligent layout of design tool layers based on flex layout according to claim 1, characterized in that: The method further comprises: Set the effective range of the layer panel for the layers of the design draft in the canvas page, and perform layer layout only for each sub-layer group within the effective range of the layer panel.

9. The method for intelligent layout of design tool layers based on flex layout according to claim 1, characterized in that: The method further comprises: When performing responsive layout on the layer layout, each sub-layer group is layout-merged according to the size and spacing of the sub-layers in each sub-layer group and the spacing between the sub-layer groups; When the distance between adjacent sub-layer groups is less than a preset threshold and the layout directions are consistent, the adjacent sub-layer groups are merged into a new automatic layout group.

10. A design tool layer intelligent layout device based on flex layout, characterized in that: include: A layer extraction module is used to analyze the layers of the design draft in the canvas page and identify the layer attribute information of each layer, wherein the layer attribute information includes the layer position coordinates, size and alignment; A layer identification module, used for identifying sub-layer groups having the same alignment characteristics in the horizontal or vertical direction according to the layer attribute information, and recording the sub-layers of each sub-layer group and their order; The layer layout module is used to perform layer layout for each sub-layer group according to the preset layer arrangement rules and preset layout priority order, starting from the bottom-up sub-layer according to the bottom-up layer processing strategy.

Images