PSD file analysis method and related equipment

Abstract

The invention discloses a PSD file analysis method and related equipment. The method comprises the steps that a to-be-analyzed PSD file is acquired; performing initial analysis on the PSD file to obtain basic layer information of each layer; for each layer, carrying out attribute analysis on the basic layer information to obtain css attribute information corresponding to each layer, determining a position relationship between the current layer and a target layer based on the basic layer information, and drawing an auxiliary marking line; the css attribute information of the target layer, the position relation between the current layer and the target layer and the auxiliary marking line are displayed, a visual file is analyzed into attribute information and position information needed by front-end developers by analyzing a PSD file, and the development efficiency of the front-end developers is greatly improved.

Description

Technical Field

[0001] The present disclosure generally relates to the technical field of file parsing, and specifically relates to a method for parsing PSD files and related devices. Background Art

[0002] In a page development project, a front-end developer needs to obtain in advance the visual draft designed by an interface developer and develop a corresponding page according to the layout style in the visual draft. The interface developer usually uses the PS (Photoshop) software to design the target interface. However, since the front-end developer is not familiar with the relevant professional knowledge of the PS software and the PS software cannot directly provide the parameter information for front-end development, it greatly increases the development cost of the front-end developer. Summary of the Invention

[0003] In view of the above-mentioned defects or deficiencies in the prior art, it is desirable to provide a method for parsing PSD files and related devices. By parsing the PSD files, the visual files are parsed into the attribute information and position information required by front-end developers, greatly improving the development efficiency of front-end developers.

[0004] In a first aspect, an embodiment of the present application provides a method for parsing a PSD file, including:

[0005] Obtain a PSD file to be parsed;

[0006] Perform an initial parsing on the PSD file to obtain the basic layer information of each layer;

[0007] For each layer, perform attribute parsing on the basic layer information to obtain the css attribute information corresponding to each layer, and determine the position relationship between the current layer and the target layer based on the basic layer information and draw auxiliary marking lines;

[0008] Display the css attribute information of the target layer, the position relationship between the current layer and the target layer, and the auxiliary marking lines.

[0009] In some embodiments, the performing an initial parsing on the PSD file to obtain the basic layer information of each layer includes:

[0010] Obtain the basic image information of the PSD file and create a reference background image according to the basic image information;

[0011] Based on the reference background image, layer by layer extract the layer information of each layer, where the layer includes a hidden layer.

[0012] In some embodiments, the CSS property includes a rounded border property, and the parsing of the basic layer information to obtain the CSS property information corresponding to each layer includes:

[0013] When the current layer is a vector layer, obtain at least one anchor point information in the current layer;

[0014] Determine the corresponding rounded corner radius data for each of the anchor point information;

[0015] Deduplicate at least one of the rounded corner radius data to obtain the rounded border property corresponding to the current layer.

[0016] In some embodiments, the CSS property includes a background linear gradient property, and the parsing of the basic layer information to obtain the CSS property information corresponding to each layer includes:

[0017] When the effect field of the current layer contains gradient overlay information, obtain the gradient angle information, color information, and transparency information;

[0018] Use a preset angle value to subtract the angle information to determine the gradient angle corresponding to the current layer; and associate the color information with the transparency information to determine the RGBA color value for color gradient.

[0019] In some embodiments, the determining the positional relationship between the current layer and the target layer based on the basic layer information and drawing an auxiliary annotation line includes:

[0020] Obtain the boundary distances between the current layer and the target layer respectively, and draw auxiliary annotation lines between the current layer and the target layer and the boundary based on the boundary distances, where the boundary includes at least one of the upper and lower boundaries and at least one of the left and right boundaries.

[0021] Based on the boundary distance of the current layer and the boundary distance of the target layer, determine the combined distance and the absolute distance between the current layer and the target layer;

[0022] Based on the combined distance and the absolute distance, determine the positional relationship between the current layer and the target layer.

