A UI graphic generation method, system, device and computer storage medium

Abstract

The present application discloses a UI graphic generation method, system, device and computer storage medium, which are used to improve the convenience of generating UI graphics. The method of the present application includes: obtaining a UI material graphic, where the UI material graphic contains at least one UI graphic; obtaining an operation instruction of a user, where the operation instruction is an instruction for the user to select a target UI material from the UI material graphic; determining a local material graphic from the UI material graphic according to the operation instruction; dividing the local material graphic according to a preset division rule to obtain a number of sub-graphics; determining a target sub-graphic from the number of sub-graphics; and adjusting the target sub-graphic to obtain the target UI graphic.

Description

Technical Field

[0001] This application relates to the field of data processing, and in particular to a method, system, device and computer storage medium for generating UI graphics. Background Art

[0002] With the continuous development of programming technology, the user interface (UI) has been widely used in the programming process, and the design of UI graphics has become increasingly important.

[0003] In the programming process, various UI graphics are often needed, such as button icons for interacting with users. In the solutions provided by the prior art, in order to facilitate use, various icons are often integrated into one picture. When a certain icon needs to be used, an image cropping tool is used to crop the required icon. After cropping, the user may need to repeatedly adjust the icon, and the process is rather cumbersome. Therefore, the processing efficiency of this method is very low. Summary of the Invention

[0004] To solve the above technical problems, this application provides a method, system, device and computer storage medium for generating UI graphics, which is used to improve the efficiency of generating UI graphics.

[0005] In the first aspect of this application, a method for generating UI graphics is provided, and the method includes:

[0006] Obtain a UI material graphic, where the UI material graphic contains at least one UI graphic;

[0007] Obtain an operation instruction of a user, where the operation instruction is an instruction for the user to select a target UI material from the UI material graphic;

[0008] Determine a local material graphic from the UI material graphic according to the operation instruction;

[0009] Divide the local material graphic according to a preset division rule to obtain a number of sub-graphics;

[0010] Determine a target sub-graphic from the number of sub-graphics;

[0011] Adjust the target sub-graphic to obtain the target UI graphic.

[0012] Optionally, the UI material graphic is evenly divided into a number of regions, and any one of the number of regions is configured with a positioning coordinate, and the positioning coordinate is used to represent the position of the UI graphic in the UI material graphic; the determining a local material graphic from the UI material graphic according to the operation instruction includes:

[0013] Determine the positioning coordinates according to the operation instructions,

[0014] Determine the local material graphic according to the positioning coordinates.

[0015] Optionally, when the segmentation rule is grid segmentation, before segmenting the local material graphic according to the preset segmentation rule to obtain a number of sub-graphics, the method further includes:

[0016] Determine the grid specifications of the grid segmentation, where the grid specifications include the number of grids, the grid width, and the grid length.

[0017] Optionally, when the number of grids reaches nine, segmenting the local material graphic according to the preset segmentation rule to obtain a number of sub-graphics includes:

[0018] Segment the local material graphic in a way of evenly dividing the grid to obtain sub-graphics with the same number as the number of grids;

[0019] Determining the target sub-graphic from the number of sub-graphics includes:

[0020] Determine the five sub-graphics among the number of sub-graphics except the four sub-graphics located at the four corners of the local material graphic as the target sub-graphics.

[0021] Optionally, determining the target sub-graphic from the number of sub-graphics includes:

[0022] Determine the non-blank sub-graphics among the number of sub-graphics as the target sub-graphics.

[0023] Optionally, determining the target sub-graphic from the number of sub-graphics includes:

[0024] Determine the sub-graphic located in the middlemost area among the number of sub-graphics as the target sub-graphic.

[0025] Optionally, the segmentation rule is an edge segmentation method, and segmenting the local material graphic according to the preset segmentation rule to obtain a number of sub-graphics includes:

[0026] Determine the graphic edge of the UI graphic in the local material graphic;

[0027] Segment the local material graphic along the graphic edge to obtain two sub-graphics;

