CN116522033A - Front-end multi-layer data processing method and device - Google Patents

Front-end multi-layer data processing method and device Download PDF

Info

Publication number
CN116522033A
CN116522033A CN202310531310.5A CN202310531310A CN116522033A CN 116522033 A CN116522033 A CN 116522033A CN 202310531310 A CN202310531310 A CN 202310531310A CN 116522033 A CN116522033 A CN 116522033A
Authority
CN
China
Prior art keywords
layer
node
layers
leaf node
picture
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310531310.5A
Other languages
Chinese (zh)
Inventor
杨念梓
任瑜平
杨恺
聂丽娜
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Industrial and Commercial Bank of China Ltd ICBC
Original Assignee
Industrial and Commercial Bank of China Ltd ICBC
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Industrial and Commercial Bank of China Ltd ICBC filed Critical Industrial and Commercial Bank of China Ltd ICBC
Priority to CN202310531310.5A priority Critical patent/CN116522033A/en
Publication of CN116522033A publication Critical patent/CN116522033A/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10File systems; File servers
    • G06F16/11File system administration, e.g. details of archiving or snapshots
    • G06F16/116Details of conversion of file system types or formats
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10File systems; File servers
    • G06F16/13File access structures, e.g. distributed indices
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10File systems; File servers
    • G06F16/16File or folder operations, e.g. details of user interfaces specifically adapted to file systems
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

The embodiment of the application provides a front-end multi-layer data processing method and device, which relate to the field of web page front-end and can also be used in the financial field, and the method comprises the following steps: analyzing the picture format engineering file to obtain a corresponding tree data object and determining all leaf node layers of the picture layer combination according to the data structure of the tree data object; determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the layer adding strategy into a set front-end container; the method and the device can quickly and accurately analyze and add the front-end multi-layer, and improve the design efficiency of the front end.

Description

