A method and device for generating code

Abstract

The present application provides a code generation method and device, which obtains resource hierarchy data, wherein the resource hierarchy data includes multiple elements and coordinate data of each element; determines the overlapping relationship between the elements based on the resource hierarchy data; determines the layout of the elements based on the overlapping relationship, and generates code based on the layout. As described above, by identifying different types of overlapping relationships between elements, corresponding layout settings are made in a targeted manner, avoiding the code structure disorder caused by absolute positioning of the automatically generated code due to the overlapping relationship of the design draft, and ensuring the usability of the automatically generated code.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a code generation method and device. Background Art

[0002] Design To Code (D2C) is an important branch of Low Code. D2C refers to the automatic generation of front-end UI code based on the design draft, and even some back-end code, which can improve the development efficiency of front-end developers.

[0003] In the current field of automatic code generation, designers are only responsible for the visual effects of the design draft and do not pay attention to the elements and their organizational relationships. Therefore, overlapping relationships may exist in the design draft. When the design draft with overlapping relationships is generated during code generation, the absolute positioning of the code will be generated, resulting in a chaotic code structure, which greatly limits the adaptive ability of the front-end UI and causes low usability of the generated code. Summary of the Invention

[0004] In view of this, the present invention provides a code generation method and device to realize automatic code generation and ensure high availability of the code.

[0005] The technical solution is as follows:

[0006] A code generation method, comprising:

[0007] Acquire resource hierarchical data, wherein the resource hierarchical data includes a plurality of elements and coordinate data of each element;

[0008] Determining the overlapping relationship between the various elements according to the resource hierarchy data;

[0009] The layout of the elements is determined according to the overlapping relationship, and code is generated based on the layout.

[0010] Preferably, determining the overlapping relationship between the elements according to the resource hierarchy data includes:

[0011] Based on a preset element intersection judgment function and an element inclusion judgment function, the positional relationship between the elements is determined according to the coordinate data of the elements, wherein the positional relationship includes: a non-overlapping relationship and an overlapping relationship;

[0012] When the positional relationship is an overlapping relationship, the overlapping relationship type of each element is determined according to the element area and element type of each element. The element area of ​​each element is determined according to the coordinate data of each element. The overlapping relationship type includes: necessary overlapping relationship and non-necessary overlapping relationship.

[0013] Preferably, determining the layout of each element according to the overlapping relationship and generating code based on the layout includes:

[0014] When the overlapping relationship type is a necessary overlapping relationship, determining that there are multiple necessary overlapping elements corresponding to the necessary overlapping relationship in each of the elements;

[0015] Determining a layout mode of the necessary overlapping elements according to the coordinate data, element area, and element type of the necessary overlapping elements, wherein the layout mode of the necessary overlapping elements includes an absolute positioning layout mode and a static layout mode;

[0016] The code is generated based on how the necessary overlapping elements are laid out.

[0017] Preferably, determining the layout of each element according to the overlapping relationship and generating code based on the layout includes:

[0018] When the positional relationship is a non-essential overlapping relationship, determining that there are a plurality of non-essential overlapping elements corresponding to the non-essential overlapping relationship among the elements;

[0019] Determining a layout mode of the non-essential overlapping elements according to the coordinate data, element area, and element type of the non-essential overlapping elements, wherein the layout mode of the non-essential overlapping elements includes a horizontal static layout mode and a vertical static layout mode;

[0020] Determining virtual coordinates of the non-essential overlapping elements in a layout frame algorithm based on the layout mode of the non-essential overlapping elements, wherein the virtual coordinates are used to isolate the multiple non-essential overlapping elements from each other;

[0021] The code of the non-essential overlapping elements is generated based on the layout of the non-essential overlapping elements.

[0022] Preferably, the method further comprises:

[0023] Set the Flex style to allow negative values, and set the single element layout to allow negative margins;

[0024] Set the layout frame algorithm to allow negative margin layout.

[0025] On the other hand, the present application also provides a code generation device, comprising:

[0026] An acquisition module, which acquires resource hierarchical data, wherein the resource hierarchical data includes multiple elements and coordinate data of each element;

[0027] An overlapping relationship determination module, configured to determine the overlapping relationship between the elements according to the resource hierarchy data;

