CN115469870A

CN115469870A - File online processing method and device, electronic equipment and medium

Info

Publication number: CN115469870A
Application number: CN202211035288.7A
Authority: CN
Inventors: 郑晓雪; 陈嘉豪
Original assignee: Jingdong Technology Information Technology Co Ltd
Current assignee: Jingdong Technology Information Technology Co Ltd
Priority date: 2022-08-26
Filing date: 2022-08-26
Publication date: 2022-12-13

Abstract

The disclosure relates to a method, a device, electronic equipment and a medium for file online processing, which can be applied to the fields of front-end development and electronic commerce, wherein the method comprises the following steps: receiving a design draft file and a preview request aiming at the design draft file; acquiring metadata of a design draft file; analyzing the metadata to generate specific field description language DSL data for describing layer elements in the design draft file; converting the display information of the layer elements in the DSL data to generate target display information adaptive to a front-end description language; generating layer content of a rendering layer according to the target display information; rendering the layer content of the rendered layer, and generating a preview view of the design draft file on a display interface corresponding to the preview request. In an application scenario, a user only needs to upload a design document file in a browser, and the browser can quickly display a preview view of the design document through analysis and conversion operations.

Description

File online processing method and device, electronic equipment and medium

Technical Field

The present disclosure relates to the field of front-end development and electronic commerce, and in particular, to a method, an apparatus, an electronic device, and a medium for online processing of a file.

Background

Taking the front-end development process in the field of electronic commerce as an example, the promotion of each product is mostly realized by putting a design file which is designed in advance and can be normally presented on an application, such as a promotion picture or a promotion poster, in a resource slot. At present, most design draft files are mainly generated in the following modes: aiming at a specific resource position, a designer generates a design draft after designing, then the design draft is handed to research and development personnel to develop into a page template to be on-line, and then an operator uses the template on line to generate a final publicity picture to be on-line.

In addition, in the process of implementing the technical concept of the present disclosure, it is found that the following problems also exist in the related art: the UI (user interface) designer currently produces a design by using Sketch software (a drawing software), and produces a file with a suffix of Sketch, and the Sketch file can only export an Html (hypertext markup language) file by using Sketch plug-ins or additional functions of the software, which depends heavily on specific design software, and once the design is separated from the specific design software or some necessary plug-ins, the design file cannot be previewed in a browser.

Disclosure of Invention

In order to solve the technical problem or at least partially solve the technical problem, embodiments of the present disclosure provide a method, an apparatus, an electronic device, and a medium for online processing of a file.

In a first aspect, an embodiment of the present disclosure provides a method for online processing of a file. The method comprises the following steps: receiving a design draft file and a preview request aiming at the design draft file; acquiring metadata of the design draft file; analyzing the metadata to generate Specific Domain description Language (DSL) data for describing the layer elements in the design draft file; converting the display information of the layer elements in the DSL data to generate target display information adaptive to a front-end description language; generating layer content of a rendering layer according to the target display information; and rendering the layer content of the rendered layer, and generating a preview view of the design draft file on a display interface corresponding to the preview request.

According to the embodiment of the disclosure, the rendering layer is configured with a corresponding auxiliary layer, and the auxiliary layer is used for performing editing control on the layer content of the rendering layer. The method further comprises the following steps: receiving an editing instruction for editing the previewed target design draft file; generating the layer content of the auxiliary layer according to the editing instruction; according to the layer content of the auxiliary layer, performing editing control on the layer content of a target rendering layer of the target design draft file to obtain updated layer content of the target rendering layer; rendering the updated layer content of the target rendered layer, and generating an updated view of the design draft file on a display interface corresponding to the editing instruction.

According to an embodiment of the present disclosure, the editing instruction includes at least one of: layer editing instructions, canvas editing instructions or text editing instructions; the auxiliary layer comprises a layer control layer, a canvas control layer and a text editing layer; generating the layer content of the auxiliary layer according to the editing instruction, wherein the layer content of the auxiliary layer includes at least one of the following: generating a layer updating instruction of the layer control layer according to the layer editing instruction; generating a canvas updating instruction of the canvas control layer according to the canvas editing instruction; generating a text updating instruction of the text editing layer according to the text editing instruction; according to the layer content of the auxiliary layer, performing editing control on the layer content of the target rendering layer to obtain the updated layer content of the target rendering layer, including: and according to at least one of the layer updating instruction, the canvas updating instruction or the text updating instruction, performing editing control on the layer content of the target rendering layer to obtain the updated layer content of the rendering layer.

According to an embodiment of the present disclosure, the layer control layer includes a selection layer and a mask layer, the selection layer is used to highlight contents of a selected layer in the rendered layer, and the attribute panels of the selection layer and the selection layer are used to apply one or more of the following editing operations: position information editing operation, hierarchy information editing operation, combined information editing operation and universal style editing operation; the mask layer is used for displaying mask shapes and elements cut by the masks, and the attribute panel of the mask layer is used for being subjected to mask information editing operation; the canvas control layer comprises a reference line layer and a zooming layer, wherein the reference line layer is used for displaying auxiliary lines, and the zooming layer is used for zooming the canvas according to the canvas zooming instruction; the text editing layer includes: a text content input layer and a text style attribute layer; the text editing instruction comprises an editing instruction for changing the text content and the text style.

According to an embodiment of the present disclosure, the layer editing instruction includes: an instruction is selected aiming at the layer of the specific layer element; under the condition that the layer selection instruction is received, the method further comprises the following steps: determining a form configuration item corresponding to the display attribute of the specific layer element; and displaying the attribute panel of the specific layer element according to the form configuration item. Rendering the content of the updated layer of the target rendered layer, and generating an updated view of the design draft file on a display interface corresponding to the editing instruction, wherein the rendering process comprises the following steps: and rendering an element selection effect in the preview view of the design draft file to obtain an updated view of the design draft file. And the attribute panel and the updated view are displayed on a display interface corresponding to the editing instruction.

According to an embodiment of the present disclosure, the layer editing instruction includes: at least one of an operation instruction or an attribute editing instruction of the layer; receiving an editing instruction for editing the previewed design document file includes: receiving at least one of a property editing instruction for the property panel or an operation instruction for a specific layer element in the preview view; the operation instruction comprises one or more of the following: a position information editing operation instruction, a hierarchy information editing operation instruction, a combination information editing operation instruction, a general style editing operation instruction, or a mask information editing operation instruction.

According to an embodiment of the present disclosure, in a case that the layer editing instruction includes location information updated for a specific layer element, the method further includes: the canvas control layer controls a canvas display auxiliary line bearing a design draft file view, and the auxiliary line is used for calibrating the position of a specific layer element in the moving process; determining whether the specific layer element is preset with a target element for alignment; under the condition that the specific layer element is preset with a target element, detecting whether the position of the specific layer element falls into a preset distance range of the target element; and under the condition that the position of the specific layer element is detected to fall within the preset distance range of the target element, automatically moving the specific layer element to the position aligned with the target element.

According to an embodiment of the present disclosure, converting the presentation information of the layer elements in the DSL data to generate target presentation information adapted to a front-end description language, including: converting the pattern information of the layer elements in the DSL data to generate target pattern information adaptive to a front-end description language; converting the element types of the layer elements in the DSL data to generate a universal element type adaptive to a front-end description language; and constructing a coordinate system according to the structure information of the layer elements in the DSL data, and converting the structure information of each layer element into target layout information under the coordinate system.

