Component generation method and device and electronic equipment

Abstract

The invention provides a component generation method and device and electronic equipment. The method comprises the steps that an element object set corresponding to a design image and element attribute information of all element objects in the element object set are acquired; according to the element attribute information of each element object, determining an element nesting relationship between the element objects; and according to the element attribute information of each element object and the element nesting relationship among the element objects, generating the interface component corresponding to the design image, thereby avoiding adopting strict specification design to standardize the design image, and having lower requirements on design engineers, thereby reducing the output cost of the design image and improving the generation efficiency of the component.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data processing, and particularly relates to a component generation method and device and electronic equipment. BACKGROUND

[0002] At present, a technology of generating a component based on a design image, for example, a user interface to code (UI2Code), can convert the design image into a code on a system side, and then obtain the component.

[0003] In the above scheme, in order to ensure that the performance of the component on each system side is consistent, the design image needs to follow a strict specification design, which requires a very high level of design engineers, thereby resulting in a high cost of output of the design image, and further resulting in a high cost of generation of the component and a poor efficiency of generation of the component. SUMMARY

[0004] The present application aims to at least solve one of the technical problems in the related art to some extent.

[0005] The present application proposes a component generation method and device and electronic equipment to generate an interface component corresponding to a design image based on element attribute information of each element object in the design image and an element nesting relationship between each element object, avoid using a strict specification design to standardize the design image, and require a lower level of design engineers, thereby reducing the output cost of the design image and improving the generation efficiency of the component.

[0006] The first aspect embodiment of the present application proposes a component generation method, which comprises: acquiring an element object set corresponding to a design image and element attribute information of each element object in the element object set; determining an element nesting relationship between each element object according to the element attribute information of each element object; and generating an interface component corresponding to the design image according to the element attribute information of each element object and the element nesting relationship between each element object.

[0007] The second aspect embodiment of the present application proposes a component generation device, which comprises: an acquisition module configured to acquire an element object set corresponding to a design image and element attribute information of each element object in the element object set; a determination module configured to determine an element nesting relationship between each element object according to the element attribute information of each element object; and a generation module configured to generate an interface component corresponding to the design image according to the element attribute information of each element object and the element nesting relationship between each element object.

[0008] In the component generation method and the component generation apparatus provided in the embodiments of the present application, the element object set corresponding to the design image and the element attribute information of each element object in the element object set are obtained, the element nesting relationship between each element object is determined according to the element attribute information of each element object, and the interface component corresponding to the design image is generated according to the element attribute information of each element object and the element nesting relationship between each element object, so that the design image is regulated by using strict specification design, the requirement on the design engineer is lower, the output cost of the design image is reduced, and the generation efficiency of the component is improved.

[0009] The third aspect of the embodiments of the present application provides an electronic device, including: at least one processor; and a memory connected with the at least one processor in communication; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the component generation method provided in the first aspect of the embodiments of the present application.

[0010] The fourth aspect of the embodiments of the present application provides a non-transitory computer-readable storage medium storing computer instructions, and the computer instructions are used to enable a computer to perform the component generation method provided in the first aspect of the embodiments of the present application.

[0011] The fifth aspect of the embodiments of the present application provides a computer program product, including a computer program, and the computer program is executed by a processor to implement the component generation method provided in the first aspect of the embodiments of the present application.

[0012] Additional aspects and advantages of the present application will be in part apparent and in part pointed out hereinafter. BRIEF DESCRIPTION OF DRAWINGS

[0013] The above and / or additional aspects and advantages of the present application will become apparent and be readily appreciated from the following description, including the accompanying drawings.

[0014] Figure 1 A flowchart of the component generation method provided in the first aspect of the embodiments of the present application;

[0015] Figure 2 A schematic diagram of a design image;

[0016] Figure 3 A schematic diagram of an attribute tab corresponding to a container element;

[0017] Figure 4 A schematic diagram of an attribute tab corresponding to an image element;

[0018] Figure 5 A schematic diagram of an attribute tab corresponding to a text element;

[0019] Figure 6 a display diagram of a node panel is shown;

[0020] Figure 7 a flow diagram of a component generation method provided in Embodiment Two of the present application is shown;