[0023] In some embodiments, it further includes:

[0024] According to the selection change of the target layer, dynamically display the positional relationship and the spacing information between the current layer and the target layer, where the spacing information includes at least one of the spacing width and the spacing height.

[0025] In a second aspect, an embodiment of the present application provides a PSD file parsing device, including:

[0026] An acquisition module, configured to acquire a PSD file to be parsed;

[0027] A first parsing module, configured to perform an initial parsing on the PSD file to obtain basic layer information of each layer;

[0028] A second parsing module, configured to perform attribute parsing on the basic layer information for each layer to obtain css attribute information corresponding to each layer, and determine a positional relationship between the current layer and the target layer based on the basic layer information and draw an auxiliary annotation line;

[0029] A display module, configured to display the css attribute information of the target layer, the positional relationship between the current layer and the target layer, and the auxiliary annotation line.

[0030] In a third aspect, an embodiment of 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, and when the processor executes the program, the method described in the embodiment of the present application is implemented.

[0031] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the method described in the embodiment of the present application is implemented.

[0032] In a fifth aspect, an embodiment of the present application provides a computer program product, including a computer program, characterized in that when the computer program is executed by a processor, the method described in the embodiment of the present application is implemented.

[0033] The PSD file parsing method provided by the embodiment of the present application parses the PSD file, obtains the attribute information and position information of each layer, converts them into corresponding css attribute information and position relationships, and draws auxiliary annotation lines, providing the information content required for front-end development for front-end developers without manual participation, greatly improving the development efficiency while ensuring the reliability of development, and reducing the communication cost between the front end and the back end during the development process.

[0034] Additional aspects and advantages of the present invention will be given in part in the following description, become apparent in part from the following description, or be understood through the practice of the present invention. Description of the Drawings

[0035] By reading the detailed description of the non-limiting embodiments with reference to the following drawings, other features, objects, and advantages of the present application will become more apparent:

[0036] Figure 1Shows the schematic flowchart of the method for parsing a PSD file provided by an embodiment of the present application;

[0037] Figure 2 Shows the parsing principle and effect diagram of the rounded corner border attribute provided by an embodiment of the present application;

[0038] Figure 3 Shows the parsing principle and effect diagram of the background linear gradient attribute provided by an embodiment of the present application;

[0039] Figure 4 Shows the schematic flowchart of the method for parsing a PSD file provided by another embodiment of the present application;

[0040] Figure 5 Shows the schematic diagram of the principle of the auxiliary annotation line provided by an embodiment of the present application;

[0041] Figure 6 Shows the schematic flowchart of the method for parsing a PSD file provided by yet another embodiment of the present application;

[0042] Figure 7 Shows the effect diagram of the parsing result display of the PSD file provided by an embodiment of the present application;

[0043] Figure 8 Shows the schematic structural diagram of the device for parsing a PSD file provided by an embodiment of the present application;

[0044] Figure 9 Shows the schematic structural diagram of the computer system of the electronic device or server suitable for implementing the embodiments of the present application. Detailed implementation manners

[0045] The present application will be further described in detail below with reference to the accompanying drawings and embodiments. It can be understood that the specific embodiments described herein are only used to explain the related invention, rather than limiting the invention. Additionally, it should be noted that for the sake of description, only the parts related to the invention are shown in the drawings.

[0046] It should be noted that, without conflict, the embodiments in the present application and the features in the embodiments can be combined with each other. The present application will be described in detail below with reference to the drawings and embodiments.

[0047] In a page development project, front-end developers need to obtain the visual design drafts designed by interface developers in advance and develop corresponding pages according to the layout styles in the visual design drafts. To solve the problem that front-end developers in the prior art have insufficient mastery of Photoshop, usually when providing the visual design drafts, interface developers independently write corresponding annotation information beside the pictures, including but not limited to theme colors, font information, and position information between layer elements, etc. Although this method can solve the problem of front-end developers' difficulty in reading visual design drafts to a certain extent, it greatly increases the interface development cost and is also prone to human errors, resulting in problems such as page development rework, and fails to fundamentally solve the connection problem between the two-level development.

[0048] Based on this, the present application proposes a method for parsing PSD files. By parsing the PSD files, the visual files are parsed into attribute information and position information required by front-end developers, greatly improving the development efficiency of front-end developers.

[0049] To further illustrate the technical solutions provided by the embodiments of the present application, the following will be described in detail in combination with the accompanying drawings and specific implementation manners. Although the embodiments of the present application provide the following method operation instruction steps shown in the embodiments or the accompanying drawings, based on routine or non-creative labor, more or fewer operation instruction steps may be included in the method. In steps where there is no necessary causal relationship logically, the execution order of these steps is not limited to the execution order provided by the embodiments of the present application. When the method is actually processed or executed by the device, it can be executed in the order shown in the embodiments or the accompanying drawings or executed in parallel.

[0050] Please refer to Figure 1 , Figure 1 which shows a flowchart of the method for parsing PSD files provided by an embodiment of the present application. As Figure 1 shown, the method includes:

[0051] Step 101, obtain the PSD file to be parsed.

[0052] It should be noted that PSD (Photoshop Document) is a layered image file created by Adobe Photoshop. Adobe Photoshop is a professional image editing program, usually used to enhance digital photos and web graphics. PSD is the native format used to save files in Photoshop. PSD files can include image layers, adjustment layers, layer masks, annotations, file information, keywords, and other Photoshop-specific elements.

[0053] Step 102, perform an initial parsing on the PSD file to obtain the basic layer information of each layer.

[0054] It should be noted that the purpose of the initial parsing of the PSD file is to obtain the number of layers that need to be processed for information in the PSD file and the basic information of each layer.

[0055] In a feasible embodiment, the basic image information of the PSD file is obtained, and a reference background image is created according to the basic image information. Based on the reference background image, the image information of each image is extracted layer by layer.

[0056] Among them, the layer includes a hidden layer.

[0057] It should be noted that the reference background image is used to provide a reference for each layer in the PSD file, including but not limited to coordinate position reference, etc. Optionally, the reference background image can be constructed according to the relevant information of the corresponding image of the PSD file to improve the reference value of the reference background image. Preferably, the reference background image can be constructed using the relevant information of the complete image corresponding to the PSD file.

[0058] In a specific embodiment, a canvas object is created, and the imageData, width, and height in the PSD file are obtained to create a reference background image. That is to say, the data information, width, height, etc. of the target image image corresponding to the PSD file are obtained from the PSD file, and a reference background image is created. It should be understood that the created reference background image can provide unified and authoritative reference information for the subsequent display of each layer.

[0059] Furthermore, after creating the reference background image, the layer information of each layer in the PSD file is extracted layer by layer. It should be understood that in the embodiment of the present application, the concept of groups in traditional PS is abandoned, but each layer is recorded according to the PSD file, and the layer information is extracted layer by layer. In other words, the children information in the PSD file is flattened, so that each layer is separately expanded into a flat structure at the same level.

[0060] In a feasible embodiment, when extracting the layer information of each layer in the PSD file layer by layer, it further includes determining whether any layer contains a hidden field and the value of this field is true. If so, it is determined that the layer contains a hidden layer, and then the layer information of the hidden layer is further obtained.

[0061] Exemplarily, after the initial parsing of a certain PSD file, the following information is obtained:

[0062]

[0063]

[0064]

[0065] Thus, through initial parsing, the present application can obtain detailed parameter information of each layer in the PSD file, providing a reliable data basis for subsequent attribute parsing and determination of positional relationships.

[0066] Step 103: For each layer, perform attribute parsing on the basic layer information to obtain the css attribute information corresponding to each layer, and determine the positional relationship between the current layer and the target layer based on the basic layer information and draw auxiliary annotation lines.