According to an embodiment of the present disclosure, parsing the metadata to generate specific domain description language DSL data for describing the layer elements in the design document file includes: analyzing the drawing board data in the metadata to obtain drawing board analysis data; and taking the drawing board analysis data as the input of a predefined DSL frame structure to generate DSL data.

According to the embodiment of the present disclosure, analyzing the drawing board data of the metadata to obtain drawing board analysis data, including: correcting coordinates of frames at two positions, namely a middle position and an inner position to obtain accurate coordinates which can be directly used; correcting the transparency according to the transparency transmission setting to obtain the accurate transparency which can be directly used; converting the relative coordinates into absolute coordinates; adjusting the origin of the coordinate system from the designated position to the origin of coordinates; cutting and correcting the content which exceeds the cutting area and needs to be cut; determining whether special element information, a slice area, an invisible area and a layer overlapping state exist or not; under the condition that special element information exists, analyzing and extracting the drawing board corresponding to the metadata and the original information of the special element, and proportionally mixing the original information corresponding to the special element into a special element example in the drawing board; hiding the image layer in the slice area under the condition that the slice area exists; under the condition that an invisible area exists, removing the information of the layer of the invisible area; and under the condition that the layer overlapping state exists, adjusting the hierarchical sequence based on the visual reasonable effect during overlapping rendering.

According to an embodiment of the present disclosure, the generating DSL data by using the drawing board parsing data as an input of a predefined DSL framework structure includes: taking the drawing board analysis data as input information of the DSL structure, and respectively generating layer data of each layer element; the DSL framework comprises: the method comprises the following steps of (1) obtaining element types, layer IDs, layer names, layer values, structure information, style information and sub-layer information of layer elements; the layer values include one or more of the following: graphic path information, text information, or picture information; and setting the multi-level sub-graph layer data of each layer element as data of the same level to obtain DSL data only containing one layer of parent-child layer relationship.

According to an embodiment of the present disclosure, acquiring metadata of the design document file includes: uploading the design draft file to a server in a compressed package form; and acquiring metadata extracted after the design draft file is decompressed from the server, wherein the metadata comprises layer information in a JSON format.

In a second aspect, embodiments of the present disclosure provide an apparatus for online processing of a file. The above-mentioned device includes: the device comprises a request receiving module, a metadata obtaining module, an analysis module, an information conversion module, a rendering layer content generating module and a rendering processing module. The request receiving module is used for receiving a design draft file and a preview request aiming at the design draft file. The metadata acquisition module is used for acquiring the metadata of the design draft file. The analysis module is used for analyzing the metadata and generating specific domain description language DSL data for describing the layer elements in the design draft file. The information conversion module is used for converting the display information of the layer elements in the DSL data and generating target display information adaptive to a front-end description language. And the rendering layer content generating module is used for generating the layer content of the rendering layer according to the target display information. And the rendering processing module is used for rendering the layer content of the rendered layer and generating a preview view of the design document file on a display interface corresponding to the preview request.

According to the embodiment of the disclosure, the rendering layer is configured with a corresponding auxiliary layer, and the auxiliary layer is used for performing editing control on the layer content of the rendering layer. The request receiving module is further configured to receive an editing instruction for editing an element in the previewed target design file. The above-mentioned device still includes: the operator is used for generating the layer content of the auxiliary layer according to the editing instruction; and the editing control module is used for editing and controlling the layer content of the target rendering layer in the target design draft file according to the layer content of the auxiliary layer to obtain the updated layer content of the target rendering layer. The rendering processing module is further configured to perform rendering processing on the updated layer content of the target rendered layer, and generate an updated view of the design draft file on a display interface corresponding to the editing instruction.

In a third aspect, embodiments of the present disclosure provide an electronic device. The electronic equipment comprises a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus; a memory for storing a computer program; the processor is used for realizing the file online processing method when executing the program stored in the memory.

In a fourth aspect, embodiments of the present disclosure provide a computer-readable storage medium. The computer readable storage medium has stored thereon a computer program which, when executed by a processor, implements the method of online processing of files as described above.

Some technical solutions provided by the embodiments of the present disclosure have at least some or all of the following advantages:

obtaining metadata of a design draft file; analyzing the metadata to generate DSL data for describing the layer elements in the design draft file, and converting the display information of the layer elements in the DSL data to generate target display information adapted to a front-end description language; the method has the advantages that real-time compiling and analyzing of the design draft file are achieved, data under the self system of the design software is converted into data which can be recognized by a front-end description language (such as CSS or HTML) and can be automatically generated to be used for rendering and editing of a browser without depending on the self capacity of any design software, and online rendering can be supported. In an application scene, a user only needs to upload a design draft file in a browser, and the browser can quickly display a preview view of the design draft through analysis and conversion operation; in addition, the DSL data obtained by analysis is separated from the design software, and convenience is provided for the subsequent on-line editing of the design draft file.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the disclosure.

In order to more clearly illustrate the embodiments of the present disclosure or technical solutions in the prior art, the drawings used in the description of the embodiments or related technologies will be briefly described below, and it is obvious for those skilled in the art to obtain other drawings without inventive labor.

FIG. 1 schematically illustrates a system architecture for a method of online processing of files suitable for use with an embodiment of the present disclosure;

FIG. 2 schematically illustrates a flow diagram of a method of online processing of a document according to an embodiment of the present disclosure;

fig. 3 schematically illustrates an implementation scenario of step S210 according to an embodiment of the present disclosure;

fig. 4 schematically shows a detailed implementation flowchart of step S230 according to an embodiment of the present disclosure;

fig. 5 schematically shows a detailed implementation flowchart of step S240 according to an embodiment of the present disclosure;

FIG. 6 schematically shows a flow diagram of a method of online processing of a file according to another embodiment of the present disclosure;

FIG. 7A schematically illustrates an architecture diagram of an auxiliary layer according to an embodiment of the disclosure;

FIG. 7B is a schematic diagram illustrating a display effect of an auxiliary layer control display interface according to an embodiment of the disclosure;

FIG. 8 schematically illustrates a flow diagram for online editing in a method of online processing of a file according to an embodiment of the present disclosure;

FIG. 9 schematically illustrates a flow diagram for online editing in a method of online processing of a file according to another embodiment of the present disclosure;

FIG. 10 schematically shows a block diagram of an apparatus for online processing of documents according to an embodiment of the present disclosure;

FIG. 11 is a schematic diagram illustrating a sequence of scene interactions for data processing by an apparatus for online processing of files according to an embodiment of the disclosure; and

fig. 12 schematically shows a block diagram of an electronic device provided by an embodiment of the present disclosure.

Detailed Description