[0021] Figure 8 a schematic diagram of a component is shown;

[0022] Figure 9 a structural schematic diagram of a component generation device provided in Embodiment Three of the present application is shown;

[0023] Figure 10 A block diagram of an exemplary computer device suitable for implementing embodiments of the present application is shown. DETAILED DESCRIPTION

[0024] Embodiments of the present application are described in detail below with reference to examples shown in the accompanying drawings, wherein the same or similar reference numerals represent the same or similar elements or elements having the same or similar functions throughout. The embodiments described below by reference to the accompanying drawings are exemplary and are intended to explain the present application, and cannot be understood as a limitation of the present application.

[0025] Currently, a technology for generating a component based on a design image, for example, a user interface to code tool (UI2Code), can convert a design image into a code on a system side, and then obtain a component.

[0026] In the above scheme, in order to ensure that the performance of the components on each system side is consistent, the design image needs to follow strict specification design, which requires a very high level of design engineers, thereby resulting in a high cost of outputting the design image, and further resulting in a high cost of generating the component and a poor efficiency of generating the component.

[0027] Therefore, the present application mainly aims at the technical problem of a high cost and a poor efficiency of generating a component in the related art, and proposes a component generation method, device and electronic equipment.

[0028] The component generation method of the embodiments of the present application obtains an element object set corresponding to a design image and element attribute information of each element object in the element object set, determines an element nesting relationship between each element object according to the element attribute information of each element object, and generates an interface component corresponding to the design image according to the element attribute information of each element object and the element nesting relationship between each element object, thereby avoiding the use of strict specification design to standardize the design image, requiring a lower level of design engineers, thereby reducing the output cost of the design image and improving the efficiency of generating the component.

[0029] The component generation method, device and electronic equipment are described below with reference to the accompanying drawings.

[0030] Figure 1 A flowchart of the component generation method provided in Embodiment One of the present application is shown.

[0031] Embodiments of the present application are exemplified by the component generation method being configured in a component generation device, which can be applied in any electronic equipment or in a CPU processor in the electronic equipment, so that the electronic equipment can perform the component generation function.

[0032] The electronic equipment can be a personal computer (PC), a cloud device, a mobile device, etc. The mobile device can be a mobile phone, a tablet computer, a personal digital assistant, a wearable device, a vehicle-mounted device, etc. The mobile device has various operating systems, touch screens and / or display screens.

[0033] In addition, the component generation device can also be a visual annotation tool. The visual annotation tool can be provided with an annotation panel, an attribute panel and a node panel. The annotation panel is used to display a design image and perform element object annotation processing on the design image. The attribute panel is used to set element attribute information of the element objects. The node panel is used to determine element nesting relationships between the element objects. The annotation panel, the attribute panel and the node panel can interact through the observer mode. In the following embodiments, the component generation device is taken as an example of an electronic equipment provided with a visual annotation tool.

[0034] As shown in Figure 1 The component generation method can include the following steps:

[0035] In step 101, a set of element objects corresponding to a design image and element attribute information of each element object in the set of element objects are obtained.

[0036] In the present application, the process of the electronic equipment performing step 101 can be, for example, obtaining each element object in the design image and position attribute information of each element object; obtaining style attribute information of each element object; and combining the position attribute information and the style attribute information of each element object to obtain the set of element objects corresponding to the design image.

[0037] The element type of the element object can include at least one of a container element, an image element and a text element. The container element can contain at least one of other container elements, image elements and text elements. For example, the design image in Figure 2 Figure 2 ​The image elements are, for example, a hair dryer image element, a shopping cart image element. The text elements are, for example, "XX hair dryer portable household negative ion intelligent…", "Get a coupon to reduce 199…", "199.00 yuan", "499.99 yuan". The container elements are, for example, a first container element containing the above three text elements related to the price; a second container element containing the shopping cart image element and a blank area; a third container element containing the first container element and the second container element; and a fourth container element containing the third container element, a text element not related to the price, and the hair dryer image element.