[0067] It should be noted that attribute parsing is to convert the basic layer information extracted from the PSD file into css attribute information, including but not limited to directly transcribing the basic layer information into css attribute information, such as font-related information (size, color, line-height, font-family, etc.), background color, transparency, etc.

[0068] In a feasible embodiment, the css attribute further includes the rounded border attribute border-radius, which cannot be obtained through direct transcription. At this time, it is possible to layer by layer determine whether the current layer is a vector layer. When the current layer is a vector layer, obtain at least one anchor point information in the current layer, determine the corresponding rounded corner radius data for each anchor point information, and remove duplicates from the at least one rounded corner radius data to obtain the rounded border attribute corresponding to the current layer.

[0069] Specifically, determine whether the current layer contains the vectorOrigination field to determine whether the current layer is a vector layer. Then, when the current layer is a vector layer, traverse the keyDescriptorList field to obtain at least one anchor point information in the current layer. It should be understood that usually each layer contains one anchor point information. In specific cases, such as when the interface developer operates on the layer several times, the vector layer contains multiple anchor point information. Determine the rounded corner radius data keyOriginRRectRadii by removing duplicates, and then traverse and remove duplicates from the rounded corner radius data to obtain the Figure 2 effect shown.

[0070] In another feasible embodiment, the css attribute further includes the background linear gradient attribute linear-gradient, which cannot be obtained through direct transcription. At this time, when the effect field of the current layer contains gradient overlay information, obtain the gradient angle information, color information, and transparency information; subtract the angle information from the preset angle value to determine the gradient angle corresponding to the current layer, and associate the color information with the transparency information to determine the RGBA color value for color gradient.

[0071] Specifically, identify the gradientOverlay information in the effects field of the current layer, obtain the angle information angle from it, and then subtract the obtained angle information from 90 to get the gradient angle corresponding to the background color of the current layer. At the same time, obtain the color information colorStops and transparency information opacityStops of the background from gradientOverlay, where the color information is the specific RGB value corresponding to the color, and the transparency information is the corresponding A value, and then associate and combine the RGB value and the A value to obtain the RGBA value of the background image of the current layer.

[0072] Optionally, when the transparency information is 1, it is necessary to convert the color RGB to hexadecimal. Among them, Figure 3 shows the basic layer information and parsing results of an example background linear gradient attribute.

[0073] In a feasible embodiment, as Figure 4 shown, determining the positional relationship between the current layer and the target layer based on the basic layer information and drawing auxiliary annotation lines includes:

[0074] Step 401, respectively obtain the boundary distances of the current layer and the target layer, and respectively draw auxiliary annotation lines between the current layer and the target layer and the boundary based on the boundary distances.

[0075] Among them, the boundary includes at least one of the upper and lower boundaries and at least one of the left and right boundaries.

[0076] Among them, the current layer is the layer selected by the mouse, and the target layer is the layer pointed to by the mouse.

[0077] Specifically, the upper boundary top, lower boundary bottom, left boundary left, and right boundary right of the current layer and the target layer can be determined according to the basic layer information, and auxiliary annotation lines can be drawn.

[0078] Exemplarily, as Figure 5 shown, s1 is the current layer, s2 is the target layer, t1, b1, l1, and r1 respectively represent the upper boundary top, lower boundary bottom, left boundary left, and right boundary right of the current layer. Similarly, t2, b2, l2, and r2 respectively represent the upper boundary top, lower boundary bottom, left boundary left, and right boundary right of the target layer. Optionally, Figure 5 the dotted lines in are the drawn auxiliary annotation lines, which are used to prompt the front-end developer about the relationship between the current layer and the target layer.

[0079] Step 402: Determine the combined distance and absolute distance between the current layer and the target layer based on the boundary distances of the current layer and the target layer.