Front-end multi-layer data processing method and device
Technical Field
The application relates to the field of web page front ends and also can be used in the financial field, in particular to a front-end multi-layer data processing method and device.
Background
Along with the improvement of the complexity of design requirements, the number of layers contained in a single PSD engineering file (a special format of Photoshop) is increased, and due to the characteristic of asynchronous execution of a front-end JavaScript language, the problem of disordered loading sequence of each layer and the position of each layer relative to a canvas container in the analysis process is solved, if the analysis accuracy is problematic, the time cost generated by manually adjusting each layer is caused by a user, and the restoration degree of original design resources is affected to a certain extent.
Disclosure of Invention
Aiming at the problems in the prior art, the application provides a front-end multi-layer data processing method and device, which can quickly and accurately analyze and add the front-end multi-layer data and improve the design efficiency of the front end.
In order to solve at least one of the above problems, the present application provides the following technical solutions:
in a first aspect, the present application provides a front-end multi-layer data processing method, including:
analyzing the picture format engineering file to obtain a corresponding tree data object and determining all leaf node layers of the picture layer combination according to the data structure of the tree data object;
and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the layer adding strategy into a set front-end container.
Further, the determining all leaf node layers of the layer combination according to the data structure of the tree data object includes:
determining all child node layers of the current root node according to the data structure of the tree data object;
and traversing and judging the child node layer arrays of all the child node layers, judging the current node without new child nodes as a leaf node layer, and obtaining all the leaf node layers.
Further, after determining all child node layers of the current root node according to the data structure of the tree data object, the method includes:
and arranging all the sub-node layers in reverse order to obtain a sub-node layer array.
Further, after the traversing judgment is performed on the child node layer array, the current node without the new child node is judged to be a leaf node layer, the method further comprises:
judging whether the current node has a brother node or whether the father node of the current node has a brother node;
if not, judging that all the leaf node map layers are extracted.
Further, the determining a corresponding layer adding policy according to the layer types of all the leaf node layers and adding the corresponding layer adding policy into a setting front-end container includes:
traversing all the leaf node map layers, and converting the leaf node map layers into a file format if the map layer type of the leaf node map layers is a picture map layer;
the picture file obtained after the file format conversion is added to the center position of the front canvas by default;
and adjusting the position of the picture file in the front canvas according to the coordinate information of the picture file.
Further, the determining the corresponding layer adding policy according to the layer types of all the leaf node layers and adding the corresponding layer adding policy into the setting front-end container further includes:
and traversing all the leaf node map layers, and if the map layer type of the leaf node map layer is a text map layer, adding the leaf node map layer into a front canvas according to the coordinate information of the leaf node map layer.
Further, the parsing the picture format engineering file to obtain a corresponding tree data object includes:
and sending the picture format engineering file to a set attachment server through a front-end uploading component, so that the attachment server calls a preset file analysis tool to analyze the picture format engineering file, and a corresponding tree data object is obtained.
In a second aspect, the present application provides a front-end multi-layer data processing apparatus, including:
the node diagram layer determining module is used for analyzing the picture format engineering file to obtain a corresponding tree data object and determining all leaf node diagram layers of the diagram layer combination according to the data structure of the tree data object;
and the front-end layer adding module is used for determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container.
Further, the node map layer determining module includes:
a root node analysis unit, configured to determine all child node layers of a current root node according to a data structure of the tree data object;
and the leaf node determining unit is used for performing traversal judgment on the child node layer arrays of all the child node layer, judging the current node without new child nodes as a leaf node layer, and obtaining all the leaf node layer.
Further, the node map layer determining module further includes:
and the inverted sequence arrangement unit is used for inverted sequence arrangement of all the sub-node diagram layers to obtain a sub-node diagram layer array.
Further, the node map layer determining module further includes:
a brother node judging unit, configured to judge whether the current node has a brother node or whether the current node has a brother node;
and the layer extraction completion unit is used for judging that the extraction of all the leaf node layers is completed if the leaf node layers do not exist.
Further, the front-end layer adding module includes:
the format conversion unit is used for traversing all the leaf node map layers, and converting the leaf node map layers into a file format if the map layer type of the leaf node map layers is a picture map layer;
The picture adding unit is used for adding the picture file obtained after the file format conversion to the center position of the front canvas by default;
and the position adjusting unit is used for adjusting the position of the picture file in the front canvas according to the coordinate information of the picture file.
Further, the front-end layer adding module further includes:
and the text adding unit is used for traversing all the leaf node map layers, and adding the leaf node map layers into a front canvas according to the coordinate information of the leaf node map layers if the map layer types of the leaf node map layers are text map layers.
Further, the node map layer determining module further includes:
and the file uploading unit is used for sending the picture format engineering file to the set attachment server through the front-end uploading component so that the attachment server calls a preset file analyzing tool to analyze the picture format engineering file to obtain a corresponding tree data object.
In a third aspect, the present application provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, where the processor implements the steps of the front-end multi-layer data processing method when the program is executed.
In a fourth aspect, the present application provides a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the front-end multi-layer data processing method.
In a fifth aspect, the present application provides a computer program product comprising computer programs/instructions which, when executed by a processor, implement the steps of the front-end multi-layer data processing method.
As can be seen from the above technical solutions, the present application provides a method and an apparatus for processing front-end multi-layer data, which are configured to parse a picture format engineering file to obtain a corresponding tree-shaped data object, and determine all leaf node layers of a layer combination according to a data structure of the tree-shaped data object; and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container, so that the analysis and the adding of the front-end multi-layer can be rapidly and accurately realized, and the front-end design efficiency is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, and it is obvious that the drawings in the following description are some embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic flow chart of a front-end multi-layer data processing method according to an embodiment of the present application;
FIG. 2 is a second flow chart of a front-end multi-layer data processing method according to an embodiment of the present application;
FIG. 3 is a third flow chart of a front-end multi-layer data processing method according to an embodiment of the present disclosure;
FIG. 4 is a flowchart of a front-end multi-layer data processing method according to an embodiment of the present disclosure;
FIG. 5 is one of the block diagrams of a front-end multi-layer data processing apparatus in an embodiment of the present application;
FIG. 6 is a second block diagram of a front-end multi-layer data processing apparatus in accordance with an embodiment of the present application;
FIG. 7 is a third block diagram of a front-end multi-layer data processing apparatus according to an embodiment of the present application;
FIG. 8 is a fourth block diagram of a front-end multi-layer data processing apparatus in an embodiment of the present application;
FIG. 9 is a fifth block diagram of a front-end multi-layer data processing apparatus in an embodiment of the present application;
FIG. 10 is a diagram of a front-end multi-layer data processing apparatus according to an embodiment of the present application;
FIG. 11 is a diagram of a front-end multi-layer data processing apparatus according to an embodiment of the present application;
FIG. 12 is a general flow chart of parsing in an embodiment of the present application;
FIG. 13 is a flow chart of data processing in an embodiment of the present application;
FIG. 14 is a flowchart of loading a picture layer according to an embodiment of the present application;
fig. 15 is a schematic structural diagram of an electronic device in an embodiment of the present application.
Detailed Description
For the purposes of making the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, are intended to be within the scope of the present application.
The data acquisition, storage, use, processing and the like in the technical scheme meet the relevant regulations of national laws and regulations.
In consideration of the problems existing in the prior art, the application provides a front-end multi-layer data processing method and device, which are used for obtaining corresponding tree-shaped data objects by analyzing a picture format engineering file and determining all leaf node layers of a layer combination according to the data structure of the tree-shaped data objects; and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container, so that the analysis and the adding of the front-end multi-layer can be rapidly and accurately realized, and the front-end design efficiency is improved.
In order to quickly and accurately achieve analysis and addition of front-end multi-layer layers and improve front-end design efficiency, the application provides an embodiment of a front-end multi-layer data processing method, referring to fig. 1, wherein the front-end multi-layer data processing method specifically comprises the following contents:
step S101: and analyzing the picture format engineering file to obtain a corresponding tree data object, and determining all leaf node layers of the picture layer combination according to the data structure of the tree data object.
Optionally, the application may upload the image format engineering PSD file to the attachment server by means of a front-end uploading component, after the PSD file is uploaded successfully, obtain a path of the file in the attachment server and use the path as a parameter, provide the path to an open source tool PSD js for parsing, return a json-format tree data object after the parsing is successful, and then the front-end code further processes the original data to find out all leaf node map layers of the image layer combination and cache the leaf node map layers.
Step S102: and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the layer adding strategy into a set front-end container.
Alternatively, the present application may traverse all leaf node layers obtained. If the leaf node diagram layer is a picture diagram layer, an addimagefrom () method is executed, if the leaf node diagram layer is a text diagram layer, an addextfrom () method is executed, wherein the method for adding the picture diagram layer and the text diagram layer needs to be packaged into a precursor () object to prevent the phenomenon of disordered sequence of the diagram layers caused by asynchronous execution in the process of adding different diagram layers, wherein a parameter leaf layerlist represents all leaf sub-layers cached in the step S3, and a typeTool method is the identifier of the representing the text diagram layer in a PSD.js tool package.
As can be seen from the above description, the front-end multi-layer data processing method provided by the embodiment of the present application can obtain a corresponding tree-shaped data object by analyzing a picture format engineering file, and determine all leaf node layers of a layer combination according to the data structure of the tree-shaped data object; and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container, so that the analysis and the adding of the front-end multi-layer can be rapidly and accurately realized, and the front-end design efficiency is improved.
In an embodiment of the front-end multi-layer data processing method of the present application, referring to fig. 2, the following may be further specifically included:
step S201: and determining all child node layers of the current root node according to the data structure of the tree data object.
Step S202: and traversing and judging the child node layer arrays of all the child node layers, judging the current node without new child nodes as a leaf node layer, and obtaining all the leaf node layers.
Specifically, the present application may use the child () method provided by psd. Js to obtain all child node map layers of the current root node, and query and cache all leaf node map layers. Traversing the child node array obtained after the reverse arrangement, continuing to use the child () method to judge the basis, judging the child node to be a leaf node map layer if the child node does not exist, caching the leaf node map layer into variables by using a push method, and continuing to step S204. If so, returning to the step S201, and repeating the steps. It should be noted that, in the loop method used in the traversal process, synchronous execution must be guaranteed, while the callback function in the js for each method is an asynchronous function, if the for each method is adopted, the She Zitu layer sequence of the final analysis is disordered, so that the for loop is used for the analysis in this step.
In an embodiment of the front-end multi-layer data processing method of the present application, after determining all the child node layers of the current root node according to the data structure of the tree data object, the method includes:
and arranging all the sub-node layers in reverse order to obtain a sub-node layer array.
Optionally, all the obtained sub node layers are arranged in reverse order. Since layers obtained by the child () method are arranged in order from top to bottom, and loading layers is required to be performed in order from bottom to top, the bottom layer is prevented from being blocked, and thus this step requires a reverse order process.
In an embodiment of the front-end multi-layer data processing method of the present application, referring to fig. 3, the following may be further specifically included:
step S301: and judging whether the current node has a brother node or whether the current node has a father node.
Step S302: if not, judging that all the leaf node map layers are extracted.
Optionally, if the current node is a leaf node, judging whether other brothers exist in the node or not, or whether other brothers exist in a father node of the node or not, and if so, performing logic judgment of the subsequent node. If not, it is indicated that all leaf node map layers have been extracted.
In an embodiment of the front-end multi-layer data processing method of the present application, referring to fig. 4, the following may be further specifically included:
step S401: traversing all the leaf node map layers, and converting the leaf node map layers into a file format if the map layer type of the leaf node map layers is a picture map layer.
Step S402: and adding the picture file obtained after the file format conversion to the center position of the front canvas by default.
Step S403: and adjusting the position of the picture file in the front canvas according to the coordinate information of the picture file.
Optionally, the picture layer is converted from the conversion base64 () format to the file format (herein, the base64 () format is converted to the blob format and then to the file format). And calling an uploading interface to upload the picture converted into the file format to the accessory server. A picture path is obtained from the server and added to the canvas. After the uploading is called and successfully returned, the path stored in the server by the picture is utilized, the add () method in the fabricAPI is called to add the picture to the canvas container for display, and the picture is added at the center position of the canvas after the default addition is finished. Because the position coordinates of the picture are set later, the picture needs to be executed after the picture is completely added to the canvas, the picture adding method also needs to be manually packaged into a precursor () object, and a callback function reset () after successful addition is written into an add () method and is executed after the method is added. Wherein, formdata represents three parameters required by an uploading interface, including file information, picture names and the like; imgCoords represents a picture coordinate object, comprises two fields of top and left, is obtained through PSD.js, context represents a universal context of an attachment server, and id represents an attachment id name after the picture is successfully uploaded.
Then, according to the distance of the picture relative to the upper side and the left side of the canvas, the setCoorts () method of the picture object is called to realize positioning.
In an embodiment of the front-end multi-layer data processing method of the present application, the determining, according to the layer types of all the leaf node layers, a corresponding layer adding policy and adding the corresponding layer adding policy to a set front-end container further includes:
and traversing all the leaf node map layers, and if the map layer type of the leaf node map layer is a text map layer, adding the leaf node map layer into a front canvas according to the coordinate information of the leaf node map layer.
Optionally, the positioning flow of adding the text layer and the corresponding text box is simpler, and the problems of an internal positioning method and asynchronous execution of the addition are avoided, so that explanation is omitted.
In an embodiment of the front-end multi-layer data processing method of the present application, the parsing the picture format engineering file to obtain a corresponding tree data object includes:
and sending the picture format engineering file to a set attachment server through a front-end uploading component, so that the attachment server calls a preset file analysis tool to analyze the picture format engineering file, and a corresponding tree data object is obtained.
In order to quickly and accurately achieve analysis and addition of front-end multi-layer layers and improve front-end design efficiency, the application provides an embodiment of a front-end multi-layer data processing device for implementing all or part of the content of the front-end multi-layer data processing method, referring to fig. 5, the front-end multi-layer data processing device specifically includes the following contents:
the node layer determining module 10 is configured to parse the picture format engineering file to obtain a corresponding tree data object, and determine all leaf node layers of the layer combination according to a data structure of the tree data object.
The front-end layer adding module 20 is configured to determine a corresponding layer adding policy according to the layer types of all the leaf node layers and add the corresponding layer adding policy to the set front-end container.
As can be seen from the above description, the front-end multi-layer data processing device provided in the embodiments of the present application is capable of obtaining a corresponding tree-shaped data object by parsing a picture format engineering file and determining all leaf node layers of a layer combination according to a data structure of the tree-shaped data object; and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container, so that the analysis and the adding of the front-end multi-layer can be rapidly and accurately realized, and the front-end design efficiency is improved.
In an embodiment of the front-end multi-layer data processing apparatus of the present application, referring to fig. 6, the node map layer determining module 10 includes:
a root node analysis unit 11, configured to determine all child node layers of the current root node according to the data structure of the tree data object.
And the leaf node determining unit 12 is configured to perform traversal determination on the child node layer arrays of all the child node layers, determine that the current node where no new child node exists is a leaf node layer, and obtain all the leaf node layers.
In an embodiment of the front-end multi-layer data processing apparatus of the present application, referring to fig. 7, the node map layer determining module 10 further includes:
and the inverted sequence arrangement unit 13 is used for inverted sequence arrangement of all the sub-node layers to obtain a sub-node layer array.
In an embodiment of the front-end multi-layer data processing apparatus of the present application, referring to fig. 8, the node map layer determining module 10 further includes:
a sibling node determining unit 14, configured to determine whether the current node has a sibling node or whether the parent node of the current node has a sibling node.
And a layer extraction completion unit 15, configured to determine that all leaf node layers are completely extracted if the leaf node layers are not present.
In an embodiment of the front-end multi-layer data processing apparatus of the present application, referring to fig. 9, the front-end layer adding module 20 includes:
and a format conversion unit 21, configured to traverse all the leaf node map layers, and convert the leaf node map layers into a file format if the map layer type of the leaf node map layers is a picture map layer.
And the picture adding unit 22 is used for adding the picture file obtained after the file format conversion to the center position of the front canvas by default.
And the position adjustment unit 23 is used for adjusting the position of the picture file in the front canvas according to the coordinate information of the picture file.
In an embodiment of the front-end multi-layer data processing apparatus of the present application, referring to fig. 10, the front-end layer adding module 20 further includes:
and the text adding unit 24 is used for traversing all the leaf node diagram layers, and adding the leaf node diagram layers into the front canvas according to the coordinate information of the leaf node diagram layers if the diagram layer types of the leaf node diagram layers are text diagram layers.
In an embodiment of the front-end multi-layer data processing apparatus of the present application, referring to fig. 11, the node map layer determining module 10 further includes:
The file uploading unit 16 is configured to send, through the front-end uploading component, the picture format engineering file to the set attachment server, so that the attachment server invokes a preset file parsing tool to parse the picture format engineering file, and obtain a corresponding tree data object.
In order to further explain the scheme, the application also provides a specific application example for implementing the front-end multi-layer data processing method by using the front-end multi-layer data processing device, which specifically comprises the following contents:
the overall flow chart of the resolution layer is shown in fig. 12, and is divided into five steps, specifically as follows:
s1, uploading PSD engineering files. The PSD file is uploaded to the accessory server by means of the front-end uploading component.
S2, caching the returned layer data by PSD.js analysis. After the PSD file is successfully uploaded, the path of the file in the attachment server is obtained and used as a parameter, the path is provided for an open source tool PSD.js for analysis, a tree data object in json format is returned after the analysis is successful, and then the front end code further processes the original data, and all leaf node map layers of the map layer combination are found and cached.
The specific steps may be broken down as follows, as shown in FIG. 13:
A201. And acquiring all child node layers of the current root node by using a child () method provided by PSD.js.
And A202, arranging all the sub node diagram layers acquired in the previous step in an inverted order. Since the layers obtained by the child () method in the first step are arranged in the order from top to bottom, and the loading layers are required to be loaded in the order from bottom to top, the bottom layer is prevented from being blocked, and thus this step is required to be processed in reverse order.
A203. Query and cache all leaf node map layers. Traversing the child node array obtained after the inverted arrangement of the A202, continuing to use the child () method to judge the basis, judging the child node to be a leaf node map layer if the child node does not exist, caching the child node map layer into variables by using a push method, and continuing to step A204. If so, returning to the step A201, and repeating the steps. It should be noted that, in the loop method used in the traversal process, synchronous execution must be guaranteed, while the callback function in the js for each method is an asynchronous function, if the for each method is adopted, the She Zitu layer sequence of the final analysis is disordered, so that the for loop is used for the analysis in this step.
S204, if the current node is a leaf node, judging whether other brother nodes exist in the node or not, or whether other brother nodes exist in a father node of the node, if so, returning to the step S203, and carrying out logic judgment of the subsequent node. If not, it is indicated that all leaf node map layers have been extracted.
S3, setting the size of the integral canvas container. This step stores the width and height information of the canvas into the front end project,
s4, adding the layers to a canvas container. Traversing all leaf node map layers obtained in the step S2. If the leaf node diagram layer is a picture diagram layer, an addimagefrom psd () method is executed, if the leaf node diagram layer is a text diagram layer, an addextfrom psd () method is executed, wherein the method for adding the picture diagram layer and the text diagram layer needs to be packaged into a precursor () object to prevent the phenomenon of disordered sequence of the diagram layers caused by asynchronous execution in the process of adding different diagram layers, wherein a parameter leaf layerlist represents all the leaf sub-layers cached in the step S3, and a typeTool method is the identifier of the representing the text diagram layer in a PSD.js toolkit.
The detailed steps of adding the picture layer can be further broken down as in fig. 14:
A401. the picture layer is converted from the conversion base64 () format to the file format (herein, the base64 () format is converted to the blob format and then to the file format).
A402. And calling an uploading interface to upload the picture converted into the file format to the accessory server.
A403. A picture path is obtained from the server and added to the canvas. After the uploading is called and successfully returned, the path stored in the server by the picture is utilized, the add () method in the fabricAPI is called to add the picture to the canvas container for display, and the picture is added at the center position of the canvas after the default addition is finished. Because the position coordinates of the picture are set later, the picture needs to be executed after the picture is completely added to the canvas, the picture adding method also needs to be manually packaged into a precursor () object, and a callback function reset () after successful addition is written into an add () method and is executed after the method is added. Wherein, formdata represents three parameters required by an uploading interface, including file information, picture names and the like; imgCoords represents a picture coordinate object, comprises two fields of top and left, is obtained through PSD.js, context represents a universal context of an attachment server, and id represents an attachment id name after the picture is successfully uploaded.
A404. And (5) positioning the picture. According to the distance of the picture above and at the left side relative to the canvas, the setCoorts () method of the picture object is called to realize positioning.
The positioning flow of adding the text layer and the corresponding text box is simpler, and the problems of an internal positioning method and asynchronous execution of the addition are avoided, so that explanation is omitted.
According to the method, the device and the system, through the mode that the leaf node diagram layer is extracted first and then added, the maximum decoupling of the diagram layer combination is realized, and meanwhile, the problem of disordered loading sequence among the diagram layers is avoided. Secondly, the method for adding the layers is manually packaged into a precursor () object, and the precursor () object is used as a synchronization task to be executed together with a subsequent method, so that the positioning function of each layer is accurately realized. By combining the two aspects, the accuracy of restoring the PSD file on the front-end mapping platform is effectively ensured, and the time cost brought by a designer for manually adjusting the sequence and the position of the layers in the mapping platform is also greatly saved.
In order to quickly and accurately achieve analysis and addition of front-end multi-layer layers and improve front-end design efficiency, the application provides an embodiment of an electronic device for achieving all or part of contents in a front-end multi-layer data processing method, wherein the electronic device specifically comprises the following contents:
a processor (processor), a memory (memory), a communication interface (Communications Interface), and a bus; the processor, the memory and the communication interface complete communication with each other through the bus; the communication interface is used for realizing information transmission between the front-end multi-layer data processing device and related equipment such as a core service system, a user terminal, a related database and the like; the logic controller may be a desktop computer, a tablet computer, a mobile terminal, etc., and the embodiment is not limited thereto. In this embodiment, the logic controller may refer to an embodiment of the front-end multi-layer data processing method in the embodiment and an embodiment of the front-end multi-layer data processing apparatus, and the contents thereof are incorporated herein and are not repeated here.
It is understood that the user terminal may include a smart phone, a tablet electronic device, a network set top box, a portable computer, a desktop computer, a Personal Digital Assistant (PDA), a vehicle-mounted device, a smart wearable device, etc. Wherein, intelligent wearing equipment can include intelligent glasses, intelligent wrist-watch, intelligent bracelet etc..
In practical applications, part of the front-end multi-layer data processing method may be executed on the electronic device side as described above, or all operations may be completed in the client device. Specifically, the selection may be made according to the processing capability of the client device, and restrictions of the use scenario of the user. The present application is not limited in this regard. If all operations are performed in the client device, the client device may further include a processor.
The client device may have a communication module (i.e. a communication unit) and may be connected to a remote server in a communication manner, so as to implement data transmission with the server. The server may include a server on the side of the task scheduling center, and in other implementations may include a server of an intermediate platform, such as a server of a third party server platform having a communication link with the task scheduling center server. The server may include a single computer device, a server cluster formed by a plurality of servers, or a server structure of a distributed device.
Fig. 15 is a schematic block diagram of a system configuration of the electronic device 9600 of the embodiment of the present application. As shown in fig. 15, the electronic device 9600 may include a central processor 9100 and a memory 9140; the memory 9140 is coupled to the central processor 9100. Notably, this fig. 15 is exemplary; other types of structures may also be used in addition to or in place of the structures to implement telecommunications functions or other functions.
In one embodiment, the front-end multi-layer data processing method functionality may be integrated into the central processor 9100. The central processor 9100 may be configured to perform the following control:
step S101: and analyzing the picture format engineering file to obtain a corresponding tree data object, and determining all leaf node layers of the picture layer combination according to the data structure of the tree data object.
Step S102: and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the layer adding strategy into a set front-end container.
As can be seen from the above description, the electronic device provided in the embodiment of the present application obtains the corresponding tree-shaped data object by parsing the picture format engineering file, and determines all leaf node layers of the layer combination according to the data structure of the tree-shaped data object; and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container, so that the analysis and the adding of the front-end multi-layer can be rapidly and accurately realized, and the front-end design efficiency is improved.
In another embodiment, the front-end multi-layer data processing apparatus may be configured separately from the central processor 9100, for example, the front-end multi-layer data processing apparatus may be configured as a chip connected to the central processor 9100, and the front-end multi-layer data processing method functions are implemented by control of the central processor.
As shown in fig. 15, the electronic device 9600 may further include: a communication module 9110, an input unit 9120, an audio processor 9130, a display 9160, and a power supply 9170. It is noted that the electronic device 9600 need not include all of the components shown in fig. 15; in addition, the electronic device 9600 may further include components not shown in fig. 15, and reference may be made to the related art.
As shown in fig. 15, the central processor 9100, sometimes referred to as a controller or operational control, may include a microprocessor or other processor device and/or logic device, which central processor 9100 receives inputs and controls the operation of the various components of the electronic device 9600.
The memory 9140 may be, for example, one or more of a buffer, a flash memory, a hard drive, a removable media, a volatile memory, a non-volatile memory, or other suitable device. The information about failure may be stored, and a program for executing the information may be stored. And the central processor 9100 can execute the program stored in the memory 9140 to realize information storage or processing, and the like.
The input unit 9120 provides input to the central processor 9100. The input unit 9120 is, for example, a key or a touch input device. The power supply 9170 is used to provide power to the electronic device 9600. The display 9160 is used for displaying display objects such as images and characters. The display may be, for example, but not limited to, an LCD display.
The memory 9140 may be a solid state memory such as Read Only Memory (ROM), random Access Memory (RAM), SIM card, etc. But also a memory which holds information even when powered down, can be selectively erased and provided with further data, an example of which is sometimes referred to as EPROM or the like. The memory 9140 may also be some other type of device. The memory 9140 includes a buffer memory 9141 (sometimes referred to as a buffer). The memory 9140 may include an application/function storage portion 9142, the application/function storage portion 9142 storing application programs and function programs or a flow for executing operations of the electronic device 9600 by the central processor 9100.
The memory 9140 may also include a data store 9143, the data store 9143 for storing data, such as contacts, digital data, pictures, sounds, and/or any other data used by an electronic device. The driver storage portion 9144 of the memory 9140 may include various drivers of the electronic device for communication functions and/or for performing other functions of the electronic device (e.g., messaging applications, address book applications, etc.).
The communication module 9110 is a transmitter/receiver 9110 that transmits and receives signals via an antenna 9111. A communication module (transmitter/receiver) 9110 is coupled to the central processor 9100 to provide input signals and receive output signals, as in the case of conventional mobile communication terminals.
Based on different communication technologies, a plurality of communication modules 9110, such as a cellular network module, a bluetooth module, and/or a wireless local area network module, etc., may be provided in the same electronic device. The communication module (transmitter/receiver) 9110 is also coupled to a speaker 9131 and a microphone 9132 via an audio processor 9130 to provide audio output via the speaker 9131 and to receive audio input from the microphone 9132 to implement usual telecommunications functions. The audio processor 9130 can include any suitable buffers, decoders, amplifiers and so forth. In addition, the audio processor 9130 is also coupled to the central processor 9100 so that sound can be recorded locally through the microphone 9132 and sound stored locally can be played through the speaker 9131.
The embodiments of the present application further provide a computer readable storage medium capable of implementing all the steps in the front-end multi-layer data processing method in which the execution subject in the above embodiments is a server or a client, where the computer readable storage medium stores a computer program, and when the computer program is executed by a processor, the implementation subject in the above embodiments implements all the steps in the front-end multi-layer data processing method in which the execution subject in the above embodiments is a server or a client, for example, the processor implements the following steps when executing the computer program:
Step S101: and analyzing the picture format engineering file to obtain a corresponding tree data object, and determining all leaf node layers of the picture layer combination according to the data structure of the tree data object.
Step S102: and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the layer adding strategy into a set front-end container.
As can be seen from the above description, the computer readable storage medium provided in the embodiments of the present application obtains a corresponding tree data object by parsing a picture format engineering file, and determines all leaf node map layers of a map layer combination according to a data structure of the tree data object; and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container, so that the analysis and the adding of the front-end multi-layer can be rapidly and accurately realized, and the front-end design efficiency is improved.
The embodiments of the present application further provide a computer program product capable of implementing all the steps in the front-end multi-layer data processing method in which the execution subject in the above embodiments is a server or a client, where the computer program/instructions implement the steps of the front-end multi-layer data processing method when executed by a processor, for example, the computer program/instructions implement the steps of:
Step S101: and analyzing the picture format engineering file to obtain a corresponding tree data object, and determining all leaf node layers of the picture layer combination according to the data structure of the tree data object.
Step S102: and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the layer adding strategy into a set front-end container.
As can be seen from the above description, the computer program product provided in the embodiments of the present application obtains a corresponding tree data object by parsing a picture format engineering file, and determines all leaf node layers of a layer combination according to a data structure of the tree data object; and determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container, so that the analysis and the adding of the front-end multi-layer can be rapidly and accurately realized, and the front-end design efficiency is improved.
It will be apparent to those skilled in the art that embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (devices), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
The principles and embodiments of the present invention have been described in detail with reference to specific examples, which are provided to facilitate understanding of the method and core ideas of the present invention; meanwhile, as those skilled in the art will have variations in the specific embodiments and application scope in accordance with the ideas of the present invention, the present description should not be construed as limiting the present invention in view of the above.

