Data conversion method and device and electronic equipment

Abstract

The invention provides a data conversion method and device and electronic equipment, and the method comprises the steps: obtaining node data corresponding to a target interface design drawing composed of a plurality of nodes, and converting the node data into target data in a preset format; wherein the nodes comprise texts and / or pictures, and the target data comprise picture resources, picture paths, node tree information and mark information corresponding to the multiple nodes; the mark information is used for indicating storage paths and node types of texts and / or pictures corresponding to partial nodes; and importing the target data into the target engine, so that the target engine reconstructs the plurality of nodes based on the target data, and renders the reconstructed nodes on the target engine based on the node type to obtain a rendered target interface. According to the mode, the node data corresponding to the interface design drawing is converted into the preset format, the corresponding nodes can be automatically reconstructed in the engine, conversion from a visual effect drawing to a project is achieved, and time and errors of manual operation are reduced.

Description

Technical Field

[0001] The present disclosure relates to the field of data processing technology, and in particular to a data conversion method, device and electronic device. Background Art

[0002] In the related technology, page designers usually design UI renderings in design tools such as Figma, and then manually rebuild the texts and pictures in the UI renderings one by one in the engine to obtain page UI diagrams that can be used for the project. This method requires a lot of manpower and is prone to errors during manual reconstruction. Summary of the invention

[0003] The purpose of the present disclosure is to provide a data conversion method, device and electronic device to automatically convert a designed interface rendering into an interface UI diagram usable in a game engine, thereby reducing the time and errors of manual operations, improving work efficiency and reducing potential error rates.

[0004] In a first aspect, the present disclosure provides a data conversion method, which includes: obtaining node data corresponding to a target interface design drawing, and converting the node data into target data in a preset format; wherein the target interface design drawing is composed of multiple nodes, and the nodes include text and / or pictures; the target data includes picture resources, picture paths, node tree information and marking information corresponding to multiple nodes; the marking information is used to indicate: the storage path and corresponding node type of the general control to which the text and / or pictures corresponding to some nodes belong; importing the target data into a target engine, so that the target engine reconstructs multiple nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type to obtain a rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing.

[0005] In a second aspect, the present disclosure provides a data conversion device, which includes: a data conversion module, used to obtain node data corresponding to a target interface design drawing, and convert the node data into target data in a preset format; wherein the target interface design drawing is composed of multiple nodes, and the nodes include text and / or pictures; the target data includes picture resources, picture paths, node tree information and marking information corresponding to multiple nodes; the marking information is used to indicate: the storage path and corresponding node type of the general control to which the text and / or pictures corresponding to some nodes belong; a node reconstruction module, used to import the target data into a target engine, so that the target engine reconstructs multiple nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type to obtain a rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing.

[0006] In a third aspect, the present disclosure provides an electronic device, which includes a processor and a memory, wherein the memory stores machine executable instructions that can be executed by the processor, and the processor executes the machine executable instructions to implement the above-mentioned data conversion method.

[0007] In a fourth aspect, the present disclosure provides a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are called and executed by a processor, the computer-executable instructions prompt the processor to implement the above-mentioned data conversion method.

[0008] The embodiments of the present disclosure bring the following beneficial effects:

[0009] The present disclosure provides a data conversion method, device and electronic device, firstly obtaining the node data corresponding to the target interface design drawing, and converting the node data into the target data of a preset format; wherein the target interface design drawing is composed of a plurality of nodes, and the nodes include text and / or pictures; the target data includes picture resources, picture paths, node tree information and marking information corresponding to the plurality of nodes; the marking information is used to indicate: the storage path of the text and / or pictures corresponding to some nodes, and the corresponding node type; then the target data is imported into the target engine, so that the target engine reconstructs the plurality of nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type, and obtains the rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing. This method can automatically reconstruct the corresponding nodes in the engine by converting the node data corresponding to the interface design drawing into a preset format, realizes the conversion from the visual effect diagram to the engineering, reduces the time and errors of manual operation, improves work efficiency and reduces the potential error rate.

[0010] Other features and advantages of the present disclosure will be set forth in the following description, or some features and advantages may be inferred or unambiguously determined from the description, or may be learned by implementing the above-mentioned technology of the present disclosure.

[0011] In order to make the above-mentioned objectives, features and advantages of the present disclosure more obvious and easy to understand, the following specifically cites preferred implementation modes and describes them in detail with reference to the attached drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] In order to more clearly illustrate the specific embodiments of the present disclosure or the technical solutions in the prior art, the drawings required for use in the specific embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0013] Figure 1 A flowchart of a data conversion method provided by an embodiment of the present disclosure;

[0014] Figure 2 A schematic diagram of importing target data into a target engine provided by an embodiment of the present disclosure;

[0015] Figure 3 A schematic diagram of the structure of a data conversion device provided in an embodiment of the present disclosure;

[0016] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0017] In order to make the purpose, technical solutions and advantages of the embodiments of the present disclosure clearer, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all the embodiments. The components of the embodiments of the present disclosure described and shown in the drawings here can be arranged and designed in various different configurations.

[0018] Therefore, the following detailed description of the embodiments of the present disclosure provided in the accompanying drawings is not intended to limit the scope of the present disclosure claimed for protection, but merely represents selected embodiments of the present disclosure. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without creative work are within the scope of protection of the present disclosure.

