Design draft conversion method and device, equipment, storage medium and program product

Abstract

The invention discloses a design draft conversion method and device, equipment, a storage medium and a program product, and the method comprises the steps that a design draft and a mapping relation between design draft data and standard data are obtained, the design draft comprises attribute data of at least one component, the component comprises at least one element of at least one layer, and the standard data are obtained; the attribute data in the design manuscript comprises hierarchical relationships and relative position relationships of the elements; converting the attribute data into standard data according to the mapping relation; extracting the relative position relation of the element from the converted standard data, and determining the absolute position of the element in the design draft; the hierarchical relationship of the elements is removed to obtain a tagging draft, the tagging draft comprises attribute data of at least one element, the elements in the tagging draft are mutually independent, and the attribute data in the tagging draft comprises absolute positions of the elements in the design draft.

Description

Technical Field

[0001] The present application belongs to the field of user interface technology, and specifically relates to a design draft conversion method, device, equipment, storage medium and program product. Background Art

[0002] Front-end page development is the process of creating a front-end page and presenting it to users. It usually requires page designers to first design the design draft corresponding to the front-end page, and then programmers to convert the design draft into the program code corresponding to the front-end page, and then render the front-end page corresponding to the design draft on the terminal based on the program code.

[0003] If a design conversion tool could be used to automatically convert the design drafts created by page designers into program code, the involvement of programmers could be reduced, improving the efficiency of front-end page development. However, Sketch, a vector drawing application suitable for all designers, cannot be recognized by the front-end, which hinders the conversion of design drafts into code. Summary of the Invention

[0004] The present application provides a design draft conversion method, apparatus, device, storage medium and program product, which aim to at least to some extent solve the problem that Sketch files cannot be recognized, affecting the conversion of design drafts into code.

[0005] In a first aspect of the present application, a design draft conversion method is provided, the method comprising: Obtaining a design draft and a mapping relationship between the design draft data and standard data, wherein the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes a hierarchical relationship and a relative position relationship of the elements; Converting the attribute data into standard data according to the mapping relationship; Extracting the relative position relationship of the elements from the converted standard data to determine the absolute position of the elements in the design draft; The hierarchical relationship of the elements is removed to obtain an annotated draft, which includes attribute data of at least one of the elements. The elements in the annotated draft are independent of each other, and the attribute data in the annotated draft includes the absolute position of the element in the design draft.

[0006] In some embodiments, extracting the relative position relationship of the elements from the converted standard data and determining the absolute position of the elements in the design draft includes: extracting the hierarchical relationship of the elements from the converted standard data; extracting the relative positional relationship of the elements from the converted standard data according to the hierarchical relationship of the elements; According to the relative position relationship between the elements of the first level and the elements of the second level, and the absolute position of the elements of the first level in the design draft, the absolute position of the elements of the second level in the design draft is obtained, and the first level and the second level are two adjacent levels.

[0007] In some embodiments, after removing the hierarchical relationship of the elements, the method further includes: The elements are sorted according to their absolute positions in the design draft.

[0008] In some implementations, sorting the elements according to their absolute positions in the design draft includes: If the starting coordinates of the two elements in the design draft are different, the order of the two elements is determined according to the set position order; If the starting coordinates of the two elements in the design draft are the same, the order of the two elements is determined according to the occlusion relationship between the two elements.

[0009] In some embodiments, before extracting the relative positional relationship of the elements from the converted standard data, the method further includes: If the layer is a mask layer or is located above a mask layer, parsing the standard data of the elements in the layer to extract information of the elements from the converted standard data; If the layer is below the mask layer, the elements in the layer are cut.

[0010] In some embodiments, before extracting the relative positional relationship of the elements from the converted standard data, the method further includes: If the layer is a hidden layer, the standard data of the elements in the layer are deleted.

[0011] In a second aspect of the present application, a design draft conversion device is provided, the device comprising: An acquisition module, configured to acquire a design draft and a mapping relationship between the design draft data and standard data, wherein the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes a hierarchical relationship and a relative position relationship of the elements; A conversion module, configured to convert the attribute data into standard data according to the mapping relationship; A determination module, configured to extract the relative position relationship of the elements from the converted standard data and determine the absolute position of the elements in the design draft; A removal module is used to remove the hierarchical relationship of the elements to obtain an annotated draft, wherein the annotated draft includes attribute data of at least one of the elements. The elements in the annotated draft are independent of each other, and the attribute data in the annotated draft includes the absolute position of the element in the design draft.

[0012] In a third aspect of the present application, a computer device is provided, comprising a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the method provided in any embodiment of the first aspect when executing the computer program.