[0080] It should be noted that the combined distance is the sum of the values of any boundary of the current layer and the corresponding boundary of the target layer, and the absolute distance is the maximum value among the absolute differences between the relative boundaries of the current layer and the target layer.

[0081] In a specific embodiment, taking the upper boundary t1, lower boundary b1 of the current layer, upper boundary t2, and lower boundary b2 of the target layer as examples, the combined distance sum is (b1 - t1)+(b2 - t2), and the absolute distance abs is Math.max(Math.abs(t1 - b2), Math.abs(t2 - b1)). Among them, b1 - t1 is the height h1 of the current layer, and b2 - t2 is the height h2 of the target layer.

[0082] Step 403: Determine the positional relationship between the current layer and the target layer based on the combined distance and the absolute distance.

[0083] It should be noted that in the embodiments of the present application, the positional relationship between two layers includes circumscribed, inscribed, intersecting, separated, and contained. Among them, Figure 5 The relationship between the two layers s1 and s2 is longitudinally circumscribed and transversely intersecting. Optionally, for the longitudinal positional relationship, it can be determined by the distance between the current layer and the target layer and the upper boundary, or by the distance between the current layer and the target layer and the lower boundary. The transverse positional relationship can be determined by the distance between the current layer and the target layer and the left boundary, or by the distance between the current layer and the target layer and the right boundary. The present application does not make specific limitations.

[0084] Specifically, taking the upper boundary t1, lower boundary b1 of the current layer, upper boundary t2, and lower boundary b2 of the target layer to calculate the longitudinal relationship between the current layer and the target layer as an example. As Figure 6As shown, determine the size relationship between the combined distance sum and the absolute distance abs. If the combined distance sum is equal to the absolute distance abs, it is determined that the current layer and the target layer are externally tangent, and the spacing information is top = t2, heigh = b2 - t2; if the absolute distance abs is greater than the combined distance sum, it is determined that the current layer and the target layer are separated. At this time, further judge the size of the relative boundaries of the current layer and the target layer. For example, the size between the lower boundary b1 of the current layer and the upper boundary t2 of the target layer. If b1 < t2, the current layer and the target layer are separated and the spacing information is top = b1, height = Math.abs(b1 - t2); if b1 ≥ t2, the current layer and the target layer are separated and the spacing information is top - b2, height = Math.abs(t1 - b2).

[0085] If the combined distance sum is greater than the absolute distance abs, there is at least partial overlap between the current layer and the target layer. Then further judge the relationship between the absolute distance and the maximum height max (max = Math.max(h1, h2)). Specifically, if abs = max, it is determined that the current layer and the target layer are internally tangent. Further judge whether there is t1 === t2. If so, the spacing information is top = Math.min(b1, b2), height = Math.abs(b1 - b2); if not, the spacing information is top = Math.min(t1, t2), height = Math.abs(t1 - t2); if abs > max, it is determined that the current layer and the target layer intersect. Further judge whether there is t1 > t2. If so, the spacing information is top = t2, heigh = Math.abs(t1 - t2); if not, the spacing information is top = b1, height = Math.abs(b1 - b2); if abs < max, it is determined that the current layer and the target layer are in an inclusion relationship. Further judge whether there is t1 > t2. If so, the spacing information is at top = t2, height = Math.abs(t1 - t2), top = b1, height = Math.abs(b1 - b2); if not, the spacing information is top = t1, height = Math.abs(t1 - t2), top = b2, height = Math.abs(b1 - b2).

[0086] Thus, in this application, by numerically comparing the sum, abs, and max of the current layer and the target layer relative to the upper boundary, the positional relationship between the current layer and the target layer is analyzed. Combining with the auxiliary annotation lines can accurately provide the front-end developers with the positional relationship between different layers in the multi-layer page visual draft, enabling better assistance in the reading and presentation of the page visual draft for front-end developers without additional communication costs.