[0019] In existing projects, visual renderings created using design tools such as Figma cannot be directly converted into development projects and require complex manual reconstruction. This leads to low efficiency and communication difficulties between visual design, engineering development, and programming.

[0020] Based on the above problems, the embodiments of the present disclosure provide a data conversion method, device and electronic device. The technology can be applied to scenarios of interface design, rendering and implementation.

[0021] In order to facilitate understanding of the embodiments of the present disclosure, a data conversion method disclosed in the embodiments of the present disclosure is first described in detail. Figure 1 As shown, the method comprises the following specific steps:

[0022] Step S102, obtaining node data corresponding to the target interface design drawing, and converting the node data into target data in a preset format; wherein the target interface design drawing is composed of multiple nodes, and the nodes include text and / or pictures; the target data includes picture resources, picture paths, node tree information and marking information corresponding to the multiple nodes; the marking information is used to indicate: the storage path and corresponding node type of the general control to which the text and / or pictures corresponding to some nodes belong.

[0023] In specific implementation, the above-mentioned target interface design drawing is designed by the page designer in the preset graphic editing software; wherein, the preset graphic editing software can be determined according to the research and development requirements, for example, the preset graphic editing software can be Figma software or photoshop software, etc. Specifically, the page designer can design the interface according to the requirements in the preset graphic editing software to obtain the target interface design drawing, which can also be called a rendering or a design draft. Usually, the target interface design drawing includes multiple texts and pictures, as well as a combination of texts and pictures. The target interface design drawing is composed of nodes in the preset picture editing software, and each node corresponds to an element on the target interface design drawing, which can be text, a picture, or a combination of text and pictures. The node data corresponding to the target interface design drawing is used to indicate the element corresponding to each node, and the display position and display style of the element in the target interface design drawing.

[0024] After obtaining the node data corresponding to the target interface design drawing, it is necessary to convert the node data into target data in a preset format based on a preset plug-in. The preset format here can be determined according to the research and development needs. This method can convert different interface design drawings into target data in a unified preset format. In a specific embodiment, the target data is usually a compressed text exported by a preset image editing software, and the compressed text includes three parts: Images file, figma.json file and maps.jso file; wherein, the Images file contains all the image resources used in the target interface design drawing, the figma.json file contains node tree information and tag information, and the maps.json file contains the mapping relationship between the image path and its md5 hash.

[0025] In actual applications, the node tree information is used to indicate the format information of the node tree corresponding to the multiple nodes contained in the target interface design drawing, and the node tree information includes the topology information between the multiple nodes, the node information corresponding to each node, and the text content; wherein the node information is used to indicate the display position and display style of the element corresponding to the node, and the display position here may include the position of the node in the target interface design drawing, and the display style is used to refer to the style of the text or picture corresponding to the node in the target interface design drawing. For example, the display style corresponding to the text may include but is not limited to font size and color; the display style corresponding to the picture may include but not display the picture size, picture color, and picture brightness, etc.

[0026] The above-mentioned marking information is usually the information that the page designer marks the node in advance according to the elements and types contained in the node. It can mark some nodes corresponding to the target interface design diagram according to the needs, or it can mark all nodes. Among them, the marking information is a supplementary description of the interface design, supplementing the information that the preset graphic editing software cannot express natively. Specifically, the page designer can mark the storage path of the general control to which the text and / or picture corresponding to the node belongs when the text and / or picture corresponding to the node is a general control; the page designer can also mark the node type corresponding to the node when the node has a special function. The special function here can be determined according to the research and development needs. For example, there is a "button" control in the game, and there is no "button" concept in the preset graphic editing software. The target interface design diagram generated by the preset graphic editing software is only a design form combining pictures and fonts. At this time, through the preset plug-in, the node with a button function can be marked as Button, and this marking information can be obtained in the subsequent conversion process, so as to convert the node into a button control in the target engine.

[0027] Step S104, importing the target data into the target engine so that the target engine reconstructs multiple nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type to obtain a rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing.

[0028] In specific implementation, the target data can be imported into the target engine so that the target engine reads the target data and parses the target data according to a preset format, and restores multiple nodes to nodes in the target engine one by one, and the node information corresponding to the nodes in the target engine matches the node information corresponding to the multiple nodes, and the elements referenced by the nodes in the target engine are determined based on the storage path indicated by the tag information or the image resources and image paths included in the target data, so that the elements corresponding to the multiple nodes can be reconstructed in the target engine, and these elements can be rendered based on the node information and annotation information to obtain the rendered target interface. Among them, which engine is the target engine can be determined according to R&D needs, for example, the target engine can be a game engine or an NX engine, etc.

[0029] The data conversion method provided by the embodiment of the present disclosure can automatically reconstruct the corresponding nodes in the engine by converting the node data corresponding to the interface design diagram into a preset format, thereby realizing the conversion of the visual effect diagram to the project, reducing the time and errors of manual operation, improving work efficiency and reducing the potential error rate.

[0030] The following embodiments are used for node data conversion.

[0031] Specifically, the node tree information includes topological information between multiple nodes, node information and text content corresponding to each node; based on this, the specific process of obtaining the node data corresponding to the target interface design diagram and converting the node data into target data in a preset format can be achieved through the following steps 10-13:

[0032] Step 10, generating an initial interface design diagram through a preset graphic editing software; wherein the initial interface design diagram includes a plurality of nodes, and the nodes include text and / or pictures.