[0013] In a fourth aspect of the present application, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method provided in any embodiment of the first aspect are implemented.

[0014] In a fifth aspect of the present application, a computer program product is provided, comprising a computer program, which, when executed by a processor, implements the steps of the method provided in any embodiment of the first aspect.

[0015] According to the design draft conversion method, device, equipment, storage medium and program product provided by one or more embodiments of the present application, a design draft and a mapping relationship between the design draft data and the standard data are first obtained. The design draft includes the attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes the hierarchical relationship and relative position relationship of the elements. Then, the attribute data is converted into standard data according to the mapping relationship. By converting the design draft data that cannot be recognized by the front end into a design draft that can be recognized by the front end, the automatic parsing of the design draft can be achieved, and the process of automatic conversion of the design draft to code can be promoted. Then, the relative position relationship of the elements is extracted from the converted standard data, the absolute position of the elements in the design draft is determined, and the hierarchical relationship of the elements is removed to obtain a marked draft. The marked draft includes the attribute data of at least one element. The elements in the marked draft are independent of each other. The attribute data in the marked draft includes the absolute position of the elements in the design draft, so that the marked draft can be used to generate code later. Moreover, considering that the hierarchical relationship of the elements only affects the page structure and does not affect the page style, it is invalid information for program programmers. By removing the hierarchical relationship of the elements, the elements in the marked draft are independent of each other, which is more suitable for the display of element attributes, improving the development efficiency of program programmers. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0017] Figure 1 A schematic flow chart of a design draft conversion method in one or more embodiments of the present application is shown.

[0018] Figure 2 A schematic diagram showing the relative positions of tags in an embodiment of the present application is shown.

[0019] Figure 3 Shown Figure 2 Schematic diagram of the absolute position of the label.

[0020] Figure 4 A schematic diagram of the structure of multiple icons in a design draft in one embodiment of the present application is shown.

[0021] Figure 5 Shown Figure 4 Schematic diagram of the structure of multiple icons in the annotated draft.

[0022] Figure 6 Shown Figure 1 Schematic diagram of the process of step S103.

[0023] Figure 7 A flow chart of a design draft conversion method in another embodiment of the present application is shown.

[0024] Figure 8 A schematic diagram showing the arrangement of multiple elements in a design draft in an embodiment of the present application is shown.

[0025] Figure 9 Shown Figure 8 Schematic diagram of the order of multiple elements in the annotated draft.

[0026] Figure 10 Shown Figure 7 Schematic diagram of the process of step S305.

[0027] Figure 11 Shown Figure 10 Schematic diagram of the process of step S403.

[0028] Figure 12 A schematic flow chart of a design draft conversion method in another embodiment of the present application is shown.

[0029] Figure 13 A schematic diagram showing the distribution of two layers in a design draft in one embodiment of the present application is shown.

[0030] Figure 14 A schematic flow chart of a design draft conversion method in another embodiment of the present application is shown.

[0031] Figure 15A schematic flow chart of a design draft conversion method in another embodiment of the present application is shown.

[0032] Figure 16 A structural block diagram of a design draft conversion device in one or more embodiments of the present application is shown.

[0033] Figure 17 A structural block diagram of a computer device in one or more embodiments of the present application is shown. DETAILED DESCRIPTION

[0034] In order to enable those skilled in the art to understand the present application more clearly, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative efforts shall fall within the scope of protection of this application.

[0035] Figure 1 For a flow chart of the design draft conversion method in one or more embodiments of this application, please refer to Figure 1 In the first embodiment of the present application, a design draft conversion method is provided, which includes the following steps S101 to S104.

[0036] Step S101, obtain a design draft and a mapping relationship between the design draft data and standard data, the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes the hierarchical relationship and relative position relationship of the elements.

[0037] In this embodiment, an element is the smallest visual unit in the user interface (UI) design. For example, a button contains elements such as a background color block, a text label, and decorative lines. A layer is an editable layer that carries elements and is used to control the stacking order and visibility of elements. For example, the background color block and text label of a button are located in two independent layers, and the transparency or position can be adjusted separately. A component is a reusable functional module composed of multiple elements and layers, with preset interaction logic and style specifications. For example, multiple layers of a button (background + text) are packaged into a globally callable button component.

[0038] Attribute data is the configuration parameters used to define the visual, layout, and interactive characteristics of an element. Visual attributes can include style attributes (such as fill parameters, shape parameters, shadow parameters, etc.) and text attributes (such as font type, font size, font color, character spacing, etc.). Layout attributes can include padding, margins, positioning, etc. Interaction attributes can include event responses, status identifiers, animation parameters, etc.

