Layer export method, device, equipment and storage medium

Abstract

The application discloses a kind of layer export method, device, equipment and storage medium, belong to UI design field.The method includes: the node tree of the visual manuscript file of user interface is obtained, node tree includes visual element node, visual element node corresponds with the layer of the visual element constituting user interface;Determine the visual element node of node tree that does not support code construction;The visual element node of the same level in the visual element node that does not support code construction is merged, and the visual element node after merging is obtained;The layer corresponding to the visual element node after merging is exported as first cutout layer.In the process of realizing cutout, manual operation is not needed, only the node tree of visual manuscript file is handled by computer equipment, and cutout layer can be exported.It can avoid the problem of easy error and low efficiency caused by manual operation, and provides a kind of full-automatic cutout export technical scheme.

Description

Technical Field

[0001] This application relates to the field of UI design, and in particular to a layer export method, apparatus, device, and storage medium. Background Technology

[0002] Designers can use vector design tools to design the UI (User Interface) of applications, such as Sketch (a vector design tool produced by Bohemian Coding) and Photoshop (a vector design tool produced by Adobe).

[0003] After designers create the UI visual mockup file using vector design tools, this file is provided to front-end developers as the foundation for development. The mockup file contains two types of visual elements: primary visual elements that can be constructed using code and secondary visual elements that cannot. Primary visual elements, such as buttons, are implemented by front-end developers through programming. Secondary visual elements are implemented by designers or developers by exporting their corresponding layers, such as promotional poster images, and declaring layer nodes and their corresponding Uniform Resource Identifiers (URIs) in the UI code. In other words, the layer corresponding to the secondary visual element is added as a layer node to the code.

[0004] The process of exporting the layer of the second visual element described above is called image slicing. This image slicing process is mainly carried out manually by designers or developers based on their personal experience, which is not only prone to errors but also inefficient. Summary of the Invention

[0005] This application provides a layer export method, apparatus, device, and storage medium, offering a technical solution for fully automatic image export without manual user intervention. The technical solution is as follows:

[0006] According to one aspect of this application, a layer export method is provided, the method comprising:

[0007] Obtain the node tree of the visual design file of the user interface, the node tree including visual element nodes, and the visual element nodes corresponding to the layers of visual elements that constitute the user interface;

[0008] Identify visual element nodes in the node tree that do not support code construction;

[0009] Visual element nodes that are at the same level and do not support code construction are merged to obtain merged visual element nodes.

[0010] Export the layer corresponding to the merged visual element node as the first slice layer.

[0011] According to another aspect of this application, a layer exporting apparatus is provided, the apparatus comprising:

[0012] The acquisition module is used to acquire the node tree of the visual draft file of the user interface. The node tree includes visual element nodes, and the visual element nodes correspond to the layers of visual elements that constitute the user interface.

[0013] A determination module is used to determine visual element nodes in the node tree that do not support code construction;

[0014] The merge module is used to merge visual element nodes that belong to the same level in visual element nodes that do not support code construction, and obtain merged visual element nodes.

[0015] The export module is used to export the layers corresponding to the merged visual element nodes as the first slice layer.

[0016] In an optional design, the merging module is used for:

[0017] Merge visual element nodes that meet the merging conditions among visual element nodes that do not support code construction to obtain merged visual element nodes.

[0018] The merging condition is used to determine whether two visual element nodes belong to the same level.

[0019] In an alternative design, the merging conditions include at least one of the following:

[0020] The layers corresponding to the two visual element nodes belong to the same slice group;

[0021] The color similarity between the layers corresponding to two visual element nodes reaches the first threshold.

[0022] The degree of intersection between the layers corresponding to the two visual element nodes is greater than the second threshold;

[0023] The two visual element nodes belong to the same directory level in the node tree.

[0024] In an optional design, the merged visual element nodes also meet the following conditions:

[0025] The area of ​​the layer corresponding to the visual element node is less than the third threshold.

[0026] In an optional design, the determining module is used for:

[0027] Filter the visual element nodes in the node tree that support code construction to obtain the visual element nodes in the node tree that do not support code construction.

[0028] In an optional design, the determining module is used for:

[0029] Visual element nodes in the node tree that meet the filtering criteria are filtered to obtain visual element nodes in the node tree that do not support code construction; the filtering criteria include at least one of the following:

[0030] This is a text node without any style.

[0031] Nodes belonging to a straight line;

[0032] Graphical nodes that belong to the specified shape.

[0033] In an optional design, the device further includes:

[0034] An add module is used to add target identifiers to the merged visual element nodes in the node tree;

[0035] The export module is used for:

[0036] Export the layer corresponding to the visual element node with the target identifier in the node tree as the first slice layer.

[0037] In an optional design, the export module is used for:

[0038] Export the layers corresponding to the unmerged visual element nodes in the visual element nodes that do not support code construction as the second slice layer.

[0039] According to another aspect of this application, a computer device is provided, the computer device including a processor and a memory, the memory storing at least one instruction, at least one program, code set or instruction set, the at least one instruction, the at least one program, the code set or instruction set being loaded and executed by the processor to implement the layer export method as described above.

[0040] According to another aspect of this application, a computer-readable storage medium is provided, wherein at least one piece of program code is stored therein, the program code being loaded and executed by a processor to implement the layer export method as described above.

[0041] According to another aspect of this application, a computer program product or computer program is provided, comprising 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 layer export method provided in various alternative implementations of the above aspects.

[0042] The beneficial effects of the technical solution provided in this application include at least the following:

[0043] By identifying visual element nodes in the node tree that do not support code construction, merging visual element nodes at the same level, and then exporting the layers corresponding to the merged visual element nodes, a slice layer is obtained, thus achieving image slicing. In the process of image slicing, no manual operation is required; only the node tree of the visual artwork file needs to be processed by a computer to export the slice layer. This avoids the error-prone and inefficient problems of manual operation, providing a fully automated technical solution for exporting slices. Attached Figure Description

[0044] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0045] Figure 1 This is a schematic diagram illustrating the principle of layer export provided in the embodiments of this application;

[0046] Figure 2 This is a flowchart illustrating a layer export method provided in an embodiment of this application;

[0047] Figure 3 This is a flowchart illustrating another layer export method provided in an embodiment of this application;

[0048] Figure 4 This is a schematic diagram of visual element nodes belonging to the same slice group provided in an embodiment of this application;

[0049] Figure 5 This is a schematic diagram provided in an embodiment of the present application for determining whether the color similarity between two layers reaches a first threshold.

[0050] Figure 6 This is a schematic diagram provided in an embodiment of the present application for determining whether the degree of intersection between two layers reaches a second threshold;

[0051] Figure 7This is a schematic diagram of visual element nodes belonging to the same directory level provided in the embodiments of this application;

[0052] Figure 8 This is a schematic diagram of the structure of a layer exporting device provided in an embodiment of this application;

[0053] Figure 9 This is a schematic diagram of another layer exporting device provided in an embodiment of this application;

[0054] Figure 10 This is a schematic diagram of the structure of a server provided in an embodiment of this application.

[0055] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. Detailed Implementation

[0056] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0057] Figure 1 This is a schematic diagram illustrating the principle of layer export provided in the embodiments of this application. For example... Figure 1As shown, in step 101, the computer device acquires the node tree of the visual artwork file. This visual artwork file is used to develop the user interface. The node tree includes visual element nodes, which correspond to the layers of visual elements in the visual artwork file that constitute the user interface. In step 102, the computer device removes visual element nodes from the node tree that support code construction, thus obtaining visual element nodes in the node tree that do not support code construction. The computer device traverses all visual element nodes in the node tree and removes visual element nodes that meet the filtering conditions to obtain an updated node tree, which includes visual element nodes that do not support code construction. The filtering conditions reflect whether the visual elements of the layers corresponding to the visual element nodes can be implemented through code. For example, the filtering conditions include that the visual element node belongs to an unstyled text node, a line node, and at least one of a specified shape graphic node. The specified shape includes circles and rectangles, and the circles and rectangles are not deformed. In step 103, the computer device merges visual element nodes belonging to the same level. The "same level" refers to the layers corresponding to visual element nodes belonging to the same slice layer. The computer device can export slices based on the layers of visual element nodes belonging to the same slice layer. The computer device determines whether any two visual element nodes among those not supported by code construction meet the merging conditions, and merges the two visual element nodes that meet the merging conditions into a single slice layer node. This results in an updated node tree that includes nodes with at least one slice layer. The merging conditions include: the layers corresponding to the two visual element nodes belong to the same slice group; the color similarity of the layers corresponding to the two visual element nodes reaches a first threshold; the intersection degree of the layers corresponding to the two visual element nodes is greater than a second threshold; and the two visual element nodes belong to at least one of the same directory levels in the node tree. Optionally, the merged visual element node also meets the condition that the area of ​​the layer corresponding to the visual element node is less than a third threshold. In step 104, the computer device exports slice layers based on the node tree after removing and merging visual element nodes. Optionally, when merging visual element nodes, the computer device adds a target identifier to the merged visual element nodes, and then exports the layer corresponding to the visual element node with the target identifier as a slice layer, thereby achieving slice.

[0058] When slicing images using the above method, no manual operation is required. The computer simply processes the node tree of the visual artwork file according to filtering and merging criteria to export the sliced ​​layers. This avoids the errors and low efficiency of manual operation, providing a fully automated solution for exporting sliced ​​images.

[0059] Figure 2This is a flowchart illustrating a layer export method provided in an embodiment of this application. This method can be used on a computer device or a client on that device. Figure 2 As shown, the method includes:

[0060] Step 201: Obtain the node tree of the visual design file for the user interface.