The existing design draft online scheme involves multiple types of work, from design to online, the design time, the research and development time, the test online time and the like are included, the design time is long, the online process is complicated, the online efficiency is low, and a design picture generally needs several days from design completion to online adjustment perfection. In addition, because the UI designer currently makes a design draft by using Sketch software, and the file made by the UI designer generally only can adopt additional functions of a Sketch plug-in or software to export an Html (hypertext markup language) file, which depends heavily on specific design software, the design draft file and the Html exported by the plug-in or software cannot be directly identified and analyzed by a browser or a development language, and thus, the possibility of editing does not exist, and the Html file can only be used for previewing auxiliary development. Once the design file is removed from the specific design software or some necessary plug-ins, the design file cannot be previewed in the browser. However, these design software requires payment, and the corresponding purchase cost and deployment cost are high.

In view of this, embodiments of the present disclosure provide a method, an apparatus, an electronic device, and a medium for online processing of a file, which can implement analysis processing and preview of a design draft file by a browser without a plug-in, and in an application scenario, a user only needs to upload the design draft file in the browser, and the browser can quickly display a preview view of the design draft file through analysis and conversion operations; in addition, the DSL data and the target display information obtained by analysis are separated from the limitation of the plug-in analysis and description mode of the design software, and convenience is provided for the subsequent online editing of the design draft file. The scheme provided by the embodiment of the disclosure can be used for automatically processing design files designed by various types of design software (such as Sketch software, photoshop software and the like) and realizing online preview of the design files; in some embodiments including the auxiliary layer, online preview and online editing can be simultaneously realized.

To make the objects, technical solutions and advantages of the embodiments of the present disclosure more apparent, the technical solutions in the embodiments of the present disclosure will be described clearly and completely with reference to the drawings in the embodiments of the present disclosure, and it is obvious that the described embodiments are some, but not all, embodiments of the present disclosure. All other embodiments, which can be derived by a person skilled in the art from the embodiments disclosed herein without making any creative effort, shall fall within the protection scope of the present disclosure.

Fig. 1 schematically shows a system architecture of a method of online processing of a file applicable to an embodiment of the present disclosure.

Referring to fig. 1, a system architecture 100 applicable to the method for online processing of a file according to an embodiment of the present disclosure is a B (Browser)/S (Server) architecture, and includes:

terminal devices

101, 102, 103, a network 104 and a server 105. The network 104 is a medium for providing communication links between the

terminal devices

101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.

The user may use the

terminal devices

101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like. The

terminal devices

101, 102, 103 may have various web (network) side applications installed thereon, such as various types of browsers. In addition, other applications may also be installed, such as design-like applications, social software-like applications, mailbox clients, online shopping-like applications, and so forth.

The

terminal devices

101, 102, 103 may be various electronic devices having a display screen and supporting picture playing. For example, electronic devices include, but are not limited to, smart phones, tablet computers, notebook computers, desktop computers, and the like.

The server 105 may be a server that provides various services, such as a background management server (for example only) that provides service support for performing data parsing processing on a design document uploaded by a user using the

terminal devices

101, 102, and 103. The backend management server may analyze and otherwise process data such as a received processing request for the design document file, and feed back a processing result (e.g., metadata of the design document file) to the terminal device.

It should be noted that the method for processing a file online provided by the embodiment of the present disclosure may be generally executed by a terminal device. Accordingly, the device for online processing of files provided by the embodiment of the present disclosure may be generally disposed in a terminal device.

It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for an implementation.

A first exemplary embodiment of the present disclosure provides a method of online processing of a file.

FIG. 2 schematically shows a flow diagram of a method of online processing of a file according to an embodiment of the present disclosure.

Referring to fig. 2, a method for online processing of a file provided by an embodiment of the present disclosure includes the following steps: s210, S220, S230, S240, S250, and S260. The steps S210 to S260 may be performed by a web-end application on the terminal device, for example, the web-end application may be a browser or other web browsing application.

In step S210, a design document file and a preview request for the design document file are received.

The design draft file can be a file designed based on various design software such as Sketch software (a design software, the generated source file is in Sketch format), photoshop software (a design software, the generated source file is in psd format), and the like. The design file may include: in an embodiment of the present disclosure, the design document may include a static image.

Fig. 3 schematically illustrates an implementation scenario of step S210 according to an embodiment of the present disclosure.

In an implementation scenario, referring to fig. 3, a web page 300 on a terminal device is illustrated, a form of a window having a function button and a built-in window or triggering a pop-up after clicking the function button on the web page 300 is shown. For example, the function button may be a function button of the illustrated preview file 301 or an illustrated function button of the created template 302. For example, the web page 300 has a built-in window 303, and a user (for example, a UI designer) uploads a design document file in the built-in window 303 and clicks a function button of the preview file 301, as shown by a single arrow in fig. 3, so that the terminal device is regarded as receiving the design document file and a preview request for the design document file. Alternatively, for example, the user clicks a function button of the creation template 302, a window 303 for prompting the user to upload the design document file is popped up above the web page 300, the user (for example, a UI designer) uploads the design document file through the built-in window 303, and after the upload of the design document file is completed, the terminal device is regarded as receiving the design document file and a preview request for the design document file, which are shown by a double arrow in fig. 3.

In step S220, metadata of the design document is acquired.

According to an embodiment of the present disclosure, acquiring metadata of the design document file includes: uploading the design draft file to a server in a compressed package form; and acquiring metadata extracted after the design draft file is decompressed from the server.

In an embodiment, taking Sketch software as an example, a server performs class zip decompression on a design document file, stores and reads Meta (Meta) data in a JSON file, and the obtained Meta data includes layer information in a JSON format. When metadata extraction is carried out on other design software, a similar server extraction mode can be adopted, and therefore layer information in the JSON format is obtained.

In step S230, the metadata is parsed to generate specific domain description language DSL data for describing the layer elements in the design document file.

For example, the step S230 may be to implement the parsing processing by calling a stylesheet parser, which is a functional module implemented by JS (abbreviation of JavaScript, which is a high-level, multi-modal, interpreted programming language), language through the web page.

The step of obtaining DSL data by analyzing and processing the metadata is at least used for eliminating the complexity of JSON data carried by design draft files and summarizing and refining the design draft content required to be restored and presented in a service scene (namely a certain field).

In step S240, the display information of the layer elements in the DSL data is converted to generate target display information adapted to the front-end description language.

The front-end description language includes, for example, CSS (Cascading Style Sheets), which is a Style sheet language used to describe programs of HTML documents, HTML, or the like.

And further converting the display information of the layer elements in the DSL data to generate target display information adaptive to the front-end description language, so as to prepare for rendering adaptive to the current web page.

In step S250, the layer content of the rendered layer is generated according to the target display information.

In the embodiment of the disclosure, the rendering layer is a layer for rendering and displaying, the rendering layer includes one or more element layers, and the element layers corresponding to each element type, such as a graphic (container), a text (text), a picture (image), a path (path), a mask (mask), a group (group) and the like, are accurately positioned on a canvas and are combined to form a page after being arranged according to a preset layout. The target display information limits the display content and the display attribute of each layer element contained in the design draft file in a language mode which can be understood by the current web page, and the preview view can be obtained by correspondingly rendering after the layer content is generated.

In some embodiments, in order to superimpose some shadows or other effects in the element layer, the rendering layer may further include a box shadow layer that is used to expose the shadows and that is superimposed with the element layer to form the final page image.

In step S260, rendering the layer content of the rendered layer, and generating a preview view of the design document file on a display interface corresponding to the preview request.

The display interface corresponding to the preview request may be a web page of the terminal device, for example, a display interface of a browser.

Based on the steps S210-S260, acquiring metadata of the design draft file; analyzing the metadata to generate DSL data for describing the layer elements in the design draft file, and converting the display information of the layer elements in the DSL data to generate target display information adapted to a front-end description language; the method has the advantages that the design draft file is compiled and analyzed in real time, data under the system of the design software is converted into data which can be recognized by a front-end description language (such as a front-end development language CSS or HTML) and can be automatically generated to be used for rendering and editing of a browser without depending on the capacity of any design software, and online rendering can be supported. In an application scene, a user only needs to upload a design document file in a browser, and the browser can quickly display a preview view of the design document through analysis and conversion operation; in addition, the DSL data obtained by analysis is separated from the design software, and convenience is provided for the subsequent on-line editing of the design draft file.

In some embodiments, at least one of the following data may be stored for the design file that has been previewed: the DSL data, the target display information under the specific front-end description language and the layer content of the rendering layer under the specific front-end description language are convenient for subsequent editing operation to be carried out by directly utilizing the stored data when the online editing of the design draft file is carried out based on the same or different types of browsers in the same or other terminal equipment. The stored operation can be performed by a functional module with functions of data storage management, data call or access authority: a data manager.

Fig. 4 schematically shows a detailed implementation flowchart of step S230 according to an embodiment of the present disclosure.

Referring to fig. 4, according to an embodiment of the present disclosure, in the step S230, performing parsing processing on the metadata to generate specific domain description language DSL data for describing the layer elements in the design document file, includes the following steps: s410 and S420.

In step S410, the drawing board data in the metadata is analyzed to obtain drawing board analysis data.

According to an embodiment of the present disclosure, in the step S410, analyzing the drawing board data of the metadata to obtain drawing board analysis data, including the following steps:

frame processing: correcting coordinates of frames at two positions, namely a middle position and an inner position to obtain accurate coordinates which can be directly used;

a transparency processing step: correcting the transparency according to the transparency transmission setting to obtain the accurate transparency which can be directly used;

and a coordinate conversion processing step: converting the relative coordinates into absolute coordinates so as to remove the coordinate dependence between the image layers and facilitate subsequent independent operation;

coordinate system origin processing step: the origin of the coordinate system is adjusted to the origin of coordinates (0, 0) from the designated position, so that the direct use of subsequent coordinates is facilitated;

a mask cutting treatment step: cutting and correcting the content which exceeds the cutting area and needs to be cut, and ensuring that the subsequent content is not overflowed in use;

determining whether special element information, a slice area, an invisible area and a layer overlapping state exist or not;

if the special component information exists, executing a special component information analysis step: analyzing and extracting the original information of the drawing board and the special element corresponding to the metadata, and proportionally mixing the original information corresponding to the special element into the special element example in the drawing board;

in the case where there is a slice region, a slice processing step is performed: hiding the image layer in the slicing area to avoid the subsequent existence of repeated information in the same area;

in the case where there is an invisible region, a slicing processing step is performed: removing information of the layer of the invisible area, and removing useless information displayed to reduce the size of the description information;

and under the condition that the layer overlapping state exists, executing a hierarchical occlusion processing step: and adjusting the hierarchical sequence based on the visual reasonable effect during the superposition rendering, so as to ensure the normal subsequent superposition rendering.

The special element is, for example, a Symbol in Sketch or a smart layer object in PS, and this kind of information is defined as a vector, and can be arbitrarily scaled down and enlarged for use, so that scaling and processing are required according to actual use.

In an embodiment, as shown in fig. 4, the metadata analysis of the sketch design document is taken as an example, and a case where the special element information (specifically, symbol), the slice region, the invisible region, and the layer overlay state all exist is taken as an example.

In step S420, the drawing board parsing data is used as an input of a predefined DSL framework structure, so as to generate DSL data.

According to an embodiment of the present disclosure, in the step S420, the generating DSL data by using the sketchpad parsing data as an input of a predefined DSL framework structure includes the following steps:

an information generation step: taking the drawing board analysis data as input information of the DSL structure, and respectively generating layer data of each layer element;

data leveling step: and setting the multi-level sub-graph layer data of each layer element as data of the same level to obtain DSL data only containing one layer of parent-child layer relationship. In the step, the data structures with a plurality of hierarchies are leveled to the same level, so that the follow-up query and the use efficiency are facilitated.

Wherein, the DSL framework comprises: the element type, the layer ID, the layer name, the layer value, the structure information, the style information and the sub-layer information of the layer element. The layer values include one or more of the following: graphical path information, text information, or picture information.

In the case that the element type of the layer element is a path, the layer value includes graphic path information. When the element type of the layer element is a picture, the layer value includes picture information. In the case that the element type of the layer element is text, the layer value includes text information.

Referring to fig. 4, the information generation step is illustrated with respect to the case, structure information, and style information corresponding to each layer value. In the step of generating the structure information, the structure information of the image layer is mainly rendered (rendered based on the DSL framework, and other renderings in this segment have the same meaning as that of the DSL framework), and includes coordinate information, length and width information, and frame information. In the step of generating style information, style information of the rendering layer mainly includes projection information, corner information, background information, and the like. In the step of generating the graphics path information, information of rendering vector graphics is mainly used to convert the graphics into the path information that can be described. In the step of generating text information, the text information is mainly rendered, and includes a single line of text and multiple lines of text. In the step of generating picture information, information of rendering a picture is mainly used.

According to an embodiment of the present disclosure, the metadata includes layer information in a JSON format. The display information includes: style information, element types, and structure information, the structure information including: coordinate information, width and height dimension information, and border information.

Fig. 5 schematically shows a detailed implementation flowchart of step S240 according to an embodiment of the present disclosure.

Referring to fig. 5, in step S240, performing conversion processing on the presentation information of the layer elements in the DSL data to generate target presentation information adapted to a front-end description language, includes the following steps: s510, S520, and S530.

In step S510, the style information of the layer elements in the DSL data is converted to generate target style information adapted to the front-end description language.

For example, in an embodiment, style information (Style Object) in DSL data is converted into Style information (CSS) that can be understood by a browser, and this information can describe page presentation of various elements (which may be layer elements, sub-layers, and the like) in a design draft file at the browser end.

In step S520, the element types of the layer elements in the DSL data are converted to generate a generic element type adapted to the front-end description language.

For example, in this embodiment, the common element types include: graphics (container), text (text), picture (image), path (path), mask (mask), group (group), and these 6 elements can describe which category of sub-elements the design is composed of.

The above steps S510 and S520 may be performed by a functional block of a data converter.

In step S530, a coordinate system is constructed according to the structure information of the layer elements in the DSL data, and the structure information of each layer element is converted into target layout information in the coordinate system.

DSL data describing the design draft file records structural information of each element in the design draft, including coordinate information, width and height information, rotation information, border information, transparency information, and the like. A coordinate system, such as a vertex coordinate system or a center coordinate system, is constructed from these pieces of structural information, and layout information of each element is calculated.

The above step S530 may be performed by a functional module of a layout calculator.

For example, the type example of taking the layer element as the text layer has unique attribute information of text content and text style besides some common attributes. Illustratively, the structure information of the layer elements is in the form of:

the content area of the design draft is canvas, all elements are distributed in the canvas, and then the position information of all elements in the design draft is described by means of a vertex coordinate system. And constructing a central point coordinate system by using the central point of the canvas for calculating the position information of each element after zooming.

In order to realize online preview and online editing operation of the design draft file at the same time, a hierarchical processor is constructed to execute an image rendering process, and the hierarchical processor comprises two types of layers, namely a rendering layer and an auxiliary layer. The rendering layer is a layer for rendering and displaying, and the auxiliary layer is a layer for performing editing control on the layer content of the rendering layer.

By setting two layers of a rendering layer and an auxiliary layer and editing and controlling the layer content of the rendering layer based on the auxiliary layer, not only can the file preview separated from design software be realized, but also the preview file can be used as a template, the previewed file is edited on line based on a browser, and the updated design file based on the template is obtained, so that the online efficiency of the design draft file is greatly improved.

According to the embodiment of the disclosure, a rendering layer is configured with a corresponding auxiliary layer, and the auxiliary layer is used for performing editing control on the layer content of the rendering layer. In the execution process of steps S210 to S260, since there is no editing on the layer content in the preview request, the auxiliary layer does not need to update the layer content of the rendered layer.

FIG. 6 schematically shows a flow diagram of a method of online processing of a file according to another embodiment of the present disclosure.

The method for online processing of files provided by another embodiment of the present disclosure includes, in addition to the above steps S210 to S260, the following steps: s610, S620, S630, and S640, for simplicity, only steps S610 to S640 are illustrated in fig. 6.

In step S610, an editing instruction for editing the previewed target design document file is received.

One or more designed draft files are previewed, and the designed draft files needing to be edited are described as target designed draft files. As can be seen from the foregoing description, the intermediate processing data (one or more items of data such as DSL data corresponding to steps S210 to S260, target presentation information in the specific front-end description language, and layer content of the rendered layer in the specific front-end description language) of the previewed design document file may be stored by the data manager.

For example, in an implementation scenario, a UI designer first uploads a design document T in a browser X of a terminal device a, steps S210 to S260 are executed corresponding to the terminal device a, a preview view of the design document is displayed in the browser X, the display content of the preview view is consistent with the content of the design document, and the terminal device a stores the preview view as a design document template M by itself or in response to a user request _T 。

In the implementation scenario of step S610, the user may invoke the template data corresponding to the previewed design document stored before the web page of the current terminal device. The user in step S610 may be, for example, a member in the data access right group of the same design draft file, such as an operator, a designer, or a front-end developer.

If the UI designer or operator has a need for online editing and modification of the design file, such as: modifying a text content, replacing a picture, modifying an attribute of a graphic, and the like, the UI designer or system operator (who has assigned corresponding data access right in the data manager) can modify the design draft template M on the terminal device a or other terminal device B based on the same browser X or another browser Y _T And performing online editing.

In step S620, the layer content of the auxiliary layer is generated according to the editing instruction.

According to an embodiment of the present disclosure, the editing instruction includes at least one of: layer editing instructions, canvas editing instructions, or text editing instructions.

FIG. 7A schematically illustrates an architecture diagram of an auxiliary layer according to an embodiment of the disclosure.

According to an embodiment of the present disclosure, as shown in fig. 7A, the auxiliary layer 700 includes a layer control layer 710, a canvas control layer 720, and a text editing layer 730. The layer control layer is used for performing layer editing control under the layer editing instruction, the canvas control layer is used for performing canvas editing control under the canvas editing instruction, and the text editing layer is used for performing text editing control under the text editing instruction.

Generating the layer content of the auxiliary layer according to the editing instruction, wherein the layer content comprises at least one of the following items: generating a layer updating instruction of the layer control layer according to the layer editing instruction; generating a canvas updating instruction of the canvas control layer according to the canvas editing instruction; and generating a text updating instruction of the text editing layer according to the text editing instruction.

In step S630, according to the layer content of the auxiliary layer, performing editing control on the layer content of the target rendering layer of the target design draft file, so as to obtain an updated layer content of the target rendering layer.

Wherein, according to the layer content of the auxiliary layer, performing editing control on the layer content of the target rendering layer to obtain the updated layer content of the target rendering layer, and the method includes: and editing and controlling the layer content of the target rendering layer according to at least one of the layer updating instruction, the canvas updating instruction or the text updating instruction to obtain the updated layer content of the rendering layer.

Fig. 7B schematically illustrates a display effect diagram of an auxiliary layer control display interface according to an embodiment of the present disclosure.

In fig. 7B, a view background area presented by the design draft is wholly indicated by a dashed box, a canvas 701 is an area for bearing layer elements, and an ellipse, a triangle, a square box, and the like are used for indicating various layer elements.

According to an embodiment of the present disclosure, as shown in fig. 7A, the image layer control layer 710 includes a selection layer 711 and a mask layer 712; the selection layer 711 is configured to highlight the content of the selected layer in the rendered layer, and as shown in fig. 7B, one layer element is used as a schematic of the selection layer, for example, a text layer corresponding to a square box is used as an example of the selected layer, and an effect of the selected layer is indicated by the square box in a bold form, at this time, the text layer corresponds to the specific layer content of the selection layer 711, and the attribute panel 7111 corresponding to the selection layer 711 is an attribute panel of the text layer and is also presented on the display interface 70.

And for each layer element, the user can select the layer element and the selected layer can carry out editing control. The above selection layer 711 and the property panel 7111 of the above selection layer are used to be applied with one or more of the following editing operations: position information editing operation, hierarchy information editing operation, combined information editing operation, and general style editing operation.

In fig. 7B, when layer elements in other rendered layers are selected, the layer content of the corresponding selection layer 711 changes.

The mask layer 712 is used to display mask shapes and elements cut by the mask, and the property panel of the mask layer 712 is used to be applied with a mask information editing operation, which is not illustrated in fig. 7B.

In one embodiment, the position information editing operation comprises moving, width and height modification, rotation and the like.

In one embodiment, the hierarchical information editing operations include adjustment of the stacking order of elements within the canvas.

In one embodiment, the information editing operation is combined, including combining multiple elements into a new element.

In one embodiment, the universal style editing operation includes editing universal styles such as filling, borders, shadows, fuzziness, and the like for various types of layer elements (including graphics, text, pictures, paths, masks, combinations, and the like). There are unique styles that are unique to each of the picture class element and the text class element, for example, there are content styles such as font size, font style, inter-font distance, inter-line distance, word alignment, word embellishments (including bolding, tilting, underlining, strikethrough), and the like, for the text class element.

In one embodiment, the mask information editing operations include modifying the shape of the mask, changing the area of the element that is cut by the mask by moving the element, and the like.

Referring to FIG. 7A, the canvas control layer 720 includes a reference line layer 721 for showing auxiliary lines and a zoom layer 722 for zooming the canvas 701 according to the canvas zoom instruction. In fig. 7B, the auxiliary lines are illustrated by crossing cross broken lines and four lines of the frame of the layer.

Referring to fig. 7A, the text editing layer 730 includes: a text content input layer 731 and a text style attribute layer 732; the text editing instruction comprises an editing instruction for changing the text content and the text style.