[0028] A code generation module is used to determine the layout mode of each element according to the overlapping relationship and generate code based on the layout mode.

[0029] Preferably, the overlapping relationship determination module specifically includes:

[0030] A position relationship judgment submodule, configured to determine the position relationship between the elements according to the coordinate data of the elements based on a preset element intersection judgment function and an element inclusion judgment function, wherein the position relationship includes a non-overlapping relationship and an overlapping relationship;

[0031] The overlapping relationship determination submodule is used to determine the overlapping relationship type of each element according to the element area and element type of each element when the position relationship is an overlapping relationship. The element area of ​​each element is determined according to the coordinate data of each element. The overlapping relationship type includes: necessary overlapping relationship and non-essential overlapping relationship.

[0032] Preferably, the code generation module specifically includes:

[0033] A necessary overlapping element determination submodule, configured to determine, when the overlapping relationship type is a necessary overlapping relationship, whether a plurality of necessary overlapping elements corresponding to the necessary overlapping relationship exist in each of the elements;

[0034] A layout mode determination submodule, configured to determine a layout mode of the necessary overlapping elements according to the coordinate data, element area, and element type of the necessary overlapping elements, wherein the layout modes of the necessary overlapping elements include an absolute positioning layout mode and a static layout mode;

[0035] The code generation submodule is used to generate the code based on the layout of the necessary overlapping elements.

[0036] Preferably, the code generation module specifically includes:

[0037] a non-essential overlapping element determination submodule, configured to determine, when the positional relationship is a non-essential overlapping relationship, whether a plurality of non-essential overlapping elements corresponding to the non-essential overlapping relationship exist in each of the elements;

[0038] a layout mode determining submodule, configured to determine a layout mode of the non-essential overlapping elements according to the coordinate data, element area, and element type of the non-essential overlapping elements, wherein the layout modes of the non-essential overlapping elements include a horizontal static layout mode and a vertical static layout mode;

[0039] a virtual coordinate determination submodule, configured to determine virtual coordinates of the non-essential overlapping elements in a layout frame algorithm based on the layout mode of the non-essential overlapping elements, wherein the virtual coordinates are used to isolate the multiple non-essential overlapping elements from each other;

[0040] The code generation submodule is used to generate the code of the non-essential overlapping elements based on the layout mode of the non-essential overlapping elements.

[0041] Preferably, the device further comprises:

[0042] The settings module is used to set the Flex style to allow negative values ​​and set the single element layout to allow negative margins;

[0043] The setting module is further used to set the layout frame algorithm to allow negative margin layout.

[0044] The above technical solution has the following beneficial effects:

[0045] The embodiment of the present application provides a code generation method and device, which obtains resource hierarchy data, wherein the resource hierarchy data includes multiple elements and coordinate data of each element; determines the overlapping relationship between the elements based on the resource hierarchy data; determines the layout of the elements based on the overlapping relationship, and generates code based on the layout. As described above, by identifying the different types of overlapping relationships between elements, the corresponding layout settings are made in a targeted manner, avoiding the code structure disorder caused by the absolute positioning of the automatically generated code due to the overlapping relationship of the design draft, thereby ensuring the usability of the automatically generated code. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are merely embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0047] Figure 1 A schematic diagram of a code generation method provided by an embodiment of the present invention;

[0048] Figure 2 A schematic diagram of a non-essential overlapping relationship provided by an embodiment of the present invention;

[0049] Figure 3 A schematic diagram of a necessary overlapping relationship provided by an embodiment of the present invention;

[0050] Figure 4 A schematic diagram of the structure of a code generation device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0051] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0052] To achieve this, the present invention provides a method for generating a code. Figure 1 ,, the method may include:

[0053] Step S100: Acquire resource hierarchical data, which includes multiple elements and coordinate data of each element.

[0054] Resource hierarchy data comes from the design draft. The design draft is the resource data created by the visual engineer based on the visual effects. Since the visual engineer is only responsible for the visual effects of the design draft and does not pay attention to the elements and their organizational relationships, there may be overlapping relationships between elements.

[0055] It is understandable that the resource hierarchy data may include multiple elements and coordinate data of each element, and may also include type information of each element.

[0056] Step S200: determining the overlapping relationship between various elements according to the resource hierarchy data.