Claims (10)

1. A method for processing a front-end multi-layer data, the method comprising:
analyzing the picture format engineering file to obtain a corresponding tree data object and determining all leaf node layers of the picture layer combination according to the data structure of the tree data object;
And determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the layer adding strategy into a set front-end container.
2. The method for processing front-end multi-layer data according to claim 1, wherein determining all leaf node layers of a layer combination according to the data structure of the tree data object comprises:
determining all child node layers of the current root node according to the data structure of the tree data object;
and traversing and judging the child node layer arrays of all the child node layers, judging the current node without new child nodes as a leaf node layer, and obtaining all the leaf node layers.
3. The front-end multi-layer data processing method according to claim 2, comprising, after said determining all child node layers of a current root node from a data structure of said tree data object:
and arranging all the sub-node layers in reverse order to obtain a sub-node layer array.
4. The method according to claim 2, further comprising, after the traversing determination is made on the child node layer array, determining that a current node where no new child node exists is a leaf node layer:
Judging whether the current node has a brother node or whether the father node of the current node has a brother node;
if not, judging that all the leaf node map layers are extracted.
5. The method for processing the front-end multi-layer data according to claim 1, wherein determining a corresponding layer adding policy according to the layer types of all the leaf node layers and adding the corresponding layer adding policy to a set front-end container comprises:
traversing all the leaf node map layers, and converting the leaf node map layers into a file format if the map layer type of the leaf node map layers is a picture map layer;
the picture file obtained after the file format conversion is added to the center position of the front canvas by default;
and adjusting the position of the picture file in the front canvas according to the coordinate information of the picture file.
6. The method for processing front-end multi-layer data according to claim 1, wherein determining a corresponding layer addition policy according to the layer types of all the leaf node layers and adding the determined layer addition policy to a set front-end container, further comprises:
and traversing all the leaf node map layers, and if the map layer type of the leaf node map layer is a text map layer, adding the leaf node map layer into a front canvas according to the coordinate information of the leaf node map layer.
7. The method for processing front-end multi-layer data according to claim 1, wherein the parsing the picture format engineering file to obtain the corresponding tree data object includes:
and sending the picture format engineering file to a set attachment server through a front-end uploading component, so that the attachment server calls a preset file analysis tool to analyze the picture format engineering file, and a corresponding tree data object is obtained.
8. A front-end multi-layer data processing apparatus, comprising:
the node diagram layer determining module is used for analyzing the picture format engineering file to obtain a corresponding tree data object and determining all leaf node diagram layers of the diagram layer combination according to the data structure of the tree data object;
and the front-end layer adding module is used for determining a corresponding layer adding strategy according to the layer types of all the leaf node layers and adding the strategy into a set front-end container.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the steps of the front-end multi-layer data processing method of any one of claims 1 to 7 when the program is executed by the processor.
10. A computer readable storage medium having stored thereon a computer program, which when executed by a processor performs the steps of the front-end multi-layer data processing method of any of claims 1 to 7.
CN202310531310.5A 2023-05-11 2023-05-11 Front-end multi-layer data processing method and device Pending CN116522033A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310531310.5A CN116522033A (en) 2023-05-11 2023-05-11 Front-end multi-layer data processing method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310531310.5A CN116522033A (en) 2023-05-11 2023-05-11 Front-end multi-layer data processing method and device