[0061] This user interface includes the system interface of the computer device, as well as the interfaces of applications installed on the computer device. Examples include the interfaces of social media clients, financial clients, game clients, and music clients. The visual artwork file corresponds to the user interface, and developers can implement the user interface using programming code based on this visual artwork file. The visual artwork file formats include ".sketch", ".PSD", and ".xd". Specifically, visual artwork files exported from Sketch are in ".sketch" format. Visual artwork files exported from Photoshop are in ".PSD" format. Visual artwork files exported from Adobe XD (Adobe's vector design tool) are in ".xd" format.

[0062] In the visual design file, visual elements are drawn on layers. Visual element nodes correspond to the layers of visual elements that make up the user interface. These visual element nodes include at least one of the following: layer group nodes (containing at least one visual element node), image nodes (where the visual element is an image), shape nodes (where the visual element is a shape), and text nodes (where the visual element is text). The node tree, which includes visual element nodes, reflects the structural relationships between these nodes, i.e., the structural relationships between the layers corresponding to the visual element nodes. The node tree also includes the attributes, type, and style of the layer corresponding to each visual element node.

[0063] Step 202: Identify visual element nodes in the node tree that do not support code construction.

[0064] The visual element nodes that do not support code construction refer to the layers of visual elements that developers cannot implement through programming code, and the corresponding visual element nodes. Examples include visual element nodes corresponding to page background images, virtual avatars, and text in special fonts.

[0065] Optionally, the computer device obtains the visual element nodes that do not support code construction by filtering out visual element nodes that support code construction from the node tree. These visual element nodes that support code construction include nodes of unstyled text, nodes of straight lines, and graphic nodes of specified shapes. The specified shapes include circles and rectangles, and the circles and rectangles are not deformed.

[0066] Step 203: Merge visual element nodes at the same level that do not support code construction to obtain merged visual element nodes.

[0067] The same level refers to the layers corresponding to visual element nodes belonging to the same slice layer. Computer devices can export slices based on the layers of visual element nodes that belong to the same slice layer.

[0068] The computer device determines whether any two visual element nodes that do not support code-based construction meet the merging criteria, and merges the two matching visual element nodes into a single tile layer node. This results in an updated node tree that includes nodes with at least one tile layer.

[0069] Optionally, the merging conditions include: the layers corresponding to the two visual element nodes belong to the same slice group; the color similarity of the layers corresponding to the two visual element nodes reaches a first threshold; the intersection degree of the layers corresponding to the two visual element nodes is greater than a second threshold; and the two visual element nodes belong to at least one of the same directory levels in the node tree. Optionally, the merged visual element nodes also meet the condition that the area of ​​the layer corresponding to the visual element node is less than a third threshold.

[0070] Step 204: Export the layers corresponding to the merged visual element nodes as the first slice layer.

[0071] Computer devices can merge visual element nodes to update the node tree. When the computer device exports the first slice layer based on the updated node tree, the merged visual element nodes can instruct the computer device to merge the layers corresponding to the visual element nodes and export them as a single slice layer, thereby achieving image slicing.

[0072] For example, for a visual artwork file in the format ".sketch", a computer device can export the first slice layer by using components in a vector design tool that designs the visual artwork file.

[0073] In summary, the method provided in this application identifies visual element nodes in the node tree that do not support code construction, merges visual element nodes at the same level, and then exports the layer corresponding to the merged visual element nodes to obtain a slice layer, thereby achieving image slicing. During the image slicing process, no manual operation is required; simply processing the node tree of the visual artwork file using a computer device is sufficient to export the slice layer. This avoids the error-prone and inefficient problems associated with manual operation, providing a fully automated technical solution for exporting slices.

[0074] Figure 3This is a flowchart illustrating another layer export method provided in an embodiment of this application. This method can be used on a computer device or a client on a computer device. Figure 3 As shown, the method includes:

[0075] Step 301: Obtain the node tree of the visual design file for the user interface.

[0076] This user interface includes the system interface of the computer device, as well as the interfaces of applications installed on the computer device. The visual artwork file corresponds to the user interface, and developers can implement the user interface using programming code based on this visual artwork file. This visual artwork file is uploaded to the computer device by the developer or designer. The format of the visual artwork file includes ".sketch", ".PSD", and ".xd".

[0077] This node tree includes visual element nodes, which correspond to the layers of visual elements that make up the user interface. The visual element nodes include at least one of layer group nodes, image nodes, shape nodes, and text nodes. This node tree reflects the structural relationships between the layers of visual elements. It also includes the attributes, type, and style of the layer corresponding to each visual element node.

[0078] For text node types, the attributes are the text content, and the styles include text size, font, line height, color, and whether to bold.

[0079] For image node types, the attribute is the image path, and the style includes the image's width and height, background, whether it has rounded corners, and whether it has a border, etc.

[0080] For graphic node types, the attributes are the identifier of the shape and the path, and the styles include the width and height of the graphic, background, whether it is rounded, whether it has a border, etc.

[0081] Based on the obtained visual artwork file, the computer device can determine the node tree of the visual artwork file. For example, if the visual artwork file is in ".sketch" format, the computer device can decompress the file to obtain a JavaScript Object Notation (JSON) file containing the node tree of the visual artwork file. In this JSON file, layer group nodes are identified as "layer", image nodes as "image", shape nodes as "rectangle" and "oval", etc., and text nodes as "text". For visual artwork files in ".PSD" and ".xd" formats, the computer device can export the node tree using a node tree export plugin corresponding to the visual artwork file format, such as the PSD.js plugin.

[0082] Step 302: Identify visual element nodes in the node tree that do not support code construction.

[0083] The visual element node that does not support code construction refers to the visual element node corresponding to a layer of visual elements that developers cannot implement through programming code. Examples include visual element nodes corresponding to page background images, virtual avatars, and text with special fonts. Optionally, the computer device can obtain visual element nodes that do not support code construction by filtering the node tree for visual element nodes that support code construction. Specifically, the computer device filters visual element nodes in the node tree that meet the filtering criteria to obtain visual element nodes that do not support code construction. The filtering criteria are used to determine whether a visual element node supports code construction. The filtering criteria include at least one of the following:

[0084] • Text nodes without styles;

[0085] • Nodes belonging to a straight line;

[0086] • Graphic nodes that belong to the specified shape.

[0087] Specifically, a text node without style refers to a visual element node whose corresponding layer contains text, and that text has no special style. A special style refers to a text style that cannot be implemented through code, such as a special font or artistic text. A line node refers to a visual element node whose corresponding layer contains a line. A graphic node with a specified shape refers to a visual element node whose corresponding layer contains a specified shape, including circles and rectangles, and that the circle or rectangle has not undergone any deformation.

[0088] For example, a computer device determines whether a visual element node in a node tree is an unstyled text node using the following code:

[0089]

[0090] The functions "node.styles.border", "node.styles.shadows", "node.styles.background" and "node.styles.background&&node.styles.background.type==='color'" are used to filter out visual element nodes of text without borders, shadows, backgrounds, and background colors from the node tree, thus obtaining visual element nodes belonging to unstyled text nodes.

[0091] Computer devices determine whether a visual element node in a node tree is a straight line node using the following code:

[0092] private static isLine(node: QObject): boolean{

[0093] return node.width>50&&node.height<=2;

[0094] }

[0095] The "node.width>50" and "node.height<=2" functions are used to filter out visual element nodes of layers with a length greater than 50 and a height less than 2 from the node tree, thus obtaining visual element nodes that belong to the line node category.

[0096] Computer devices determine whether a visual element node in a node tree belongs to a graphic node of a specified shape using the following code:

[0097]

[0098]

[0099] The code corresponding to " / / non-quadrilateral", " / / quadrilateral but with modified corners" and "if it is a gradient border" is used to filter out visual element nodes of quadrilaterals, rectangles and circles with unmodified corners and no gradient borders from the node tree, thereby obtaining visual element nodes of graphic nodes belonging to the specified shape.

[0100] Computer devices use the following code to filter visual element nodes that have completed the determination of whether they meet the filtering conditions:

[0101]

[0102]

[0103] The codes corresponding to " / / unstyled text node", " / / line", and " / / regular graphic node" are used to remove visual element nodes that are determined to be unstyled text nodes, line nodes, or graphic nodes of a specified shape from the node tree, thereby obtaining a node tree that includes visual element nodes that do not support code construction, that is, it can obtain visual element nodes that do not support code construction.

[0104] It should be noted that the computer device uses a Node plugin (Node.js) to identify visual element nodes in the node tree that do not support code construction, and this Node plugin contains the aforementioned code. The computer device can identify visual element nodes in the node tree that do not support code construction based on all or some of the above filtering conditions. Furthermore, developers can modify the above filtering conditions as needed, such as adding new filtering conditions, to improve the accuracy of the computer device in identifying visual element nodes in the node tree that do not support code construction.

[0105] Step 303: Merge visual element nodes at the same level that do not support code construction to obtain merged visual element nodes.

[0106] The "same level" refers to visual element nodes belonging to the same slice layer. The computer device can export slices based on the layers of visual element nodes belonging to the same slice layer. Optionally, the computer device merges visual element nodes that meet the merging criteria from those that do not support code construction, obtaining merged visual element nodes. The computer device uses the merged visual element nodes as nodes of a slice layer, thus obtaining an updated node tree that includes nodes from at least one slice layer. The merging criteria are used to determine whether two visual element nodes belong to the same level. Optionally, the merging criteria include at least one of the following:

[0107] • The layers corresponding to the two visual element nodes belong to the same slice group;

[0108] • The color similarity between the layers corresponding to two visual element nodes reaches the first threshold;

[0109] • The degree of intersection between the layers corresponding to two visual element nodes is greater than the second threshold;

[0110] • The two visual element nodes belong to the same directory level in the node tree.

[0111] To determine whether the layers corresponding to two visual element nodes belong to the same slice group:

[0112] When designers create visual design files, they typically annotate the layers within the files. These annotations indicate the slice group to which each layer belongs. The rules for these annotations are entered into the computer device by the developers. The computer device then uses these rules to identify visual element nodes that do not support code-based construction and merge them into the same slice group.

[0113] For example, Figure 4 This is a schematic diagram of visual element nodes belonging to the same slice group provided in an embodiment of this application. For example... Figure 4 As shown, the user interface 401 of the vector design tool used to design visual draft files includes a layer preview area 402 and a node tree preview area 403 corresponding to the layers. The first layer 404 corresponds to the first visual element 405, and the second layer 405 corresponds to the second visual element 406. The designer marks the first layer 404 and the second layer 405 as belonging to the same slice group. Therefore, when merging visual element nodes, the computer device will merge the visual element nodes corresponding to the first layer 404 and the second layer 405.

[0114] To determine whether the color similarity between the layers corresponding to two visual element nodes reaches the first threshold:

[0115] For two visual element nodes in layers with the same or very similar colors, they can usually be exported to the same slice layer. For example, multiple layers that make up a solid-color icon, where the visual elements in each layer have the same color. The computer determines the color similarity between the layers corresponding to two visual element nodes, merging the two visual element nodes when it reaches a first threshold. Optionally, the computer determines the color similarity based on the sum of the variances of the color values ​​corresponding to the two layers. The color similarity is determined to have reached the first threshold when it is less than or equal to the first threshold. This first threshold is determined by the developers; the larger the first threshold, the higher the probability that the two visual element nodes will be merged; the smaller the first threshold, the lower the probability that the two visual element nodes will be merged. For example, if the color values ​​(RGB) of the first layer are R = r1, G = g1, B = b1, and the color values ​​of the second layer are R = r2, G = g2, B = b2, then the color similarity between the first layer and the second layer determined by the computer is (r1 - r2). 2 +(g1-g2) 2 +(b1-b2) 2Optionally, when the visual element node corresponds to a layer whose visual element color is a gradient, the computer device determines the average value of the gradient color as the layer's color value. For example, if the gradient color value is From(0, 0, 0) to(240, 240, 240), then the computer device determines the color values ​​as R = (0 + 240) / 2, G = (0 + 240) / 2, and B = (0 + 240) / 2. Optionally, if the visual element node corresponds to an image layer with no color attribute, the computer device determines whether to merge the two visual element nodes by determining the similarity of the color complexity of the two layers. Color complexity refers to the richness of colors contained in the visual elements of a layer. The computer device determines the similarity of this color complexity based on the number of colors and color values ​​contained in the two layers. The closer the number of colors and the more identical color values, the higher the likelihood that the computer device will merge the two visual element nodes.

[0116] For example, Figure 5 This is a schematic diagram illustrating how to determine whether the color similarity between two layers reaches a first threshold, as provided in an embodiment of this application. Figure 5 As shown, the visual elements of the three layers in the first layer group 501 form the anime icon 502. The three layers in the first layer group 501 have the same color. The visual elements of the three layers in the second layer group 503 form the music icon 504. The three layers in the second layer group 503 have the same color. When merging visual element nodes, the computer device will merge the visual element nodes corresponding to the three layers in the first layer group 501 and the visual element nodes corresponding to the three layers in the second layer group 503.

[0117] To determine whether the intersection degree of the layers corresponding to two visual element nodes is greater than a second threshold:

[0118] For two visual element nodes whose layers intersect, they can usually be exported to the same slice layer. The larger the area of ​​intersection between two layers, the higher the likelihood that the computer will merge the visual element nodes corresponding to the two layers. When the degree of intersection of the layers corresponding to two visual element nodes is greater than a second threshold, the computer will merge the two visual element nodes. This degree of intersection is determined by measuring the distance between the two layers or the area of ​​their intersection. When two layers do not intersect, the closer the two layers are, the greater the degree of intersection; when two layers intersect, the larger the area of ​​their intersection, the greater the degree of intersection. This second threshold is determined by the developers, and can be set separately for the cases where two layers do not intersect and where two layers do intersect. That is, when two layers do not intersect and the distance between the two layers is less than the second threshold measuring distance, the computer determines that the degree of intersection of the two layers is greater than the second threshold. When two layers intersect and the area of ​​their intersection is greater than the second threshold measuring the area of ​​intersection, the computer determines that the degree of intersection of the two layers is greater than the second threshold. For example, Figure 6 This is a schematic diagram illustrating how to determine whether the intersection degree between two layers reaches a second threshold, as provided in an embodiment of this application. Figure 6 As shown in (a), the dashed box outside the first layer 601 represents the second threshold. The second layer 602 intersects with the area containing the dashed box. At this time, the degree of intersection between the first layer 601 and the second layer 602 is greater than the second threshold. Figure 6 As shown in (b), the second layer 602 does not intersect with the area containing the dashed box. At this time, the degree of intersection between the first layer 601 and the second layer 602 is less than the second threshold.

[0119] To determine whether two visual element nodes belong to the same directory level in the node tree:

[0120] When designing visual artwork, designers typically place layers that need to be merged within the same directory level. Computer devices automatically merge visual element nodes that belong to the same directory level in the node tree. Two visual element nodes belonging to the same directory level mean they share the same parent node in the node tree. For two visual element nodes not belonging to the same directory level, the computer device determines their least common parent node in the node tree and the level difference between them. The smaller the level difference between two visual element nodes, the higher the likelihood that the computer device will merge them. For example, if the common parent node of the first and second visual element nodes is the third visual element node, and the level difference between the first and third visual element nodes is one level (the third visual element node is the parent node of the first visual element node), and the level difference between the second and third visual element nodes is four levels, then the level difference between the first and second visual element nodes is three levels.

[0121] For example, Figure 7 This is a schematic diagram of visual element nodes belonging to the same directory level, provided in an embodiment of this application. For example... Figure 7 As shown, the visual elements of the six layers in layer group 701 together form the background image 702. When merging visual element nodes, since the six layers in layer group 701 belong to the same directory level, the computer device will merge the visual element nodes corresponding to each of the six layers.

[0122] Optionally, the merged visual element nodes also meet the following conditions:

[0123] • The area of ​​the layer corresponding to the visual element node is less than the third threshold.

[0124] For visual element nodes that need to be merged, the area of ​​their corresponding layers is usually limited. This third threshold is determined by the developers based on the size of the visual elements in the design file, for example, 35*35.

[0125] It should be noted that the computer device determines whether two visual element nodes meet the merging conditions in the order described above, or in another order. Furthermore, during the determination process, the computer device also checks whether the area of ​​the layer corresponding to the visual element node is less than a third threshold, thus comprehensively determining whether to merge the two visual element nodes. Additionally, the computer device can score the two visual element nodes for each merging condition; for example, the more similar the layer colors of two visual element nodes, the higher their merge score. This score is then added to the score of the area of ​​the layer corresponding to the visual element node; for example, the smaller the layer area, the higher the score. Finally, the merge score of the two visual element nodes is obtained. When the merge score is higher than the scoring threshold, the computer device determines to merge the two visual element nodes. During the merging process, the computer device will continue to merge already merged visual element nodes with other visual element nodes until any two visual element nodes in the node tree can no longer be merged. Moreover, developers can modify the above merging conditions as needed, such as adding new merging conditions, to improve the accuracy of the computer device in determining which visual element nodes in the node tree need to be merged. Optionally, the computer device implements the above-mentioned process of merging visual element nodes by running a Node plugin, which may be the same plugin or a different plugin used by the Node plugin used to determine the visual element nodes in the node tree that do not support code construction.

[0126] Step 304: Export the layers corresponding to the merged visual element nodes as the first slice layer.

[0127] The computer device merges visual element nodes, updating the node tree. When exporting the first slice layer based on the updated node tree, the merged visual element nodes can instruct the computer device to merge the layers corresponding to those nodes and export them as a single slice layer, thus achieving image slicing. Optionally, the computer device adds a target identifier to the merged visual element nodes in the node tree and exports the layers corresponding to the visual element nodes with the target identifier as the first slice layer. This target identifier instructs the computer device to merge the layers corresponding to the visual element nodes and export them as a single slice layer. This target identifier is determined according to the rules for identifying slice layers used by the plugin exporting the slice layer.

[0128] For example, a computer device exports the layer corresponding to the merged visual element nodes using the following code:

[0129]

[0130] The code described above is executed through a plugin in a vector design tool that generates visual artwork files in ".sketch" format. Using this code, a computer device can export a group of layers with the same identifier as a single slice layer. Essentially, it overlays a group of layers with the same identifier and outputs the resulting layer as an image (e.g., .png), thus achieving image slicing.

[0131] Step 305: Export the layers corresponding to the unmerged visual element nodes in the visual element nodes that do not support code construction as the second slice layer.

[0132] For visual element nodes that are not merged within visual element nodes that do not support code construction, the computer device can also export their corresponding layers as sliced ​​layers, thus slicing the layers of the unmerged visual element nodes. Optionally, the computer device will also determine whether the area of ​​the layer corresponding to the unmerged visual element node among the visual element nodes that do not support code construction is less than a third threshold. When it is less than the third threshold, the computer device will export the layer corresponding to that visual element node as a sliced ​​layer.

[0133] In summary, the method provided in this application identifies visual element nodes in the node tree that do not support code construction, merges visual element nodes at the same level, and then exports the layer corresponding to the merged visual element nodes to obtain a slice layer, thereby achieving image slicing. During the image slicing process, no manual operation is required; simply processing the node tree of the visual artwork file using a computer device is sufficient to export the slice layer. This avoids the error-prone and inefficient problems associated with manual operation, providing a fully automated technical solution for exporting slices.

[0134] Furthermore, identifying visual element nodes in the node tree that support code construction through filtering conditions improves the efficiency of this process. Filtering out these nodes prevents their corresponding layers from being exported as sliced ​​layers. Merging conditions identify visual element nodes at the same level within the node tree, allowing for their merging. The resulting merged visual element node layers are then exported as sliced ​​layers. This ability to merge necessary layers improves slicing efficiency, thereby enhancing developer productivity.

[0135] It should be noted that the order of the method steps provided in the embodiments of this application can be appropriately adjusted, and the steps can also be added or removed as appropriate. Any method variations that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the protection scope of this application, and therefore will not be elaborated further.

[0136] Figure 8 This is a schematic diagram of a layer export device provided in an embodiment of this application. This device can be used in a computer device or a client on a computer device. Figure 8 As shown, the device 80 includes:

[0137] The acquisition module 801 is used to acquire the node tree of the visual draft file of the user interface. The node tree includes visual element nodes, and the visual element nodes correspond to the layers of visual elements that constitute the user interface.

[0138] Module 802 is used to identify visual element nodes in the node tree that do not support code construction.

[0139] The merging module 803 is used to merge visual element nodes of the same level that do not support code construction, and obtain the merged visual element nodes.

[0140] Export module 804 is used to export the layers corresponding to the merged visual element nodes as the first slice layer.

[0141] In an optional design, module 803 is incorporated for:

[0142] Visual element nodes that meet the merging criteria and do not support code-based construction are merged to obtain merged visual element nodes. The merging criteria determine whether two visual element nodes belong to the same level. In an optional design, the merging criteria include at least one of the following:

[0143] The layers corresponding to the two visual element nodes belong to the same slice group;

[0144] The color similarity between the layers corresponding to two visual element nodes reaches the first threshold.

[0145] The degree of intersection between the layers corresponding to the two visual element nodes is greater than the second threshold;

[0146] The two visual element nodes belong to the same directory level in the node tree.

[0147] In an optional design, the merged visual element nodes also meet the following condition: the area of ​​the layer corresponding to the visual element node is less than the third threshold.

[0148] In an optional design, module 802 is defined for:

[0149] Filter the node tree to get visual element nodes that support code construction, and get visual element nodes that do not support code construction.

[0150] In an optional design, module 802 is defined for:

[0151] The filter selects visual element nodes in the node tree that meet certain filtering criteria, resulting in visual element nodes in the node tree that do not support code construction. The filtering criteria include at least one of the following:

[0152] This is a text node without any style.

[0153] Nodes belonging to a straight line;

[0154] Graphical nodes that belong to the specified shape.

[0155] In an optional design, such as Figure 9 As shown, device 80 also includes:

[0156] Add module 805 to add target identifiers to merged visual element nodes in the node tree.

[0157] Export module 804 is used to export the layer corresponding to the visual element node with the target identifier in the node tree as the first slice layer.

[0158] In an optional design, the export module 804 is used to export the layers corresponding to the unmerged visual element nodes in visual element nodes that do not support code construction as a second slice layer.

[0159] It should be noted that the layer export device provided in the above embodiments is only an example of the division of the above functional modules. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the layer export device and the layer export method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0160] Embodiments of this application also provide a computer device, which includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, code set, or instruction set, and the at least one instruction, at least one program, code set, or instruction set is loaded and executed by the processor to implement the layer export method provided in the above-described method embodiments.