[0033] In the specific implementation, the page designer can design the interface in the preset graphic editing software according to the existing general control library and the corresponding interface special controls to obtain an initial interface design drawing, which includes multiple nodes, each node corresponding to text, picture, or a combination of text and picture.

[0034] Step 11, in response to the adjustment operation on the multiple nodes, the node information corresponding to the initial interface design drawing is adjusted to obtain the node information corresponding to the target interface design drawing.

[0035] In the specific implementation, in order to realize the subsequent format conversion processing, the page designer needs to make a second modification to the initial interface design drawing, so as to modify the node information corresponding to the node and mark the node data. Among them, modifying the node information may include but is not limited to: adjusting the node naming, node order, positional relationship between nodes and display style of elements corresponding to the nodes, etc. The purpose of making a second modification to the initial interface design drawing is to allow the conversion program to perform type correspondence and batch processing in a preset format. For example, by adding the "lst_" prefix to the node name, the conversion program will treat this node as a UI list type in the target engine for conversion. Among them, the above node order is similar to the parent-child relationship between nodes. Through the node order, the target engine can know which node to render first and which node to render next.

[0036] Specifically, the node information includes at least one of the following: display position and display style; the implementation of step 11 includes at least one of the following:

[0037] Method 1: In response to the position adjustment operation on the second node, the display position and display order of the second node in the initial interface design diagram are adjusted to obtain node information corresponding to the target interface design diagram; wherein the second node is at least part of the multiple nodes.

[0038] In a specific implementation, the second node may be one or more nodes corresponding to the initial interface design diagram. The page designer may adjust the display position and display order of the second node in the initial interface design diagram as required. The node order between the multiple nodes may be determined by the display order, and the positional relationship between the multiple nodes may be determined by the display position.

[0039] Method 2: In response to the style adjustment operation on the third node, the display style of the third node in the initial interface design diagram is adjusted to obtain node information corresponding to the target interface design diagram; wherein the third node is at least part of the multiple nodes.

[0040] In a specific implementation, the third node may be one or more nodes among the multiple nodes corresponding to the initial interface design diagram. The page designer may adjust the display style of the third node in the initial interface design diagram according to needs, so that the text and / or picture corresponding to the third node meets the requirements of the page designer.

[0041] Method two, in response to the node naming modification operation for the fourth node, adjust the node naming of the second node, and replace the node naming of the fourth node in the node information corresponding to the target interface design diagram with the adjusted node naming; wherein the fourth node is at least a part of the multiple nodes, and the adjusted node naming is used to indicate the node type of the corresponding node.

[0042] Since the node naming in the target engine and the node naming in the preset graphic editing software are not completely unified, but usually the node naming in the target engine is used as the standard, therefore, in the process of converting the node from the preset graphic editing software to the target engine, the node naming usually remains unchanged, but if the node naming in the preset graphic editing software is adjusted, the node naming in the preset graphic editing software can be adjusted to the same rule as the node naming in the target engine, so that the node can be directly converted to the corresponding node type during the conversion process. In specific implementation, the above-mentioned fourth node can be one or more nodes of the multiple nodes corresponding to the initial interface design diagram, and the page designer can adjust the node naming of the fourth node according to the needs to obtain the adjusted node naming corresponding to the fourth node.

[0043] Step 12, in response to the marking operation on the first node, determine the marking information of the first node; wherein the first node is at least part of the multiple nodes.

[0044] In specific implementation, the specific operation corresponding to the above-mentioned marking operation can be determined according to R&D requirements and user operations. The marking operation in the present disclosure is implemented through a preset plug-in, that is, each node in the preset graphic editing software can be data marked through a preset plug-in. The above-mentioned first node can be one or more nodes among the multiple nodes corresponding to the target interface design diagram, which is specifically determined according to the resources and node types referenced by the first node. The marking content corresponding to the marking information of the above-mentioned first node can be determined according to the marking operation performed by the page designer.

[0045] In a specific implementation, the method for marking the first node includes at least one of the following: responding to a first marking operation on the first node, marking a resource storage path corresponding to the first node based on the first marking operation; wherein the resource storage path is a storage path in a general control library, and the general control library includes storage paths corresponding to multiple general controls; and responding to a second marking operation on the first node, marking a node type corresponding to the first node based on the second marking operation; wherein the node type includes one of the following: picture type, text type, list type, and button type.

[0046] Specifically, when the resource referenced by the first node is a universal control in a universal control library, a first marking operation can be performed on the first node to find the resource storage path corresponding to the resource referenced by the first node from the universal control library, and add the resource storage path to the marking information corresponding to the first node. Among them, the universal control library usually contains a large number of universal controls and storage paths corresponding to the universal controls. The universal control is a UI resource of the target engine that has been made, and the UI of the target engine supports any node to reference another complete UI resource. Specifically, the resource storage path in the annotation information is usually a relatively long URL. During subsequent data conversion, according to the specific annotation information, it is checked whether there is a corresponding UI resource in the project project. If so, this UI resource is regarded as a universal control that needs to be referenced.

[0047] When the first node is of a specified node type, a second marking operation may be performed on the first node to add an identifier corresponding to the node type to the marking information corresponding to the first node. For example, if the first node is of a button type, the first node may be marked as Button through a preset plug-in.

[0048] Step 13: Convert the node information and mark information corresponding to the nodes in the target interface design diagram into target data according to a preset format.

[0049] In the specific implementation, the preset plug-in is used to mark the nodes corresponding to the target interface design drawing, and then the node data corresponding to the target interface design drawing is exported into a compressed file according to the agreed preset format. The compressed text includes the target data in the preset format, and then the nodes are rebuilt using the preset format in the UI editor of the target engine.

[0050] In the above method, since the design of the page designer on the preset graphic editing software needs to be restored as much as possible one-to-one, for example, a text needs to define its font size, text content, line spacing and spacing data. In addition, the common controls need to be reused to reduce duplicate resources. The program needs to read each type of node information, including but not limited to text, pictures, prefabricated body data and lists, so it is necessary to preset the plug-in to write the data into the exported compressed file when exporting the target data, and then restore the node according to the agreed preset format, and can reference the content of the common control library, such as buttons and background boards, to achieve automatic data restoration. Thus, the technical solution realizes the one-click conversion of visual effect diagrams to engineering by converting the design drawings in the preset graphic editing software into engineering data, thereby greatly improving the collaborative efficiency between visual design, engineering development and programs. In this way, the time and errors of manual operations are reduced, work efficiency is improved and potential error rates are reduced.

[0051] The following embodiments are used to describe the method of data rendering.

[0052] Specifically, the above-mentioned specific process of reconstructing multiple nodes based on target data, and rendering text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type to obtain the rendered target interface includes: determining the node type corresponding to each node in the multiple nodes based on the tag information in the target data, and parsing each node into a target node of the corresponding node type in the target engine; if the tag information corresponding to the target node includes a storage path, searching the target universal control referenced by the target node from the storage path, controlling the target node to reference the target universal control, and rendering the target universal control on the target engine based on the node number information corresponding to the target node; wherein the target universal control includes text and / or pictures; if the tag information corresponding to the target node does not include a storage path, or the target node does not correspond to tag information, reconstructing the text and / or pictures corresponding to the target node on the target engine based on the picture resources, picture paths and node tree information corresponding to the multiple nodes, and rendering the reconstructed text and / or pictures corresponding to the target node on the target engine.

[0053] In the specific implementation, you first need to import the target data into the target engine and set the corresponding import path or scan path, etc., so that the target engine can obtain the referenced resources. Figure 2 FIG. 1 is a schematic diagram of importing target data into a target engine according to an embodiment of the present disclosure. Figure 2 The default graphics editing software used in the program is Figma software, and the target engine is Nxgui; Figure 2 The options corresponding to the Figma project in the project are used to enter the path corresponding to the target data. The import path is used to indicate the location where the content generated by the target engine is stored in the project; the image scan path can be the resource path corresponding to the images provided by the project. This resource path may include images included in the target data or may not include images in the target data; the prefab resource scan path refers to the path corresponding to the general control library. Figure 2 After setting all the options in , you can import the target data with one click.

[0054] In the specific implementation, the program in the target engine uses the tag information in the imported target data to parse the imported target data. For example, the Vector node of Figma will be parsed into the picture node in nxgui, and the Text node in Figma will be parsed into the text node in nxgui. If there is a resource storage path marked by a preset plug-in on the Figma node, the corresponding nxgui node (equivalent to the above-mentioned picture node or text node) will be changed to a reference node, and the storage path corresponding to the referenced resource will be found in the provided annotation information. If the referenced resource exists in the general control library, the nxgui node directly references the resource; if the referenced resource does not exist in the general control library, it will be automatically generated under the import path as a special control or prefab of the corresponding project. The special controls and prefabs here are reconstructed on the target engine based on the picture resources, picture paths and node tree information corresponding to multiple nodes.

[0055] In an optional embodiment, the nodes included in the rendered target interface displayed on the target engine have a one-to-one correspondence with the nodes included in the target interface design drawing, and the node information corresponding to the nodes included in the interface design drawing is stored in the node information corresponding to the nodes included in the rendered target interface.

[0056] In the specific implementation, the target engine can read the target data in a preset format, and then deeply traverse the json file in the target data (the json file also contains the mapping relationship between the image path and the md5 hash), and restore and reconstruct the corresponding data. For example, when exporting text information, it will carry the font size, color, text content and other data of the text information, which will be stored in the corresponding text node information in the form of dict. When importing, the data will be read out, and a text node will be created on the target engine at the same time. The data of the above specified component (the component is the component that describes the text information in the target engine) will be modified to make the text information contained in the specified component the same as the imported text information, so that various information of the text can be restored.

[0057] Furthermore, in response to the adjustment operation on the rendered target interface, the display content in the rendered target interface is adjusted, and / or the function corresponding to the display content in the rendered target interface is adjusted. The display content here includes any UI control in the rendered target interface, and the user can make reasonable structural adjustments or functional designs for any UI control. For example, a display effect after triggering is designed for a specified UI control, and the position of a certain UI control is adjusted.

[0058] The above solution can solve the problems of low efficiency of collaboration between visual design, engineering development and programs and high error rate caused by manual operation. Specifically, through one-click conversion, the design effect is converted into an interface available for engineering projects, so that the visual effect diagram can be directly implemented into the project. This process greatly improves work efficiency, reduces the time and errors of manual operations, and thus reduces the potential error rate. The key is to use the information exported by the preset plug-in to restore the data of the corresponding nodes, and at the same time, the content of the general control library, such as buttons and background boards, can be referenced, thereby realizing the automation of data restoration, reducing tedious manual operation steps, and improving work efficiency and accuracy.

[0059] Corresponding to the above method embodiment, the present disclosure embodiment provides a data conversion device, such as Figure 3 As shown, the device comprises:

[0060] The data conversion module 30 is used to obtain the node data corresponding to the target interface design drawing and convert the node data into target data in a preset format; wherein the target interface design drawing is composed of multiple nodes, and the nodes include text and / or pictures; the target data includes picture resources, picture paths, node tree information and marking information corresponding to the multiple nodes; the marking information is used to indicate: the storage path and corresponding node type of the general control to which the text and / or pictures corresponding to some nodes belong.

[0061] The node reconstruction module 31 is used to import the target data into the target engine so that the target engine reconstructs multiple nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type to obtain a rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing.

[0062] The above-mentioned data conversion device can automatically reconstruct the corresponding nodes in the engine by converting the node data corresponding to the interface design diagram into a preset format, thereby realizing the conversion of the visual effect diagram to the project, reducing the time and errors of manual operation, improving work efficiency and reducing the potential error rate.

[0063] Specifically, the above-mentioned node tree information includes topological information between multiple nodes, node information corresponding to each node and text content; based on this, the above-mentioned data conversion module 30 includes: a design drawing generation unit, which is used to generate an initial interface design drawing through a preset graphic editing software; wherein the initial interface design drawing includes multiple nodes, and the nodes include text and / or pictures; an information adjustment unit, which is used to respond to adjustment operations on multiple nodes, adjust the node information corresponding to the initial interface design drawing, and obtain the node information corresponding to the target interface design drawing; a marking unit, which is used to respond to a marking operation on a first node and determine the marking information of the first node; wherein the first node is at least part of the multiple nodes; a format conversion unit, which is used to convert the node information and marking information corresponding to the nodes in the target interface design drawing into target data according to a preset format.

[0064] Furthermore, the above-mentioned node information includes at least one of the following: display position and display style; based on this, the above-mentioned information adjustment unit is used to execute at least one of the following methods: in response to the position adjustment operation for the second node, adjust the display position and display order of the second node in the initial interface design drawing, and obtain the node information corresponding to the target interface design drawing; wherein the second node is at least part of the multiple nodes; in response to the style adjustment operation for the third node, adjust the display style of the third node in the initial interface design drawing, and obtain the node information corresponding to the target interface design drawing; wherein the third node is at least part of the multiple nodes; and in response to the node naming modification operation for the fourth node, adjust the node naming of the second node, and replace the node naming of the fourth node in the node information corresponding to the target interface design drawing with the adjusted node naming; wherein the fourth node is at least part of the multiple nodes, and the adjusted node naming is used to indicate the node type of the corresponding node.

[0065] In a specific implementation, the marking unit is used to perform at least one of the following: in response to a first marking operation on a first node, marking a resource storage path corresponding to the first node based on the first marking operation; wherein the resource storage path is a storage path in a general control library, and the general control library includes storage paths corresponding to multiple general controls; in response to a second marking operation on the first node, marking a node type corresponding to the first node based on the second marking operation; wherein the node type includes one of the following: picture type, text type, list type, and button type.

[0066] In a specific implementation, the node reconstruction module 31 is used to: determine the node type corresponding to each node in the multiple nodes based on the tag information in the target data, and parse each node into a target node of the corresponding node type in the target engine; if the tag information corresponding to the target node includes a storage path, search the target universal control referenced by the target node from the storage path, control the target node to reference the target universal control, and render the target universal control on the target engine based on the node number information corresponding to the target node; wherein the target universal control includes text and / or images; if the tag information corresponding to the target node does not include a storage path, or the target node does not correspond to tag information, reconstruct the text and / or image corresponding to the target node on the target engine based on the image resources, image paths and node tree information corresponding to the multiple nodes, and render the reconstructed text and / or image corresponding to the target node on the target engine.

[0067] Furthermore, the nodes included in the rendered target interface displayed on the above-mentioned target engine have a one-to-one correspondence with the nodes included in the target interface design drawing, and the node information corresponding to the nodes included in the interface design drawing is stored in the node information corresponding to the nodes included in the rendered target interface.

[0068] Furthermore, the above-mentioned device also includes a content adjustment module, which is used to: respond to the adjustment operation on the rendered target interface, adjust the display content in the rendered target interface, and / or adjust the function corresponding to the display content in the rendered target interface.

[0069] The data conversion device provided in the embodiment of the present disclosure has the same implementation principle and technical effects as those of the aforementioned method embodiment. For the sake of brief description, for matters not mentioned in the device embodiment, reference may be made to the corresponding contents in the aforementioned method embodiment.

[0070] The present disclosure also provides an electronic device, such as Figure 4 As shown, the electronic device includes a processor and a memory, the memory stores machine executable instructions that can be executed by the processor, and the processor executes the machine executable instructions to implement the above data conversion method.