[0038] The container elements, image elements, and text elements can include other container elements, image elements, and text elements in the container elements, so that the nested relationship between the element objects can be conveniently described and processed, and the accuracy of the generated interface component can be improved.

[0039] In the embodiments of the present application, the element attribute information of the element objects can include position attribute information and style attribute information. The position attribute information can include starting position information and size information. The style attribute information can include layout style, corner style, and element style. The layout style is, for example, inner / outer margin, etc. The corner style is, for example, left upper corner, right upper corner, left lower corner, right lower corner, etc.

[0040] For example, the element style of the element type as a container element is, for example, background color, background image, etc. For example, the element style of the element type as an image element is, for example, image address, loading mode, etc. For example, the element style of the element type as a text element is, for example, text content, alignment mode, font style, font size, font color, background color, icon address, background image, etc.

[0041] The position attribute information of the element objects in the element object set can reflect the positions of the element objects, and the style attribute information of the element objects can reflect the styles of the element objects, so that the positions and / or styles of the element objects are not strictly limited by strict specification design, and the output cost of the design image is further reduced.

[0042] In the embodiments of the present application, the process in which the electronic device obtains the element objects in the design image and the position attribute information of the element objects can be, for example, displaying the design image in a labeling panel; determining the element objects in the design image and the position attribute information of the element objects according to the element labeling operation in the labeling panel.

[0043] The electronic device can perform a zooming process on the displayed design image in order to facilitate the labeling, for example, if the displayed design image is too small, the design image can be zoomed in, and if the displayed design image is too large, the design image can be zoomed out. After the element labeling is completed, the size of the displayed design image can be restored.

[0044] The display of the design image in the labeling panel facilitates the acquisition of the position attribute information of the element object in the design image in combination with the element labeling operation, thereby further improving the acquisition efficiency of the position attribute information of the element object.

[0045] In the embodiments of the present application, the process of acquiring the style attribute information of each element object by the electronic device can be, for example, sequentially determining the element type of each element object labeled in the labeling panel; displaying the attribute tab corresponding to the element type in the attribute panel; and determining the style attribute information of the element object according to the attribute setting operation in the attribute tab.

[0046] The attribute tab corresponding to the container element can be as shown in Figure 3 The attribute tab corresponding to the image element (picture element) can be as shown in Figure 4 The attribute tab corresponding to the text element can be as shown in Figure 5 In Figure 3 , the layout style of the container element can include: screen size, i.e., the size of the design draft / design image (design image); various inner and outer margins; container size; and layout mode. The layout mode can be, for example, horizontal, vertical, grid, absolute, etc.

[0047] In Figure 4 , the layout style of the image element can include: screen size, i.e., the size of the design draft / design image (design image); various inner and outer margins; and image element size (picture size). Figure 5 In , the layout style of the text element can include: screen size, i.e., the size of the design draft / design image (design image); various inner and outer margins; and text box size.

[0048] The display of the attribute tab corresponding to the element type facilitates the acquisition of the style attribute information of the element object in combination with the attribute setting operation, thereby further improving the acquisition efficiency of the style attribute information of the element object.

[0049] In step 102, the element nesting relationship between each element object is determined according to the element attribute information of each element object.

[0050] In the embodiments of the present application, the element nesting relationship can refer to the hierarchical relationship between the nodes corresponding to the element objects. For example, the hierarchical relationship can refer to the parent-child relationship between the nodes.

[0051] In step 103, the interface component corresponding to the design image is generated according to the element attribute information of each element object and the element nesting relationship between each element object.

[0052] In the embodiments of the present application, the process of the electronic device in step 103 can be, for example, displaying the element nesting relationship between each element object and at least one candidate system end identifier in the node panel; determining a target system end identifier in the at least one candidate system end identifier according to the candidate system end identifier selection operation in the node panel; generating an interface component code suitable for the target system end according to the element attribute information of each element object, the element nesting relationship between each element object, and the target system end corresponding to the target system end identifier; and generating the interface component corresponding to the design image according to the interface component code.