[0028] Determining the target sub-graphic from the number of sub-graphics includes:

[0029] Determine the sub-graphic located inside the graphic edge among the two sub-graphics as the target sub-graphic.

[0030] Optionally, the adjustment includes at least one of scaling, rotation, and mirroring.

[0031] A second aspect of the present application provides a UI graphic generation system, the system comprising:

[0032] A first acquisition unit for acquiring a UI material graphic, the UI material graphic including at least one UI graphic;

[0033] A second acquisition unit for acquiring an operation instruction of a user, the operation instruction being an instruction for the user to select a target UI graphic from the UI material graphic;

[0034] A first determination unit for determining a local material graphic from the UI material graphic according to the operation instruction;

[0035] A segmentation unit for segmenting the local material graphic according to a preset segmentation rule to obtain a plurality of sub-graphics;

[0036] A second determination unit for determining a target sub-graphic from the plurality of sub-graphics;

[0037] An adjustment unit for adjusting the target sub-graphic to obtain the target UI graphic.

[0038] A third aspect of the present application provides a UI graphic generation device, the device comprising:

[0039] A processor, a memory, an input / output unit, and a bus;

[0040] The processor is connected to the memory, the input / output unit, and the bus;

[0041] The memory stores a program, and the processor calls the program to execute the method according to the first aspect and any optional method in the first aspect.

[0042] A fourth aspect of the present application provides a computer-readable storage medium, on which a program is stored, and the program, when executed on a computer, executes the method according to the first aspect and any optional method in the first aspect.

[0043] It can be seen from the above technical solutions that the present application has the following advantages:

[0044] In the UI graphic generation method provided by this application, the user can select a target UI graphic to be used from the UI material graphics. The terminal automatically determines the local material graphic and divides the local material graphic according to a preset division rule to obtain several sub-graphics, then determines the target sub-graphic, and performs certain adjustments on the target sub-graphic to obtain the target UI graphic. In the method provided by this application, the terminal automatically divides and adjusts the local material graphic, so that the user can directly obtain the required target UI graphic through operation instructions, and the efficiency of generating the UI graphic is higher. The user no longer needs to use a cropping tool to process, which greatly improves the efficiency of UI graphic production. Brief Description of the Drawings

[0045] In order to more clearly illustrate the technical solutions in this application, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the drawings in the following description are only some embodiments of this application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained according to these drawings.

[0046] Figure 1 It is a schematic flowchart of an embodiment of the UI graphic generation method provided by this application;

[0047] Figure 2 It is a schematic flowchart of another embodiment of the UI graphic generation method provided by this application;

[0048] Figure 3 It is a schematic flowchart of another embodiment of the UI graphic generation method provided by this application;

[0049] Figure 4 It is a schematic structural diagram of an embodiment of the UI graphic generation system provided by this application;

[0050] Figure 5 It is a schematic structural diagram of an embodiment of the UI graphic generation device provided by this application. Detailed Embodiments

[0051] During the programming process, various UI graphics are often needed, such as button icons for interacting with users. In the solutions provided by the prior art, in order to facilitate use, various icons are often integrated in a single picture. When a certain icon needs to be used, an image cropping tool is used to crop the required icon. After cropping, the user may need to repeatedly adjust the icon, and the process is rather cumbersome. Therefore, the processing efficiency of this method is very low.

[0052] Based on this, this application provides a UI graphic generation method to improve the efficiency of UI graphic generation.

[0053] It should be noted that the UI graphic generation method provided in this application can be applied to a terminal, a system, or a server. For example, the terminal can be a smart phone, a computer, a tablet computer, a smart TV, a smart watch, a portable computer terminal, or a fixed terminal such as a desktop computer. For the convenience of description, the terminal is taken as the execution subject in this application for illustration.

[0054] Please refer to Figure 1 , Figure 1 which is a schematic flowchart of an embodiment of the UI graphic generation method provided in this application. The UI graphic generation method includes:

[0055] 101. Obtain a UI material graphic, where the UI material graphic contains at least one UI graphic;

