Graphical interface development method and device, storage medium and product

Abstract

The invention provides a graphical interface development method and device, a storage medium and a product, and relates to the field of computers. The method comprises the following steps: acquiring a to-be-processed graphic data source file, and analyzing the graphic data source file to obtain internal graphic element data; performing size adjustment processing on the internal primitive data to obtain adjusted primitive data adapted to the current drawing board; drawing according to the adjusted primitive data to obtain drawing graph data; writing the drawing graphic data into a graphic file to obtain a local graphic file; and in response to a graphical interface display request of the application program, calling the local graphic file to perform interface generation processing so as to display a graphical interface including the drawing graphic data. According to the method, the efficiency of graphical interface development is improved.

Description

Technical Field

[0001] The present application relates to the field of computers, and in particular to a graphical interface development method, device, storage medium and product. Background Art

[0002] The current user interface development technology mainly builds a graphical interface by using pre-prepared image resources and system controls, and displays the interface and its changes by loading images, switching images, and refreshing controls. However, when the images are large or numerous, the interface rendering burden will increase significantly, which may cause the interface to freeze; when the graphical interface is complex, a large amount of code needs to be written to implement the interface change logic, which increases the development workload.

[0003] In the prior art, a graphical interface is generally constructed by using pre-prepared image resources and system controls, and the interface and its changes are displayed by loading images, switching images, and refreshing controls; some graphical interfaces customize drawing codes by rewriting controls, and implement interface functions by code drawing. This method solves the interface rendering burden caused by a large number of image resources to a certain extent, but it also cannot solve the problem of universal code, that is, different drawing codes need to be customized and developed for different needs.

[0004] However, the existing technologies have problems such as lightness, flexibility, versatility and heavy burden of interface rendering, which in turn lead to technical problems of low efficiency in graphical interface development. Summary of the invention

[0005] The present application provides a graphical interface development method, device, storage medium and product to solve the problem of low efficiency of graphical interface development in the prior art.

[0006] In a first aspect, the present application provides a graphical interface development method, the method comprising:

[0007] Obtain the graphic data source file to be processed, and parse the graphic data source file to obtain internal graphic metadata;

[0008] The internal metadata is resized to obtain the resized metadata suitable for the current drawing board;

[0009] Drawing is performed according to the adjusted graphic metadata to obtain drawing graphic data;

[0010] Write the drawn graphics data into the graphics file to obtain a local graphics file;

[0011] In response to a request for displaying a graphic interface from an application, a graphic data source file is called to perform interface generation processing to display a graphic interface including drawing graphic data.

[0012] In a possible design, the internal metadata is resized to obtain the resized metadata adapted to the current artboard, including:

[0013] Read the first artboard size of the current artboard;

[0014] Get the second artboard size corresponding to the internal graphic metadata;

[0015] Determine a proportional coefficient of the resize according to the size of the first artboard and the size of the second artboard;

[0016] According to the scale factor, the internal metadata is resized to obtain the resized metadata that is suitable for the current artboard.

[0017] In a possible design, after writing the drawing graphic data into the graphic file to obtain the local graphic file, the method further includes:

[0018] Call the local graphics file to perform interface simulation to simulate and display the interface drawing effect of the local graphics file in the target application.

[0019] In a possible design, drawing is performed according to the adjusted graphic metadata to obtain drawing graphic data, including:

[0020] Using a graphic element management module, extracting graphics, texts and objects in the adjusted graphic element data, adding operation functions to the graphics, texts and objects to obtain first drawing data, wherein the operation functions include at least one of creation, editing and storage;

[0021] Using a drawing module, obtaining a general drawing code, and redrawing the interface of the adjusted graphic element data based on the drawing code to obtain second drawing data;

[0022] The user operation management module is used to configure the third drawing data according to the preset correspondence between the external device and the operation function;

[0023] Adopting a process data management module, adding a process management function to configure the fourth drawing data, wherein the process management function includes at least one of data backup and revocation;

[0024] Drawing graphic data is generated based on the first drawing data, the second drawing data, the third drawing data, and the fourth drawing data.

[0025] In one possible design, the primitive management module includes a mode setting unit, a drawing setting unit, a primitive creation unit, a primitive editing unit, and a primitive selection unit;

[0026] The mode setting unit is used to provide a capture mode and an orthogonal mode;

[0027] The drawing setting unit is used to provide the setting function of the drawing board, brush and painting brush;

[0028] The graphic element creation unit is used to provide the function of graphic element creation;

[0029] The primitive editing unit is used to provide various types of format setting, attribute editing, intersection, movement, deformation and shortcut operations;

[0030] The primitive selection unit is used to provide point selection and frame selection functions.