[0057] It is understandable that the overlapping relationship between the elements can be determined based on the coordinate data of the elements and the attribute information of the elements in the resource hierarchy data.

[0058] Specifically, step S200 includes step S201 and step S202, as follows:

[0059] Step S201: Based on a preset element intersection judgment function and element inclusion judgment function, the positional relationship between the elements is determined according to the coordinate data of each element. The positional relationship includes: a non-overlapping relationship and an overlapping relationship.

[0060] It can be understood that the element intersection judgment function and the element inclusion judgment function are used to judge whether the elements intersect or include each other based on the coordinate data of the elements, thereby judging whether there is an overlapping relationship between the elements.

[0061] Step S202: When the positional relationship is an overlapping relationship, the overlapping relationship type of each element is determined according to the element area and element type of each element. The element area of ​​each element is determined according to the coordinate data of each element. The overlapping relationship type includes: necessary overlapping relationship and non-necessary overlapping relationship.

[0062] When elements on a design draft overlap, there are two specific types of overlapping relationships: necessary overlapping relationships and non-essential overlapping relationships.

[0063] Specifically, non-essential overlapping relationship means that two elements overlap in coordinate data, but the effect presented by the generated converted code is non-overlapping, see the attached Figure 2 A diagram illustrating an unnecessary overlapping relationship, where text boxes between elements A and B appear to overlap, but the contents of elements A and B do not actually appear to overlap.

[0064] Specifically, the necessary overlap relationship means that the parsed data of two elements overlap, and the effects presented by the generated converted code also overlap, see the attached Figure 3 A schematic diagram showing a necessary overlapping relationship is shown. Element D is a subscript element of element C. If there is an overlap between elements C and D, the effect presented by the subsequent generated code should also be overlapping.

[0065] Step S300: determining the layout of each element according to the overlapping relationship, and generating code based on the layout.

[0066] After determining the specific overlapping relationship between the elements, the layout of each element is set according to the overlapping relationship between the elements, and the code of the design draft is generated based on the set layout.

[0067] Specifically, when the overlapping relationship type is a necessary overlapping relationship, step S300 includes steps S3011 to S3013 as follows:

[0068] Step S3011: when the overlapping relationship type is a necessary overlapping relationship, determining whether there are multiple necessary overlapping elements corresponding to the necessary overlapping relationship in each element;

[0069] It can be understood that when the overlapping relationship type is a necessary overlapping relationship, it is necessary to determine the elements corresponding to the necessary overlapping relationship, that is, the necessary overlapping elements.

[0070] Step S3012: determining the layout mode of the necessary overlapping elements according to the coordinate data, element area, and element type of the necessary overlapping elements. The layout modes of the necessary overlapping elements include absolute positioning layout mode and static layout mode.

[0071] After the necessary overlapping elements are determined, the layout mode of the elements is determined according to the coordinate data, element area and element type of the necessary overlapping elements. The layout modes of the necessary overlapping elements include absolute positioning layout and static layout.

[0072] Step S3013: Generate code based on the layout of necessary overlapping elements;

[0073] Generate code based on the layout of the necessary overlapping elements determined above.

[0074] Specifically, when the overlapping relationship type is a non-essential overlapping relationship, step S300 includes steps S3021 to S3024 as follows:

[0075] Step S3021: when the positional relationship is a non-essential overlapping relationship, determining whether there are multiple non-essential overlapping elements corresponding to the non-essential overlapping relationship in each element;

[0076] It is understandable that when the overlapping relationship type is a non-essential overlapping relationship, it is necessary to determine the elements corresponding to the non-essential overlapping relationship, ie, the non-essential overlapping elements.

[0077] Step S3022: determining a layout mode of the non-essential overlapping elements according to the coordinate data, element area, and element type of the non-essential overlapping elements, wherein the layout modes of the non-essential overlapping elements include a horizontal static layout mode and a vertical static layout mode;

[0078] After determining the non-essential elements, the layout mode of the non-essential overlapping elements is determined according to the coordinate data, element area and element type of the non-essential overlapping elements. The layout modes for the non-essential overlapping elements include horizontal static layout mode and vertical static layout mode. It can be understood that the static layout mode and the vertical static layout mode both belong to static layout mode, and the only difference is the layout direction configuration.

[0079] Step S3023: Based on the layout mode of the non-essential overlapping elements, determining virtual coordinates of the non-essential overlapping elements in the layout frame algorithm, where the virtual coordinates are used to isolate multiple non-essential overlapping elements from each other;

[0080] It is understandable that the layout frame algorithm calculates and draws based on non-overlapping elements. When data with unnecessary overlapping relationships enters the layout frame algorithm, it cannot accurately draw the correct direction. Therefore, for non-essential overlapping elements, their virtual coordinates can be determined in the layout frame algorithm to ensure that the elements do not overlap and are isolated from each other, so that the layout frame algorithm can draw accurately.

[0081] Step S3024: Generate codes for non-essential overlapping elements based on the layout of the non-essential overlapping elements;

[0082] Generate code based on the layout of the non-essential overlapping elements determined above.

[0083] Specifically, determining the overlapping relationship between elements and the corresponding layout processing method may include the following situations:

[0084] (1) When element B completely covers element A, it is determined that element A and element B are in a necessary overlapping relationship. Element A and element B are necessary overlapping elements, and the absolute positioning processing of the corresponding resource layer is canceled. A new box node is added to the frame, and the elements are repositioned, using the absolute positioning layout method.

[0085] (2) When the area of ​​element B is smaller than that of element A, and the difference between the two areas exceeds a preset threshold, element B is determined to be the subscript element of element A, and it is determined that elements A and B are in a necessary overlapping relationship, and an absolute positioning layout method is adopted.

[0086] (3) When the element type of element B is a masked element and the element type of element A is a masking element, it is determined that elements A and B are in a necessary overlapping relationship and an absolute positioning layout method is adopted.

[0087] (4) When there is an overlapping relationship between multiple elements (including element A, element B, ... more elements), it is determined that the multiple elements are in a necessary overlapping relationship. The multiple elements are all necessary overlapping elements. The same processing method as (1) is adopted to cancel the absolute positioning processing of the resource layer corresponding to the multiple elements, add a box node to the frame, re-position the elements, and adopt the absolute positioning layout method.

[0088] (5) When the element type of element A is an image type, the element type of element B is a text type, and the overlapping area of ​​the two is greater than / equal to a preset threshold, it is determined that element A and element B are in a necessary overlapping relationship, and the absolute positioning layout method is adopted.

[0089] (6) When most of the area of ​​element B is in A, it is determined that elements A and B are not necessarily overlapping, and a static layout method is used.

[0090] (7) When most of the area of ​​element B is not within element A, and after excluding the possibility of the subscript element in situation (2), it is determined that elements A and B are in a non-essential overlapping relationship, and a static layout method is used.

[0091] (8) Other situations except the above ones can be attributed to unnecessary overlapping relationships and static layout method is adopted.

[0092] Furthermore, after determining the unnecessary overlapping relationship, processing can be performed based on the specific situation of the resource hierarchy data of the element, including:

[0093] a. When unnecessary overlapping elements visually overflow the canvas, the overflow area must be removed first, and then static layout is used to properly position them. It is understandable that when elements in the design overflow the canvas and cannot be displayed within the display range of the monitor, the portion of the element that exceeds the canvas area is cropped and removed.

[0094] b. If both element A and element B are of the image type and do not contain other text-type elements, then element A and element B are merged and static layout is adopted.

[0095] c. Element A and element B are both text-based, and are arranged vertically or horizontally, using a static layout. It is understood that when non-essentially overlapping elements are all text-based, the positioning method is not applied, and a static layout is used.

[0096] d. Element A is an image, and element B is a text. The relationship between the two can be image on the left and text on the right, or image on top and text on the bottom. The overlapping area between the two is smaller than the preset threshold. Use a static layout, and set the layout method to allow negative margins.

[0097] Specifically, the layout frame algorithm is set to allow negative margin layout. It can be understood that in order to ensure the compatibility of the negative margin layout, it is necessary to first set the Flex style to allow negative values ​​and set the single element layout to allow negative margins.

[0098] In summary, the embodiment of the present application provides a code generation method, which obtains resource hierarchy data, the resource hierarchy data including multiple elements and coordinate data of each element; determines the overlapping relationship between each element based on the resource hierarchy data; determines the layout method of each element based on the overlapping relationship, and generates code based on the layout method. As described above, by identifying the different types of overlapping relationships between elements, the corresponding layout settings are made in a targeted manner, avoiding the code structure disorder caused by the absolute positioning of the automatically generated code due to the overlapping relationship of the design draft, and ensuring the usability of the automatically generated code.

[0099] Corresponding to the above method, the embodiment of the present invention also provides a cloud resource allocation device, see Figure 4 , showing a schematic structural diagram of the device, which may include:

[0100] Acquisition module 401, acquires resource hierarchy data, the resource hierarchy data including multiple elements and coordinate data of each element;

[0101] Overlapping relationship determination module 402, configured to determine overlapping relationships between elements based on the resource hierarchy data;

[0102] The code generation module 403 is configured to determine the layout of the elements according to the overlapping relationship, and generate code based on the layout.

[0103] Specifically, the overlapping relationship determination module 402 includes:

[0104] The position relationship judgment submodule 4021 is used to determine the position relationship between each element according to the coordinate data of each element based on the preset element intersection judgment function and element inclusion judgment function. The position relationship includes: non-overlapping relationship and overlapping relationship;

[0105] The overlapping relationship determination submodule 4022 is used to determine the overlapping relationship type of each element according to the element area and element type of each element when the position relationship is an overlapping relationship. The element area of ​​each element is determined according to the coordinate data of each element. The overlapping relationship type includes: necessary overlapping relationship and non-necessary overlapping relationship.

[0106] When the overlapping relationship is a necessary overlapping relationship, the code generation module 403 specifically includes:

[0107] The necessary overlapping element determination submodule 4031 is configured to determine, when the overlapping relationship type is a necessary overlapping relationship, whether there are multiple necessary overlapping elements corresponding to the necessary overlapping relationship in each of the elements;

[0108] A layout mode determination submodule 4032 is configured to determine a layout mode of the necessary overlapping elements based on the coordinate data, element area, and element type of the necessary overlapping elements. The layout modes of the necessary overlapping elements include an absolute positioning layout mode and a static layout mode.

[0109] The code generation submodule 4033 is configured to generate the code based on the layout of the necessary overlapping elements.

[0110] When the overlapping relationship is a non-essential overlapping relationship, the code generation module 403 specifically includes:

[0111] The non-essential overlapping element determination submodule 4034 is configured to determine, when the positional relationship is a non-essential overlapping relationship, whether or not a plurality of non-essential overlapping elements corresponding to the non-essential overlapping relationship exist in each of the elements;

[0112] The layout mode determination submodule 4032 is further configured to determine a layout mode of the non-essential overlapping elements based on the coordinate data, element area, and element type of the non-essential overlapping elements, wherein the layout modes of the non-essential overlapping elements include a horizontal static layout mode and a vertical static layout mode.

[0113] A virtual coordinate determination submodule 4035 is configured to determine virtual coordinates of the non-essential overlapping elements in a layout frame algorithm based on the layout mode of the non-essential overlapping elements, wherein the virtual coordinates are used to isolate the multiple non-essential overlapping elements from each other.

[0114] The code generation submodule 4033 is further configured to generate the code of the non-essential overlapping elements based on the layout of the non-essential overlapping elements.

[0115] Optionally, the device further includes:

[0116] The setting module 404 is used to set the Flex style to allow negative values ​​and set the single element layout to allow negative margins;

[0117] The setting module 404 is further used to set the layout frame algorithm to allow negative margin layout.

[0118] It should be noted that the steps executed by each module in a code generation device provided in an embodiment of the present application and the related technical features correspond to a code generation method provided in the previous embodiment. The description of the device side can be found in the embodiment of the aforementioned method part and will not be repeated here.

[0119] In summary, an embodiment of the present application provides a code generation device, wherein an acquisition module acquires resource hierarchy data, the resource hierarchy data including multiple elements and coordinate data of each element; an overlapping relationship determination module determines the overlapping relationship between each element based on the resource hierarchy data; a code generation module determines the layout mode of each element based on the overlapping relationship, and generates code based on the layout mode. From the above, by identifying different overlapping relationship types between elements, corresponding layout settings are performed in a targeted manner, thereby avoiding the code structure disorder caused by absolute positioning of the automatically generated code due to the overlapping relationship in the design draft, and ensuring the availability of the automatically generated code.