[0039] For example, there is a hierarchical relationship between the elements in the design draft, which may form a tree structure. The position information of the element may be the position of the element relative to the pixels of the adjacent layer.

[0040] For example, Figure 2 For a schematic diagram of the relative positions of the labels in one embodiment of the present application, please refer to Figure 2 The design draft contains a label that includes four levels of elements: the outer frame 10 is a first-level element, the image frame 20 to the left of the outer frame 10 is a second-level element, the option frame 30 below the outer frame 10 is a third-level element, and the option 40 in the option frame 30 is a fourth-level element. The position information for the outer frame 10 is the position of the upper left corner of the outer frame 10 relative to the upper left corner of the design draft; the position information for the image frame 20 is the position of the upper left corner of the image frame 20 relative to the upper left corner of the outer frame 10; the position information for the option frame 30 is the position of the upper left corner of the option frame 30 relative to the upper left corner of the image frame 20; and the position information for the option 40 is the position of the upper left corner of the option 40 relative to the upper left corner of the option frame 30.

[0041] Step S102: converting the attribute data into standard data according to the mapping relationship.

[0042] In this embodiment, design draft data is data in a design draft format that cannot be recognized by the front-end, such as data in a Sketch design draft. Standard data is data that can be recognized by the front-end. By pre-establishing and storing a mapping relationship between design draft data and standard data, the stored mapping relationship can be called to search for the standard data corresponding to the attribute data in the design draft in the mapping relationship, thereby converting the attribute data that cannot be recognized by the front-end one by one into standard data that can be recognized by the front-end, and then extracting the attribute information of the element from the converted standard data.

[0043] Step S103: extracting the relative position relationship of the elements from the converted standard data to determine the absolute position of the elements in the design draft.

[0044] In this embodiment, the position information of an element in the design draft is the position of the element relative to the pixels of the adjacent layer. The absolute position of the element in the design draft is obtained from the relative position relationship of the element, which can remove the positional association between the elements and is conducive to the subsequent removal of the hierarchical relationship of the elements.

[0045] Figure 3 for Figure 2 For a diagram of the absolute position of the labels, see Figure 2 and Figure 3 The position of the upper left corner of the outer frame 10 relative to the upper left corner of the design draft can be the absolute position of the outer frame 10 in the design draft. Based on the position of the upper left corner of the outer frame 10 relative to the upper left corner of the design draft, and the position of the upper left corner of the image frame 20 relative to the upper left corner of the outer frame 10, the position of the upper left corner of the image frame 20 relative to the upper left corner of the design draft, i.e., the absolute position of the image frame 20 in the design draft, can be determined. Based on the position of the upper left corner of the image frame 20 relative to the upper left corner of the design draft, and the position of the upper left corner of the option box 30 relative to the upper left corner of the image frame 20, the position of the upper left corner of the option box 30 relative to the upper left corner of the design draft, i.e., the absolute position of the option box 30 in the design draft, can be determined. Based on the position of the upper left corner of the option box 30 relative to the upper left corner of the design draft, and the position information of option 40, i.e., the position of the upper left corner of option 40 relative to the upper left corner of option box 30, the position of the upper left corner of option 40 relative to the upper left corner of the design draft, i.e., the absolute position of option 40 in the design draft, can be determined.

[0046] Step S104: remove the hierarchical relationship of the elements to obtain an annotation draft, which includes attribute data of at least one element. The elements in the annotation draft are independent of each other, and the attribute data in the annotation draft includes the absolute position of the element in the design draft.

[0047] In this embodiment, the annotation draft is a file that annotates elements and provides parameter data required for development, such as size, color, font, spacing, and typeface. For example, the annotation draft can use a domain-specific language (DSL) structure to facilitate subsequent annotation display.

[0048] The elements in the annotation draft are independent of each other, changing from a tree structure to a flat structure, which can streamline the element structure and remove invalid information. It is more suitable for displaying the element's own attribute information, which helps programmers focus on business implementation and improve development efficiency.

[0049] For example, Figure 4 This is a schematic diagram of the structure of multiple icons in the design draft in one embodiment of this application. Please refer to Figure 4 Group 1 includes pattern 1 and background 1 of icon 1, group 2 includes pattern 2 and background 2 of icon 2, group 3 includes pattern 3 and background 3 of icon 3, and group 4 includes pattern 4 and background 4 of icon 4. That is, the pattern and background of each icon in the design draft are divided into one group, the group is the first level, the icon is the second level, and the pattern and background are both the third level. Figure 5 for Figure 4For a schematic diagram of the structure of multiple icons in the annotation draft, please refer to Figure 5 , only icon 1, background 1, icon 2, background 2, icon 3, background 3, icon 4, and background 4 remain, that is, the elements in the annotation draft are independent of each other and have no hierarchical relationship.