[0031] In a possible design, based on the drawing code, redrawing the interface of the adjusted graphic element data to obtain the second drawing data includes:

[0032] Based on the drawing code, the graphics device interface drawing method is used to redraw the interface of the adjusted graphic data to obtain the second drawing data.

[0033] In a possible design, a process management function is added to configure the fourth drawing data, including:

[0034] A data management stack is defined, wherein the data management stack includes a push operation rule, a pop operation rule, and a backlog operation rule;

[0035] Add process management functions to configure the fourth drawing data according to the data management stack

[0036] In a second aspect, the present application provides a graphical interface development device, comprising:

[0037] at least one processor;

[0038] and a memory communicatively coupled to the at least one processor;

[0039] The memory stores instructions that can be executed by at least one processor, and the instructions are executed by at least one processor so that the at least one processor can execute the graphical interface development method as described in any one of the first aspects.

[0040] In a third aspect, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the graphical interface development method as described in any one of the first aspects.

[0041] In a fourth aspect, the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the graphical interface development method as described in any one of the first aspects.

[0042] The present application provides a method, device, storage medium and product for developing a graphical interface. For a graphic data source file to be processed, internal metadata is obtained after parsing. After the internal metadata is resized, drawing is performed according to the adjusted metadata to obtain general drawing graphic data, and the data is written to a graphic file to obtain a local graphic file. When an application initiates a request for displaying a graphical interface, the local graphic file can be called, and the display of the graphical interface can be realized based on the general code. The method provided in the embodiment of the present application does not require the development of additional software and code, and the interface display can be realized using general code, which reduces the workload and provides a lightweight interface display method. The present application provides an independent drawing tool. The developer defines the source file of the graphical interface by drawing in the drawing tool, and references the source file in the application. The application generates a graphical interface by calling the general drawing code provided by this patent. The above-mentioned technical problems are solved by using this method to generate a graphical interface, and the advantages of lightweight, flexibility, generality and high efficiency are achieved, thereby improving the efficiency of graphical interface development. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0044] Figure 1 A schematic diagram of a graphical interface development method provided in an embodiment of the present application Figure 1 ;

[0045] Figure 2 A schematic diagram of a graphical interface development method provided in an embodiment of the present application Figure 2 ;

[0046] Figure 3 A schematic diagram of a process for converting the size of graphic elements when loading a drawing provided in an embodiment of the present application;

[0047] Figure 4 A schematic diagram of a process for converting the size of graphic elements when setting a drawing board according to an embodiment of the present application;

[0048] Figure 5 A schematic diagram of a process for converting the size of graphic elements when saving a drawing provided in an embodiment of the present application;

[0049] Figure 6 A schematic diagram of a graphical interface development method provided in an embodiment of the present application Figure 3 ;

[0050] Figure 7A schematic diagram of the structure of a graphic element management module function provided in an embodiment of the present application;

[0051] Figure 8 A schematic diagram of the structure of a graphical interface development device provided in an embodiment of the present application;

[0052] Fig. 9 A schematic diagram of the structure of a graphical interface development device provided in an embodiment of the present application.

[0053] Reference numerals:

[0054] 71-mode setting unit; 72-drawing setting unit; 73-graphic element creation unit; 74-graphic element editing unit; 75-graphic element selection unit;

[0055] 81- file reading and writing module; 82- size management module; 83- drawing module; 84- simulation module;

[0056] 85-graphic element management module; 86-user operation management module; 87-process data management module;

[0057] 90 - electronic device; 91 - processor; 92 - memory; 93 - communication component; 94 - bus. DETAILED DESCRIPTION

[0058] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. On the contrary, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the attached claims, rather than all embodiments. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0059] In the embodiments of the present application, words such as "first" and "second" are used to distinguish the same or similar items with substantially the same functions and effects. Those skilled in the art can understand that words such as "first" and "second" do not limit the quantity and execution order, and words such as "first" and "second" do not necessarily limit the difference.

[0060] It should be noted that in the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary" or "for example" in the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a concrete way. In the embodiments of the present application, "at least one" refers to one or more, and "more than one" refers to two or more.

[0061] It should be noted that the "at..." in the embodiment of the present application can be the instant when a certain situation occurs, or can be a period of time after a certain situation occurs, and the embodiment of the present application does not specifically limit this. In addition, the graphical interface development method provided in the embodiment of the present application is only used as an example, and the graphical interface development method can also include more or less content.

[0062] In order to clearly describe the technical solutions of the embodiments of the present application, some terms and technologies involved in the embodiments of the present application are briefly introduced below:

[0063] Graphics Device Interface (GDI): GDI is an integral part of Windows graphics programming. It is responsible for information exchange between the system and the drawing program, and handles the graphics and image output of all Windows programs. It is a layer between the application and the graphics hardware, and can output to any compatible device, but the most commonly used devices are video monitors, graphics hard copy devices (such as printers or plotters), or metatext in memory. With the upgrade of the Windows operating system, GDI has also been enhanced and is called GDI+.

[0064] Desktop application graphical user interface development technology mainly uses pre-prepared image resources and system controls to build a graphical interface, and displays the interface and its changes by loading images, switching images, and refreshing controls. This commonly used method has certain disadvantages. For example, when there are large or many images, the interface rendering burden will increase significantly, which may cause the interface to freeze; and when the graphical interface is more complex, a large amount of code needs to be written to implement the interface change logic, which increases the development workload.

[0065] In order to solve the above-mentioned drawbacks, the prior art customizes the drawing code by rewriting the control and implements the interface functions by code drawing. This method solves the burden caused by interface rendering to a certain extent, but it also cannot solve the problem of universal code, that is, different drawing codes need to be customized and developed for different needs.

[0066] In addition, in the prior art, a timer-driven refresh mechanism is generally used for dynamic refresh of the graphical interface. In this method, a higher refresh frequency will increase the burden on the interface thread, while a lower refresh frequency may cause interface refresh delays.

[0067] The above graphical interface development methods have certain limitations in terms of lightweight, flexibility, versatility, development efficiency, refresh mechanism, etc., which lead to reduced efficiency of graphical interface development.

[0068] Based on this, in order to solve the above technical problems, the embodiments of the present application provide a graphical interface development method, device, storage medium and product, which can be used in the computer field, aiming to solve the technical problems that the graphical interface development method has certain limitations in terms of light weight, flexibility, versatility, development efficiency, refresh mechanism, etc. The inventive concept of the present application is that different graphical interface source files can be quickly defined through simple drawing operations, without the need to write code for different interfaces, thereby improving efficiency.

[0069] The technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems are described in detail below with specific embodiments. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0070] Figure 1 A schematic diagram of a graphical interface development method provided in an embodiment of the present application Figure 1 ,like Figure 1 As shown, the method includes:

[0071] S101, obtaining a graphic data source file to be processed, and parsing the graphic data source file to obtain internal graphic data.

[0072] In this embodiment, the file reading and writing module obtains the graphic data source file to be processed, and parses the graphic data source file into internal graphic metadata, thereby realizing the process of reading the source file data into the system.

[0073] S102: resize the internal graphic element data to obtain resized graphic element data that is suitable for the current drawing board.

[0074] In this embodiment, the size management module calculates and updates the size and position of all parsed internal metadata, so that the metadata adapts to the current drawing board.

[0075] Among them, the size management module provides size conversion functions when loading drawings, setting drawing boards, and saving drawings.

[0076] S103: Drawing is performed according to the adjusted graphic metadata to obtain drawing graphic data.

[0077] In this embodiment, during the drawing process, the graphic element management module, drawing module, user operation management module, and process data management module work together and are responsible for the drawing graphic data storage and interface redrawing during the entire drawing process.

[0078] S104: Writing the drawn graphic data into a graphic file to obtain a local graphic file.

[0079] For example, the drawn graphic data is written into the graphic file through the file reading and writing module, the local storage of the drawn graphic data is completed, and the local graphic file is obtained.

[0080] S105 . In response to a request for displaying a graphical interface from an application program, calling a local graphic file to perform interface generation processing to display a graphical interface including drawn graphic data.

[0081] In this embodiment, the file reading and writing module responds to the graphical interface display request of the application, calls the local graphic file to pass it to the application, the application references the graphical interface source file, and generates the graphical interface by calling the general drawing code.

[0082] Among them, the local graphic files include the graphic interface source files.

[0083] It should be noted that S104 and later also include:

[0084] Call the local graphics file to perform interface simulation to simulate and display the interface drawing effect of the local graphics file in the target application.

[0085] In this embodiment, the local graphic file is called by the simulation module to perform interface simulation, so as to simulate and display the interface drawing effect of the local graphic file in the target application.

[0086] Specifically, the simulation module is used to simulate and detect the interface drawing effect of the graphic file in the application program, and can intuitively test the accuracy of the graphic file.

[0087] It should also be noted that the present application also provides a data-driven interface refresh mechanism, which automatically triggers the update of the interface through changes in data. Through data binding technology, the interface elements are connected to the data source. When the data source changes, the interface elements are automatically updated to reflect these changes.

[0088] Compared with the existing timer-driven refresh mechanism, a higher refresh frequency will increase the burden on the interface thread, while a lower refresh frequency may cause interface refresh delays. The data-driven interface refresh mechanism achieves real-time synchronization and efficient update of the interface and data. It not only improves the performance and responsiveness of the application, but also makes front-end development more flexible and efficient, thereby improving the efficiency of graphical interface development.

[0089] The present embodiment provides a method for developing a graphical interface. For a graphic data source file to be processed, internal graphic metadata is obtained after parsing. After the internal graphic metadata is resized, drawing is performed according to the adjusted graphic metadata to obtain general drawing graphic data, and the data is written to a graphic file to obtain a local graphic file. When an application initiates a request for displaying a graphical interface, the local graphic file can be called, and the display of the graphical interface can be realized based on the general code. The method provided by the embodiment of the present application does not require the development of additional software and code. The interface display can be realized using general code, which reduces the workload and provides a lightweight interface display method. The present application provides an independent drawing tool. The developer defines the source file of the graphical interface by drawing in the drawing tool, and references the source file in the application. The application generates a graphical interface by calling the general drawing code provided by this patent. The use of this method to generate a graphical interface solves the above-mentioned technical problems and has the advantages of being lightweight, flexible, general, and efficient, thereby improving the efficiency of graphical interface development.

[0090] Figure 2 A schematic diagram of a graphical interface development method provided in an embodiment of the present application Figure 2 ,exist Figure 1 Based on the example, Figure 2 As shown, the specific implementation steps of the above S102 include:

[0091] S201, reading the first artboard size of the current artboard.

[0092] In this embodiment, the first drawing board size of the current drawing board is read through the size management module.

[0093] S202: Obtain a second drawing board size corresponding to the internal graphic element data.

[0094] In this embodiment, the second drawing board size corresponding to the internal graphic element information is obtained through the size management module.

[0095] S203: Determine a proportional coefficient for adjusting the size according to the first drawing board size and the second drawing board size.

[0096] In this embodiment, the size management module calculates and adjusts the size ratio coefficient according to the first drawing board size and the second drawing board size.

[0097] S204 , resizing the internal graphic element data according to the scale factor to obtain resized graphic element data that is suitable for the current drawing board.

[0098] In this embodiment, the size management module performs size adjustment processing on the internal graphic element data according to the calculated scale factor to obtain adjusted graphic element data that is suitable for the current drawing board.

[0099] The size management module provides the function of converting the size of graphics elements in three processes: loading a drawing, setting a drawing board, and saving a drawing. This ensures the adaptive ability of the graphics file to any size drawing board and realizes the vectorization of the interface graphics.

[0100] As an example, Figure 3 A schematic diagram of the process of converting the size of graphic elements when loading a drawing provided in an embodiment of the present application is shown in FIG. Figure 3 As shown in the figure, the steps of primitive size conversion when loading a drawing include:

[0101] Step 1: Read the artboard setting size from the graphic data source file.

[0102] Step 2: Compare the ratio of the artboard set size and the artboard fixed reference size to see if they are consistent.

[0103] If the size ratios are inconsistent, step three is performed; if the size ratios are consistent, step three is skipped.

[0104] Step 3: Calculate the scale factor 1 of the fixed reference size of the artboard relative to the set size of the artboard, and update the reference size of all metadata according to the scale factor 1.

[0105] Among them, the scale factor 1 is the fixed reference size of the artboard / the set size of the artboard.

[0106] Step 4: Calculate the scale factor 2 of the actual size of the artboard relative to the fixed reference size of the artboard, and update the actual size of all metadata according to the scale factor 2.

[0107] Among them, the scale factor 2 is the actual size of the drawing board / the fixed reference size of the drawing board.

[0108] Step 5: The real sizes of all the graphic metadata are passed to the graphic management module, and the graphic management module will draw according to the real sizes of the graphic metadata.

[0109] As an example, Figure 4 A schematic diagram of the process of converting the size of an image element when setting a drawing board according to an embodiment of the present application; Figure 4 As shown in the figure, the steps of primitive size conversion when setting the artboard include:

[0110] Step 1: Compare the ratio of the set size of the artboard to the actual size of the artboard.

[0111] If the size ratios are inconsistent, step 2 is performed; if the size ratios are consistent, step 2 is skipped.

[0112] Step 2: Adjust the actual size of the artboard to keep its proportions consistent with the set size of the artboard.

[0113] Step 3: Calculate the scale factor 2 of the actual size of the artboard relative to the fixed reference size of the artboard, and update the actual size of all metadata in the current artboard according to the scale factor 2.

[0114] Among them, the scale factor 2 is the actual size of the drawing board / the fixed reference size of the drawing board.

[0115] Step 4: The real sizes of all the graphic metadata are passed to the graphic management module, and the graphic management module will draw according to the real sizes of the graphic metadata.

[0116] As an example, Figure 5 A schematic diagram of a process for converting the size of graphic elements when saving a drawing provided in an embodiment of the present application; Figure 5 As shown in the figure, the steps of primitive size conversion when saving the drawing include:

[0117] Step 1: Prepare a copy of all metadata to ensure the security of all current metadata.

[0118] Step 2: Calculate the scale factor 3 of the artboard set size relative to the artboard fixed reference size, and update the reference size of all graphic element copy data according to the scale factor 3.

[0119] Among them, the scale factor 3 is the artboard set size / artboard fixed reference size.

[0120] Step 3: Write the artboard size and all properties of the copied graphic object into the graphic data source file.

[0121] In this embodiment, based on the size management module, the size management module provides the following functions: Figure 3 The graphic element size conversion function in the process realizes the adaptive function of the interface graphics to the artboard container. Compared with the traditional way of writing adaptive code for the interface, no redundant code is required here to achieve the vectorized graphic interface effect, which has higher development efficiency and stronger versatility, thereby improving the efficiency of graphic interface development.

[0122] Figure 6 A schematic diagram of a graphical interface development method provided in an embodiment of the present application Figure 3 ,exist Figure 1 and Figure 2Based on the example, Figure 6 As shown, the specific implementation steps of the above S103 include:

[0123] S601. Using a graphic element management module, extract graphics, texts and objects in the adjusted graphic element data, and add operation functions to the graphics, texts and objects to obtain first drawing data, wherein the operation functions include at least one of creation, editing and storage.

[0124] In this embodiment, the graphics, texts and objects in the graphics data adjusted by the size management module are extracted by the graphics management module, and operations such as creation, editing and storage are provided for the graphics, texts and objects drawn by the user, thereby obtaining the first drawing data.

[0125] It should be noted that the primitive management module includes a mode setting unit, a drawing setting unit, a primitive creation unit, a primitive editing unit and a primitive selection unit.

[0126] Specifically, the graphic element management module can realize the definition and editing of various graphics, texts, and objects, and supports the binding function of program variables, making the development process of the graphical interface more flexible and intuitive. It also overcomes the drawbacks of timer refresh and triggers interface refresh through variable value change events, which is more flexible and lightweight.

[0127] As an example, Figure 7 A schematic diagram of the structure of a graphic element management module function provided in an embodiment of the present application; Figure 7 As shown, the primitive management module 85 includes a mode setting unit 71 , a drawing setting unit 72 , a primitive creating unit 73 , a primitive editing unit 74 and a primitive selecting unit 75 .

[0128] The mode setting unit 71 is used to provide a capture mode and an orthogonal mode.

[0129] The drawing setting unit 72 is used to provide the setting functions for the drawing board, the brush and the painting brush.

[0130] Specifically, the setting functions include adjusting the line width, adjusting the color, adjusting the font, adjusting the font color, adjusting the theme color, and adjusting the drawing board size.

[0131] The graphic element creation unit 73 is used to provide a graphic element creation function.

[0132] Specifically, the primitive creation function mainly includes creating simple primitives and creating complex primitives.

[0133] More specifically, the specific steps of the primitive creation unit 73 creating primitives include:

[0134] Step 1: Activate the Create Element command, determine and correct the starting point position.

[0135] For example, determining and correcting the starting point location includes:

[0136] First, determine whether the orthogonal or snap mode is on.

[0137] Secondly, if it is turned on, correct the starting point position; if it is not turned on, go directly to the next step.

[0138] Finally, create the primitive object.

[0139] Step 2: Determine the primitive type based on the primitive object, complete the primitive definition, and set related properties.

[0140] For example, for simple graphics, including line segments, rectangles, and circles, the graphics definition is completed by obtaining the location where the user clicks the mouse.

[0141] For example, for a text primitive, the primitive definition is completed by entering text content.

[0142] For example, for complex graphics, including pictures, arrows, valves, pumps, etc., set their related attribute values ​​according to actual conditions, such as name, color, picture, size, direction, variable binding, etc. After the graphics are bound to variables, the graphics style will be updated in the target application according to the real-time status of the variables, so as to achieve a dynamic interface effect.

[0143] Step 3: Check the correctness of the newly created primitive object.

[0144] In addition, if the result of the correctness check of the primitive object is correct, the information of the primitive object is backed up; if the result of the correctness check of the primitive object is wrong, the primitive object is removed.

[0145] The graphic element editing unit 74 is used to provide various functions including format setting, attribute editing, intersection, movement, deformation and shortcut operations.

[0146] Specifically, format settings include operations such as alignment, array, and mirroring; property editing modifies the properties of graphic objects through the property editor; intersection supports adding intersection and crossing point features to lines; movement and deformation are responsible for adjusting the position, size, and shape of existing graphics; shortcut operations provide shortcut operations such as copy, paste, undo, and redo.

[0147] The graphic element selection unit 75 is used to provide point selection and frame selection functions.

[0148] Specifically, the point selection function includes two selection modes: single selection and multiple selection; the frame selection function includes two selection modes: intersecting frame selection and containing frame selection.

[0149] S602: Using a drawing module, obtaining a general drawing code, and redrawing the interface of the adjusted graphic element data based on the drawing code to obtain second drawing data.

[0150] In this embodiment, a drawing module is used to obtain a general drawing code, and based on the drawing code, the interface is redrawn for the adjusted graphic element data to obtain the second drawing data.

[0151] Wherein, based on the drawing code, a graphics device interface drawing method is adopted to redraw the interface of the adjusted graphic element data to obtain the second drawing data.

[0152] Specifically, the drawing module provides a general drawing code, and redraws the interface graphics by class and layer according to the current graphic metadata and adopts the Graphics Device Interface (GDI) drawing method.

[0153] More specifically, the graphical interface development method using drawing tools and universal drawing codes can quickly define different graphical interface source files through simple drawing operations, without the need to write code for different interfaces, and the source files in json format are universal and lightweight. Compared with the traditional method of referencing pictures or customizing drawing codes, it has the advantages of being lightweight, highly flexible, highly versatile, and highly efficient in development.

[0154] S603: using the user operation management module to configure the third drawing data according to the preset correspondence between the external device and the operation function.

[0155] In this embodiment, the user operation management module is used to respond to and analyze the user's mouse or keyboard input, and the third drawing data is configured according to the preset correspondence between the external device and the operation function.

[0156] Among them, the user operation management module is responsible for responding to and parsing the user's mouse or keyboard input, and calling the corresponding operations in other modules based on the input. For example, mouse click operations are involved in the processes of creating graphics, editing graphics, and selecting graphics; the shortcut key input provided by keyboard operations is involved in the processes of editing graphics, process data management, etc.

[0157] S604: Using the process data management module, adding a process management function to configure the fourth drawing data, wherein the process management function includes at least one of data backup and cancellation.

[0158] In this embodiment, a process management function is added by using a custom data management stack of a process data management module to configure the fourth drawing data, wherein the process management function includes at least one of data backup and undo.

[0159] Specifically, a data management stack is defined, wherein the data management stack includes push operation rules, pop operation rules, and backlog operation rules.

[0160] Specifically, according to the data management stack, a process management function is added to configure the fourth drawing data.

[0161] For example, the specific operations of the process data management stack include:

[0162] Push operation: After any drawing operation is completed, update the metadata and push the copy into the corresponding position.

[0163] Pop operation: In response to the user's undo operation instruction, pop the metadata at the top of the stack and update the current metadata.

[0164] Squeeze operation: When the stack is full, squeeze out the bottom-level metadata in the current stack, and move the data in other stacks down in sequence.

[0165] S605 , generating drawing graphic data according to the first drawing data, the second drawing data, the third drawing data and the fourth drawing data.

[0166] In this embodiment, the first drawing data, the second drawing data, the third drawing data, and the fourth drawing data are collected to generate drawing graphic data.

[0167] In this embodiment, based on the division of labor among the graphic element management module, drawing module, user operation management module, and process data management module, data storage and interface redrawing of the entire drawing process are realized. Rapid development of graphical interfaces is realized, and a data-driven interface refresh mechanism, high flexibility, strong versatility, lightweight, and no significant increase in interface rendering burden graphical interface development is realized, thereby improving the efficiency of graphical interface development.

[0168] Figure 8 A schematic diagram of the structure of a graphical interface development device provided in an embodiment of the present application is shown in FIG. Figure 8 As shown, the device includes: a file reading and writing module 81, a size management module 82 and a drawing module 83.

[0169] The file reading and writing module 81 is used to obtain the graphic data source file to be processed and parse the graphic data source file to obtain internal graphic data information.

[0170] The size management module 82 is used to perform size adjustment processing on the internal graphic element data to obtain the adjusted graphic element data suitable for the current drawing board.

[0171] The drawing module 83 is used to draw according to the adjusted graphic data to obtain drawing graphic data.

[0172] The file reading and writing module 81 is also used to write the drawing graphic data into the graphic file to obtain a local graphic file.

[0173] The file reading and writing module 81 is also used to respond to a graphical interface display request of an application program, call a local graphic file to perform interface generation processing, and display a graphical interface including drawn graphic data.

[0174] In a possible design, the size management module 82 is further used to read the first drawing board size of the current drawing board;