[0161] Alternatively, the computer device is a server. For example, Figure 10 This is a schematic diagram of the structure of a server provided in an embodiment of this application.

[0162] The server 1000 includes a central processing unit (CPU) 1001, a system memory 1004 including random access memory (RAM) 1002 and read-only memory (ROM) 1003, and a system bus 1005 connecting the system memory 1004 and the CPU 1001. The computer device 1000 also includes a basic input / output system (I / O system) 1006 to facilitate information transfer between various components within the computer device, and a mass storage device 1007 for storing the operating system 1013, application programs 1014, and other program modules 1015.

[0163] The basic input / output system 1006 includes a display 1008 for displaying information and an input device 1009 for user input, such as a mouse or keyboard. Both the display 1008 and the input device 1009 are connected to the central processing unit 1001 via an input / output controller 1010 connected to the system bus 1005. The basic input / output system 1006 may also include the input / output controller 1010 for receiving and processing input from multiple other devices such as a keyboard, mouse, or electronic stylus. Similarly, the input / output controller 1010 also provides output to a display screen, printer, or other types of output devices.

[0164] The mass storage device 1007 is connected to the central processing unit 1001 via a mass storage controller (not shown) connected to the system bus 1005. The mass storage device 1007 and its associated computer-readable storage media provide non-volatile storage for the server 1000. That is, the mass storage device 1007 may include computer-readable storage media (not shown), such as a hard disk or a compact disc read-only memory (CD-ROM) drive.