[0087] Step 104: Display the CSS attribute information of the target layer, the positional relationship between the current layer and the target layer, and the auxiliary annotation lines.

[0088] That is to say, in the embodiment of this application, by displaying the parsed CSS attribute information, the positional relationship between the current layer and the target layer, and the auxiliary annotation lines, as Figure 7 shown, so that front-end developers can obtain the visual information designed by interface developers, realizing efficient and reliable page development.

[0089] In an optional embodiment, the positional relationship and spacing information between the current layer and the target layer are also dynamically displayed according to the change in the selection of the target layer, where the spacing information includes at least one of the spacing width and the spacing height.

[0090] That is to say, as the front-end developer changes the selection among multiple layers, the information of the target layer can be dynamically changed and displayed according to the developer's selection. Specifically, the information of the declared DOM nodes in the interface is dynamically updated.

[0091] In a feasible embodiment, the above solution can be implemented by calling the ag-psd tool.

[0092] Thus, the PSD file parsing method provided by the embodiment of this application parses the PSD file to obtain the attribute information and position information of each layer, converts them into corresponding CSS attribute information and positional relationships, and draws auxiliary annotation lines, providing the front-end developers with the information content required for development without human participation, greatly improving the development efficiency while ensuring the reliability of development and reducing the communication cost between the front and back ends during the development process.

[0093] It should be noted that although the operations of the method of the present invention are described in a specific order in the drawings, this does not require or imply that these operations must be performed in that specific order, or that all the shown operations must be performed to achieve the desired result.

[0094] Figure 8 The structural schematic diagram of the PSD file parsing device provided by an embodiment of this application is shown.

[0095] AsFigure 8 As shown, the parsing device 10 of the PSD file includes:

[0096] An acquisition module 11 for acquiring the PSD file to be parsed;

[0097] A first parsing module 12 for initially parsing the PSD file to obtain the basic layer information of each layer;

[0098] A second parsing module 13 for, for each layer, performing attribute parsing on the basic layer information to obtain the css attribute information corresponding to each layer, and determining the positional relationship between the current layer and the target layer based on the basic layer information and drawing auxiliary annotation lines;

[0099] A display module 14 for displaying the css attribute information of the target layer, the positional relationship between the current layer and the target layer, and the auxiliary annotation lines.

[0100] In some embodiments, the first parsing module 12 is further configured to:

[0101] Obtain the basic image information of the PSD file, and create a reference background image according to the basic image information;

[0102] Based on the reference background image, layer information of each layer is extracted layer by layer, where each layer includes a hidden layer.

[0103] In some embodiments, the css attribute includes a rounded border attribute, and the second parsing module 13 is further configured to:

[0104] When the current layer is a vector layer, obtain at least one anchor point information in the current layer;

[0105] Determine corresponding rounded corner radius data for each of the anchor point information;

[0106] Deduplicate at least one of the rounded corner radius data to obtain the rounded border attribute corresponding to the current layer.

[0107] In some embodiments, the css attribute includes a background linear gradient attribute, and the second parsing module 13 is further configured to:

[0108] When the effect field of the current layer contains gradient overlay information, obtain gradient angle information, color information, and transparency information;

[0109] Subtract the angle information from a preset angle value to determine the gradient angle corresponding to the current layer; and associate the color information with the transparency information to determine the RGBA color value for color gradient.

[0110] In some embodiments, the second parsing module 13 is further configured to:

[0111] Obtain the boundary distances between the current layer and the target layer respectively, and draw auxiliary annotation lines between the current layer and the target layer and the boundary based on the boundary distances, where the boundary includes at least one of the upper and lower boundaries and at least one of the left and right boundaries

[0112] Determine the combined distance and the absolute distance between the current layer and the target layer based on the boundary distance of the current layer and the boundary distance of the target layer;

[0113] Determine the positional relationship between the current layer and the target layer based on the combined distance and the absolute distance.

[0114] In some embodiments, the display module 14 is further configured to:

[0115] Dynamically display the positional relationship and the spacing information between the current layer and the target layer according to the selection change of the target layer, where the spacing information includes at least one of the spacing width and the spacing height.

[0116] It should be understood that the various units or modules described in the PSD file parsing apparatus 10 correspond to the respective steps in the method described in the reference Figure 1 description. Thus, the operations and features described above for the method also apply to the PSD file parsing apparatus 10 and the units included therein, and will not be repeated here. The PSD file parsing apparatus 10 may be pre-implemented in the browser or other secure applications of the electronic device, or may be loaded into the browser or its secure application of the electronic device by means of downloading or the like. The corresponding units in the PSD file parsing apparatus 10 may cooperate with the units in the electronic device to implement the solutions of the embodiments of the present application.

[0117] For the several modules or units mentioned in the above detailed description, such a division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of the two or more modules or units described above may be embodied in one module or unit. Conversely, the features and functions of one module or unit described above may be further divided and embodied by multiple modules or units.

[0118] Next, with reference to Figure 9 , Figure 9 FIG. shows a schematic structural diagram of a computer system of an electronic device or a server suitable for implementing the embodiments of the present application,

[0119] As Figure 9As shown, the computer system includes a central processing unit (CPU) 901, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 902 or a program loaded from a storage section 908 into a random access memory (RAM) 903. In the RAM 903, various programs and data required for the operation instructions of the system are also stored. The CPU 901, the ROM 902, and the RAM 903 are connected to each other via a bus 904. An input / output (I / O) interface 905 is also connected to the bus 904.

[0120] The following components are connected to the I / O interface 905; an input section 906 including a keyboard, a mouse, etc.; an output section 907 including such as a cathode ray tube (CRT), a liquid crystal display (LCD), etc. and a speaker, etc.; a storage section 908 including a hard disk, etc.; and a communication section 909 including a network interface card such as a LAN card, a modem, etc. The communication section 909 performs communication processing via a network such as the Internet. A drive 910 is also connected to the I / O interface 905 as needed. A removable medium 911, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 910 as needed so that a computer program read from it can be installed into the storage section 908 as needed.

[0121] In particular, according to an embodiment of the present application, the process described above with reference to the flowchart Figure 2 can be implemented as a computer software program. For example, an embodiment of the present application includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains program codes for performing the method shown in the flowchart. In such an embodiment, the computer program contains program codes for performing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network via the communication section 909, and / or installed from the removable medium 911. When the computer program is executed by the central processing unit (CPU) 901, the above functions defined in the system of the present application are executed.

[0122] It should be noted that the computer-readable medium shown in this application can be a computer-readable signal medium, a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples of a computer-readable storage medium can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this application, a computer-readable storage medium can be any tangible medium that contains or stores a program, which can be used by or in conjunction with an instruction execution system, apparatus, or device. And in this application, a computer-readable signal medium can include a data signal propagated in a baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on a computer-readable medium can be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0123] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operation instructions of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram can represent a module, a program segment, or a part of code, and the foregoing module, program segment, or part of code contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than marked in the accompanying drawings. For example, two connected blocks may actually be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, as well as combinations of blocks in the block diagram and / or flowchart, can be implemented by a dedicated hardware-based system that executes specified functions or operation instructions, or can be implemented by a combination of dedicated hardware and computer instructions.

[0124] The units or modules involved in the embodiments described in this application can be implemented in software or in hardware. The described units or modules can also be provided in a processor. For example, it can be described as: A processor includes an acquisition module, a first parsing module, a second parsing module, and a display module. Among them, the names of these units or modules do not constitute a limitation on the units or modules themselves in some cases. For example, the acquisition module can also be described as "acquire the PSD file to be parsed".