[0120] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0121] Those skilled in the art will understand that the flowchart shown in the figure is only an example in which the embodiments of the present application can be implemented, and the scope of application of the embodiments of the present application is not limited by any aspect of the flowchart.

[0122] In the several embodiments provided in this application, it should be understood that the disclosed methods, devices and equipment can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some communication interface, the indirect coupling or communication connection of the device or unit can be electrical, mechanical or other forms.

[0123] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the units may be selected based on actual needs to achieve the purpose of the present embodiment. Furthermore, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit.

[0124] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0125] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention is not limited to the embodiments shown herein but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for generating a code, characterized in that: include: Acquire resource hierarchical data, wherein the resource hierarchical data includes a plurality of elements and coordinate data of each element; Determining the overlapping relationship between the elements according to the resource hierarchy data includes: Based on a preset element intersection judgment function and an element inclusion judgment function, the positional relationship between the elements is determined according to the coordinate data of the elements, wherein the positional relationship includes: a non-overlapping relationship and an overlapping relationship; When the positional relationship is an overlapping relationship, the overlapping relationship type of each element is determined according to the element area and element type of each element, the element area of ​​each element is determined according to the coordinate data of each element, and the overlapping relationship type includes: a necessary overlapping relationship and a non-necessary overlapping relationship, wherein the necessary overlapping relationship includes that the two elements overlap in the coordinate data and the effects presented by the codes corresponding to the two elements overlap; the non-necessary overlapping relationship includes that the two elements overlap in the coordinate data and the effects presented by the codes corresponding to the two elements do not overlap; When the positional relationship is an overlapping relationship, determining the overlapping relationship type of each element according to the element area and element type of each element includes: When element B completely covers element A, it is determined that element A and element B are in a necessary overlapping relationship; When the area of ​​element B is smaller than that of element A, and the difference between the two areas exceeds a preset threshold, element B is determined to be a subscript element of element A, and it is determined that elements A and B are in a necessary overlapping relationship; When the element type of element B is a masked element and the element type of element A is a masking element, it is determined that elements A and B are in a necessary overlapping relationship; When overlapping relationships occur between multiple elements, it is determined that the multiple elements are in a necessary overlapping relationship; When the element type of element A is an image type, the element type of element B is a text type, and the overlapping area of ​​the two is greater than or equal to a preset threshold, it is determined that element A and element B are in a necessary overlapping relationship; When the area covered by element B is greater than the threshold, it is determined that element A and element B are in a non-essential overlapping relationship; When the area covered by element B is less than or equal to a threshold, and it is determined that element B is not a subscript element of element A, it is determined that element A and element B are in a non-essential overlapping relationship; the layout of each element is determined according to the overlapping relationship, and code is generated based on the layout.

2. The method according to claim 1, characterized in that Determining the layout of each element according to the overlapping relationship and generating code based on the layout includes: When the overlapping relationship type is a necessary overlapping relationship, determining that there are multiple necessary overlapping elements corresponding to the necessary overlapping relationship in each of the elements; Determining a layout mode of the necessary overlapping elements according to the coordinate data, element area, and element type of the necessary overlapping elements, wherein the layout mode of the necessary overlapping elements includes an absolute positioning layout mode and a static layout mode; The code is generated based on how the necessary overlapping elements are laid out.

3. The method according to claim 1, characterized in that Determining the layout of each element according to the overlapping relationship and generating code based on the layout includes: When the positional relationship is a non-essential overlapping relationship, determining that there are a plurality of non-essential overlapping elements corresponding to the non-essential overlapping relationship among the elements; Determining a layout mode of the non-essential overlapping elements according to the coordinate data, element area, and element type of the non-essential overlapping elements, wherein the layout mode of the non-essential overlapping elements includes a horizontal static layout mode and a vertical static layout mode; Determining virtual coordinates of the non-essential overlapping elements in a layout frame algorithm based on the layout mode of the non-essential overlapping elements, wherein the virtual coordinates are used to isolate the multiple non-essential overlapping elements from each other; The code of the non-essential overlapping elements is generated based on the layout of the non-essential overlapping elements.