[0050] The above-mentioned design draft processing method first obtains the design draft and the mapping relationship between the design draft data and the standard data. The design draft includes the attribute data of at least one component, and the component includes at least one element of at least one layer. The attribute data in the design draft includes the hierarchical relationship and relative position relationship of the elements. Then, the attribute data is converted into standard data according to the mapping relationship. By converting the design draft data that cannot be recognized by the front end into a design draft that can be recognized by the front end, the automatic parsing of the design draft can be achieved, and the process of automatic conversion of the design draft into code can be promoted. Then, the relative position relationship of the elements is extracted from the converted standard data, the absolute position of the elements in the design draft is determined, and the hierarchical relationship of the elements is removed to obtain the annotated draft. The annotated draft includes the attribute data of at least one element. The elements in the annotated draft are independent of each other. The attribute data in the annotated draft includes the absolute position of the elements in the design draft. In this way, the annotated draft can be used to generate code later. Moreover, considering that the hierarchical relationship of the elements only affects the page structure and does not affect the page style, it is invalid information for programmers. By removing the hierarchical relationship of the elements, the elements in the annotated draft are independent of each other, which is more suitable for displaying element attributes, thereby improving the development efficiency of programmers.

[0051] Figure 6 for Figure 1 For a flow chart of step S103, please refer to Figure 6 In some embodiments, step S103 may include the following steps S201 to S203.

[0052] Step S201 : extracting the hierarchical relationship of elements from the converted standard data.

[0053] Or Figure 2 For example, the outer frame 10 is a first-level element, the image frame 20 located on the left side of the outer frame 10 is a second-level element, the option box 30 located on the lower side of the outer frame 10 is a third-level element, and the option 40 in the option box 30 is a fourth-level element.

[0054] Step S202 : extracting the relative position relationship of the elements from the converted standard data according to the hierarchical relationship of the elements.

[0055] Exemplarily, step S202 may include: if the relative position relationship of the elements is the position of the elements of the next level relative to the elements of the previous level, then the relative position relationship of the elements is extracted from the converted standard data in sequence according to the hierarchical relationship of the elements from top to bottom; if the relative position relationship of the elements is the position of the elements of the previous level relative to the elements of the next level, then the relative position relationship of the elements is extracted from the converted standard data in sequence according to the hierarchical relationship of the elements from bottom to top.

[0056] Or Figure 2 For example, the position of the upper left corner of the outer frame 10 relative to the upper left corner of the design draft, the position of the upper left corner of the image frame 20 relative to the upper left corner of the outer frame 10, the position of the upper left corner of the option box 30 relative to the upper left corner of the image frame 20, and the position of the upper left corner of the option 40 relative to the upper left corner of the option box 30 are obtained in sequence.

[0057] Step S203 , obtaining the absolute position of the second-level elements in the design draft according to the relative position relationship between the first-level elements and the second-level elements, and the absolute position of the first-level elements in the design draft, wherein the first and second levels are adjacent levels.

[0058] Illustratively, the first level may be the upper level of the second level, or the lower level of the second level.

[0059] Or Figure 2 and Figure 3 For example, the position of the upper left corner of the image frame 20 relative to the upper left corner of the design draft, i.e., the absolute position of the image frame 20 in the design draft, can be determined based on the position of the upper left corner of the outer frame 10 relative to the upper left corner of the design draft (i.e., the absolute position of the outer frame 10 in the design draft) and the position of the upper left corner of the image frame 20 relative to the upper left corner of the outer frame 10. Then, based on the position of the upper left corner of the image frame 20 relative to the upper left corner of the design draft and the position of the upper left corner of the option box 30 relative to the upper left corner of the image frame 20, the position of the upper left corner of the option box 30 relative to the upper left corner of the design draft, i.e., the absolute position of the option box 30 in the design draft, can be determined. Finally, based on the position of the upper left corner of the option box 30 relative to the upper left corner of the design draft and the position information of option 40, i.e., the position of the upper left corner of option 40 relative to the upper left corner of option box 30, i.e., the absolute position of option 40 in the design draft, can be determined.