[0125] As another aspect, this application also provides a computer-readable storage medium. The computer-readable storage medium can be included in the electronic device described in the above embodiments, or can exist separately without being assembled into the electronic device. The above computer-readable storage medium stores one or more programs, and when the above programs are executed by one or more processors, they are used to parse the PSD file described in this application.

[0126] The above description is only the preferred embodiments of this application and an explanation of the technical principles applied. Those skilled in the art should understand that the scope of disclosure involved in this application is not limited to the technical solutions formed by the specific combination of the above technical features, and should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the aforementioned disclosure concept. For example, the technical solutions formed by mutually replacing the above features with the technical features (but not limited to) having similar functions disclosed in this application.

Claims

1. A method for parsing PSD files, characterized in that, including: Obtain a PSD file to be parsed; Perform initial parsing on the PSD file to obtain basic layer information for each layer; For each layer, perform attribute parsing on the basic layer information to obtain css attribute information corresponding to each layer, and determine the positional relationship between the current layer and the target layer based on the basic layer information and draw auxiliary annotation lines; Display the css attribute information of the target layer, the positional relationship between the current layer and the target layer, and the auxiliary annotation lines.

2. The parsing method of the PSD file according to claim 1, wherein The performing initial parsing on the PSD file to obtain basic layer information for each layer includes: Obtain the basic image information of the PSD file, and create a reference background image according to the basic image information; Based on the reference background image, layer by layer extract the layer information of each layer, where the layer includes a hidden layer.

3. The parsing method of the PSD file according to claim 1, characterized in that, The css attribute includes a rounded border attribute, and the performing attribute parsing on the basic layer information to obtain css attribute information corresponding to each layer includes: When the current layer is a vector layer, obtain at least one anchor point information in the current layer; Determine corresponding rounded corner radius data for each of the anchor point information; Deduplicate at least one of the rounded corner radius data to obtain the rounded border attribute corresponding to the current layer.

4. The parsing method of the PSD file according to claim 1, characterized in that The css attribute includes a background linear gradient attribute, and the performing attribute parsing on the basic layer information to obtain css attribute information corresponding to each layer includes: When the effect field of the current layer contains gradient overlay information, obtain gradient angle information, color information, and transparency information; Subtract the angle information from a preset angle value to determine the gradient angle corresponding to the current layer; and associate the color information with the transparency information to determine the RGBA color value for color gradient.

5. The parsing method of the PSD file according to claim 1, wherein The determining the positional relationship between the current layer and the target layer based on the basic layer information and drawing auxiliary annotation lines includes: Respectively obtain the boundary distances of the current layer and the target layer, and respectively draw auxiliary annotation lines between the current layer and the target layer and the boundary based on the boundary distances, where the boundary includes at least one of the upper and lower boundaries and at least one of the left and right boundaries Based on the boundary distance of the current layer and the boundary distance of the target layer, determine the combined distance and the absolute distance between the current layer and the target layer; Based on the combined distance and the absolute distance, determine the positional relationship between the current layer and the target layer.

6. The parsing method of the PSD file according to claim 1 or 5, characterized in that, It further includes: According to the selection change of the target layer, dynamically display the positional relationship and the spacing information between the current layer and the target layer, where the spacing information includes at least one of the spacing width and the spacing height.

7. A parsing device for PSD files, characterized in that, including: An obtaining module, configured to obtain a PSD file to be parsed; A first parsing module, configured to perform initial parsing on the PSD file to obtain basic layer information for each layer; A second parsing module, configured to perform attribute parsing on the basic layer information for each of the layers, obtain css attribute information corresponding to each of the layers, and determine a positional relationship between the current layer and the target layer based on the basic layer information and draw auxiliary marking lines; A display module, configured to display the css attribute information of the target layer, the positional relationship between the current layer and the target layer, and the auxiliary marking lines.

8. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the parsing method of the PSD file as described in any one of claims 1-6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the parsing method of the PSD file as described in any one of claims 1-6.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the parsing method of the PSD file as described in any one of claims 1-6.

Images