Publications (1)

Publication Number Publication Date
CN116522033A true CN116522033A (en) 2023-08-01

Family

ID=87395747

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310531310.5A Pending CN116522033A (en) 2023-05-11 2023-05-11 Front-end multi-layer data processing method and device

Country Status (1)

Country Link
CN (1) CN116522033A (en)

Similar Documents

Publication Publication Date Title
US11880628B2 (en) Screen mirroring display method and electronic device
CN111031058A (en) Websocket-based distributed server cluster interaction method and device
CN109857508B (en) Method, system, equipment and storage medium for dynamically replacing interface skin
US20160277460A1 (en) Method and apparatus for initiating network conference
CN111177292A (en) WebGIS collaborative plotting method and system for emergency incident
CN111679811B (en) Web service construction method and device
CN114257532B (en) Method and device for detecting state of server
CN103580998A (en) Method and device for sharing communication behavior information
CN112689170B (en) Content playing method of display terminal, display terminal and readable storage medium
CN111767558B (en) Data access monitoring method, device and system
CN114040189A (en) Multimedia test method, device, storage medium and electronic equipment
CN112689012A (en) Cross-network proxy communication method and device
CN110647273B (en) Method, device, equipment and medium for self-defined typesetting and synthesizing long chart in application
CN116522033A (en) Front-end multi-layer data processing method and device
CN103491393A (en) Video service processing method and device
CN108319420B (en) Picture loading method and device
CN113050985B (en) Front-end engineering dependency automatic registration method and device
CN113055348A (en) Cross-platform data request method and device and electronic equipment
WO2020014900A1 (en) Message display method and terminal
CN106775815B (en) Application data migration method and device
CN109165197A (en) A kind of document handling method, terminal and server
CN109474643A (en) Data analysis method, device, equipment and storage medium
CN113110829B (en) Multi-UI component library data processing method and device
CN113434423A (en) Interface test method and device
CN113342501B (en) System fault processing method and device

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination