Energy ball generation method and device, equipment and storage medium

Abstract

The invention provides an energy ball generation method, which comprises the steps that a to-be-generated energy ball graph is split into a background assembly, a first filling assembly and a first boundary assembly, the first filling assembly and the background assembly are of circular structures, and the first filling assembly and the background assembly have the same radius; the connecting edge of the first boundary assembly is connected with the cutting edge of the first filling assembly; cutting the first filling component according to the to-be-displayed dynamic data at the current moment to obtain a cut second filling component, and determining the cutting edge size of the second filling component; based on the size of the cutting edge, the size of the first boundary assembly is adjusted, an adjusted second boundary assembly is obtained, and the size of a connecting edge of the second boundary assembly is the same as the size of the cutting edge of the second filling assembly; and combining and splicing the background component, the second boundary component and the second filling component to obtain the energy ball at the current moment. The energy ball does not need to be drawn through codes, and the code quantity of the energy ball can be reduced.

Description

Technical Field

[0001] The present invention relates to the field of front-end interface technology, and in particular to an energy ball generation method, device, equipment and storage medium. Background Art

[0002] Various software applications, web pages, etc. are used in all aspects of work and life, and people are paying more and more attention to user experience. From the user's perspective, the dynamic data of some programs are displayed, such as the energy ball suspended on the device interface. The digital visualization in the form of an energy ball can more intuitively display the data and its changes, which plays a significant role in improving the user experience and visual experience of the software. However, the implementation of the energy ball is a difficult problem in the software development process. After the back end transmits the data to the front end, if the style of the energy ball needs to change dynamically with the data, the front end needs to program the drawing of the energy ball style in the design drawing. It takes a lot of time to draw irregular graphics through programming, and write a lot of code. Time cost, labor cost, etc. are all expenses. Moreover, since a large amount of code is constantly requested to run as the data changes, it occupies more running resources, affects software performance, and slows down the software running speed. Therefore, there is an urgent need for a method of generating energy balls with less code. Summary of the invention

[0003] The embodiment of the present invention provides an energy ball generation method, aiming to provide a low-code energy ball generation method. By splitting the energy ball graphic to be generated into a background component, a first filling component and a first boundary component, the changing part can be decoupled from the energy ball as a whole, so that the change of the energy ball graphic only depends on the change of the first filling component and the first boundary component, and only the change of the first filling component and the first boundary component needs to be programmed, thereby reducing the code amount of the energy ball and reducing the impact on software performance.

[0004] In a first aspect, an embodiment of the present invention provides a method for generating an energy ball, the method comprising:

[0005] The energy ball graphic to be generated is split into a background component, a first filling component and a first boundary component, wherein the first filling component and the background component are circular structures, the first filling component and the background component have the same radius, and the connecting edge of the first boundary component is connected to the cutting edge of the first filling component;

[0006] The first filling component is cropped according to the dynamic data to be displayed at the current moment to obtain a cropped second filling component, and a cropping edge size of the second filling component is determined;

[0007] Based on the cropping edge size, adjusting the size of the first border component to obtain an adjusted second border component, wherein the connecting edge size of the second border component is the same as the cropping edge size of the second filling component;

[0008] The background component, the second boundary component and the second filling component are combined and spliced ​​to obtain the energy ball at the current moment.

[0009] Optionally, the step of clipping the first filling component according to the dynamic data to be displayed at the current moment to obtain the clipped second filling component includes:

[0010] Determining the display height of the second filling component according to the dynamic data to be displayed at the current moment;

[0011] Based on the display height of the second filling component, the first filling component is cut to obtain a cut second filling component.

[0012] Optionally, the step of determining the trimming margin size of the second filling component includes:

[0013] Based on the display height and the radius, determining a step difference between the center of the circle and the display height;

[0014] Based on the step difference and the radius, a cutting edge size of the second filling component is calculated.

[0015] Optionally, the step of adjusting the size of the first boundary component based on the cropping margin size to obtain an adjusted second boundary component includes:

[0016] determining a first connecting edge size of the first boundary component;

[0017] Determining the trimming edge size as the second connection edge size of the second boundary component;

[0018] Determining a scaling ratio of the second boundary component based on a ratio value between the first connection edge size and the second connection edge size;

[0019] The first boundary component is scaled and adjusted based on the scaling ratio to obtain an adjusted second boundary component.

[0020] Optionally, the step of combining and splicing the background component, the second boundary component, and the second filling component to obtain the energy ball at the current moment includes:

[0021] Splicing the second filling component with the background component to obtain a first spliced ​​pattern;

[0022] On the basis of the first splicing pattern, the second boundary component and the second filling component are spliced ​​to obtain a second splicing pattern;

[0023] Based on the second spliced ​​pattern, the energy ball at the current moment is generated.

[0024] Optionally, the step of splicing the second boundary component and the second filling component on the basis of the first spliced ​​graphic to obtain the second spliced ​​graphic includes:

[0025] Based on the first stitching pattern, aligning the connection edge of the second border component with the cutting edge of the second filling component;

[0026] The aligned second boundary component and the second filling component are spliced ​​together to obtain a second spliced ​​pattern.

[0027] Optionally, before the step of generating the energy ball at the current moment based on the second spliced ​​graphic, the method further includes:

[0028] Based on the second stitching pattern, a stitching area of ​​the second boundary component and the second filling component is determined, wherein the stitching area includes the same-color area and the different-color area, wherein the same-color area is an area of ​​the second boundary component having the same color as the second filling component, and the different-color area is an area of ​​the second boundary component having a different color from the second filling component;

[0029] In the splicing area, the same-color area is smoothed, and the different-color area is enhanced.

[0030] In a second aspect, an embodiment of the present invention further provides an energy ball generating device, the energy ball generating device comprising:

[0031] A splitting module, used for splitting the energy ball graphic to be generated into a background component, a first filling component and a first boundary component, wherein the first filling component and the background component are circular structures, the first filling component and the background component have the same radius, and the connecting edge of the first boundary component is connected to the cutting edge of the first filling component;

[0032] A first processing module, configured to perform a cropping process on the first filling component according to the dynamic data to be displayed at the current moment, to obtain a cropped second filling component, and to determine a cropping edge size of the second filling component;

[0033] An adjustment module, configured to adjust the size of the first border component based on the cropping edge size to obtain an adjusted second border component, wherein the connection edge size of the second border component is the same as the cropping edge size of the second filling component;

[0034] The second processing module is used to combine and splice the background component, the second boundary component and the second filling component to obtain the energy ball at the current moment.

[0035] In a third aspect, an embodiment of the present invention provides an electronic device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the energy ball generation method provided in the embodiment of the present invention when executing the computer program.

[0036] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the steps in the energy ball generation method provided in the embodiment of the invention are implemented.

[0037] In an embodiment of the present invention, the energy ball graphic to be generated is split into a background component, a first filling component and a first boundary component, the first filling component and the background component are circular structures, the first filling component and the background component have the same radius, and the connection edge of the first boundary component is connected to the cutting edge of the first filling component; the first filling component is clipped according to the dynamic data to be displayed at the current moment to obtain the clipped second filling component, and the cutting edge size of the second filling component is determined; based on the cutting edge size, the size of the first boundary component is adjusted to obtain the adjusted second boundary component, and the connection edge size of the second boundary component is the same as the cutting edge size of the second filling component; the background component, the second boundary component and the second filling component are combined and spliced ​​to obtain the energy ball at the current moment. The present invention decouples the changing part from the energy ball as a whole by splitting the energy ball graphic to be generated into a background component, a first filling component and a first boundary component, so that the change of the energy ball graphic only depends on the change of the first filling component and the first boundary component, and only the change of the first filling component and the first boundary component needs to be programmed, thereby reducing the amount of code of the energy ball and reducing the impact on software performance. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] 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 only 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.

[0039] Figure 1 is a flow chart of a method for generating an energy ball provided by an embodiment of the present invention;

[0040] Figure 2 An overall schematic diagram of an energy ball graphic provided by an embodiment of the present invention;

[0041] Figure 3 A schematic diagram of splitting an energy ball graphic provided by an embodiment of the present invention;

[0042] Figure 4 It is a structural schematic diagram of an energy ball generating device provided by an embodiment of the present invention;

[0043] Figure 5 It is a structural schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0044] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0045] like Figure 1 As shown, Figure 1 This is a method flow chart of an energy ball generation method provided by an embodiment of the present invention. The energy ball generation method comprises the steps of:

[0046] 101. Split the energy ball graphic to be generated into a background component, a first filling component and a first boundary component.

[0047] In an embodiment of the present invention, the energy ball graphic to be generated can be determined according to the design requirements, the overall vision is spherical, and a spherical vision (3D vision) is formed by plane drawing technology. The first filling component and the background component are circular structures, and the first filling component and the background component have the same radius. The connecting edge of the first boundary component is connected to the clipping edge of the first filling component. Specifically, the first boundary component is on the top, and the first filling component is on the bottom, and the connecting edge of the first boundary component is connected to the clipping edge of the first filling component. The above-mentioned first boundary component can be a regular graphic or an irregular graphic. The format of the above-mentioned background component, the first filling component and the first boundary component can be an SVG picture format or other types of editable picture formats.

[0048] In a possible embodiment, the first boundary component may also be a GIF dynamic picture. The GIF dynamic picture may be divided according to the granularity of the dynamic data. Dynamic data of different sizes may correspond to different GIF dynamic pictures, and continuously changing dynamic data may correspond to multiple continuous GIF dynamic pictures.

[0049] You can use the graphic splitting software to split the energy ball graphic into its components, or you can use the graphic drawing software to draw out the components of the energy ball graphic. Figure 2 and Figure 3 , Figure 2 An overall schematic diagram of an energy ball graphic provided by an embodiment of the present invention, Figure 3 A schematic diagram of the splitting of an energy ball graphic provided in an embodiment of the present invention.

[0050] After obtaining the background component, the first filling component and the first boundary component, the background component, the first filling component and the first boundary component can be stored locally, and when used, the corresponding components can be directly read for processing.

[0051] It should be noted that the above-mentioned energy ball is used to indicate the degree of change of data. It is a graphic display of data and may also have other names, such as floating ball, progress ball, cleaning ball, etc.

[0052] 102. The first filling component is cropped according to the dynamic data to be displayed at the current moment to obtain a cropped second filling component, and a cropping edge size of the second filling component is determined.

[0053] In the embodiment of the present invention, in the device display interface, the energy ball graphic is displayed at each moment, so the corresponding energy ball graphic can be generated at each moment. The above dynamic data to be displayed is dynamically changing data that needs to be visualized, which can be data that changes with time, such as percentage data and progress data.

[0054] According to the dynamic data to be displayed, the first filling component is cut so that the portion that can be filled by the first filling component is adapted to the dynamic data to be displayed. For example, if the dynamic data to be displayed is 61%, the first filling component can be cut downward along the diameter from the top, 39% of the diameter length can be cut off, and the remaining portion can be used as the cut second filling component.

[0055] The first filling component can be clipped by using a graphic clipping tool or by writing graphic clipping codes.

[0056] The second filling component includes an original edge and a trimmed edge, the two ends of the trimmed edge are connected to the two ends of the original edge, the original edge is the edge of the first filling component that is not trimmed, and the trimmed edge is the new edge generated after the first filling component is trimmed.

[0057] The trimming margin size of the second filling component can be obtained through the association between the dynamic data to be displayed and the trimming margin size, and different dynamic data to be displayed corresponds to different trimming margin sizes. In some possible embodiments, it can also be obtained through graphic measurement or pixel calculation.

[0058] 103. Based on the cropping edge size, adjust the size of the first boundary component to obtain an adjusted second boundary component.

[0059] In the embodiment of the present invention, the size of the first border component is adjusted to be compatible with the size of the cropping edge, that is, the size of the joint of the first border component and the second filling component is equal. The first border component after the size adjustment is determined as the second border component. The second border component is used to be combined and spliced ​​with the second filling component to form a graphic for representing the dynamic data to be displayed at the current moment.

[0060] The first boundary component may be scaled by using a graphics scaling tool or by writing graphics scaling code to obtain a corresponding second boundary component.

[0061] In a possible embodiment, the above-mentioned first boundary component is a dynamic component. Within a change cycle, the first boundary components corresponding to different graphics at different times, and the first boundary components corresponding to each time within a change cycle are all stored locally. The first boundary component corresponding to the current time can be selected for scaling processing to obtain the corresponding second boundary component.

[0062] 104. Combine and splice the background component, the second boundary component, and the second filling component to obtain the energy ball at the current moment.

[0063] In the embodiment of the present invention, the background component, the second boundary component and the second filling component can be combined and spliced ​​at different levels to obtain the energy ball at the current moment. Specifically, the background component is the bottom layer, the second filling component is the middle layer, and the second boundary component is the top layer. The background component, the second boundary component and the second filling component are combined and spliced ​​to obtain the energy ball at the current moment.

[0064] After obtaining the energy ball at the current moment, the energy ball at the current moment is displayed in real time on the device interface.

[0065] It should be noted that since the energy ball is split into a background component, a first filling component and a first border component, only the cropping of the first filling component, the resizing of the first border component and the component splicing need to be programmed, which greatly reduces the code length.

[0066] In an embodiment of the present invention, the energy ball graphic to be generated is split into a background component, a first filling component and a first boundary component, the first filling component and the background component are circular structures, the first filling component and the background component have the same radius, and the connecting edge of the first boundary component is connected to the cropping edge of the first filling component; the first filling component is cropped according to the dynamic data to be displayed at the current moment to obtain a cropped second filling component, and the cropping edge size of the second filling component is determined; based on the cropping edge size, the size of the first boundary component is adjusted to obtain an adjusted second border component, and the connecting edge size of the second border component is the same as the cropping edge size of the second filling component; the background component, the second border component and the second filling component are combined and spliced ​​to obtain the energy ball at the current moment. The present invention decouples the changing part from the energy ball as a whole by splitting the energy ball graphic to be generated into a background component, a first filling component and a first boundary component, so that the change of the energy ball graphic only depends on the change of the first filling component and the first boundary component (mainly the cropping change of the first filling component and the scaling change of the first boundary component). Only the changes of the first filling component and the first boundary component need to be programmed, thereby reducing the amount of code of the energy ball and minimizing the impact on software performance.

[0067] It can be understood that in the specific implementation of this application, it involves application data, dynamic data, interface data, user data and other related data. When the embodiments in this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of relevant data, as well as model training, deployment and use, must comply with relevant laws, regulations and standards of relevant countries and regions.

[0068] Optionally, in the step of cropping the first filling component according to the dynamic data to be displayed at the current moment to obtain the cropped second filling component, the display height of the second filling component can be determined according to the dynamic data to be displayed at the current moment; based on the display height of the second filling component, the first filling component is cropped to obtain the cropped second filling component.

[0069] In an embodiment of the present invention, the display height of the second filling component is determined according to the dynamic data to be displayed. The above display height is the scheduling of the filling component after cutting, which is used to illustrate the proportion and shape of the filling component in the energy ball. Specifically, there is a pre-set mapping relationship between the display height and the dynamic data. For example, the dynamic data to be displayed represents a percentage value, and the percentage value can be linearly mapped to the diameter height of the filling component, so that the height of the filling component is dynamically adjusted as the percentage value changes.

[0070] Furthermore, assuming that the radius of the energy ball is r, the radius of the background component and the first filling component is r, the dynamic data to be displayed is n, and n is a percentage value or a proportional value, the linear mapping of the display height h is: h = 2r*n. Taking n as 75% as an example, the display schedule h = 2r*75% = 1.5r.

[0071] After the display height h is determined, the first filling component can be clipped based on the display height h. During the clipping process, the portion of the first filling component that is lower than the display height is retained, and the portion that is higher than the display height is removed, so that a second filling component corresponding to the dynamic data is obtained.

[0072] The cropping process can be based on coordinates, shape, etc., and can accurately crop the required image portion according to the specified cropping area and shape.

[0073] By precisely controlling the boundaries and shapes of the clipping, an efficient and accurate way of generating energy balls can be achieved, thereby improving the user experience and visual experience of the software.

[0074] Optionally, in the step of determining the trimming size of the second filling component, the step difference between the center of the circle and the display height can be determined based on the display height and the radius; and the trimming size of the second filling component can be calculated based on the step difference and the radius.

[0075] In the embodiment of the present invention, the display height refers to the height to which the second filling component should be displayed, determined according to the dynamic data to be displayed, and the radius refers to the radius of the circular structure of the first filling component (also the background component).

[0076] In the process of determining the size of the cropping edge, the step difference c between the center of the circle and the display height can be calculated based on the display height and radius. The step difference c is equal to the absolute value of the display height h minus the radius r, that is, c = |2r*nr|. The above step difference c represents the distance from the center of the circle to the horizontal line where the display height h is located. Taking n as 75% as an example, the step difference c = |2r*75%-r| = |1.5rr| = 0.5r.

[0077] After calculating the step difference c, the trimming edge size of the second filling component can be calculated based on the step difference and the radius. The trimming edge size b refers to the length of the top straight line of the trimmed second filling component. Since the trimming is based on the display height h, the trimmed second filling component will appear as an incomplete circle, and its top straight line is the required trimming edge.

[0078] When calculating the size of the cropping edge, you can use geometry and trigonometric functions to calculate. Specifically, the cropping edge size b can be calculated using the following formula:

[0079]

[0080] Taking n as 75% as an example, the cropping edge size is

[0081] Through precise calculation and appropriate adjustments, we can ensure that the energy ball can present a consistent and accurate visual effect when displaying dynamic data, thereby improving the user experience and the overall quality of the software.

[0082] Optionally, in the step of adjusting the size of the first boundary component based on the cropping edge size to obtain an adjusted second boundary component, the first connecting edge size of the first boundary component can be determined; the cropping edge size can be determined as the second connecting edge size of the second boundary component; based on the ratio between the first connecting edge size and the second connecting edge size, the scaling ratio of the second boundary component can be determined; and the first boundary component can be scaled and adjusted based on the scaling ratio to obtain an adjusted second boundary component.

[0083] In an embodiment of the present invention, the trimming edge size is determined as the second connecting edge size of the second boundary component, so that the trimming edge of the second filling component and the connecting edge of the second boundary component have the same size, which can ensure that the second boundary component can fit tightly with the second filling component to avoid graphic breakage or overlap.

[0084] By comparing the ratio of the first connecting edge size to the second connecting edge size (cropping edge size), the ratio of the second border component to be scaled is calculated to obtain the ratio between the first connecting edge size and the second connecting edge size. The ratio is used to adjust the overall size of the first border component to obtain the corresponding second border component to ensure the coordination and consistency between the second border component and the second filling component. Assuming that the first connecting edge size is a, and the second connecting edge size is the same as the cropping edge size b, the ratio s between the first connecting edge size and the second connecting edge size is:

[0085]

[0086] Take n as 75% as an example,

[0087] The above ratio s is used as the scaling ratio of the first boundary component, and the first boundary component is scaled to obtain a second boundary component with a connecting edge size of b. The adjusted second boundary component will be combined with the second filling component to form a dynamically changing part of the energy ball.

[0088] By accurately calculating the scaling ratio of the first boundary component, it is possible to ensure that the generated energy ball graphic is visually continuous and consistent, thereby improving the user experience.

[0089] Optionally, in the step of combining and splicing the background component, the second boundary component and the second filling component to obtain the energy ball at the current moment, the second filling component can be spliced ​​with the background component to obtain a first spliced ​​pattern; based on the first spliced ​​pattern, the second boundary component and the second filling component can be spliced ​​to obtain a second spliced ​​pattern; based on the second spliced ​​pattern, the energy ball at the current moment is generated.

[0090] In the embodiment of the present invention, it should be noted that the background component, as the basis of the energy ball, is usually a complete circle, which is used to set off and highlight the filling component and the border component. The second filling component is obtained by cutting according to the dynamic data, and its shape and size will change with the change of the dynamic data. The second border component is an irregular structure that is close to the cutting edge of the second filling component, which is used to enhance the three-dimensional sense and visual effect of the energy ball.

[0091] On the basis of the background component, the second filling component is spliced ​​with the background component, wherein the layer where the background component is located is the bottom layer, and the layer where the second filling component is located is located above the layer where the background component is located. Since the second filling component and the background component are both circular structures with the same radius, the centers of the second filling component and the background component can be overlapped so that the second filling component and the background component are aligned at the center of the circle. After alignment, the corresponding layers are spliced ​​and fused to obtain the first spliced ​​graphic. In the first spliced ​​graphic, the background component is used as the frame of the energy ball, and the second filling component is used as the background color of the dynamic data to fill in the background component.

[0092] On the basis of the first splicing pattern, the second border component can be spliced ​​with the second filling component, and the layer where the second border component is located is located above the layer where the second filling component is located. In the process of splicing the second border component with the second filling component, the connecting edge of the border component needs to be closely fitted with the cutting edge of the filling component to avoid gaps or overlaps. The size and position of the second border component can be calculated to ensure that it is accurately matched with the filling component. After the second border component and the second filling component are spliced, a second splicing pattern is obtained, in which the second border component is set on top of the second filling component and is located within the background component, and the second splicing pattern is a complete energy ball pattern.

[0093] The second spliced ​​graphic may be directly used as the energy ball at the current moment, or the second spliced ​​graphic may be post-processed and the post-processed second spliced ​​graphic may be used as the energy ball at the current moment.

[0094] By generating energy balls in a splicing manner, we can ensure the balance between the energy ball generation speed and software performance, thereby providing users with a smoother and more intuitive data display experience.

[0095] Optionally, in the step of splicing the second boundary component with the second filling component to obtain the second splicing figure on the basis of the first splicing figure, the connecting edge of the second boundary component can be aligned with the cutting edge of the second filling component on the basis of the first splicing figure; the aligned second boundary component and the second filling component can be spliced ​​to obtain the second splicing figure.

[0096] In the embodiment of the present invention, it should be noted that the first spliced ​​graphic includes a background component and a second filling component, that is, the first spliced ​​graphic is formed by splicing the background component and the second filling component.

[0097] On the basis of the first splicing pattern, the connecting edge of the second border component is aligned with the cutting edge of the second filling component, so that the border component and the filling component are visually connected to each other.

[0098] In a possible embodiment, in order to improve the alignment accuracy between the second boundary component and the second filling component, an edge detection algorithm in image processing technology can be used to automatically identify and locate the edge positions (connecting edges and cropping edges) of the second boundary component and the second filling component, and then achieve alignment by adjusting the position parameters of the second boundary component and the second filling component.

[0099] After the second boundary component and the second filling component are aligned, the aligned second boundary component and the second filling component can be spliced ​​to form an overall graphic to obtain a second spliced ​​graphic, which includes the background component, the second filling component and the second boundary component.

[0100] In a possible embodiment, in order to maintain the integrity and continuity of the graphics and avoid breaks or overlaps, a fusion algorithm in graphics rendering technology may be used to generate a smooth transition effect by calculating the pixel values ​​of two components, thereby achieving seamless splicing.

[0101] The second splicing graphic is obtained by splicing the second boundary component into the first splicing graphic, so that the second splicing graphic already contains all the information of the background component, the second filling component and the second boundary component, and can be directly used as the energy ball at the current moment.

[0102] Optionally, before the step of generating the energy ball at the current moment based on the second stitching pattern, the stitching area of ​​the second boundary component and the second filling component can be determined based on the second stitching pattern, and the stitching area includes the same color area and the different color area. The same color area is the area in the second boundary component that has the same color as the second filling component, and the different color area is the area in the second boundary component that has a different color from the second filling component; in the stitching area, the same color area is smoothed, and the different color area is enhanced.

[0103] In an embodiment of the present invention, the second boundary component includes a first color area of ​​the same color as the second filling component, and a second color area of ​​a different color from the second filling component, so that the dynamic effect of the energy ball can be more obvious. During the splicing process, the first color area and the second color area are in contact with the second filling component to form a splicing area. The above-mentioned splicing area can be a square-shaped area, such as a square-shaped area formed by the splicing point spreading to both sides.

[0104] The same color area refers to the part of the second boundary component that has the same color as the second filling component, and the same color area includes a part of the first color area. The different color area refers to the part of the second boundary component that has a different color from the second filling component, and the different color area includes a part of the second color area.

[0105] After the splicing area is determined, the splicing area is image processed. Specifically, the same color area is smoothed to eliminate noise and discontinuity in the second splicing pattern, so that the second splicing pattern looks more natural and smooth. In the energy ball, the smoothing process can make the transition of the same color area more natural and avoid abrupt color changes or obvious seams. Various image processing algorithms, such as Gaussian blur, mean filtering, etc., can be used for smoothing.

[0106] Enhance the heterochromatic area to highlight its characteristics and make it contrast sharply with the surrounding area. In the energy ball, enhance the heterochromatic area to highlight the specific state or change of the data. You can use contrast stretching, color adjustment and other methods to enhance the heterochromatic area.

[0107] By smoothing the same-color areas in the splicing area and enhancing the different-color areas, the visual effect and user experience of the energy ball can be significantly improved.

[0108] like Figure 4 As shown, an embodiment of the present invention provides an energy ball generating device, the energy ball generating device comprising:

[0109] A splitting module 201 is used to split the energy ball graphic to be generated into a background component, a first filling component and a first boundary component, wherein the first filling component and the background component are circular structures, the first filling component and the background component have the same radius, and the connection edge of the first boundary component is connected to the cutting edge of the first filling component;

[0110] A first processing module 202 is used to perform a cropping process on the first filling component according to the dynamic data to be displayed at the current moment, obtain a cropped second filling component, and determine a cropping edge size of the second filling component;

[0111] An adjustment module 203, configured to adjust the size of the first border component based on the cropping edge size to obtain an adjusted second border component, wherein the connection edge size of the second border component is the same as the cropping edge size of the second filling component;

[0112] The second processing module 204 is used to combine and splice the background component, the second boundary component and the second filling component to obtain the energy ball at the current moment.

[0113] Optionally, the first processing module 202 is also used to determine the display height of the second filling component according to the dynamic data to be displayed at the current moment; based on the display height of the second filling component, the first filling component is cropped to obtain a cropped second filling component.

[0114] Optionally, the first processing module 202 is further used to determine the step difference between the center of the circle and the display height based on the display height and the radius; and calculate the trimming edge size of the second filling component based on the step difference and the radius.

[0115] Optionally, the adjustment module 203 is also used to determine the first connecting edge size of the first boundary component; determine the cropping edge size as the second connecting edge size of the second boundary component; determine the scaling ratio of the second boundary component based on the ratio between the first connecting edge size and the second connecting edge size; and scale the first boundary component based on the scaling ratio to obtain an adjusted second boundary component.

[0116] Optionally, the second processing module 204 is also used to splice the second filling component with the background component to obtain a first spliced ​​pattern; based on the first spliced ​​pattern, splice the second boundary component with the second filling component to obtain a second spliced ​​pattern; based on the second spliced ​​pattern, generate the energy ball at the current moment.

[0117] Optionally, the second processing module 204 is further used to align the connecting edge of the second boundary component with the cutting edge of the second filling component based on the first stitching pattern; and stitch the aligned second boundary component with the second filling component to obtain a second stitching pattern.

[0118] Optionally, the device further comprises:

[0119] A third processing module is used to determine, based on the second stitching pattern, a stitching area of ​​the second boundary component and the second filling component, the stitching area including the same-color area and the different-color area, the same-color area is an area of ​​the second boundary component with the same color as the second filling component, and the different-color area is an area of ​​the second boundary component with a different color from the second filling component;

[0120] The fourth processing module is used to perform smoothing processing on the same-color area and enhancement processing on the different-color area in the splicing area.

[0121] The energy ball generation device provided in the embodiment of the present invention can implement each process implemented by the energy ball generation method in the above method embodiment, and can achieve the same beneficial effects. To avoid repetition, it will not be described here.

[0122] See also Figure 5 , Figure 5 is a schematic diagram of the structure of an electronic device provided by an embodiment of the present invention, such as Figure 5 As shown, it includes: a memory 302, a processor 301, and a computer program of the energy ball generation method stored in the memory 302 and executable on the processor 301, wherein:

[0123] The processor 301 is used to call the computer program stored in the memory 302 and execute the following steps:

[0124] The energy ball graphic to be generated is split into a background component, a first filling component and a first boundary component, wherein the first filling component and the background component are circular structures, the first filling component and the background component have the same radius, and the connecting edge of the first boundary component is connected to the cutting edge of the first filling component;

[0125] The first filling component is cropped according to the dynamic data to be displayed at the current moment to obtain a cropped second filling component, and a cropping edge size of the second filling component is determined;

[0126] Based on the cropping edge size, adjusting the size of the first border component to obtain an adjusted second border component, wherein the connecting edge size of the second border component is the same as the cropping edge size of the second filling component;

[0127] The background component, the second boundary component and the second filling component are combined and spliced ​​to obtain the energy ball at the current moment.

[0128] Optionally, the step of clipping the first filling component according to the dynamic data to be displayed at the current moment to obtain the clipped second filling component executed by the processor 301 includes:

[0129] Determining the display height of the second filling component according to the dynamic data to be displayed at the current moment;

[0130] Based on the display height of the second filling component, the first filling component is cut to obtain a cut second filling component.

[0131] Optionally, the step of determining the trimming margin size of the second filling component performed by the processor 301 includes:

[0132] Based on the display height and the radius, determining a step difference between the center of the circle and the display height;

[0133] Based on the step difference and the radius, a cutting edge size of the second filling component is calculated.

[0134] Optionally, the step of adjusting the size of the first boundary component based on the cropping edge size to obtain an adjusted second boundary component performed by the processor 301 includes:

[0135] determining a first connecting edge size of the first boundary component;

[0136] Determining the trimming edge size as the second connection edge size of the second boundary component;

[0137] Determining a scaling ratio of the second boundary component based on a ratio value between the first connection edge size and the second connection edge size;

[0138] The first boundary component is scaled and adjusted based on the scaling ratio to obtain an adjusted second boundary component.

[0139] Optionally, the step of combining and splicing the background component, the second boundary component, and the second filling component to obtain the energy ball at the current moment, performed by the processor 301, includes:

[0140] Splicing the second filling component with the background component to obtain a first spliced ​​pattern;

[0141] On the basis of the first splicing pattern, the second boundary component and the second filling component are spliced ​​to obtain a second splicing pattern;

[0142] Based on the second spliced ​​pattern, the energy ball at the current moment is generated.

[0143] Optionally, the step of obtaining a second stitched graphic by stitching the second boundary component and the second filling component on the basis of the first stitched graphic, performed by the processor 301, includes:

[0144] Based on the first stitching pattern, aligning the connection edge of the second border component with the cutting edge of the second filling component;

[0145] The aligned second boundary component and the second filling component are spliced ​​together to obtain a second spliced ​​pattern.

[0146] Optionally, before the step of generating the energy ball at the current moment based on the second spliced ​​graphic, the method executed by the processor 301 further includes:

[0147] Based on the second stitching pattern, a stitching area of ​​the second boundary component and the second filling component is determined, wherein the stitching area includes the same-color area and the different-color area, wherein the same-color area is an area of ​​the second boundary component having the same color as the second filling component, and the different-color area is an area of ​​the second boundary component having a different color from the second filling component;

[0148] In the splicing area, the same-color area is smoothed, and the different-color area is enhanced.

[0149] It should be noted that the electronic device provided in the embodiment of the present invention can be applied to smart phones, tablets, computers, servers and other devices that can perform the energy ball generation method.

[0150] The electronic device provided in the embodiment of the present invention can implement each process implemented by the energy ball generation method in the above method embodiment and can achieve the same beneficial effects. To avoid repetition, it will not be described here.

[0151] An embodiment of the present invention also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the various processes of the energy ball generation method provided in the embodiment of the present invention are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0152] A person skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. The computer-readable storage medium can be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM).

[0153] The above disclosure is only the preferred embodiment of the present invention, which certainly cannot be used to limit the scope of the present invention. Therefore, equivalent changes made according to the claims of the present invention are still within the scope of the present invention.

Claims

1. A method for generating an energy ball, characterized in that: The method comprises the following steps: The energy ball graphic to be generated is split into a background component, a first filling component and a first boundary component, wherein the first filling component and the background component are circular structures, the first filling component and the background component have the same radius, and the connecting edge of the first boundary component is connected to the cutting edge of the first filling component; The first filling component is cropped according to the dynamic data to be displayed at the current moment to obtain a cropped second filling component, and a cropping edge size of the second filling component is determined; Based on the cropping edge size, adjusting the size of the first border component to obtain an adjusted second border component, wherein the connecting edge size of the second border component is the same as the cropping edge size of the second filling component; The background component, the second boundary component and the second filling component are combined and spliced ​​to obtain the energy ball at the current moment.

2. The energy ball generation method according to claim 1, characterized in that: The step of clipping the first filling component according to the dynamic data to be displayed at the current moment to obtain the clipped second filling component comprises: Determining the display height of the second filling component according to the dynamic data to be displayed at the current moment; Based on the display height of the second filling component, the first filling component is cut to obtain a cut second filling component.

3. The energy ball generation method according to claim 2, characterized in that: The step of determining the trimming margin size of the second filling component comprises: Based on the display height and the radius, determining a step difference between the center of the circle and the display height; Based on the step difference and the radius, a cutting edge size of the second filling component is calculated.

4. The energy ball generation method according to claim 1, characterized in that: The step of adjusting the size of the first boundary component based on the cropping edge size to obtain an adjusted second boundary component comprises: determining a first connecting edge size of the first boundary component; Determining the trimming edge size as the second connection edge size of the second boundary component; Determining a scaling ratio of the second boundary component based on a ratio value between the first connection edge size and the second connection edge size; The first boundary component is scaled and adjusted based on the scaling ratio to obtain an adjusted second boundary component.

5. The energy ball generation method according to any one of claims 1 to 4, characterized in that: The step of combining and splicing the background component, the second boundary component and the second filling component to obtain the energy ball at the current moment includes: Splicing the second filling component with the background component to obtain a first spliced ​​pattern; On the basis of the first splicing pattern, the second boundary component and the second filling component are spliced ​​to obtain a second splicing pattern; Based on the second spliced ​​pattern, the energy ball at the current moment is generated.

6. The energy ball generation method according to claim 5, characterized in that: The step of splicing the second boundary component and the second filling component on the basis of the first splicing pattern to obtain a second splicing pattern comprises: Based on the first stitching pattern, aligning the connection edge of the second border component with the cutting edge of the second filling component; The aligned second boundary component and the second filling component are spliced ​​together to obtain a second spliced ​​pattern.

7. The energy ball generation method according to claim 5, characterized in that: Before the step of generating the energy ball at the current moment based on the second spliced ​​pattern, the method further includes: Based on the second stitching pattern, a stitching area of ​​the second boundary component and the second filling component is determined, wherein the stitching area includes a same-color area and a different-color area, wherein the same-color area is an area of ​​the second boundary component having the same color as the second filling component, and the different-color area is an area of ​​the second boundary component having a different color from the second filling component; In the splicing area, the same-color area is smoothed, and the different-color area is enhanced.

8. An energy ball generating device, characterized in that: The energy ball generating device comprises: A splitting module, used for splitting the energy ball graphic to be generated into a background component, a first filling component and a first boundary component, wherein the first filling component and the background component are circular structures, the first filling component and the background component have the same radius, and the connecting edge of the first boundary component is connected to the cutting edge of the first filling component; A first processing module, configured to perform a cropping process on the first filling component according to the dynamic data to be displayed at the current moment, to obtain a cropped second filling component, and to determine a cropping edge size of the second filling component; An adjustment module, configured to adjust the size of the first border component based on the cropping edge size to obtain an adjusted second border component, wherein the connection edge size of the second border component is the same as the cropping edge size of the second filling component; The second processing module is used to combine and splice the background component, the second boundary component and the second filling component to obtain the energy ball at the current moment.

9. An electronic device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps in the energy ball generation method as claimed in any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the energy ball generation method according to any one of claims 1 to 7 are implemented.

Images