[0165] Without loss of generality, the computer-readable storage medium may include computer storage media and communication media. Computer storage media include volatile and non-volatile, removable and non-removable media implemented using any method or technology for storing information such as computer-readable storage instructions, data structures, program modules, or other data. Computer storage media include RAM, ROM, erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other solid-state storage devices, CD-ROM, digital versatile disc (DVD) or other optical storage, magnetic tape cassettes, magnetic tape, disk storage, or other magnetic storage devices. Of course, those skilled in the art will recognize that the computer storage medium is not limited to the above-mentioned types. The system memory 1004 and mass storage device 1007 described above can be collectively referred to as memory.

[0166] The memory stores one or more programs, which are configured to be executed by one or more central processing units 1001. The one or more programs contain instructions for implementing the above method embodiments, and the central processing unit 1001 executes the one or more programs to implement the methods provided by the various method embodiments described above.

[0167] According to various embodiments of this application, the server 1000 can also be connected to a remote server on a network, such as the Internet. That is, the server 1000 can be connected to the network 1012 via the network interface unit 1011 connected to the system bus 1005, or the network interface unit 1011 can be used to connect to other types of networks or remote server systems (not shown).

[0168] The memory further includes one or more programs stored in the memory, and the one or more programs include steps executed by the server in the method provided in the embodiments of this application.