Layer attribute information and personalized attribute information (e.g., text style attributes) for each layer element may be presented simultaneously in attribute panel 7111, with reference to the personalized attribute information indicated by the upper dashed box and the generic layer attribute information indicated by the lower dashed box in fig. 7B.

In the single-click selected state, only the generic layer attribute information for the text layer may be modified via the attribute panel corresponding to the text layer, as shown, for example, in the lower dashed box in attribute panel 7111 in fig. 7B. When editing of the text layers is required, the text content may be modified by double-clicking the text content input layer 731 in the text editing layer 730, or the content style may be edited in the text style property layer 732 displayed in the property panel, for example, as shown in the upper dashed box in the property panel 7111 in fig. 7B.

In step S640, the content of the updated layer of the target rendered layer is rendered, and an updated view of the design document file is generated on a display interface corresponding to the editing instruction.

The steps { S610, S620, S630, S640} and the steps { S210, S220, S230, S240, S250, S260} may be executed by the same browser on the same terminal device, or may be executed by different browsers on the same terminal device or different terminal devices.

Some embodiments of the draft file editing are described below.

According to an embodiment of the present disclosure, the layer editing instruction includes: an instruction is selected aiming at the layer of the specific layer element; the specific layer element comprises: and the image layer elements of various types such as graphics, text, pictures, paths, masks, combinations and the like.

FIG. 8 schematically shows a flow diagram of online editing in a method of online processing of a file according to an embodiment of the present disclosure.

In this embodiment, the editing instruction in step S610 is used as a layer selection instruction to describe, and the description of steps S210 to S260 is omitted, and the detailed flow of editing the design draft is mainly described.

Referring to fig. 8, the process of performing online editing includes the following steps: s610a, S810, S820, S620a, S630a, and S640a.

In step S610a, a layer selection instruction for selecting a specific layer element in the previewed target design document file is received. The step S610a is an embodiment of the step S610, and the step S610 may have other embodiments.

In step S810, a form configuration item corresponding to the display attribute of the specific layer element is determined.

In step S820, an attribute panel of the specific layer element is displayed according to the form configuration item.

In step S620a, according to the layer selection instruction, a layer update instruction of the layer control layer is generated, where the layer update instruction includes: and selecting the specific layer element. The step S620a is an embodiment of the step S620, and the step S620 may have other embodiments.

In step S630a, according to the layer update instruction of the layer control layer, a selection operation is performed on a specific layer element of a target rendering layer of the target design draft file, so as to obtain an updated layer content of the target rendering layer. The step S630a is an embodiment of the step S630, and the step S630 may have other embodiments.

In step S640, rendering the updated layer content of the target rendered layer, and generating an updated view of the design draft file on a display interface corresponding to the editing instruction.

The step S640 includes a step S640a of rendering an element selection effect in the preview view of the design document file to obtain an updated view of the design document file.

For example, as shown in fig. 7B, the updated view of the selected effect of the text-layer element in the design document file and the attribute panel of the text-layer element are both displayed on the display interface 70.

According to the embodiment of the disclosure, after a specific layer element is selected, the specific layer element may be operated or an attribute panel of the specific layer element may be edited. Correspondingly, the layer editing instruction includes: and at least one of an operation instruction or an attribute editing instruction of the layer.

Receiving an editing instruction for editing the previewed design document file includes: receiving at least one of a property editing instruction for the property panel or an operation instruction for a specific layer element in the preview view; the operation instruction comprises one or more of the following: a position information editing operation instruction, a hierarchy information editing operation instruction, a combination information editing operation instruction, a general style editing operation instruction, or a mask information editing operation instruction.

FIG. 9 schematically shows a flow diagram of online editing in a method of online processing of a file according to another embodiment of the present disclosure.

According to another embodiment of the present disclosure, the process of performing online editing comprises the steps of: s610b, S620b, S630b, S640b, S910, S920, S930, and S940.

In step S610b, a layer editing instruction for updating the position information of the specific layer element in the previewed target design document file is received.

In step S620b, a layer updating instruction of the layer control layer is generated according to the layer editing instruction for updating the position information, where the layer updating instruction includes: and updating the position information of the specific layer element.

In step S630b, according to the layer update instruction of the layer control layer, a position moving operation is performed on a specific layer element of a target rendering layer of the target design draft file, so as to obtain an updated layer content of the target rendering layer.

The step S640 includes the following steps S640b: and rendering the effect of the moved elements in the preview view of the design draft file to obtain an updated view of the design draft file.

In some embodiments, for the same design document file, rendering may be performed directly based on the content of the updated layer under the condition that different browsers perform preview and editing, respectively. In other embodiments, the dynamic rendering is performed directly on the basis of the preview view under the condition that the same browser performs preview and editing on the same design file.

In step S910, the canvas control layer controls a canvas carrying the design document view to display an auxiliary line, where the auxiliary line is used to calibrate a position of a specific layer element in the moving process.

For example, as shown in fig. 7B, the specific layer element is a picture layer element schematically illustrated by an ellipse, in the process of moving the picture layer element, an auxiliary line is displayed on a canvas 701, and 6 auxiliary lines are illustrated in fig. 7B.

In step S920, it is determined whether the specific layer element is preset with a target element for alignment.

In step S930, in a case that the specific layer element has a target element in advance, it is detected whether the position of the specific layer element falls within a preset distance range of the target element. For example, the preset distance range is within 4 pixels.

In step S940, in a case that it is detected that the position of the specific layer element falls within the preset distance range of the target element, the specific layer element is automatically moved to a position aligned with the target element.

Based on steps S910 to S940, the auxiliary line may be displayed based on the control of the canvas control layer when the layer elements are moved, so that the user may conveniently align the moving element and the target element with reference to the auxiliary line when manually moving the layer elements; meanwhile, by setting the logic of automatic judgment, under the condition that the target elements are preset by a user, the mobile elements falling into the alignment range can be automatically aligned on the web page without manual alignment, and the editing efficiency and the convenience are improved.

A second exemplary embodiment of the present disclosure provides an apparatus for online processing of a file.

Fig. 10 schematically shows a block diagram of a device for online processing of a file according to an embodiment of the present disclosure.

Referring to fig. 10, an apparatus 1000 for online processing of a file according to an embodiment of the present disclosure includes: a request receiving module 1001, a metadata obtaining module 1002, a parsing module 1003, an information converting module 1004, a rendering layer content generating module 1005 and a rendering processing module 1006.

Referring to fig. 10, the request receiving module 1001 is configured to receive a design document file and a preview request for the design document file.

The metadata obtaining module 1002 is configured to obtain metadata of the design document file.

The parsing module 1003 is configured to parse the metadata to generate specific domain description language DSL data for describing the layer elements in the design draft file.

The information conversion module 1004 is configured to perform conversion processing on the presentation information of the layer elements in the DSL data, and generate target presentation information adapted to a front-end description language.

The rendering layer content generating module 1005 is configured to generate the layer content of the rendering layer according to the target display information.

The rendering module 1006 is configured to render the layer content of the rendered layer, and generate a preview view of the design document file on a display interface corresponding to the preview request.

According to the embodiment of the disclosure, the rendering layer is configured with a corresponding auxiliary layer, and the auxiliary layer is used for performing editing control on the layer content of the rendering layer.