[0060] Exemplarily, step S203 can be performed alternately with step S202 until the absolute positions of all elements in the design draft are obtained. Alternatively, the relative position relationship of all elements can be extracted in step S202 first, and then the absolute positions of the elements of the next level in the design draft can be obtained according to the relative position relationship between the elements of each level and the elements of the next level, as well as the absolute positions of the elements of this level in the design draft, in a top-down order of the hierarchical relationship of the elements. Alternatively, the absolute positions of the elements of the previous level in the design draft can be obtained according to the relative position relationship between the elements of each level and the elements of the previous level, as well as the absolute positions of the elements of this level in the design draft, in a bottom-up order of the hierarchical relationship of the elements.

[0061] Figure 7 This is a flow chart of the design draft conversion method in another embodiment of this application, please refer to Figure 7 In some embodiments, the method includes the following steps S301 to S305.

[0062] Step S301, obtain a design draft and a mapping relationship between the design draft data and the standard data, the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes the hierarchical relationship and relative position relationship of the elements.

[0063] Step S302: converting the attribute data into standard data according to the mapping relationship.

[0064] Step S303: extracting the relative position relationship of the elements from the converted standard data to determine the absolute position of the elements in the design draft.

[0065] Step S304: remove the hierarchical relationship of the elements to obtain an annotation draft, which includes attribute data of at least one element. The elements in the annotation draft are independent of each other, and the attribute data in the annotation draft includes the absolute position of the element in the design draft.

[0066] Step S305: sort the elements according to their absolute positions in the design draft.

[0067] Figure 8 This is a schematic diagram of the arrangement of multiple elements in the design draft in one embodiment of this application. Please refer to Figure 8 The elements in the design draft are arranged in the order of pattern A, pattern C, pattern D, pattern B, background d, background c, background a, and background b. And according to the position information of the elements from top to bottom and from left to right, they are background a, background b, background c, background d, pattern A, pattern B, pattern C, and pattern D. Figure 9 for Figure 8 For a schematic diagram of the order of multiple elements in the annotation draft, please refer to Figure 9 The multiple elements in the annotated draft are sorted in the order of background a, background b, background c, background d, pattern A, pattern B, pattern C, and pattern D. The elements are sorted according to their absolute positions in the design draft.

[0068] The above-mentioned design draft conversion method, after removing the hierarchical relationship of the elements, sorts the elements according to their absolute positions in the design draft. This sorting according to the position information of the elements is based on the perspective of front-end development and is more in line with the habits of front-end development. It is conducive to programmers to focus on business implementation and improve development efficiency.

[0069] Figure 10 for Figure 7 For a flow chart of step S305, please refer to Figure 10 In some embodiments, step S305 may include the following steps S401 to S403.

[0070] Step S401: Determine whether the starting coordinates of the two elements in the design draft are the same. If the starting coordinates of the two elements in the design draft are different, then execute step S402. If the starting coordinates of the two elements in the design draft are the same, then execute step S403.

[0071] Step S402: Determine the order of the two elements according to the set position order.

[0072] Exemplarily, the set position order may be from upper left to lower right, such as from top to bottom, or from left to right.

[0073] Correspondingly, step S402 may include: if the starting coordinates of two elements in the design draft are in different rows, the element with the upper starting coordinate is located before the element with the lower starting coordinate; if the starting coordinates of two elements in the design draft are in the same row, the element with the left starting coordinate is located before the element with the right starting coordinate.

[0074] Step S403: determining the order of the two elements according to the occlusion relationship between the two elements.

[0075] Exemplarily, the obstructing element may be located before the obstructed element, that is, the upper element is located before the lower element.

[0076] For example, the attribute data in the design draft may further include the size and transparency of the element.

[0077] Figure 11 for Figure 10 For a flow chart of step S403, please refer to Figure 11 Accordingly, step S403 may include the following steps S501 to S503.

[0078] Step S501 : extracting the size and transparency of two elements from the converted standard data.

[0079] Step S502: determining the occlusion relationship between the two elements according to the sizes and transparencies of the two elements.

[0080] Exemplarily, step S502 may include: if the two elements have different sizes, the smaller element covers the larger element; if the two elements have the same size, the smaller element covers the larger element.

[0081] Step S503: determining the order of the two elements according to the occlusion relationship between the two elements.

[0082] Figure 12 This is a flow chart of a design draft conversion method in another embodiment of the present application, please refer to Figure 12 In some embodiments, the method includes the following steps S601 to S607.

[0083] Step S601, obtain a design draft and a mapping relationship between the design draft data and the standard data, the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes the hierarchical relationship and relative position relationship of the elements.

[0084] Step S602: converting the attribute data into standard data according to the mapping relationship.

[0085] Step S603: Determine the positional relationship between the layer and the mask layer. If the layer is a mask layer or is located above the mask layer, proceed to step S604. If the layer is located below the mask layer, proceed to step S605.