[0053] The display schematic diagram of the node panel can be as shown in Figure 6 In the Figure 6 , the element nesting relationship between each element object and at least one candidate system end identifier is displayed in the node panel. In the Figure 6 , the nodes corresponding to each element object are, for example, R, N1, N2, N3, N4, N5, N6, N7, N8, N9, and N10. R is the root node; N1, N2, and N3 are the child nodes of R; N4 and N5 are the child nodes of N1; N8 and N9 are the child nodes of N5; N6 is the child node of N2; N7 is the child node of N3; and N10 is the child node of N7. In the Figure 6 , the system end corresponding to the candidate system end identifier is, for example, the Apple end, the Android end, the H5 end, and the applet end.

[0054] Different system ends have different requirements for components; and the component generation process in combination with the target system end corresponding to the target system end identifier can generate the interface component suitable for the target system end, thereby improving the generation efficiency of the interface component.

[0055] The component generation method of the embodiments of the present application can obtain the element object set corresponding to the design image and the element attribute information of each element object in the element object set; determine the element nesting relationship between each element object according to the element attribute information of each element object; and generate the interface component corresponding to the design image according to the element attribute information of each element object and the element nesting relationship between each element object, thereby avoiding the use of strict specification design to standardize the design image, reducing the requirements on the design engineers, reducing the output cost of the design image, and improving the generation efficiency of the component.

[0056] Figure 7 The flowchart of the component generation method provided in Embodiment Two of the present application is shown. As shown in Figure 7 the embodiment, the element attribute information of the element object includes position attribute information. Correspondingly, step 102 can specifically include the following steps: Figure 1

[0057] Step 1021, according to the position attribute information of each element object, determine the image area corresponding to each element object in the design image.

[0058] In the embodiment of the present application, the position attribute information can include starting position information and size information. Correspondingly, the process of the electronic device performing step 1021 can be, for each element object in each element object, according to the starting position information and size information of the element object, determine the corner point position information of the image area to which the element object belongs; according to the corner point position information, determine the image area corresponding to the element object.

[0059] Wherein, the focal point position information, that is, the position information of each corner point of the image area to which the element object belongs. Wherein, the corner point is, for example, the upper left corner, the lower left corner, the upper right corner and the lower right corner, etc. Wherein, the position information of the upper left corner, that is, the starting position information.

[0060] Wherein, it should be noted that the image area corresponding to each element object in the design image can be, for example, the image area surrounded by each rectangular frame in the embodiment. Figure 2

[0061] Wherein, according to the starting position information and size information of the element object, the corner point position information can be accurately determined; according to the corner point position information, the image area corresponding to the element object can be uniquely determined, thereby improving the accuracy of the image area corresponding to the element object determined.

[0062] Step 1022, determine the inclusion relationship between the image areas corresponding to each element object.

[0063] In the embodiment of the present application, the inclusion relationship refers to the direct inclusion relationship between each image area. For example, in Figure 2 , the fourth container element contains the third container element, the text element not involving price and the hair dryer image element. The third container element contains the first container element and the second container element. The second container element contains the shopping cart image element and the blank area. The first container element contains three text elements involving price.

[0064] Step 1023, according to the inclusion relationship, determine the element nesting relationship between each element object.

[0065] ​​In an embodiment of the present application, the process of step 1023 performed by the electronic device may, for example, be as follows: for each element object, if a first image region containing the image region corresponding to the element object is obtained, the node to which the first image region corresponds is determined as the parent node of the node to which the element object belongs; if a second image region contained in the image region corresponding to the element object is obtained, the node to which the second image region corresponds is determined as the child node of the node to which the element object belongs; and the hierarchical relationship between the nodes corresponding to the respective element objects is determined as the element nesting relationship between the respective element objects.

[0066] According to the containing relationship, the parent-child relationship between the nodes to which the respective element objects belong can be accurately determined, and the element nesting relationship between the respective elements can be accurately determined, thereby improving the accuracy of the determined element nesting relationship and further improving the accuracy of the generated interface component.