[0175] Get the second artboard size corresponding to the internal graphic metadata;

[0176] Determine a proportional coefficient of the resize according to the size of the first artboard and the size of the second artboard;

[0177] According to the scale factor, the internal metadata is resized to obtain the resized metadata that is suitable for the current artboard.

[0178] The device further includes: a simulation module 84 .

[0179] In a possible design, the simulation module 84 is used to call the local graphic file to perform interface simulation, so as to simulate and display the interface drawing effect of the local graphic file in the target application.

[0180] The device includes: a graphic element management module 85 , a user operation management module 86 and a process data management module 87 .

[0181] In one possible design, the graphic element management module 85 is used to extract the graphics, text and objects in the adjusted graphic element data using the graphic element management module, and add operation functions to the graphics, text and objects to obtain the first drawing data, wherein the operation functions include at least one of creation, editing and storage.

[0182] The drawing module 83 is further used to adopt the drawing module to obtain a general drawing code, and based on the drawing code, redraw the interface of the adjusted graphic element data to obtain second drawing data.

[0183] The user operation management module 86 is used to configure the third drawing data according to the preset correspondence between the external device and the operation function.

[0184] The process data management module 87 is used to adopt the process data management module to add a process management function to configure the fourth drawing data, wherein the process management function includes at least one of data backup and revocation.

[0185] The file reading and writing module 81 is further used to generate drawing graphic data according to the first drawing data, the second drawing data, the third drawing data and the fourth drawing data.

[0186] In one possible design, the primitive management module 85 includes a mode setting unit 71 , a drawing setting unit 72 , a primitive creation unit 73 , a primitive editing unit 74 and a primitive selection unit 75 .

[0187] The mode setting unit 71 is used to provide a capture mode and an orthogonal mode.

[0188] The drawing setting unit 72 is used to provide the setting functions for the drawing board, the brush and the painting brush.

[0189] The primitive creation unit 73 is used to provide a primitive creation function.

[0190] The primitive editing unit 74 is used to provide a variety of format settings, attribute editing, intersection, movement, deformation and shortcut operations.

[0191] The graphic element selection unit 75 is used to provide point selection and frame selection functions.

[0192] In a possible design, the drawing module 83 is further used to redraw the interface of the adjusted graphic element data based on the drawing code and using a graphics device interface drawing method to obtain second drawing data.

[0193] In a possible design, the process data management module 87 is also used to define a data management stack, wherein the data management stack includes push operation rules, pop operation rules, and backlog operation rules.

[0194] According to the data management stack, a process management function is added to configure the fourth drawing data.

[0195] A graphical interface development device provided in this embodiment can execute a graphical interface development method of the above embodiment, and its implementation principle and technical effect are similar, which will not be described in detail in this embodiment.

[0196] In the specific implementation of the aforementioned graphical interface development method, each module can be implemented as a processor, and the processor can execute computer execution instructions stored in the memory, so that the processor executes the aforementioned graphical interface development method.

[0197] Fig. 9 This is a schematic diagram of the structure of a graphical interface development device provided in an embodiment of the present application. Fig. 9 As shown, the electronic device 90 includes: at least one processor 91 and a memory 92. The electronic device 90 also includes a communication component 93. The processor 91, the memory 92 and the communication component 93 are connected via a bus 94.

[0198] In the specific implementation process, at least one processor 91 executes the computer execution instructions stored in the memory 92, so that at least one processor 91 executes a graphical interface development method belonging to claims 1-7 as executed by the graphical interface development device side as above.

[0199] The specific implementation process of the processor 91 can refer to the above method embodiment, and its implementation principle and technical effect are similar, so this embodiment will not be repeated here. In the above embodiment, it should be understood that the processor can be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), etc. The general-purpose processor can be a microprocessor or the processor can be any conventional processor, etc. The steps of the method disclosed in the invention can be directly embodied as being executed by a hardware processor, or can be executed by a combination of hardware and software modules in the processor.

[0200] The memory may include a high-speed RAM memory, and may also include a non-volatile storage NVM, such as at least one disk storage.

[0201] The bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, the bus in the drawings of the present application is not limited to only one bus or one type of bus.

[0202] The above-mentioned functions implemented by the graphical interface development device and the main control device introduce the scheme provided by the embodiment of the present invention. It can be understood that in order to implement the above-mentioned functions, the graphical interface development device or the main control device includes a hardware structure and / or software module corresponding to the execution of each function. In combination with the units and algorithm steps of each example described in the embodiment disclosed in the embodiment of the present invention, the embodiment of the present invention can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the technical solution of the embodiment of the present invention.

[0203] The present application also provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the above-mentioned graphical interface development method.