[0169] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the above-described apparatus and each module can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0170] This application also provides a computer-readable storage medium storing at least one piece of program code. When the program code is loaded and executed by the processor of a computer device, it implements the layer export method provided in the above-described method embodiments.

[0171] This application also provides a computer program product or computer program that includes 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 layer export method provided in the above-described method embodiments.

[0172] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0173] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent switching, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A layer export method, characterized in that, The method includes: Obtain the node tree of the visual design file of the user interface, the node tree including visual element nodes, and the visual element nodes corresponding to the layers of visual elements that constitute the user interface; By filtering visual element nodes in the node tree that belong to at least one of the following categories: unstyled text nodes, straight line nodes, or graphic nodes of a specified shape, visual element nodes in the node tree that do not support code construction are determined. Visual element nodes that are at the same level and do not support code construction are merged to obtain merged visual element nodes. Add a target identifier to the merged visual element node in the node tree. The target identifier is used to indicate that the layers corresponding to the visual element nodes are merged and exported as the same slice layer. The merged visual element nodes are then merged with other visual element nodes until no two visual element nodes in the node tree can be merged further. Multiple layers corresponding to visual element nodes with the target identifier in the node tree are superimposed, and the superimposed layer is output as an image and exported as the first slice layer.

2. The method according to claim 1, characterized in that, The process of merging visual element nodes of the same level that do not support code construction to obtain merged visual element nodes includes: Merge visual element nodes that meet the merging conditions among visual element nodes that do not support code construction to obtain merged visual element nodes. The merging condition is used to determine whether two visual element nodes belong to the same level.

3. The method according to claim 2, characterized in that, The merging conditions include at least one of the following: The layers corresponding to the two visual element nodes belong to the same slice group; The color similarity between the layers corresponding to two visual element nodes reaches the first threshold. The degree of intersection between the layers corresponding to the two visual element nodes is greater than the second threshold; The two visual element nodes belong to the same directory level in the node tree.

4. The method according to any one of claims 1 to 3, characterized in that, The merged visual element nodes also meet the following conditions: The area of ​​the layer corresponding to the visual element node is less than the third threshold.

5. The method according to any one of claims 1 to 3, characterized in that, The method further includes: Export the layers corresponding to the unmerged visual element nodes in the visual element nodes that do not support code construction as the second slice layer.

6. A layer exporting device, characterized in that, The device includes: The acquisition module is used to acquire the node tree of the visual draft file of the user interface. The node tree includes visual element nodes, and the visual element nodes correspond to the layers of visual elements that constitute the user interface. The determination module is used to determine visual element nodes in the node tree that do not support code construction by filtering visual element nodes that belong to at least one of the following: unstyled text nodes, straight line nodes, or graphic nodes of a specified shape. The merge module is used to merge visual element nodes that belong to the same level in visual element nodes that do not support code construction, and obtain merged visual element nodes. An add module is used to add a target identifier to the merged visual element node in the node tree. The target identifier is used to indicate that the layers corresponding to the visual element nodes are merged and exported as the same slice layer. The merging module is also used to continue merging the merged visual element node with other visual element nodes until any two visual element nodes in the node tree can no longer be merged. The export module is used to overlay multiple layers corresponding to visual element nodes with the target identifier in the node tree, and output the overlaid layer as an image, exporting it as the first slice layer.

7. A computer device, characterized in that, The computer device includes a processor and a memory, the memory storing at least one instruction, at least one program, a code set, or an instruction set, the at least one instruction, the at least one program, the code set, or the instruction set being loaded and executed by the processor to implement the layer export method as described in any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one piece of program code, which is loaded and executed by a processor to implement the layer export method as described in any one of claims 1 to 5.

9. A computer program product, characterized in that, The computer program product includes a computer program stored in a computer-readable storage medium, which a processor reads from and executes to implement the layer export method as described in any one of claims 1 to 5.

Images