[0086] In a possible embodiment, step S603 may include: if the attribute of the layer is a mask layer, determining that the layer is a mask layer.

[0087] In another possible embodiment, step S603 may include: if the two layers have the same size and position, the layer with higher transparency is the mask layer.

[0088] Figure 13 This is a schematic diagram of the distribution of two layers in the design draft in one embodiment of this application. Please refer to Figure 13 The smaller layer is the mask layer, and the standard data of the elements in this layer are parsed. The larger layer is located below the mask layer, and the elements in this layer can be cut.

[0089] Step S604: parsing the standard data of the elements in the layer to extract the element information from the converted standard data.

[0090] In this embodiment, parsing is the process of analyzing data and extracting information, which involves grammatical, semantic or logical analysis, identifying components, layout logic and interaction rules, and providing a basis for subsequent code implementation.

[0091] Step S605: Slice the elements in the layer.

[0092] In this embodiment, image slicing is to separate graphic elements in the design draft that cannot be directly generated by code into independent image resources, and standardize their naming and format for development calls.

[0093] Step S606: extract the relative position relationship of the elements from the converted standard data to determine the absolute position of the elements in the design draft.

[0094] Step S607: remove the hierarchical relationship of the elements to obtain an annotation draft, which includes attribute data of at least one element. The elements in the annotation draft are independent of each other, and the attribute data in the annotation draft includes the absolute position of the element in the design draft.

[0095] The above-mentioned design draft conversion method first determines the positional relationship between the layer and the mask layer before extracting the relative positional relationship of the elements from the converted standard data. If the layer is a mask layer or is located above the mask layer, the standard data of the elements in the layer is parsed to extract the element information from the converted standard data. If the layer is located below the mask layer, the elements in the layer are cut. This simplified processing can omit the parsing of some layers, usually reducing the parsing workload by 70% to 90%, effectively improving parsing efficiency. Moreover, the layer located below the mask layer does not need to be labeled; directly cutting it can meet the usage needs.

[0096] Figure 14 This is a flow chart of a design draft conversion method in another embodiment of the present application, please refer to Figure 14 In some embodiments, the method includes the following steps S701 to S705.

[0097] Step S701, obtain a design draft and a mapping relationship between the design draft data and the standard data, the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes the hierarchical relationship and relative position relationship of the elements.

[0098] Step S702: convert the attribute data into standard data according to the mapping relationship.

[0099] Step S703: If the layer is a hidden layer, the standard data of the elements in the layer is deleted.

[0100] In this embodiment, the hidden layer is a layer that makes specific elements temporarily invisible or dynamically hidden through visual or interactive logic.

[0101] In a possible embodiment, step S703 may include: if the attribute of the layer is hidden, deleting the standard data of the elements in the layer.

[0102] In another possible embodiment, step S703 may include: if the fill value of all elements in the layer is empty or the transparency is 0, deleting the standard data of all elements in the layer.

[0103] Step S704: extracting the relative position relationship of the elements from the converted standard data to determine the absolute position of the elements in the design draft.

[0104] Step S705 , removing the hierarchical relationship of the elements to obtain an annotation draft, which includes attribute data of at least one element. The elements in the annotation draft are independent of each other, and the attribute data in the annotation draft includes the absolute position of the element in the design draft.

[0105] In the above design draft conversion method, before extracting the relative positional relationships of elements from the converted standard data, if the layer is a hidden layer, the standard data of the elements in the layer is first deleted to reduce the amount of data to be processed later, effectively improving data processing efficiency. Furthermore, since hidden layers do not require annotation, directly deleting them will not affect the generation of the annotated draft.

[0106] Figure 15 This is a flow chart of a design draft conversion method in another embodiment of the present application, please refer to Figure 15 In some embodiments, the method includes the following steps S801 to S808.

[0107] Step S801, obtain a design draft and a mapping relationship between the design draft data and the standard data, the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes the hierarchical relationship and relative position relationship of the elements.

[0108] Step S802: converting the attribute data into standard data according to the mapping relationship.

[0109] Step S803: If the layer is a hidden layer, the standard data of the elements in the layer is deleted.

[0110] Step S804: If the layer is a mask layer or is located above a mask layer, the standard data of the elements in the layer are parsed to extract the element information from the converted standard data.

[0111] Step S805: If the layer is below the mask layer, the elements in the layer are cut.

[0112] Step S806: extracting the relative position relationship of the elements from the converted standard data to determine the absolute position of the elements in the design draft.

[0113] Step S807: remove the hierarchical relationship of the elements to obtain an annotation draft, which includes attribute data of at least one element. The elements in the annotation draft are independent of each other, and the attribute data in the annotation draft includes the absolute position of the element in the design draft.

[0114] Step S808: sort the elements according to their absolute positions in the design draft.

[0115] Figure 16 For a structural diagram of the design draft conversion device in one or more embodiments of this application, please refer to Figure 16 In a second embodiment of the present application, a design draft conversion device is provided, which includes an acquisition module 901, a conversion module 902, a determination module 903 and a removal module 904.

[0116] The acquisition module 901 is configured to acquire a design draft and a mapping relationship between the design draft data and the standard data. The design draft includes attribute data of at least one component, and the component includes at least one element of at least one layer. The attribute data in the design draft includes the hierarchical relationship and relative position relationship of the elements.

[0117] The conversion module 902 is configured to convert the attribute data into standard data according to the mapping relationship.

[0118] The determination module 903 is configured to extract the relative position relationship of the elements from the converted standard data and determine the absolute position of the elements in the design draft.

[0119] The removal module 904 is configured to remove the hierarchical relationship of elements to obtain an annotated draft, which includes attribute data of at least one element. The elements in the annotated draft are independent of each other, and the attribute data in the annotated draft includes the absolute position of the element in the design draft.

[0120] In some embodiments, the determination module 903 may include a level extraction unit, a position extraction unit, and a position determination unit.

[0121] The hierarchical extraction unit is configured to extract the hierarchical relationship of elements from the converted standard data.

[0122] The position extraction unit is configured to extract the relative position relationship of the elements from the converted standard data according to the hierarchical relationship of the elements.

[0123] The position determination unit is configured to obtain the absolute position of the second-level elements in the design draft based on the relative position relationship between the first-level elements and the second-level elements, and the absolute position of the first-level elements in the design draft, where the first level and the second level are two adjacent levels.

[0124] In some embodiments, the device may further include a sorting module configured to sort the elements according to their absolute positions in the design draft.

[0125] Exemplarily, the sorting module may include a first sorting unit and a second sorting unit.

[0126] The first sorting unit is configured to determine the order of the two elements according to a set position order when the starting coordinates of the two elements in the design draft are different.

[0127] The second sorting unit is configured to determine the order of the two elements according to the occlusion relationship between the two elements when the starting coordinates of the two elements in the design draft are the same.

[0128] In some embodiments, the device may further include a layer processing module. The layer processing module is configured to parse the standard data of elements in the layer when the layer is a mask layer or is located above the mask layer to extract element information from the converted standard data. When the layer is located below the mask layer, the layer processing module is configured to perform a cut image on the elements in the layer.

[0129] In some embodiments, the device may further include a layer deletion module configured to delete standard data of elements in the layer when the layer is a hidden layer.

[0130] Each module in the above-mentioned design draft conversion device can be implemented in whole or in part through software, hardware, or a combination thereof. Each of the above modules can be embedded in or independent of the processor in the computer device in hardware form, or can be stored in the memory of the computer device in software form, so that the processor can call and execute the corresponding operations of each of the above modules.

[0131] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Figure 17As shown. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit and an input device. The processor, the memory and the input / output interface are connected via a system bus, and the communication interface, the display unit and the input device are connected to the system bus via the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be implemented through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a model prompt processing method is implemented. The display unit of the computer device is used to form a visually visible image, and can be a display screen, a projection device or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen. The input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device casing, or an external keyboard, touchpad or mouse, etc.

[0132] Those skilled in the art will understand that Figure 17 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different component arrangement.

[0133] In one embodiment, a computer device is further provided, including a memory and a processor. The memory stores a computer program, and the processor implements the steps in the above method embodiments when executing the computer program.

[0134] In one embodiment, a computer-readable storage medium is provided, storing a computer program, which implements the steps in the above-mentioned method embodiments when executed by a processor.

[0135] In one embodiment, a computer program product or computer program is provided, the computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the steps of each of the above-described method embodiments.

[0136] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of relevant countries and regions.

[0137] Those skilled in the art will appreciate that all or part of the processes in the above-mentioned embodiment methods can be implemented by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, database or other media used in the embodiments provided in this application may include at least one of non-volatile and volatile memory. Non-volatile memory may include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory may include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in the various embodiments provided herein may include at least one of a relational database and a non-relational database. Non-relational databases may include, but are not limited to, distributed databases based on blockchains. The processor involved in the various embodiments provided herein may be, but are not limited to, a general-purpose processor, a central processing unit, a graphics processing unit, a digital signal processor, a programmable logic unit, a data processing logic unit based on quantum computing, and the like.

[0138] In this application, unless otherwise expressly specified or limited, a first feature being "above" or "below" a second feature may include the first and second features being in direct contact, or may include the first and second features being in contact not directly but through another feature between them. Moreover, a first feature being "above," "above," and "above" a second feature may include the first feature being directly above or obliquely above the second feature, or may simply mean that the first feature is higher in level than the second feature. A first feature being "below," "below," and "below" a second feature may include the first feature being directly below or obliquely below the second feature, or may simply mean that the first feature is lower in level than the second feature.

[0139] In the description of the present application, it should be understood that the terms "center", "longitudinal", "lateral", "length", "width", "thickness", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "top", "bottom", "inside", "outside", "clockwise" and "counterclockwise" indicate orientations or positional relationships based on the orientations or positional relationships shown in the accompanying drawings, and are only for the convenience of describing the present application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore should not be understood as a limitation on the present application.

[0140] In this application, unless otherwise specified or limited, the terms "connect," "fix," etc. should be understood broadly. For example, "fix" can mean fixed connection, detachable connection, or integration; it can mean mechanical connection or electrical connection; it can mean direct connection or indirect connection through an intermediate medium; it can mean internal communication between two elements or interaction between two elements. Those skilled in the art will understand the specific meanings of the above terms in this application based on specific circumstances.

[0141] In addition, the terms "first," "second," and so on, used in this application are for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Therefore, features specified as "first" or "second" may explicitly or implicitly include one or more features. In the description of this application, "plurality" means two or more, unless otherwise specifically defined.

[0142] Although the embodiments of the present application have been shown and described, those skilled in the art will appreciate that various changes, modifications, substitutions, and variations may be made to the embodiments without departing from the principles and intent of the present application, and that the scope of the present application is defined by the claims and their equivalents.

Claims

1. A design draft conversion method, characterized in that: The method comprises: Obtaining a design draft and a mapping relationship between the design draft data and standard data, wherein the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes a hierarchical relationship and a relative position relationship of the elements; Converting the attribute data into standard data according to the mapping relationship; Extracting the relative position relationship of the elements from the converted standard data and determining the absolute position of the elements in the design draft; The hierarchical relationship of the elements is removed to obtain an annotated draft, which includes attribute data of at least one of the elements. The elements in the annotated draft are independent of each other, and the attribute data in the annotated draft includes the absolute position of the element in the design draft.

2. The method according to claim 1, characterized in that The step of extracting the relative position relationship of the elements from the converted standard data and determining the absolute position of the elements in the design draft includes: extracting the hierarchical relationship of the elements from the converted standard data; extracting the relative positional relationship of the elements from the converted standard data according to the hierarchical relationship of the elements; According to the relative position relationship between the elements of the first level and the elements of the second level, and the absolute position of the elements of the first level in the design draft, the absolute position of the elements of the second level in the design draft is obtained, and the first level and the second level are two adjacent levels.

3. The method according to claim 1 or 2, characterized in that After removing the hierarchical relationship of the elements, the method further includes: The elements are sorted according to their absolute positions in the design draft.

4. The method according to claim 3, characterized in that The sorting of the elements according to their absolute positions in the design draft includes: If the starting coordinates of the two elements in the design draft are different, the order of the two elements is determined according to the set position order; If the starting coordinates of the two elements in the design draft are the same, the order of the two elements is determined according to the occlusion relationship between the two elements.

5. The method according to claim 1 or 2, characterized in that Before extracting the relative position relationship of the elements from the converted standard data, the method further includes: If the layer is a mask layer or is located above a mask layer, parsing the standard data of the elements in the layer to extract information of the elements from the converted standard data; If the layer is below the mask layer, the elements in the layer are cut.

6. The method according to claim 1 or 2, characterized in that Before extracting the relative position relationship of the elements from the converted standard data, the method further includes: If the layer is a hidden layer, the standard data of the elements in the layer are deleted.

7. A design draft conversion device, characterized in that: The device comprises: An acquisition module, configured to acquire a design draft and a mapping relationship between the design draft data and standard data, wherein the design draft includes attribute data of at least one component, the component includes at least one element of at least one layer, and the attribute data in the design draft includes a hierarchical relationship and a relative position relationship of the elements; A conversion module, configured to convert the attribute data into standard data according to the mapping relationship; A determination module, configured to extract the relative position relationship of the elements from the converted standard data and determine the absolute position of the elements in the design draft; A removal module is used to remove the hierarchical relationship of the elements to obtain an annotated draft, wherein the annotated draft includes attribute data of at least one of the elements. The elements in the annotated draft are independent of each other, and the attribute data in the annotated draft includes the absolute position of the element in the design draft.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

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

10. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images