[0067] The component generation method of the embodiment of the present application comprises the following steps: obtaining an element object set corresponding to a design image and element attribute information of each element object in the element object set; determining an image region corresponding to each element object in the design image according to the position attribute information of each element object; determining a containing relationship between the image regions corresponding to the respective element objects; determining an element nesting relationship between the respective element objects according to the containing relationship; and generating an interface component corresponding to the design image according to the element attribute information of each element object and the element nesting relationship between the respective element objects. In combination with the position attribute information of each element object, the containing relationship between the image regions corresponding to the respective element objects can be determined, and the element nesting relationship between the respective element objects can be accurately determined, thereby reducing the cost of obtaining the element nesting relationship, improving the efficiency of obtaining the element nesting relationship, further reducing the output cost of the design image, and improving the generation efficiency of the component.

[0068] The following examples are provided for illustration. As shown in FIG. 1, a component generation schematic diagram is shown. In the example shown in FIG. 1, a design image is divided into a plurality of image regions, and each image region corresponds to an element object. The image regions corresponding to the respective element objects are determined according to the position attribute information of the respective element objects. Figure 8 Figure 8 ​In the method, the following steps are included. Step 801, start. Step 802, open the visual table annotation tool, select and load the design draft / design diagram (design image) through the "ctrl+o" shortcut key. Step 803, initialize three operation panels of "annotation panel", "attribute panel" and "node panel"; and display the design draft / design diagram in the "annotation panel". Step 804, draw an annotation rectangle in the "annotation panel", and notify the "attribute panel" and the "node panel" of the annotation rectangle object (element object) through the observer mode. Step 805, notify the observer of the observed data set. Step 806, after the "attribute panel" receives the rectangle object (element object), echo the attribute tab; the relevant attribute values of the rectangle object can be set through the attribute panel. Step 807, after the "node panel" receives the rectangle object (element object), sort the rectangle object set through an algorithm, then convert the set into a multi-way tree structure (element nesting relationship) and display. Step 808, save the multi-way tree data structure (element nesting relationship) as a file or code required by each end through the save operation in the "node panel".

[0069] Figure 9 A structural schematic diagram of the component generation apparatus provided in Embodiment Three of the present application is shown.

[0070] As shown in Figure 9 , the component generation apparatus 900 can include an acquisition module 910, a determination module 920 and a generation module 930.

[0071] The acquisition module 910 is configured to acquire an element object set corresponding to a design image and element attribute information of each element object in the element object set; the determination module 920 is configured to determine an element nesting relationship between each element object according to the element attribute information of each element object; and the generation module 930 is configured to generate an interface component corresponding to the design image according to the element attribute information of each element object and the element nesting relationship between each element object.

[0072] Further, in a possible implementation manner of the embodiment of the present application, the acquisition module 910 includes a first acquisition unit, a second acquisition unit and a combination processing unit; the first acquisition unit is configured to acquire each element object in the design image and position attribute information of each element object; the second acquisition unit is configured to acquire style attribute information of each element object; and the combination processing unit is configured to perform combination processing on the position attribute information and the style attribute information of each element object to obtain the element object set corresponding to the design image.

[0073] Further, in a possible implementation of the embodiment of the application, the first obtaining unit is specifically configured to display the design image in a label panel; and determine each element object in the design image and the position attribute information of each element object according to an element label operation in the label panel.

[0074] Further, in a possible implementation of the embodiment of the application, the second obtaining unit is specifically configured to determine the element type of each element object obtained by labeling in the label panel in sequence; display an attribute tab corresponding to the element type in an attribute panel; and determine the style attribute information of the element object according to an attribute setting operation in the attribute tab.

[0075] Further, in a possible implementation of the embodiment of the application, the element attribute information of the element object includes the position attribute information; the determining module 920 includes a first determining unit, a second determining unit and a third determining unit; the first determining unit is configured to determine the image area corresponding to each element object in the design image according to the position attribute information of each element object; the second determining unit is configured to determine the containing relationship between the image areas corresponding to each element object; and the third determining unit is configured to determine the element nesting relationship between each element object according to the containing relationship.

[0076] Further, in a possible implementation of the embodiment of the application, the position attribute information includes the start position information and the size information; and the first determining unit is specifically configured to determine the corner point position information of the image area to which the element object belongs according to the start position information and the size information of the element object for each element object in each element object; and determine the image area corresponding to the element object according to the corner point position information.

[0077] Further, in a possible implementation of the embodiment of the application, the third determining unit is specifically configured to, in a case where the first image area containing the image area corresponding to the element object is obtained, take the node to which the element object corresponding to the first image area belongs as the parent node of the node to which the element object belongs; in a case where the second image area containing the image area corresponding to the element object is obtained, take the node to which the element object corresponding to the second image area belongs as the child node of the node to which the element object belongs; and determine the hierarchical relationship between each node corresponding to each element object as the element nesting relationship between each element object.

[0078] Further, in a possible implementation form of the embodiment of the application, the generating module 930 is specifically configured to: display the element nesting relationship between the respective element objects and the at least one candidate system end identifier in the node panel; determine a target system end identifier in the at least one candidate system end identifier according to a candidate system end identifier selection operation in the node panel; generate an interface component code applicable to the target system end according to the element attribute information of the respective element objects, the element nesting relationship between the respective element objects, and a target system end corresponding to the target system end identifier; and generate an interface component corresponding to the design image according to the interface component code.

[0079] Further, in a possible implementation form of the embodiment of the application, the element type of the element object includes at least one of the following: a container element, an image element, and a text element.

[0080] The component generation apparatus of the embodiment of the application acquires the element object set corresponding to the design image and the element attribute information of the respective element objects in the element object set, determines the element nesting relationship between the respective element objects according to the element attribute information of the respective element objects, and generates an interface component corresponding to the design image according to the element attribute information of the respective element objects and the element nesting relationship between the respective element objects, thereby avoiding the use of strict specification design to standardize the design image, reducing the requirement on the design engineer, reducing the output cost of the design image, and improving the generation efficiency of the component.

[0081] To implement the above-mentioned embodiments, the application further provides an electronic device, including: at least one processor; and a memory connected with the at least one processor in communication; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the component generation method proposed in the foregoing embodiments of the application.

[0082] To implement the above-mentioned embodiments, the application further provides a non-transitory computer-readable storage medium storing computer instructions, and the computer instructions are used to enable the computer to perform the component generation method proposed in the foregoing embodiments of the application.

[0083] To implement the above-mentioned embodiments, the application further provides a computer program product including a computer program, and the computer program product, when executed by a processor, implements the component generation method proposed in the foregoing embodiments of the application.

[0084] Figure 10 A block diagram of an exemplary computer device suitable for implementing embodiments of the application is shown. Figure 10 The computer device 12 shown is merely an example and should not impose any limitation on the functions and use range of the embodiments of the application.

[0085] like Figure 10 As shown, the computer device 12 is represented in the form of a general-purpose computing device. The components of the computer device 12 may include, but are not limited to: one or more processors or processing units 16, system memory 28, and a bus 18 connecting different system components (including system memory 28 and processing unit 16).

[0086] Bus 18 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. For example, these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MAC) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0087] Computer device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by computer device 12, including volatile and non-volatile media, removable and non-removable media.

[0088] Memory 28 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM) 30 and / or cache memory 32. Computer device 12 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 34 may be used to read and write non-removable, non-volatile magnetic media (…). Figure 10 Not shown; usually referred to as a "hard drive"). Although Figure 10A disk drive, a floppy disk drive, a CD-ROM drive, a DVD-ROM drive, or other removable media drive, can be provided for reading from and writing to a removable n on-volatile magnetic media (e.g., a "floppy disk"), a removable non-volatile optical media (e.g., a CD-ROM, a DVD-ROM, or other optical media), or other removable media. In such cases, each drive can be connected to the system bus 18 by one or more data media interfaces. The memory 28 can include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the application.

[0089] Program / utility 40, having a set (at least one) of program modules 42, can be stored in memory 28 by way of example, and not limitation, as well as an operating system, one or more application programs, other program modules, and program data, each or some combination thereof, can include implementation of a networking environment. Program modules 42 generally carry out the functions and / or methodologies of embodiments of the application as described herein.

[0090] Computer device 12 can also communicate with one or more external devices 14 such as a keyboard or a pointing device, a display 24, etc. and also with one or more devices that enable a user to interact with computer device 12 and / or any devices (e.g., network card, modem, etc.) that enable computer device 12 to communicate with one or more other computing devices. Such communication can occur via input / output (I / O) interface(s) 22. Still yet, computer device 12 can communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or the Internet) through network adapter 20. As an example, network adapter 20 can include a modem, a network card (wireless or wired), or other well-known interface devices. As depicted, network adapter 20 communicates with the other

[0091] Processing unit(s) 16 can execute instructions from programs stored in system memory 28 to perform various functions and data processing, such as implementing the methods described in the aforementioned embodiments.

[0092] In the description of the application, reference to "one embodiment", "some embodiments", "an example", "a specific example", or "some examples" means that a particular feature, structure, material, or characteristic being described is included in at least one embodiment or example of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment or example. Furthermore, the described specific features, structures, materials, or characteristics can be combined in any suitable manner in one or more embodiments or examples. Moreover, the usage of the terms "first", "second" or "third" does not limit the quantity or order of the specific features, structures, materials or characteristics, but rather the term "first", "second" or "third" can be used to distinguish the specific features, structures, materials or characteristics from one another. In addition, the particular features, structures, materials, or characteristics can be combined in any suitable manner in one or more embodiments or examples, without changing the scope of the application.

[0093] Furthermore, the terms "first", "second", or the like merely denote different instances of a similar feature, structure, material, or characteristic, without necessarily implying any actual relationship or order between the different instances. The specific features, structures, materials, or characteristics can be combined in any suitable manner in one or more embodiments or examples, without changing the scope of the application.

[0094] Any process or method descriptions or blocks in flow charts or otherwise described herein represent embodiments of modules, segments, or portions of code which include one or more executable instructions for implementing specific logic functions or steps, and alternate implementations are possible. In some embodiments, the processes or methods described in flow charts or otherwise described herein can be implemented in hardware, software, firmware, or any combination thereof. If implemented in software, the processes or methods described in flow charts or otherwise described herein can be stored as one or more sequences of instructions or code on a non-transitory computer-readable medium or memory such as any memory or data storage, including a single medium or multiple media, of the computer-readable media described above. Such instructions can include, without being limited to, binary

[0095] The logic and / or steps represented in the flowcharts and / or described herein, for example, can be considered as a sequence of executable instructions stored in a computer readable medium, which can be executed by an instruction execution system, apparatus or device, such as a computer-based system, processor- based system, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions, or a combination thereof. For the purposes of this specification, a "computer readable medium" can be any apparatus that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device. The computer readable medium can specifically include the following, which are non-exhaustive list: electrical connection (electrical device having one or more wires), portable computer diskette (magnetic device), random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or Flash memory), optical fiber device, and portable compact disc read-only memory (CDROM). In addition, the computer readable medium can even be paper or other suitable medium upon which the program is printed, as the program can be electronically captured, for example, by optically scanning the paper or other suitable medium, then electronically converted into a form that can be edited, compiled, or interpreted, or otherwise processed in electronic form into an executable form suitable for use in the instruction execution system, apparatus or device.

[0096] It should be understood that parts of the present application can be implemented in hardware, software, firmware or a combination thereof. In the above embodiments, a plurality of steps or methods can be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. As in another embodiment, if implemented in hardware, any of the following technologies known in the art or their combination can be used: discrete logic circuit with logic gate circuit for implementing logic functions on data signals, application specific integrated circuit with suitable combination logic gate circuit, programmable gate array (PGA), field programmable gate array (FPGA), etc.

[0097] Those skilled in the art of the present technology can understand that all or part of the steps carried out by the above-mentioned embodiment methods can be completed by a program instructing the relevant hardware, and the program can be stored in a computer readable storage medium. When the program is executed, it includes one of the steps of the method embodiment or a combination thereof.

[0098] In addition, each of the functional units in the various embodiments of the present application can be integrated in one processing module, or each of the units can be physically present separately, or two or more units can be integrated in one module. The integrated module can be implemented in the form of hardware or in the form of a software functional module. When the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can also be stored in a computer readable storage medium.

[0099] The storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc. Although the embodiments of the present application have been shown and described above, it should be understood that the above embodiments are exemplary and should not be construed as limiting the present application, and those skilled in the art can make changes, modifications, replacements and variations to the above embodiments within the scope of the present application.

Claims

1. An assembly generation method, characterized by, The method comprises: obtaining an element object set corresponding to a design image, and element attribute information of each element object in the element object set; determining an element nesting relationship between the element objects according to the element attribute information of the element objects; generating an interface component corresponding to the design image according to the element attribute information of the element objects and the element nesting relationship between the element objects.

2. The method of claim 1, wherein, The obtaining of the element object set corresponding to the design image, and the element attribute information of each element object in the element object set comprises: obtaining each element object in the design image, and position attribute information of the element objects; obtaining style attribute information of the element objects; combining the position attribute information and the style attribute information of the element objects to obtain the element object set corresponding to the design image.

3. The method of claim 2, wherein, The obtaining of each element object in the design image, and the position attribute information of the element objects comprises: displaying the design image in a labeling panel; determining each element object in the design image, and the position attribute information of the element objects according to an element labeling operation in the labeling panel.

4. The method of claim 2, wherein, The obtaining of the style attribute information of the element objects comprises: determining an element type of each element object labeled in the labeling panel in sequence; displaying an attribute tab corresponding to the element type in an attribute panel; determining the style attribute information of the element object according to an attribute setting operation in the attribute tab.

5. The method of claim 1, wherein, The element attribute information of the element objects comprises the position attribute information. The determination of the element nesting relationship between the element objects according to the element attribute information of the element objects comprises: determining image regions corresponding to the element objects in the design image according to the position attribute information of the element objects; determining a containing relationship between the image regions corresponding to the element objects; determining the element nesting relationship between the element objects according to the containing relationship.

6. The method of claim 5, wherein, The position attribute information comprises starting position information and size information; the determination of the image regions corresponding to the element objects in the design image according to the position attribute information of the element objects comprises: determining corner point position information of an image region to which each element object belongs according to the starting position information and the size information of the element object; determining an image region corresponding to the element object according to the corner point position information.

7. The method of claim 5, wherein, The determination of the element nesting relationship between the element objects according to the containing relationship comprises: in a case where a first image region containing the image region corresponding to each element object is obtained, taking a node to which an element object corresponding to the first image region belongs as a parent node of a node to which the element object belongs. In a case where a second image region included in the image region corresponding to the element object is acquired, a node to which an element object corresponding to the second image region belongs is determined as a child node of a node to which the element object belongs. A hierarchical relationship between the nodes corresponding to the respective element objects is determined as an element nesting relationship between the respective element objects.

8. The method of claim 1, wherein, The generating the interface component corresponding to the design image according to the element attribute information of the respective element objects and the element nesting relationship between the respective element objects includes: displaying the element nesting relationship between the respective element objects and at least one candidate system end identifier in a node panel; determining a target system end identifier in the at least one candidate system end identifier according to a candidate system end identifier selection operation in the node panel; generating an interface component code suitable for the target system end according to the element attribute information of the respective element objects, the element nesting relationship between the respective element objects, and a target system end corresponding to the target system end identifier; generating the interface component corresponding to the design image according to the interface component code.

9. The method according to any one of claims 1 to 8, characterized in that, The element type of the element object includes at least one of a container element, an image element, and a text element.

10. An assembly generation device, characterized by The apparatus includes: an acquisition module configured to acquire a set of element objects corresponding to a design image and element attribute information of each element object in the set of element objects; a determination module configured to determine an element nesting relationship between the respective element objects according to the element attribute information of the respective element objects; a generation module configured to generate an interface component corresponding to the design image according to the element attribute information of the respective element objects and the element nesting relationship between the respective element objects.

11. An electronic device, comprising: includes: at least one processor; and a memory connected in communication with the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-9.

12. A non-transitory computer-readable storage medium having stored thereon computer instructions, wherein, The computer instructions are used to enable the computer to perform the method of any one of claims 1-9.

13. A computer program product, characterised in that, The computer program, when executed by a processor, implements the method of any one of claims 1-9. The computer program, when executed by a processor, implements the method of any one of claims 1-9.

Images