4. The method according to claim 3, characterized in that The method further comprises: Set the Flex style to allow negative values, and set the single element layout to allow negative margins; Set the layout frame algorithm to allow negative margin layout.

5. A code generating device, characterized in that: The device comprises: An acquisition module, which acquires resource hierarchical data, wherein the resource hierarchical data includes multiple elements and coordinate data of each element; An overlapping relationship determination module, configured to determine the overlapping relationship between the elements according to the resource hierarchy data; The overlapping relationship determination module specifically includes: A position relationship judgment submodule, configured to determine the position relationship between the elements according to the coordinate data of the elements based on a preset element intersection judgment function and an element inclusion judgment function, wherein the position relationship includes a non-overlapping relationship and an overlapping relationship; an overlapping relationship determination submodule, configured to determine, when the positional relationship is an overlapping relationship, the overlapping relationship type of each element based on the element area and element type of each element, wherein the element area of ​​each element is determined based on the coordinate data of each element, and the overlapping relationship types include: a necessary overlapping relationship and a non-necessary overlapping relationship, wherein the necessary overlapping relationship includes that the two elements overlap in the coordinate data and the effects presented by the codes corresponding to the two elements overlap; and the non-necessary overlapping relationship includes that the two elements overlap in the coordinate data and the effects presented by the codes corresponding to the two elements do not overlap; The overlapping relationship determination submodule is specifically used to: When element B completely covers element A, it is determined that element A and element B are in a necessary overlapping relationship; When the area of ​​element B is smaller than that of element A, and the difference between the two areas exceeds a preset threshold, element B is determined to be a subscript element of element A, and it is determined that elements A and B are in a necessary overlapping relationship; When the element type of element B is a masked element and the element type of element A is a masking element, it is determined that elements A and B are in a necessary overlapping relationship; When overlapping relationships occur between multiple elements, it is determined that the multiple elements are in a necessary overlapping relationship; When the element type of element A is an image type, the element type of element B is a text type, and the overlapping area of ​​the two is greater than or equal to a preset threshold, it is determined that element A and element B are in a necessary overlapping relationship; When the area covered by element B is greater than the threshold, it is determined that element A and element B are in a non-essential overlapping relationship; When the area covered by element B is less than or equal to the threshold, and it is determined that element B is not a subscript element of element A, it is determined that elements A and B are in a non-essential overlapping relationship; A code generation module is used to determine the layout mode of each element according to the overlapping relationship and generate code based on the layout mode.

6. The device according to claim 5, characterized in that The code generation module specifically includes: A necessary overlapping element determination submodule, configured to determine, when the overlapping relationship type is a necessary overlapping relationship, whether a plurality of necessary overlapping elements corresponding to the necessary overlapping relationship exist in each of the elements; A layout mode determination submodule, configured to determine a layout mode of the necessary overlapping elements according to the coordinate data, element area, and element type of the necessary overlapping elements, wherein the layout modes of the necessary overlapping elements include an absolute positioning layout mode and a static layout mode; The code generation submodule is used to generate the code based on the layout of the necessary overlapping elements.

7. The device according to claim 5, characterized in that The code generation module specifically includes: a non-essential overlapping element determination submodule, configured to determine, when the positional relationship is a non-essential overlapping relationship, whether a plurality of non-essential overlapping elements corresponding to the non-essential overlapping relationship exist in each of the elements; a layout mode determining submodule, configured to determine a layout mode of the non-essential overlapping elements according to the coordinate data, element area, and element type of the non-essential overlapping elements, wherein the layout modes of the non-essential overlapping elements include a horizontal static layout mode and a vertical static layout mode; a virtual coordinate determination submodule, configured to determine virtual coordinates of the non-essential overlapping elements in a layout frame algorithm based on the layout mode of the non-essential overlapping elements, wherein the virtual coordinates are used to isolate the multiple non-essential overlapping elements from each other; The code generation submodule is used to generate the code of the non-essential overlapping elements based on the layout mode of the non-essential overlapping elements.

8. The device according to claim 7, characterized in that The device further comprises: The settings module is used to set the Flex style to allow negative values ​​and set the single element layout to allow negative margins; The setting module is further used to set the layout frame algorithm to allow negative margin layout.

Images