Referring to the two-dot chain line arrow in fig. 10, the request receiving module 1001 is further configured to receive an editing instruction for editing an element in the previewed target design document file.

The apparatus 1000 further comprises: an operator 1007, where the operator 1007 is configured to generate the layer content of the auxiliary layer according to the editing instruction; and the editing control module is used for editing and controlling the layer content of the target rendering layer in the target design draft file according to the layer content of the auxiliary layer to obtain the updated layer content of the target rendering layer. For example, the operators 1007 include layer operators, canvas operators, and text operators, which may correspond to operations performed by each of the layer control layer 710, the canvas control layer 720, and the text editing layer 730.

According to an embodiment of the present disclosure, the apparatus 1000 further includes: a data manager 1008, configured to store at least one of the following data for the design document that has been previewed: DSL data, target display information under a specific front-end description language, and layer content of a rendering layer under the specific front-end description language, and data about the previewed design draft file is sent to a hierarchical processor. The data manager 1008 is capable of performing, in cooperation with the operator 1007, an operation of performing editing control on layer contents of a target rendering layer in the target design draft file; for example, the data manager 1008 is further configured to buffer layer contents of auxiliary layers generated according to the editing instruction in the operator 1007, and transmit data buffered by the operator 1007 to the hierarchical processor for execution in an active transmission manner or a manner that the data is read by the hierarchical processor.

Any number of the functional modules included in the apparatus 1000 may be combined into one module to be implemented, or any one of the functional modules may be split into multiple modules. For example, referring to fig. 10, the information conversion module 1004 may be split into two functional modules, namely, a data converter and a layout calculator, where the data converter is configured to perform conversion processing on the style information of the layer elements in the DSL data to generate target style information adapted to a front-end description language; and the method is used for converting the element types of the layer elements in the DSL data to generate a general element type adapted to the front-end description language. The layout calculator is used for constructing a coordinate system according to the structure information of the layer elements in the DSL data and converting the structure information of each layer element into target layout information under the coordinate system. Alternatively, at least part of the functionality of one or more of these modules may be combined with at least part of the functionality of the other modules and implemented in one module. For example, referring to fig. 10, the rendering layer content generating module 1005 and the rendering processing module 1006 may be combined in the same functional module: in a hierarchical processor.

At least one of the functional modules included in the apparatus 1000 may be implemented at least partially as a hardware circuit, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented by hardware or firmware in any other reasonable manner of integrating or packaging a circuit, or implemented by any one of three implementations of software, hardware, and firmware, or implemented by any suitable combination of any of them. Alternatively, at least one of the functional modules comprised by the apparatus 1000 described above may be at least partially implemented as a computer program module, which when executed may perform the corresponding function.

The renderer includes: under the functional module frameworks corresponding to the data converter, the layout calculator and the layering processor, the operation of a user is executed through an operator, the data manager is connected between the renderer and the data manager to interact data, and the operator comprises a layer operator, a canvas operator and a text operator.

The interactive process of the user performing the editing operation on the design file can be simplified as follows:

firstly, clicking an element of a layer by a user according to needs to perform selection operation, wherein the selection of the element can be understood as selection of the layer (related behaviors or operations related to the layer are put in a layer manager for unified management);

then, according to the selected layer element, an attribute panel corresponding to the form configuration item of the attribute of the selected layer element is generated and displayed, for example, the attribute panel 7111 displayed on the right side in fig. 7B;

then, processing direct operation or indirect attribute modification operation of the user on the design draft element to generate new element data;

and finally, the new element data is transmitted to the data manager, and the data manager can update the original data and inform the renderer of updating the view, so that online real-time editing is realized.

Fig. 11 schematically shows a scene interaction timing diagram of data processing by the device for online processing of files according to the embodiment of the disclosure.

For example, referring to FIG. 11, an interaction process between a web application on a device for online processing of the file, such as a browser 1102, and a user 1101 and a server 1103 is illustrated.

The user 1101 uploads a design document file to the browser 1102 interface of the apparatus, and the browser packages the design document file and uploads the packaged design document file to the server 1103. And performing similar zip decompression on the server 1103, and extracting metadata of the obtained design draft file, wherein the metadata is a layer file in a JSON format. After receiving the metadata, the browser 1102 parses the metadata to generate DSL data (for example, the DSL data may be parsed by a design document parser), converts the presentation information of the layer elements in the DSL data, and generates target presentation information adapted to the front-end description language, that is, parses the DSL data into renderable data (including design document elements, auxiliary elements (for example, shadow effects), attribute information of each element, and the like) that can be understood by the browser, renders style structure information of the design document elements based on a hierarchical processor, and presents a preview view that is consistent with the page of the design document on an interface of the browser 1102. In addition, the data manager stores intermediate processing result data of the preview design document, for example, target presentation information, and may store the information in the browser memory. Based on the settings of the rendering layer and the auxiliary layer, the preview view presented on the browser interface is editable, the user 1101 can select a specific element in the middle page, and the browser can determine a form configuration item corresponding to the element attribute according to the element selected by the user and display a corresponding attribute panel on the interface.

The user 1101 may modify the attribute of the element on the attribute panel or directly manipulate each element to perform various editing operations (picture replacement, text editing, combination hierarchy change, modification mask, etc.), and the operator captures each operation of the user and generates new element data (in some embodiments, it may be whole data including update data; in other embodiments, it may be only update data) based thereon, and transmits the generated new element data to the data manager. And submitting the data to the hierarchical processor through the data manager, informing the hierarchical processor to render the new element data, and presenting an updated view in a browser interface.

A third exemplary embodiment of the present disclosure provides an electronic apparatus.

Referring to fig. 12, an electronic device 1200 provided by the embodiment of the present disclosure includes a processor 1201, a communication interface 1202, a memory 1203, and a communication bus 1204, where the processor 1201, the communication interface 1202, and the memory 1203 complete communication with each other through the communication bus 1204; a memory 1203 for storing a computer program; the processor 1201 is configured to implement the method for processing a file online as described above when executing a program stored in the memory.

A fourth exemplary embodiment of the present disclosure also provides a computer-readable storage medium. The computer readable storage medium has a computer program stored thereon, and the computer program realizes the method for processing files online as described above when being executed by a processor.

The computer-readable storage medium may be contained in the apparatus/device described in the above embodiments; or may be present alone without being assembled into the device/apparatus. The computer-readable storage medium carries one or more programs which, when executed, implement the method according to an embodiment of the disclosure.

According to embodiments of the present disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example but is not limited to: a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

It is noted that, in this document, relational terms such as "first" and "second," and the like, are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus.

The previous description is only for the purpose of describing particular embodiments of the present disclosure, so as to enable those skilled in the art to understand or implement the present disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the disclosure. Thus, the present disclosure is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for online processing of a document, comprising:

receiving a design file and a preview request aiming at the design file;

acquiring metadata of the design draft file;

analyzing the metadata to generate specific field description language (DSL) data for describing the layer elements in the design draft file;

converting the display information of the layer elements in the DSL data to generate target display information adaptive to a front-end description language;

generating layer content of a rendering layer according to the target display information;