[0071] Specifically, the above-mentioned data conversion method includes: obtaining node data corresponding to the target interface design drawing, and converting the node data into target data in a preset format; wherein the target interface design drawing is composed of multiple nodes, and the nodes include text and / or pictures; the target data includes picture resources, picture paths, node tree information and marking information corresponding to multiple nodes; the marking information is used to indicate: the storage path and corresponding node type of the general control to which the text and / or pictures corresponding to some nodes belong; importing the target data into the target engine, so that the target engine reconstructs multiple nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type to obtain the rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing.

[0072] The above data conversion method, by converting the node data corresponding to the interface design diagram into a preset format, can automatically reconstruct the corresponding nodes in the engine, realize the conversion of visual effect diagram to engineering, reduce the time and errors of manual operation, improve work efficiency and reduce the potential error rate.

[0073] In an optional embodiment, the node tree information includes topological information between multiple nodes, node information corresponding to each node, and text content; based on this, the above-mentioned step of obtaining node data corresponding to the target interface design drawing and converting the node data into target data in a preset format includes: generating an initial interface design drawing through a preset graphic editing software; wherein the initial interface design drawing includes multiple nodes, and the nodes include text and / or pictures; in response to adjustment operations on multiple nodes, adjusting the node information corresponding to the initial interface design drawing, and obtaining the node information corresponding to the target interface design drawing; in response to a marking operation on a first node, determining the marking information of the first node; wherein the first node is at least part of the multiple nodes; according to the preset format, converting the node information and marking information corresponding to the nodes in the target interface design drawing into target data.

[0074] In an optional embodiment, the above-mentioned node information includes at least one of the following: display position and display style; based on this, the above-mentioned step of responding to the adjustment operation on multiple nodes, adjusting the node information corresponding to the initial interface design drawing, and obtaining the node information corresponding to the target interface design drawing includes at least one of the following: responding to the position adjustment operation on the second node, adjusting the display position and display order of the second node in the initial interface design drawing, and obtaining the node information corresponding to the target interface design drawing; wherein the second node is at least part of the multiple nodes; responding to the style adjustment operation on the third node, adjusting the display style of the third node in the initial interface design drawing, and obtaining the node information corresponding to the target interface design drawing; wherein the third node is at least part of the multiple nodes; responding to the node name modification operation on the fourth node, adjusting the node name of the second node, and replacing the node name of the fourth node in the node information corresponding to the target interface design drawing with the adjusted node name; wherein the fourth node is at least part of the multiple nodes, and the adjusted node name is used to indicate the node type of the corresponding node.

[0075] In an optional embodiment, the above-mentioned step of responding to the marking operation on the first node and determining the marking information of the first node includes at least one of the following: responding to a first marking operation on the first node, marking a resource storage path corresponding to the first node based on the first marking operation; wherein the resource storage path is a storage path in a general control library, and the general control library includes storage paths corresponding to multiple general controls; responding to a second marking operation on the first node, marking a node type corresponding to the first node based on the second marking operation; wherein the node type includes one of the following: picture type, text type, list type and button type.

[0076] In an optional embodiment, the above-mentioned steps of reconstructing multiple nodes based on target data, and rendering text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node types to obtain the rendered target interface include: determining the node type corresponding to each of the multiple nodes based on the tag information in the target data, and parsing each node into a target node of the corresponding node type in the target engine; if the tag information corresponding to the target node includes a storage path, searching the storage path for a target universal control referenced by the target node, controlling the target node to reference the target universal control, and rendering the target universal control on the target engine based on the node number information corresponding to the target node; wherein the target universal control includes text and / or pictures; if the tag information corresponding to the target node does not include a storage path, or the target node does not correspond to tag information, reconstructing the text and / or pictures corresponding to the target node on the target engine based on the picture resources, picture paths and node tree information corresponding to the multiple nodes, and rendering the reconstructed text and / or pictures corresponding to the target node on the target engine.

[0077] In an optional embodiment, the nodes included in the rendered target interface displayed on the above-mentioned target engine have a one-to-one correspondence with the nodes included in the target interface design drawing, and the node information corresponding to the nodes included in the interface design drawing is stored in the node information corresponding to the nodes included in the rendered target interface.

[0078] In an optional embodiment, the method further includes: responding to an adjustment operation on the rendered target interface, adjusting the display content in the rendered target interface, and / or adjusting the function corresponding to the display content in the rendered target interface.

[0079] Further, Figure 4 The electronic device shown further includes a bus 102 and a communication interface 103 , and the processor 101 , the communication interface 103 and the memory 100 are connected via the bus 102 .

[0080] The memory 100 may include a high-speed random access memory (RAM), and may also include a non-volatile memory, such as at least one disk storage. The communication connection between the system network element and at least one other network element is realized through at least one communication interface 103 (which may be wired or wireless), and the Internet, wide area network, local area network, metropolitan area network, etc. may be used. The bus 102 may be an ISA bus, a PCI bus, or an EISA bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 4 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0081] The processor 101 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the hardware integrated logic circuit or software instructions in the processor 101. The above processor 101 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The disclosed methods, steps and logic block diagrams in the embodiments of the present disclosure can be implemented or executed. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. The steps of the method disclosed in conjunction with the embodiments of the present disclosure can be directly embodied as a hardware decoding processor for execution, or a combination of hardware and software modules in the decoding processor for execution. The software module may be located in a storage medium mature in the art, such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory 100, and the processor 101 reads the information in the memory 100 and completes the steps of the method of the above embodiment in combination with its hardware.

[0082] The embodiment of the present disclosure also provides a computer-readable storage medium, which stores computer-executable instructions. When the computer-executable instructions are called and executed by a processor, the computer-executable instructions prompt the processor to implement the above-mentioned data conversion method.

[0083] Specifically, the above-mentioned data conversion method includes: obtaining node data corresponding to the target interface design drawing, and converting the node data into target data in a preset format; wherein the target interface design drawing is composed of multiple nodes, and the nodes include text and / or pictures; the target data includes picture resources, picture paths, node tree information and marking information corresponding to multiple nodes; the marking information is used to indicate: the storage path and corresponding node type of the general control to which the text and / or pictures corresponding to some nodes belong; importing the target data into the target engine, so that the target engine reconstructs multiple nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type to obtain the rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing.

[0084] The above data conversion method, by converting the node data corresponding to the interface design diagram into a preset format, can automatically reconstruct the corresponding nodes in the engine, realize the conversion of visual effect diagram to engineering, reduce the time and errors of manual operation, improve work efficiency and reduce the potential error rate.

[0085] In an optional embodiment, the node tree information includes topological information between multiple nodes, node information corresponding to each node, and text content; based on this, the above-mentioned step of obtaining node data corresponding to the target interface design drawing and converting the node data into target data in a preset format includes: generating an initial interface design drawing through a preset graphic editing software; wherein the initial interface design drawing includes multiple nodes, and the nodes include text and / or pictures; in response to adjustment operations on multiple nodes, adjusting the node information corresponding to the initial interface design drawing, and obtaining the node information corresponding to the target interface design drawing; in response to a marking operation on a first node, determining the marking information of the first node; wherein the first node is at least part of the multiple nodes; according to the preset format, converting the node information and marking information corresponding to the nodes in the target interface design drawing into target data.

[0086] In an optional embodiment, the above-mentioned node information includes at least one of the following: display position and display style; based on this, the above-mentioned step of responding to the adjustment operation on multiple nodes, adjusting the node information corresponding to the initial interface design drawing, and obtaining the node information corresponding to the target interface design drawing includes at least one of the following: responding to the position adjustment operation on the second node, adjusting the display position and display order of the second node in the initial interface design drawing, and obtaining the node information corresponding to the target interface design drawing; wherein the second node is at least part of the multiple nodes; responding to the style adjustment operation on the third node, adjusting the display style of the third node in the initial interface design drawing, and obtaining the node information corresponding to the target interface design drawing; wherein the third node is at least part of the multiple nodes; responding to the node name modification operation on the fourth node, adjusting the node name of the second node, and replacing the node name of the fourth node in the node information corresponding to the target interface design drawing with the adjusted node name; wherein the fourth node is at least part of the multiple nodes, and the adjusted node name is used to indicate the node type of the corresponding node.

[0087] In an optional embodiment, the above-mentioned step of responding to the marking operation on the first node and determining the marking information of the first node includes at least one of the following: responding to a first marking operation on the first node, marking a resource storage path corresponding to the first node based on the first marking operation; wherein the resource storage path is a storage path in a general control library, and the general control library includes storage paths corresponding to multiple general controls; responding to a second marking operation on the first node, marking a node type corresponding to the first node based on the second marking operation; wherein the node type includes one of the following: picture type, text type, list type and button type.

[0088] In an optional embodiment, the above-mentioned steps of reconstructing multiple nodes based on target data, and rendering text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node types to obtain the rendered target interface include: determining the node type corresponding to each of the multiple nodes based on the tag information in the target data, and parsing each node into a target node of the corresponding node type in the target engine; if the tag information corresponding to the target node includes a storage path, searching the storage path for a target universal control referenced by the target node, controlling the target node to reference the target universal control, and rendering the target universal control on the target engine based on the node number information corresponding to the target node; wherein the target universal control includes text and / or pictures; if the tag information corresponding to the target node does not include a storage path, or the target node does not correspond to tag information, reconstructing the text and / or pictures corresponding to the target node on the target engine based on the picture resources, picture paths and node tree information corresponding to the multiple nodes, and rendering the reconstructed text and / or pictures corresponding to the target node on the target engine.

[0089] In an optional embodiment, the nodes included in the rendered target interface displayed on the above-mentioned target engine have a one-to-one correspondence with the nodes included in the target interface design drawing, and the node information corresponding to the nodes included in the interface design drawing is stored in the node information corresponding to the nodes included in the rendered target interface.

[0090] In an optional embodiment, the method further includes: responding to an adjustment operation on the rendered target interface, adjusting the display content in the rendered target interface, and / or adjusting the function corresponding to the display content in the rendered target interface.

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

[0092] In the description of the present disclosure, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc., indicating the orientation or positional relationship, are based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present disclosure and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as a limitation of the present disclosure. In addition, the terms "first", "second", and "third" are used for descriptive purposes only, and cannot be understood as indicating or implying relative importance.

[0093] Finally, it should be noted that the above-described embodiments are only specific implementation methods of the present disclosure, which are used to illustrate the technical solutions of the present disclosure, rather than to limit them. The protection scope of the present disclosure is not limited thereto. Although the present disclosure is described in detail with reference to the above-described embodiments, ordinary technicians in the field should understand that any technician familiar with the technical field can still modify the technical solutions recorded in the above-described embodiments within the technical scope disclosed in the present disclosure, or can easily think of changes, or make equivalent replacements for some of the technical features therein; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present disclosure, and should be included in the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be based on the protection scope of the claims.

Claims

1. A data conversion method, characterized in that: The method comprises: Obtain node data corresponding to a target interface design diagram, and convert the node data into target data in a preset format; wherein the target interface design diagram is composed of a plurality of nodes, and the nodes include text and / or images; the target data includes image resources, image paths, node tree information, and tag information corresponding to the plurality of nodes; the tag information is used to indicate: the storage path and corresponding node type of the common control to which the text and / or images corresponding to some of the nodes belong; The target data is imported into a target engine so that the target engine reconstructs the multiple nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node types to obtain a rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing.

2. The method according to claim 1, characterized in that The node tree information includes topological information between the multiple nodes, node information and text content corresponding to each of the nodes; The step of acquiring node data corresponding to the target interface design diagram and converting the node data into target data in a preset format includes: Generate an initial interface design diagram through a preset graphic editing software; wherein the initial interface design diagram includes a plurality of nodes, and the nodes include text and / or pictures; In response to the adjustment operation on the plurality of nodes, the node information corresponding to the initial interface design diagram is adjusted to obtain the node information corresponding to the target interface design diagram; In response to a marking operation on a first node, determining marking information of the first node; wherein the first node is at least part of the plurality of nodes; According to a preset format, the node information and mark information corresponding to the nodes in the target interface design diagram are converted into target data.

3. The method according to claim 2, characterized in that The node information includes at least one of the following: display position and display style; the step of adjusting the node information corresponding to the initial interface design drawing in response to the adjustment operation on the multiple nodes to obtain the node information corresponding to the target interface design drawing includes at least one of the following: In response to the position adjustment operation for the second node, the display position and display order of the second node in the initial interface design diagram are adjusted to obtain node information corresponding to the target interface design diagram; wherein the second node is at least part of the multiple nodes; In response to the style adjustment operation for the third node, the display style of the third node in the initial interface design diagram is adjusted to obtain node information corresponding to the target interface design diagram; wherein the third node is at least part of the multiple nodes; In response to a node naming modification operation for a fourth node, the node naming of the second node is adjusted, and the node naming of the fourth node in the node information corresponding to the target interface design diagram is replaced with the adjusted node naming; wherein the fourth node is at least a part of the multiple nodes, and the adjusted node naming is used to indicate the node type of the corresponding node.

4. The method according to claim 2, characterized in that: The step of determining the marking information of the first node in response to the marking operation on the first node includes at least one of the following: In response to a first marking operation on the first node, marking a resource storage path corresponding to the first node based on the first marking operation; wherein the resource storage path is a storage path in a universal control library, and the universal control library includes storage paths corresponding to a plurality of universal controls; In response to a second marking operation on the first node, a node type corresponding to the first node is marked based on the second marking operation; wherein the node type includes one of the following: image type, text type, list type and button type.

5. The method according to claim 1, characterized in that The step of reconstructing the plurality of nodes based on the target data, and rendering text and / or images corresponding to the reconstructed nodes on the target engine based on the node type to obtain a rendered target interface includes: Determine, based on the tag information in the target data, a node type corresponding to each of the multiple nodes, and parse each of the nodes into a target node of a corresponding node type in the target engine; If the tag information corresponding to the target node includes a storage path, searching the target universal control referenced by the target node from the storage path, controlling the target node to reference the target universal control, and rendering the target universal control on the target engine based on the node number information corresponding to the target node; wherein the target universal control includes text and / or pictures; If the tag information corresponding to the target node does not include a storage path, or the target node has no corresponding tag information, the text and / or image corresponding to the target node is reconstructed on the target engine based on the image resources, image paths and node tree information corresponding to the multiple nodes, and the reconstructed text and / or image corresponding to the target node is rendered on the target engine.

6. The method according to claim 1, characterized in that The nodes included in the rendered target interface displayed on the target engine have a one-to-one correspondence with the nodes included in the target interface design diagram, and the node information corresponding to the nodes included in the interface design diagram is stored in the node information corresponding to the nodes included in the rendered target interface.

7. The method according to claim 1, characterized in that The method further comprises: In response to an adjustment operation on the rendered target interface, the display content in the rendered target interface is adjusted, and / or the function corresponding to the display content in the rendered target interface is adjusted.

8. A data conversion device, characterized in that: The device comprises: A data conversion module is used to obtain node data corresponding to a target interface design diagram, and convert the node data into target data in a preset format; wherein the target interface design diagram is composed of a plurality of nodes, and the nodes include text and / or images; the target data includes image resources, image paths, node tree information and tag information corresponding to the plurality of nodes; the tag information is used to indicate: the storage path and corresponding node type of the common control to which the text and / or images corresponding to some of the nodes belong; A node reconstruction module is used to import the target data into a target engine so that the target engine reconstructs the multiple nodes based on the target data, and renders the text and / or pictures corresponding to the reconstructed nodes on the target engine based on the node type to obtain a rendered target interface; wherein the display style of the rendered target interface matches the style of the target interface design drawing.

9. An electronic device, characterized in that: The electronic device includes a processor and a memory, the memory stores machine executable instructions that can be executed by the processor, and the processor executes the machine executable instructions to implement the data conversion method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are called and executed by a processor, the computer-executable instructions prompt the processor to implement the data conversion method according to any one of claims 1 to 7.

Images