[0204] The above-mentioned readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk. The readable storage medium can be any available medium that can be accessed by a general or special-purpose computer.

[0205] An exemplary readable storage medium is coupled to a processor so that the processor can read information from the readable storage medium and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can be located in an application specific integrated circuit (Application Specific Integrated Circuits, referred to as: ASIC). Of course, the processor and the readable storage medium can also exist as discrete components in an electronic device or a main control device.

[0206] The present application also provides a computer program product, including a computer program, wherein the computer program is stored in a readable storage medium, and at least one processor of an electronic device can read the computer program from the readable storage medium, and at least one processor executes the computer program so that the electronic device executes the solution provided by any of the above embodiments.

[0207] Those skilled in the art can understand that all or part of the steps of the above method embodiments can be completed by hardware related to program instructions. The above program can be stored in a computer-readable storage medium. When the program is executed, the steps of the above method embodiments are executed; and the above storage medium includes: ROM, RAM, disk or optical disk and other media that can store program codes.

[0208] So far, the technical solution of the present application has been described in conjunction with the preferred embodiments shown in the accompanying drawings. However, it is easy for those skilled in the art to understand that the protection scope of the present application is obviously not limited to these specific embodiments, and the above embodiments are only used to illustrate the technical solution of the present application rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A graphical interface development method, characterized in that: include: Acquire a graphics data source file to be processed, and parse the graphics data source file to obtain internal graphics metadata; Performing size adjustment processing on the internal graphic element data to obtain adjusted graphic element data that is suitable for the current drawing board; Perform drawing according to the adjusted graphic metadata to obtain drawing graphic data; Writing the drawn graphic data into a graphic file to obtain a local graphic file; In response to a graphic interface display request of an application, the local graphic file is called to perform interface generation processing to display a graphic interface including the drawn graphic data.

2. The method according to claim 1, characterized in that The resizing of the internal graphic element data to obtain resized graphic element data adapted to the current drawing board includes: Read the first artboard size of the current artboard; Obtain the second drawing board size corresponding to the internal graphic element data; Determining a proportional coefficient for adjusting the size according to the first artboard size and the second artboard size; The internal graphic element data is resized according to the scale factor to obtain resized graphic element data that is suitable for the current drawing board.

3. The method according to claim 1, characterized in that After writing the drawing graphic data into the graphic file to obtain the local graphic file, the method further includes: The local graphic file is called to perform interface simulation to simulate and display the interface drawing effect of the local graphic file in the target application.

4. The method according to any one of claims 1 to 3, characterized in that: The step of drawing according to the adjusted graphic data to obtain drawing graphic data includes: Using a graphic element management module, extracting graphics, texts and objects in the adjusted graphic element data, adding operation functions to the graphics, the texts and the objects to obtain first drawing data, wherein the operation functions include at least one of creation, editing and storage; Using a drawing module, obtaining a general drawing code, and redrawing the interface of the adjusted graphic element data based on the drawing code to obtain second drawing data; The user operation management module is used to configure the third drawing data according to the preset correspondence between the external device and the operation function; Adopting a process data management module, adding a process management function to configure fourth drawing data, wherein the process management function includes at least one of data backup and revocation; Drawing graphic data is generated based on the first drawing data, the second drawing data, the third drawing data, and the fourth drawing data.

5. The method according to claim 4, characterized in that The primitive management module includes a mode setting unit, a drawing setting unit, a primitive creation unit, a primitive editing unit and a primitive selection unit; The mode setting unit is used to provide a capture mode and an orthogonal mode; The drawing setting unit is used to provide a setting function for a drawing board, a brush, and a painting brush; The graphic element creation unit is used to provide a graphic element creation function; The primitive editing unit is used to provide multiple types of format setting, attribute editing, intersection, movement, deformation and shortcut operations; The graphic element selection unit is used to provide point selection and frame selection functions.

6. The method according to claim 4, characterized in that The step of redrawing the interface of the adjusted graphic element data based on the drawing code to obtain second drawing data includes: Based on the drawing code, a graphics device interface drawing method is adopted to redraw the interface of the adjusted graphic element data to obtain second drawing data.

7. The method according to claim 4, characterized in that The adding process management function to configure the fourth drawing data includes: defining a data management stack, wherein the data management stack includes a push operation rule, a pop operation rule, and a backlog operation rule; According to the data management stack, a process management function is added to configure the fourth drawing data.

8. A graphical interface development device, characterized in that: include: at least one processor; and a memory communicatively coupled to the at least one processor; The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the graphical interface development method as described in any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the graphical interface development method according to any one of claims 1 to 7.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the graphical interface development method described in any one of claims 1 to 7 is implemented.

Images