rendering the layer content of the rendered layer, and generating a preview view of the design draft file on a display interface corresponding to the preview request.

2. The method according to claim 1, wherein the rendering layer is configured with a corresponding auxiliary layer, and the auxiliary layer is used for performing editing control on layer contents of the rendering layer;

the method further comprises the following steps:

receiving an editing instruction for editing the previewed target design draft file;

generating layer content of the auxiliary layer according to the editing instruction;

according to the layer content of the auxiliary layer, performing editing control on the layer content of a target rendering layer of the target design draft file to obtain updated layer content of the target rendering layer;

rendering the updated layer content of the target rendering layer, and generating an updated view of the design draft file on a display interface corresponding to the editing instruction.

3. The method of claim 2, wherein the editing instructions comprise at least one of: layer editing instructions, canvas editing instructions or text editing instructions; the auxiliary layer comprises a layer control layer, a canvas control layer and a text editing layer;

generating the layer content of the auxiliary layer according to the editing instruction, wherein the layer content of the auxiliary layer comprises at least one of the following items:

generating a layer updating instruction of the layer control layer according to the layer editing instruction;

generating a canvas updating instruction of the canvas control layer according to the canvas editing instruction;

generating a text updating instruction of the text editing layer according to the text editing instruction;

according to the layer content of the auxiliary layer, performing editing control on the layer content of a target rendering layer of the target design draft file to obtain an updated layer content of the target rendering layer, including:

and according to at least one of the layer updating instruction, the canvas updating instruction or the text updating instruction, performing editing control on the layer content of the target rendering layer to obtain the updated layer content of the target rendering layer.

4. The method of claim 3,

the layer control layer comprises a selection layer and a mask layer, the selection layer is used for highlighting the content of the selected layer in the rendering layer, and the selection layer and the attribute panel of the selection layer are used for being applied with one or more of the following editing operations: position information editing operation, hierarchy information editing operation, combined information editing operation and universal style editing operation; the masking layer is used for displaying the shape of the masking and elements cut by the masking, and the attribute panel of the masking layer is used for being subjected to masking information editing operation;

the canvas control layer comprises a reference line layer and a zooming layer, wherein the reference line layer is used for showing auxiliary lines, and the zooming layer is used for zooming the canvas according to a canvas zooming instruction;

the text editing layer comprises: a text content input layer and a text style attribute layer; the text editing instructions comprise editing instructions for changing the text content and the text style.

5. The method according to claim 3 or 4, wherein the layer editing instruction comprises: an instruction is selected aiming at the layer of the specific layer element;

under the condition that the layer selection instruction is received, the method further comprises the following steps: determining a form configuration item corresponding to the display attribute of the specific layer element; displaying an attribute panel of the specific layer element according to the form configuration item;

rendering the updated layer content of the target rendered layer, and generating an updated view of the design draft file on a display interface corresponding to the editing instruction, including:

rendering an element selection effect in the preview view of the design draft file to obtain an updated view of the design draft file;

and the attribute panel and the updated view are displayed on a display interface corresponding to the editing instruction.

6. The method according to claim 5, wherein the layer editing instructions further comprise: at least one of an operation instruction or an attribute editing instruction of the layer;

the receiving of the editing instruction for editing the previewed design document file includes:

receiving at least one of a property editing instruction for the property panel or an operation instruction for a particular layer element in the preview view;

the operation instruction comprises one or more of the following: a position information editing operation instruction, a hierarchy information editing operation instruction, a combination information editing operation instruction, a general style editing operation instruction, or a mask information editing operation instruction.

7. The method according to claim 3 or 4, wherein in case that the layer editing instruction includes updating location information for a specific layer element, the method further comprises:

the canvas control layer controls canvas display auxiliary lines bearing a design draft file view, and the auxiliary lines are used for calibrating the positions of specific layer elements in the moving process;

determining whether the specific layer element is preset with a target element for alignment;

under the condition that the specific layer element is preset with a target element, detecting whether the position of the specific layer element falls into a preset distance range of the target element;

and under the condition that the position of the specific layer element is detected to fall into the preset distance range of the target element, automatically moving the specific layer element to a position aligned with the target element.

8. The method of claim 1, wherein converting presentation information of layer elements in the DSL data to generate target presentation information adapted to a front-end description language comprises:

converting the pattern information of the layer elements in the DSL data to generate target pattern information adaptive to a front-end description language;

converting the element types of the layer elements in the DSL data to generate a universal element type adaptive to a front-end description language;

and constructing a coordinate system according to the structure information of the layer elements in the DSL data, and converting the structure information of each layer element into target layout information under the coordinate system.

9. The method according to claim 1, wherein parsing the metadata to generate domain-specific description language DSL data for describing layer elements in the design draft file comprises:

analyzing the drawing board data in the metadata to obtain drawing board analysis data;

and taking the drawing board analysis data as the input of a predefined DSL frame structure to generate DSL data.

10. The method of claim 9, wherein parsing the palette data of the metadata to obtain palette parsed data comprises:

correcting coordinates of frames at two positions, namely a central position and an internal position, so as to obtain accurate coordinates which can be directly used;

correcting the transparency according to the transparency transmission setting to obtain the accurate transparency which can be directly used;

converting the relative coordinates into absolute coordinates;

adjusting the origin of the coordinate system from the designated position to the origin of coordinates;

cutting and correcting the content which exceeds the cutting area and needs to be cut;

under the condition that special element information exists, analyzing and extracting the drawing board corresponding to the metadata and original information of the special element, and proportionally mixing the original information corresponding to the special element into a special element example in the drawing board;

hiding the image layer in the slice area under the condition that the slice area exists;

under the condition that the invisible area exists, rejecting information of the layer of the invisible area;

and under the condition that the layer overlapping state exists, adjusting the hierarchical sequence based on the visual reasonable effect during overlapping rendering.

11. The method of claim 9, wherein generating DSL data using the palette parsing data as input to a predefined DSL framework structure comprises:

taking the drawing board analysis data as input information of the DSL structure, and respectively generating layer data of each layer element; the DSL framework comprising: the method comprises the following steps of (1) obtaining element types, layer IDs, layer names, layer values, structure information, style information and sub-layer information of layer elements; the layer values include one or more of: graphic path information, text information, or picture information;

and setting the multi-level sub-graph layer data of each layer element as data of the same level to obtain DSL data only containing one layer of parent-child layer relationship.

12. An apparatus for online processing of documents, comprising:

the device comprises a request receiving module, a preview module and a preview module, wherein the request receiving module is used for receiving a design draft file and a preview request aiming at the design draft file;

the metadata acquisition module is used for acquiring metadata of the design draft file;

the analysis module is used for analyzing the metadata to generate DSL data for describing the layer elements in the design draft file;

the information conversion module is used for converting the display information of the layer elements in the DSL data to generate target display information adaptive to a front-end description language;

the rendering layer content generating module is used for generating layer content of a rendering layer according to the target display information;

and the rendering processing module is used for rendering the layer content of the rendering layer and generating a preview view of the design draft file on a display interface corresponding to the preview request.

13. An electronic device is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus;

a memory for storing a computer program;

a processor for implementing the method of any one of claims 1 to 11 when executing a program stored on a memory.

14. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the method of any one of claims 1-11.