[0056] In practical applications, for the convenience of use, multiple UI graphics are often integrated into a single UI material graphic. This UI material graphic is generally a pixel graphic, such as in JPG format. Therefore, when actually used, the UI graphics therein need to be extracted.

[0057] 102. Obtain the operation instruction of the user, where the operation instruction is an instruction for the user to select a target UI material from the UI material graphic;

[0058] The user can, through the operation instruction, for example, by clicking on a certain UI material, select the UI material to be used.

[0059] 103. Determine a local material graphic from the UI material graphic according to the operation instruction;

[0060] The terminal determines the local material graphic in the UI material graphic according to the operation instruction of the user. In practical applications, multiple UI materials are arranged in the UI material graphic, and the UI material graphic is divided into multiple uniform regions, and each UI graphic is placed in this region. When needed, it is determined which region the position clicked by the user is in, and the terminal then determines the region where the UI material is located, that is, determines the local material graphic, and then further processes the local material graphic.

[0061] In another possible implementation manner, each region in the UI material graphic can also be configured with positioning coordinates, which are used to represent the position of the region in the UI material graphic. The terminal can also determine the positioning coordinates according to the operation instruction, that is, the operation instruction is an instruction for the user to input positioning coordinates to the terminal. Then the terminal determines the local material graphic according to the positioning coordinates. Through this method, the UI material graphic can be parameterized, and the terminal can directly select the local material graphic therein through the coordinate parameters.

[0062] 104. Divide the local material graph according to a preset division rule to obtain several sub-graphs;

[0063] The local material graph contains the UI graph to be used. Moreover, there are often some blank areas in each area. Therefore, the terminal needs to remove these blank areas. Therefore, the terminal divides the local material graph through a preset division rule to obtain several sub-graphs, removes the sub-graphs of the blank areas, and retains the sub-graphs containing UI content. The preset division rule can be grid division or edge division. For specific details, please refer to Figure 2 and Figure 3 the corresponding embodiments.

[0064] 105. Determine the target sub-graph from several sub-graphs;

[0065] The terminal determines the target sub-graph from several sub-graphs. The target sub-graph refers to the sub-graph containing the UI graph content, so as to finally obtain a relatively complete UI graph.

[0066] 106. Adjust the target sub-graph to obtain the target UI graph.

[0067] After the terminal determines the target sub-graph, it makes certain adjustments to the target sub-graph. The adjustments include but are not limited to scaling, rotating, and mirroring according to a ratio. When the target sub-graph contains multiple sub-graphs, different or different degrees of adjustments can also be made to different sub-graphs.

[0068] In the UI graph generation method provided by this application, the user can select a target UI graph to be used from the UI material graph. The terminal automatically determines the local material graph and divides the local material graph through a preset division rule to obtain several sub-graphs, then determines the target sub-graph, and makes certain adjustments to the target sub-graph to obtain the target UI graph. In the method provided by this application, the terminal automatically divides and adjusts the local material graph, so that the user can directly obtain the required target UI graph through operation instructions, and the efficiency of generating the UI graph is higher. The user no longer needs to use a cropping tool to process, which greatly improves the efficiency of UI graph production.

[0069] In practical applications, the terminal needs to divide the local material graph. Specifically, there are two division methods. One is to divide by grid division, and the other is to divide by edge division. This will be described in detail below with reference to the accompanying drawings.

[0070] 1. Grid Division

[0071] Please refer to Figure 2 , Figure 2Schematic diagram of a process of an embodiment of the UI graphic generation method provided in this application. The UI graphic generation method includes:

[0072] 201. Obtain a UI material graphic, where the UI material graphic contains at least one UI graphic;

[0073] 202. Obtain the operation instruction of the user, where the operation instruction is an instruction for the user to select a target UI material from the UI material graphic;

[0074] 203. Determine a partial material graphic from the UI material graphic according to the operation instruction;

[0075] Steps 201 to 203 in this application are similar to steps 101 to 103 in the foregoing embodiment, and will not be elaborated here.

[0076] 204. Determine the grid specifications for grid segmentation, where the grid specifications include the number of grids, the grid width, and the grid length;

[0077] In practical applications, when the sizes of the various UI graphics contained in the UI material graphic are relatively uniform and arranged neatly, the grid segmentation method can be used for segmentation. When using grid segmentation, it is necessary to determine the specifications of the grid. The grid specifications include the number of grids, the grid width, and the grid length. The more grids used, the more sub-pictures are obtained by cutting, and the finer the obtained UI graphics are.

[0078] 205. Segment the partial material graphic in the way of evenly dividing the grid to obtain sub-graphics with the same number as the number of grids;

[0079] When segmenting the partial material graphic, the method of evenly dividing the grid is used for segmentation. Evenly dividing the grid means dividing it into a certain number of grids of the same size, such as 9 grids, 16 grids, etc., to obtain a certain number of sub-graphics.

[0080] 206. Determine the target sub-graphic from several sub-graphics;

[0081] After obtaining a certain number of sub-graphics, it is necessary to determine the target sub-graphic from them. Specifically, when the number of grids reaches nine, the sub-graphics located at the four corners of the partial material graphic can be removed, and the middle graphic can be retained, and the middle sub-graphic is determined as the target sub-graphic.

[0082] In another possible implementation manner, it can also be that the terminal recognizes each sub-graphic, removes the blank sub-graphics, where the blank sub-graphic is a sub-graphic that does not contain the pixels of the UI graphic, and determines the remaining non-blank sub-graphics as the target sub-graphics. When processing some UI graphics with obvious pixel differences, the blank areas in the graphics can be well removed through this method.

[0083] In another possible implementation, the terminal may also determine the sub-graphic located in the final visible area as the target sub-graphic. When the UI graphic is small, by using the method of an odd number of grid quantities for segmentation, the UI graphic can be retained in the sub-graphic in the very middle. Therefore, the terminal determines the sub-graphic in the very middle as the target sub-graphic.

[0084] 207. Adjust the target sub-graphic to obtain the target UI graphic.

[0085] The terminal makes certain adjustments to the target sub-graphic. Such adjustments include but are not limited to scaling, rotating, and mirroring in proportion. When the target sub-graphic contains multiple sub-graphics, different or different degrees of adjustments can also be made to different sub-graphics.

[0086] The above embodiments have elaborated on the method of grid segmentation. Next, the method of edge segmentation in the present application will be elaborated with reference to the accompanying drawings.

[0087] 2. Edge Segmentation

[0088] Please refer to Figure 3 , Figure 3 which is a schematic flowchart of an embodiment of the UI graphic generation method provided in the present application. The UI graphic generation method includes:

[0089] 301. Obtain a UI material graphic, where the UI material graphic contains at least one UI graphic;

[0090] 302. Obtain the operation instruction of the user, where the operation instruction is an instruction for the user to select the target UI material from the UI material graphic;

[0091] 303. Determine the local material graphic from the UI material graphic according to the operation instruction;

[0092] Steps 301 to 303 in the present application are similar to steps 101 to 103 in the foregoing embodiments, and will not be elaborated here.

[0093] 304. Determine the graphic edge of the UI graphic in the local material graphic;

[0094] In practical applications, when the edge of the UI graphic in the local material graphic is relatively obvious, the edge cutting method can be used for cutting. The terminal first determines the edge of the UI graphic to be segmented, that is, outlines the segmentation path of the edge of the UI graphic, and then the segmentation can be performed according to the segmentation path. The method provided in the present application can well extract some UI graphics with obvious edges.

[0095] 305. Segment the local material graphic along the graphic edge to obtain two sub-graphics;

[0096] The terminal divides the local material graphic along the edge of the UI graphic to obtain two sub-graphics, one is the UI graphic located inside the edge, and the other is the blank graphic located outside.

[0097] 306. Determine the sub-graphic located inside the graphic edge in the two sub-graphics as the target sub-graphic;

[0098] The terminal determines the sub-graphic located inside the edge as the target sub-graphic.

[0099] 307. Adjust the target sub-graphic to obtain the target UI graphic.

[0100] The terminal makes certain adjustments to the target sub-graphic, and the adjustments include but are not limited to scaling, rotating, and mirroring. When the target sub-graphic contains multiple sub-graphics, different or different degrees of adjustments can also be made to different sub-graphics.

[0101] The above embodiments have elaborated on the UI graphic generation method in the present application. Next, the UI graphic generation system, device, and computer storage medium in the present application will be elaborated with reference to the accompanying drawings.

[0102] Please refer to Figure 4 , Figure 4 which is a schematic structural diagram of an embodiment of the UI graphic generation system provided in the present application. The UI graphic generation system includes:

[0103] The first acquisition unit 401 is used to acquire a UI material graphic, and the UI material graphic contains at least one UI graphic;

[0104] The second acquisition unit 402 is used to acquire the operation instruction of the user, and the operation instruction is the instruction for the user to select the target UI graphic from the UI material graphic;

[0105] The first determination unit 403 is used to determine the local material graphic from the UI material graphic according to the operation instruction;

[0106] The splitting unit 404 is used to split the local material graphic according to the preset splitting rule to obtain several sub-graphics;

[0107] The second determination unit 405 is used to determine the target sub-graphic from the several sub-graphics;

[0108] The adjustment unit 406 is used to adjust the target sub-graphic to obtain the target UI graphic.

[0109] Optionally, the first determination unit 403 is specifically used for:

[0110] Determine the positioning coordinates according to the operation instruction,

[0111] Determine the local material graphics according to the positioning coordinates.

[0112] Optionally, the UI graphics generation system further includes: a third determination unit 407, and the third determination unit 407 is specifically configured to:

[0113] Determine the grid specifications for grid segmentation, where the grid specifications include the number of grids, the grid width, and the grid length.

[0114] Optionally, the segmentation unit 404 is specifically configured to:

[0115] Segment the local material graphics in a way of evenly dividing the grid to obtain sub-graphics with the same number as the number of grids;

[0116] The second determination unit 405 is specifically configured to:

[0117] Determine five sub-graphics among several sub-graphics as target sub-graphics, except for the four sub-graphics located at the four corners of the local material graphics respectively.

[0118] Optionally, the second determination unit 405 is specifically configured to:

[0119] Determine the non-blank sub-graphics among several sub-graphics as target sub-graphics.

[0120] Optionally, the second determination unit 405 is specifically configured to:

[0121] Determine the sub-graphic located in the middlemost area among several sub-graphics as the target sub-graphic.

[0122] Optionally, the segmentation unit 404 is specifically configured to:

[0123] Determine the graphic edge for determining the UI graphics in the local material graphics;

[0124] Segment the local material graphics along the graphic edge to obtain two sub-graphics;

[0125] The second determination unit 405 is specifically configured to:

[0126] Determine the sub-graphic located inside the graphic edge among the two sub-graphics as the target sub-graphic.

[0127] Optionally, the adjustment includes at least one of scaling, rotation, and mirroring in proportion.

[0128] This application also provides a UI graphics generation device, including:

[0129] A processor 501, a memory 502, an input / output unit 503, and a bus 504;

[0130] The processor 501 is connected to the memory 502, the input / output unit 503, and the bus 504;

[0131] The memory 502 stores a program, and the processor 501 calls the program to execute any of the above UI graphic generation methods.

[0132] This application also relates to a computer-readable storage medium with a program stored thereon. It is characterized in that when the program runs on a computer, it causes the computer to execute any of the above UI graphic generation methods.

[0133] Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the above-described systems, devices, and units can refer to the corresponding processes in the foregoing method embodiments and will not be elaborated herein.

[0134] In the several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units is only a logical functional division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed couplings or direct couplings or communication connections to each other can be through some interfaces, and the indirect couplings or communication connections of the devices or units can be in electrical, mechanical, or other forms.

[0135] The units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they can be located in one place or distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0136] In addition, the functional units in each embodiment of this application can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above integrated units can be implemented in the form of hardware or in the form of software functional units.

[0137] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of this application. The aforementioned storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memories (ROM, read-only memory), random access memories (RAM, random access memory), magnetic disks, or optical discs that can store program codes.

Claims

1. A method for generating a UI graphic, characterized in that, The method includes: Obtain a UI material graphic, which contains at least one UI material; Obtain a user's operation instruction, where the operation instruction is an instruction for the user to select a target UI material from the UI material graphic; Determine a local material graphic from the UI material graphic according to the operation instruction; Segment the local material graphic according to a preset segmentation rule to obtain a number of sub-graphics; Determine a target sub-graphic from the number of sub-graphics; Adjust the target sub-graphic to obtain a target UI graphic; When the segmentation rule is grid segmentation, before segmenting the local material graphic according to the preset segmentation rule to obtain a number of sub-graphics, the method further includes: Determine the grid specifications of the grid segmentation, where the grid specifications include the number of grids, the grid width, and the grid length; when the number of grids reaches nine, segmenting the local material graphic according to the preset segmentation rule to obtain a number of sub-graphics includes: Segment the local material graphic in a way of evenly dividing the grid to obtain sub-graphics with the same number as the number of grids; The determining a target sub-graphic from the number of sub-graphics includes: Determine five sub-graphics among the number of sub-graphics as target sub-graphics, excluding the four sub-graphics located at the four corners of the local material graphic respectively.

2. The UI graphic generation method according to claim 1, wherein The UI material graphic is evenly divided into a number of regions, and any one of the number of regions is configured with positioning coordinates, which are used to represent the position of the UI material in the UI material graphic; The determining a local material graphic from the UI material graphic according to the operation instruction includes: Determine the positioning coordinates according to the operation instruction, Determine the local material graphic according to the positioning coordinates.

3. The UI graphic generation method according to claim 1, characterized in that, The segmentation rule is an edge segmentation method, and segmenting the local material graphic according to the preset segmentation rule to obtain a number of sub-graphics includes: Determine the graphic edge of the UI material from the local material graphic; Segment the local material graphic along the graphic edge to obtain two sub-graphics; The determining a target sub-graphic from the number of sub-graphics includes: Determine the sub-graphic located inside the graphic edge among the two sub-graphics as the target sub-graphic.

4. The UI graphic generation method according to any one of claims 1 to 3, characterized in that, The adjustment at least includes one of scaling, rotating, and mirroring in proportion.

5. A UI graphics generation system, characterized in that, The system includes: A first obtaining unit, configured to obtain a UI material graphic, which contains at least one UI material; A second obtaining unit, configured to obtain a user's operation instruction, where the operation instruction is an instruction for the user to select a target UI material from the UI material graphic; A first determining unit, configured to determine a local material graphic from the UI material graphic according to the operation instruction; A segmentation unit, configured to segment the local material graphic according to a preset segmentation rule to obtain a number of sub-graphics; A second determining unit, configured to determine a target sub-graphic from the number of sub-graphics; An adjustment unit, configured to adjust the target sub-graphic to obtain a target UI graphic; It further includes: a third determination unit, and specifically, the third determination unit is configured to: Determine the grid specifications for grid segmentation, where the grid specifications include the number of grids, the grid width, and the grid length; Specifically, the segmentation unit is configured to: Segment the local material graphics in a way of equally dividing the grid cells to obtain sub-graphics with the same number as the number of grids; Specifically, the second determination unit is configured to: Determine five sub-graphics among several sub-graphics except the four sub-graphics located at the four corners of the local material graphics respectively as target sub-graphics.

6. A UI graphic generation device, characterized in that, The device includes: A processor, a memory, an input / output unit, and a bus; The processor is connected to the memory, the input / output unit, and the bus; The memory stores a program, and the processor calls the program to execute the method according to any one of claims 1 to 4.

7. A computer-readable storage medium, on which a program is stored, and when the program is executed on a computer, it executes the method according to any one of claims 1 to 4.

Images