CN112330773A - Countdown image generation method and device, electronic equipment and computer medium - Google Patents
Countdown image generation method and device, electronic equipment and computer medium Download PDFInfo
- Publication number
- CN112330773A CN112330773A CN202011383169.1A CN202011383169A CN112330773A CN 112330773 A CN112330773 A CN 112330773A CN 202011383169 A CN202011383169 A CN 202011383169A CN 112330773 A CN112330773 A CN 112330773A
- Authority
- CN
- China
- Prior art keywords
- progress bar
- countdown
- progress
- countdown image
- value
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Withdrawn
Links
- 238000000034 method Methods 0.000 title claims abstract description 56
- 230000003247 decreasing effect Effects 0.000 claims description 38
- 238000004590 computer program Methods 0.000 claims description 9
- 230000007423 decrease Effects 0.000 claims description 5
- 238000009877 rendering Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 13
- 101150012763 endA gene Proteins 0.000 description 23
- 230000000875 corresponding effect Effects 0.000 description 22
- 238000010586 diagram Methods 0.000 description 20
- 238000004364 calculation method Methods 0.000 description 9
- 230000008569 process Effects 0.000 description 9
- 230000006870 function Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 238000013461 design Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 230000002596 correlated effect Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/203—Drawing of straight lines or curves
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/001—Texturing; Colouring; Generation of texture or colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Image Generation (AREA)
Abstract
The disclosure relates to a countdown image generation method and device, electronic equipment and a computer readable medium, and belongs to the technical field of computers. The method comprises the following steps: acquiring basic graphic parameters of the countdown image; obtaining a graph drawing parameter of the countdown image according to the basic graph parameter; acquiring a progress bar starting point and a countdown progress corresponding to the countdown image and a progress bar direction in the countdown image, and acquiring a progress bar end point value according to the progress bar starting point, the countdown progress and the progress bar direction; and generating the countdown image according to the graph drawing parameters of the countdown image, the starting point of the progress bar, the end point value of the progress bar and the direction of the progress bar. The method for automatically generating the countdown image by one key can reduce development time and save development cost.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for generating a countdown image, an electronic device, and a computer-readable medium.
Background
During the development and design of a UI interface, developers are often confronted with situations that require the design of a countdown control.
For a developer, when designing a countdown image, the image is often drawn frame by frame according to progress/countdown, and various changes of a progress bar need to be considered, so that a certain development time is occupied.
In view of the above, there is a need in the art for a method that can quickly generate a countdown image.
It is to be noted that the information disclosed in the above background section is only for enhancement of understanding of the background of the present disclosure, and thus may include information that does not constitute prior art known to those of ordinary skill in the art.
Disclosure of Invention
The present disclosure is directed to a method for generating a countdown image, a device for generating a countdown image, an electronic device, and a computer-readable medium, which improve development efficiency and save development time to at least some extent.
According to a first aspect of the present disclosure, there is provided a method of generating a countdown image, including:
acquiring basic graphic parameters of the countdown image;
obtaining a graph drawing parameter of the countdown image according to the basic graph parameter;
acquiring a progress bar starting point and a countdown progress corresponding to the countdown image and a progress bar direction in the countdown image, and acquiring a progress bar end point value according to the progress bar starting point, the countdown progress and the progress bar direction;
and generating the countdown image according to the graph drawing parameters of the countdown image, the starting point of the progress bar, the end point value of the progress bar and the direction of the progress bar.
In an exemplary embodiment of the present disclosure, the obtaining a progress bar end value according to the progress bar starting point, the countdown progress and the progress bar direction includes:
determining a starting value of the progress bar according to the starting point of the progress bar and the direction of the progress bar, and determining an incidence relation between a final value of the progress bar and the countdown progress according to the direction of the progress bar;
and obtaining the progress bar end point value according to the progress bar starting value, the countdown progress and the incidence relation between the progress bar end point value and the countdown progress.
In an exemplary embodiment of the present disclosure, the countdown image includes a circular countdown image, and the determining of the progress bar start value according to the progress bar start point and the progress bar direction includes:
when the direction of the progress bar is clockwise or anticlockwise increased, taking the starting point of the progress bar as a first starting value, and taking the first starting value as the starting value of the progress bar;
when the direction of the progress bar is decreased anticlockwise, obtaining a second initial value according to the starting point of the progress bar, and taking the second initial value as the initial value of the progress bar;
and when the direction of the progress bar is decreased clockwise, obtaining a third initial value according to the starting point of the progress bar, and taking the third initial value as the initial value of the progress bar.
In an exemplary embodiment of the present disclosure, when the direction of the progress bar is decreased counterclockwise, obtaining a second starting value according to the starting point of the progress bar includes:
and when the direction of the progress bar is decreased anticlockwise, obtaining a second initial value according to the sum of the starting point of the progress bar and the circumferential angle.
In an exemplary embodiment of the present disclosure, when the direction of the progress bar is decreased clockwise, obtaining a third starting value according to the starting point of the progress bar includes:
and when the direction of the progress bar is clockwise decreased, obtaining a third initial value according to the difference value between the starting point of the progress bar and the circumferential angle.
In an exemplary embodiment of the present disclosure, the starting point of the progress bar is-pi/2.
In an exemplary embodiment of the present disclosure, the determining an association relationship between a progress bar end point value and the countdown progress according to the progress bar direction includes:
when the direction of the progress bar is clockwise increasing or clockwise decreasing, the incidence relation between the end point value of the progress bar and the countdown progress is positive correlation;
when the direction of the progress bar is anticlockwise increased or anticlockwise decreased, the association relationship between the end point value of the progress bar and the countdown progress is negative correlation.
In an exemplary embodiment of the present disclosure, the acquiring a countdown progress of the countdown image includes:
acquiring current timing and total time corresponding to the countdown image;
and determining the countdown progress of the countdown image according to the ratio of the current timing to the total timing.
In an exemplary embodiment of the present disclosure, the graphic drawing parameter includes a second radius parameter and a circle center coordinate of the circular countdown image.
In an exemplary embodiment of the present disclosure, the obtaining of the graph drawing parameter of the countdown image according to the basic graph parameter includes:
determining a second radius parameter of the circular countdown image according to the first radius parameter and the progress bar width parameter, wherein the second radius parameter is smaller than the first radius parameter;
and determining the circle center coordinate of the circular countdown image according to the first radius parameter.
In an exemplary embodiment of the present disclosure, the generating the countdown image according to the graphic drawing parameter of the countdown image, the starting point of the progress bar, the end point of the progress bar, and the direction of the progress bar includes:
and calling an annular drawing interface of a Bezier curve according to the filling color, the circle center coordinate and the second radius parameter of the circular countdown image, the starting point of the progress bar, the end point value of the progress bar and the direction of the progress bar, and generating the circular countdown image.
According to a second aspect of the present disclosure, there is provided a countdown image generation apparatus including:
a basic parameter obtaining module, configured to obtain basic graphic parameters of the countdown image;
the drawing parameter determining module is used for obtaining the graphic drawing parameters of the countdown image according to the basic graphic parameters;
the progress end point determining module is used for acquiring a progress bar starting point and a countdown progress corresponding to the countdown image and a progress bar direction in the countdown image, and obtaining a progress bar end point value according to the progress bar starting point, the countdown progress and the progress bar direction;
and the countdown image generation module is used for generating the countdown image according to the graph drawing parameters of the countdown image, the starting point of the progress bar, the end point value of the progress bar and the direction of the progress bar.
According to a third aspect of the present disclosure, there is provided an electronic device comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to perform the method of generating a countdown image of any of the above via execution of the executable instructions.
According to a fourth aspect of the present disclosure, there is provided a computer readable medium having stored thereon a computer program which, when executed by a processor, implements the method of generating a countdown image according to any one of the above.
The exemplary embodiments of the present disclosure may have the following advantageous effects:
in the method for generating a countdown image according to the exemplary embodiment of the present disclosure, the corresponding countdown image is generated by obtaining the basic graphic attribute parameters and respectively obtaining the end point values of the progress bar under various different conditions according to the current progress and the direction of the progress bar. Through the generation method of the countdown image in the disclosed example embodiment, on one hand, as long as basic graphic parameters are input, the corresponding countdown image can be quickly generated by one key, so that the code amount in the engineering can be reduced, the readability of the engineering code can be improved, the development efficiency can be improved, and the development time cost can be reduced; on the other hand, the method for generating a countdown image in the exemplary embodiment of the present disclosure supports multi-end rendering, and is applicable to different systems, including iOS, android, and the like.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure. It is to be understood that the drawings in the following description are merely exemplary of the disclosure, and that other drawings may be derived from those drawings by one of ordinary skill in the art without the exercise of inventive faculty.
FIG. 1 shows a flow diagram of a method of generating a countdown image according to an example embodiment of the present disclosure;
FIG. 2 schematically illustrates a schematic diagram of a circular countdown image according to one embodiment of the present disclosure;
FIG. 3 illustrates a flow chart for determining an end value of a progress bar according to an example embodiment of the present disclosure;
FIG. 4 schematically illustrates a schematic diagram of a circular countdown image that increments clockwise according to one embodiment of the present disclosure;
FIG. 5 schematically illustrates a schematic diagram of a circular countdown image that decrements counter-clockwise according to a specific embodiment of the present disclosure;
FIG. 6 schematically illustrates a schematic diagram of a circular countdown image that decrements clockwise according to a specific embodiment of the present disclosure;
FIG. 7 schematically illustrates a schematic diagram of a circular countdown image that increments counterclockwise according to one embodiment of the present disclosure;
FIG. 8 schematically illustrates a schematic diagram of a Bezier curve coordinate system, according to a specific embodiment of the present disclosure;
FIG. 9 illustrates a flow diagram of a method for generating a circular countdown image according to an embodiment of the present disclosure;
FIG. 10 shows a block diagram of a countdown image generation apparatus according to an example embodiment of the present disclosure;
FIG. 11 illustrates a schematic structural diagram of a computer system suitable for use in implementing the electronic device of an embodiment of the present disclosure.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the disclosure. One skilled in the relevant art will recognize, however, that the subject matter of the present disclosure can be practiced without one or more of the specific details, or with other methods, components, devices, steps, and the like. In other instances, well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the present disclosure.
Furthermore, the drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus their repetitive description will be omitted. Some of the block diagrams shown in the figures are functional entities and do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor devices and/or microcontroller devices.
In some related embodiments, during the development of the iOS interface, if the design of the countdown control is needed, the progress bar is drawn frame by frame according to the progress/countdown, and a plurality of changes of the progress bar need to be considered. For example, for a bar-shaped countdown control, it is considered that the progress bar is increased to the right or decreased to the right along with the change of time; for a circular countdown control, more combinations of permutations of the cases need to be considered, such as whether the progress bar is incremented, clockwise or counterclockwise, and the like, and in addition, various complex factors such as the filling color of the progress bar, the width of the progress bar, the radius of the progress bar, and the like need to be considered. For different progress bar change conditions, different drawing modes are required, and therefore certain development time is occupied.
The embodiment of the example can provide a universal countdown control and a universal interface, and a developer only needs to transmit basic numerical values such as a progress bar type, a progress bar filling color, a progress bar width and the like in advance and then can generate a countdown UI effect in a one-key mode according to the current progress or countdown, so that the development time of the developer is greatly reduced.
The present exemplary embodiment first provides a countdown image generation method. Referring to fig. 1, the method for generating a countdown image may include the steps of:
and S110, acquiring basic graphic parameters of the countdown image.
And S120, obtaining a graph drawing parameter of the countdown image according to the basic graph parameter.
Step S130, obtaining a progress bar starting point and a countdown progress corresponding to the countdown image and a progress bar direction in the countdown image, and obtaining a progress bar end point value according to the progress bar starting point, the countdown progress and the progress bar direction.
And S140, generating a countdown image according to the graph drawing parameters of the countdown image, the starting point of the progress bar, the end point value of the progress bar and the direction of the progress bar.
In the method for generating a countdown image according to the exemplary embodiment of the present disclosure, the corresponding countdown image is generated by obtaining the basic graphic attribute parameters and respectively obtaining the end point values of the progress bar under various different conditions according to the current progress and the direction of the progress bar. Through the generation method of the countdown image in the disclosed example embodiment, on one hand, as long as basic graphic parameters are input, the corresponding countdown image can be quickly generated by one key, so that the code amount in the engineering can be reduced, the readability of the engineering code can be improved, the development efficiency can be improved, and the development time cost can be reduced; on the other hand, the method for generating a countdown image in the exemplary embodiment of the present disclosure supports multi-end rendering use, and is applicable to different systems including iOS, android, and the like.
It should be noted that, in the following description of the present exemplary embodiment, a detailed description is given only by taking a method for generating a circular countdown image as an example, and for a method for generating a countdown image of other types, such as a semicircular shape, an arbitrary arc shape, a long strip shape, and the like, the method in the present exemplary embodiment may also be obtained by performing some corresponding adjustments on the method in the present exemplary embodiment, and therefore, the type of the countdown image in the present exemplary embodiment is not particularly limited.
Next, the above steps of the present exemplary embodiment will be described in more detail with reference to fig. 2 to 6.
In step S110, basic graphic parameters of the countdown image are acquired.
In the present exemplary embodiment, the basic graphic parameter refers to a basic attribute parameter required for drawing a countdown image. For a bar-shaped countdown image, parameters such as length and width of the progress bar can be included. For a circular countdown image, parameters such as the radius of the circular image, the width of the progress bar, and the like may be included.
Taking a circular countdown image as an example, the base graphic parameter may include a first radius parameter and a progress bar width parameter. Wherein the first radius parameter refers to the radius of the outer layer of the entire circular countdown image.
In step S120, a graph drawing parameter of the countdown image is obtained based on the basic graph parameter.
In this exemplary embodiment, the graphic drawing parameters refer to parameters that are needed to be used for finally drawing an image, wherein some of the parameters may be obtained directly through basic graphic parameters, and some of the parameters may be obtained through some basic graphic parameters. Taking a circular countdown image as an example, the graph drawing parameters may include a first radius parameter, a progress bar width parameter, a circle center coordinate, and a second radius parameter, where the second radius parameter refers to a radius parameter of the inner ring, and the circle center coordinate and the second radius parameter may be obtained through calculation of the basic graph parameter. The second radius parameter can be determined according to the first radius parameter and the progress bar width parameter, and the circle center coordinate can be determined according to the first radius parameter.
Taking the circular countdown image as shown in fig. 2 as an example, the first radius parameter 201 is the radius of the outer layer; the progress bar width parameter 202 is the loop width lineWidth; the second radius parameter 203 is the radius of the inner ring, and the calculation formula is (radius-lineWidth)/2, namely the radius of the inner ring can be obtained by calculating the radius of the outer layer and the annular width; the center coordinates 204 are calculated by radius/2, i.e. the center coordinates can be calculated by the radius of the outer layer.
In step S130, a progress bar starting point and a countdown progress corresponding to the countdown image and a progress bar direction in the countdown image are obtained, and a progress bar end value is obtained according to the progress bar starting point, the countdown progress and the progress bar direction.
The countdown progress of the countdown image refers to a current progress value of the progress bar obtained from the current timing. And obtaining the terminal value of the current progress bar according to the total length of the progress bar, the countdown progress and the direction of the progress bar. Taking a circular countdown image as an example, the progress bar direction may include 4 kinds of clockwise increment, counterclockwise decrement, clockwise decrement, and counterclockwise increment.
In the present exemplary embodiment, the countdown progress may be directly obtained or may be calculated by the current timing and the total timing, and specifically, the countdown progress of the countdown image may be determined by obtaining the current timing and the total timing corresponding to the countdown image and according to a ratio between the current timing and the total timing. The countdown progress represents the percentage of the progress bar of the current timed part in the total progress, and the specific calculation formula is as follows: count down progress is the current/total count. In the present exemplary embodiment, the progress bar for the countdown progress is started from 0 for the incremental progress bar, and the progress bar for the countdown progress is started from 100% for the decremental progress bar. If the developer directly inputs the countdown progress, for example, 75%, the calculation is not needed, and the subsequent steps are directly carried out.
For example, assuming that the total count is 1 minute and the current count is 15 seconds, the current countdown progress is 25% of the current count/total count, which means that the current countdown progress bar has moved 25% of the total progress.
In this exemplary embodiment, as shown in fig. 3, obtaining the end point value of the progress bar according to the countdown progress and the direction of the progress bar may specifically include the following steps:
and S310, determining a starting value of the progress bar according to the starting point and the direction of the progress bar, and determining an association relation between an end value of the progress bar and the countdown progress according to the direction of the progress bar.
In this exemplary embodiment, the starting point of the progress bar is a designated position on the countdown image, the starting value corresponding to the starting point of the progress bar is related to the direction of the progress bar, and for different directions of the progress bar, different starting values of the progress bar need to be determined according to the starting point of the progress bar and the direction of the progress bar in the process of calculating the end point. In addition, the correlation between the progress bar end value and the countdown progress is different for different progress bar directions, and specifically, the correlation here mainly includes a positive correlation and a negative correlation.
In the present exemplary embodiment, taking a circular countdown image as an example, a point in the circular countdown image closest to an edge on the user interface is determined as a progress bar starting point, such as 402 in fig. 4, 502 in fig. 5, 602 in fig. 6, and 702 in fig. 7; regarding the starting value of the progress bar, when the direction of the progress bar is clockwise or anticlockwise increased, taking the first starting value as the starting value of the progress bar corresponding to the starting point of the progress bar; when the direction of the progress bar is anticlockwise decreased, taking the second initial value as the initial value of the progress bar corresponding to the initial point of the progress bar; and when the direction of the progress bar is clockwise decreased, taking the corresponding starting point of the third starting value progress bar as the starting value of the progress bar.
Specifically, when the progress bar direction is decreased counterclockwise, the second start value is obtained from the sum of the first start value and the circumferential angle. And when the direction of the progress bar is clockwise decreased, obtaining a third initial value according to the difference value of the first initial value and the circumferential angle. Wherein, the circumferential angle is 2 pi. That is, when the direction of the progress bar is clockwise or counterclockwise, the starting value (first starting value) of the progress bar corresponding to the starting point of the progress bar is-2/pi; when the direction of the progress bar is decreased anticlockwise, the starting value (second starting value) of the progress bar corresponding to the starting point of the progress bar is the sum of the first starting value and the circumference angle, namely 3/2 pi; when the progress bar direction is clockwise decreasing, the start value (third start value) of the progress bar corresponding to the start point of the progress bar is the difference between the first start value and the circumferential angle, i.e., -5/2 pi. And determining starting values with different starting points according to different progress bar directions.
For the incidence relation between the progress bar end point value and the countdown progress, when the direction of the progress bar is clockwise increasing or clockwise decreasing, the incidence relation between the progress bar end point value and the countdown progress is positive correlation; when the direction of the progress bar is increased anticlockwise or decreased anticlockwise, the association relationship between the end point value of the progress bar and the countdown progress is negative correlation.
And S320, obtaining a progress bar end value according to the progress bar initial value, the countdown progress and the incidence relation between the progress bar end value and the countdown progress.
For circular countdown images of 4 different progress bar directions of clockwise increment, counterclockwise decrement, clockwise decrement, and counterclockwise increment, a specific method of calculating the end point value of the progress bar is described in detail with reference to fig. 4 to 7.
Fig. 4 is a schematic diagram of a clockwise increasing countdown image, where the starting value of the progress bar is startA, the countdown progress is progress, and the ending value of the progress bar is endA. For the clockwise count-down image 401, it is necessary to construct a ring clockwise as indicated by an arrow direction by positively correlating endA with progress with startA as a start point 402 and endA as an end point 403. The final formula of the obtained progress bar end point value is as follows: endA + progress 2 pi.
As shown in fig. 5, which is a schematic diagram of a countdown image that decreases counterclockwise, for a countdown image 501 that decreases counterclockwise, it is necessary to use startA +2 pi as a starting point 502 and endA as an end point 503 to make endA and progress negatively correlated, and to construct a ring clockwise as shown by the arrow direction. The final formula of the obtained progress bar end point value is as follows: endA ═ startA + (1-progress) × 2 pi.
As shown in fig. 6, which is a schematic diagram of a clockwise decreasing countdown image, for the clockwise decreasing countdown image 601, taking startA-2 pi as a starting point 602 and end a as an end point 603, so that end a and progress are positively correlated, and a ring shape is constructed counterclockwise as shown by an arrow direction. The final formula of the obtained progress bar end point value is as follows: endA ═ startA- (1-progress) × 2 pi.
As shown in fig. 7, which is a schematic diagram of a countdown image that increases counterclockwise, for the countdown image 701 that increases counterclockwise, it is necessary to construct a loop counterclockwise as shown by an arrow direction by negatively correlating endA and progress with startA as a starting point 702 and endA as an ending point 703. The final formula of the obtained progress bar end point value is as follows: endA-progress 2 pi.
In step S140, a countdown image is generated according to the graphic drawing parameter, the progress bar start point, the progress bar end point value, and the progress bar direction of the countdown image.
In this exemplary embodiment, taking a circular countdown image as an example, the graphic drawing parameters of the countdown image may mainly include a first radius parameter, a progress bar width parameter, a circle center coordinate, a second radius parameter, and an image filling color. And calling an image drawing interface by taking startA as a starting point according to the graph drawing parameters of the countdown image, the progress bar direction and the progress bar end value obtained in the step, and generating the corresponding countdown image.
Specifically, in this exemplary embodiment, an annular drawing interface of a bezier curve may be called according to the filling color, the center coordinate, the inner ring radius, the outer layer radius, the width of the progress bar, the starting point of the progress bar, the ending point of the progress bar, and the direction of the progress bar of the circular countdown image, so as to draw a required graph, and finally generate the circular countdown image. The bezier curve is a mathematical curve applied to a two-dimensional graphics application program, and general vector graphics software can accurately draw the curve through the bezier curve. According to the coordinate system of the bezier curve shown in fig. 8, if the coordinate point 801 in fig. 8 is selected as a start point, when the annular drawing interface of the bezier curve is called, the circular countdown image is drawn with startA ═ pi/2 (that is, at the coordinate point 801, 3 pi/2) as a start point.
Fig. 9 is a complete flowchart for generating a circular countdown image in an embodiment of the present disclosure, which is an illustration of the above steps in the present exemplary embodiment, and the specific steps in the flowchart are as follows:
and S902, calculating the circle center coordinate and the radius of the inner ring of the ring according to the parameters such as the filling color, the width of the ring, the radius of the outer layer and the like.
The circle center coordinate can be obtained by calculation according to the radius of the outer layer, and the radius of the inner ring can be obtained by calculation according to the annular width and the radius of the outer layer. Step S902 is a basic attribute module.
And S904, judging whether the current timing and the total time are input.
If the developer inputs the current time count and the total time count, the step S906 is entered, and the progress is calculated according to the current time count and the total time count; if the developer directly inputs the progress, the progress does not need to be calculated again, and the process directly proceeds to step S908.
And S906, calculating the progress according to the current timing and the total timing.
The calculation formula is as follows: countdown progress is (total count-current count)/total count.
And S908, executing the subsequent steps according to the progress, the clockwise direction or the incremental direction, wherein the starting point is set to be startA-pi/2, and the end point is set to be endA.
And S910, judging whether the number is increased clockwise or not.
If the circular countdown image is increased clockwise, the method proceeds to step S912, and calculates an end point endA according to a formula increased clockwise; if not, the process proceeds to step S914.
Step s912, calculating an end point endA increasing clockwise according to the formula endA + startA + progress 2 pi.
And S914, judging whether the counter-clockwise is decreased.
If the circular countdown image is decreased counterclockwise, the process proceeds to step S916, and an end point endA is calculated according to a formula of decreasing counterclockwise; if not, the process proceeds to step S918.
Step s916, calculating an end point endA decreasing counterclockwise according to the formula endA ═ startA + (1-progress) × 2 pi.
And S918, judging whether the value is decreased clockwise or not.
If the circular countdown image is decreased clockwise, the step S920 is performed, and the end point endA is calculated according to the formula of the clockwise decrease; if not, the process proceeds to step S922.
Step s920, calculating an end point endA decreasing clockwise according to the formula endA ═ startA- (1-progress) × 2 pi.
And S922, judging whether the counter-clockwise increment is performed.
If the circular countdown image is increasing counterclockwise, the process proceeds to step S924, and calculates the end point endA according to the formula increasing counterclockwise.
Step s924, an end point endA increasing counterclockwise is calculated according to the formula endA-progress 2 pi.
The steps S910 to S924 are end point calculating modules.
And S926, calling an annular drawing interface of the Bezier curve according to results obtained by the basic attribute module and the end point calculation module, and drawing a required graph.
And drawing a circular countdown image with startA ═ pi/2 as a starting point according to the parameters such as the filling color, the annular width, the outer layer radius, the center coordinates and the inner ring radius obtained in the basic attribute module in the step S902 and the end point endA obtained in the end point calculation module in the steps S910 to S924.
It should be noted that although the various steps of the methods of the present disclosure are depicted in the drawings in a particular order, this does not require or imply that these steps must be performed in this particular order, or that all of the depicted steps must be performed, to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step execution, and/or one step broken down into multiple step executions, etc.
Further, the present disclosure also provides a countdown image generation apparatus. Referring to fig. 10, the countdown image generation apparatus may include a basic parameter acquisition module 1010, a drawing parameter determination module 1020, a progress end determination module 1030, and a countdown image generation module 1040. Wherein:
the basic parameter obtaining module 1010 may be configured to obtain basic graphic parameters of the countdown image;
the drawing parameter determining module 1020 may be configured to obtain a graph drawing parameter of the countdown image according to the basic graph parameter;
the progress end point determining module 1030 may be configured to obtain a progress bar starting point and a countdown progress corresponding to the countdown image and a progress bar direction in the countdown image, and obtain a progress bar end point value according to the progress bar starting point, the countdown progress and the progress bar direction;
the countdown image generating module 1040 may be configured to generate a countdown image according to the graph drawing parameter of the countdown image, the starting point of the progress bar, the ending point value of the progress bar, and the direction of the progress bar.
In some exemplary embodiments of the present disclosure, the progress end point determining module 1030 may include a start value and association relationship determining unit and an end point value determining unit. Wherein:
the starting value and association relation determining unit may be configured to determine a starting value of the progress bar according to the starting point of the progress bar and the direction of the progress bar, and determine an association relation between an end value of the progress bar and the countdown progress according to the direction of the progress bar;
the end point value determining unit may be configured to obtain an end point value of the progress bar according to the starting value of the progress bar, the countdown progress, and an association relationship between the end point value of the progress bar and the countdown progress.
In some exemplary embodiments of the present disclosure, the start value and association relation determining unit may include a first start value determining unit, a second start value determining unit, and a third start value determining unit. Wherein:
the first start value determining unit may be configured to take the start point of the progress bar as the first start value and the first start value as the start value of the progress bar when the direction of the progress bar is clockwise or counterclockwise;
the second starting value determining unit may be configured to obtain a second starting value according to the starting point of the progress bar when the direction of the progress bar decreases counterclockwise, and use the second starting value as the starting value of the progress bar;
the third start value determining unit may be configured to obtain a third start value according to the start point of the progress bar when the direction of the progress bar is decreasing clockwise, and use the third start value as the start value of the progress bar.
In some exemplary embodiments of the present disclosure, the second start value determining unit may include a second start value calculating unit that may be configured to obtain the second start value according to a sum of the starting point of the progress bar and the circumferential angle when the direction of the progress bar is decreased counterclockwise.
In some exemplary embodiments of the present disclosure, the third start value determining unit may include a third start value calculating unit, which may be configured to obtain the third start value according to a difference between the start point of the progress bar and the circumferential angle when the direction of the progress bar is decreased clockwise.
In some exemplary embodiments of the present disclosure, the starting value and association relation determining unit may further include a positive correlation determining unit and a negative correlation determining unit. Wherein:
the positive correlation determination unit may be configured to determine that the correlation between the progress bar end value and the countdown progress is positive correlation when the progress bar direction is clockwise increasing or clockwise decreasing;
the negative correlation determination unit may be configured to determine that the correlation between the progress bar end point value and the countdown progress is negative correlation when the progress bar direction is counterclockwise increasing or counterclockwise decreasing.
In some exemplary embodiments of the present disclosure, the progress end point determining module 1030 may further include a timing parameter acquiring unit and a current progress determining unit. Wherein:
the timing parameter acquiring unit may be configured to acquire current timing and total timing corresponding to the count-down image;
the current progress determining unit may be configured to determine a countdown progress of the countdown image according to a ratio between the current timing and the total timing.
In some exemplary embodiments of the present disclosure, the drawing parameter determination module 1020 may include a second radius determination unit and a circle center coordinate determination unit. Wherein:
the second radius determining unit may be configured to determine a second radius parameter of the circular countdown image according to the first radius parameter and the progress bar width parameter, where the second radius parameter is smaller than the first radius parameter;
the circle center coordinate determination unit may be configured to determine a circle center coordinate of the circular countdown image according to the first radius parameter.
In some exemplary embodiments of the present disclosure, the countdown image generating module 1040 may include an interface drawing unit, which may be configured to call an annular drawing interface of a bezier curve according to the filling color, the center coordinates, and the second radius parameter of the circular countdown image, and the start point, the end point value, and the direction of the progress bar, so as to generate the circular countdown image.
The specific details of each module/unit in the countdown image generation apparatus have been described in detail in the corresponding method embodiment section, and are not described herein again.
FIG. 11 illustrates a schematic structural diagram of a computer system suitable for use with the electronic device to implement an embodiment of the invention.
It should be noted that the computer system 1100 of the electronic device shown in fig. 11 is only an example, and should not bring any limitation to the functions and the scope of the application of the embodiment of the present invention.
As shown in fig. 11, the computer system 1100 includes a Central Processing Unit (CPU)1101, which can perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)1102 or a program loaded from a storage section 1108 into a Random Access Memory (RAM) 1103. In the RAM 1103, various programs and data necessary for system operation are also stored. The CPU 1101, ROM 1102, and RAM 1103 are connected to each other by a bus 1104. An input/output (I/O) interface 1105 is also connected to bus 1104.
The following components are connected to the I/O interface 1105: an input portion 1106 including a keyboard, mouse, and the like; an output portion 1107 including a signal output unit such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and a speaker; a storage section 1108 including a hard disk and the like; and a communication section 1109 including a network interface card such as a LAN card, a modem, or the like. The communication section 1109 performs communication processing via a network such as the internet. A drive 1111 is also connected to the I/O interface 1105 as necessary. A removable medium 1111 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 1111 as necessary, so that a computer program read out therefrom is mounted into the storage section 1108 as necessary.
In particular, according to an embodiment of the present invention, the processes described below with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the invention include a computer program product comprising a computer program embodied on a computer-readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication portion 1109 and/or installed from the removable medium 1111. When the computer program is executed by a Central Processing Unit (CPU)1101, various functions defined in the system of the present application are executed.
It should be noted that the computer readable media shown in the present disclosure may be computer readable signal media or computer readable storage media or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer-readable signal medium may include a propagated data signal with computer-readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
As another aspect, the present application also provides a computer-readable medium, which may be contained in the electronic device described in the above embodiments; or may exist separately without being assembled into the electronic device. The computer readable medium carries one or more programs which, when executed by an electronic device, cause the electronic device to implement the method as described in the embodiments below.
It should be noted that although in the above detailed description several modules of the device for action execution are mentioned, this division is not mandatory. Indeed, the features and functionality of two or more of the modules described above may be embodied in one module, in accordance with embodiments of the present disclosure. Conversely, the features and functions of one module described above may be further divided into embodiments by a plurality of modules.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains.
It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.
Claims (15)
1. A method of generating a countdown image, comprising:
acquiring basic graphic parameters of the countdown image;
obtaining a graph drawing parameter of the countdown image according to the basic graph parameter;
acquiring a progress bar starting point and a countdown progress corresponding to the countdown image and a progress bar direction in the countdown image, and acquiring a progress bar end point value according to the progress bar starting point, the countdown progress and the progress bar direction;
and generating the countdown image according to the graph drawing parameters of the countdown image, the starting point of the progress bar, the end point value of the progress bar and the direction of the progress bar.
2. The method for generating a countdown image according to claim 1, wherein the obtaining a progress bar end value according to the progress bar starting point, the countdown progress and the progress bar direction includes:
determining a starting value of the progress bar according to the starting point of the progress bar and the direction of the progress bar, and determining an incidence relation between a final value of the progress bar and the countdown progress according to the direction of the progress bar;
and obtaining the progress bar end point value according to the progress bar starting value, the countdown progress and the incidence relation between the progress bar end point value and the countdown progress.
3. The method of generating a countdown image according to claim 2, wherein the countdown image includes a circular countdown image, and the determining a progress bar start value according to the progress bar start point and the progress bar direction includes:
when the direction of the progress bar is clockwise or anticlockwise increased, taking the starting point of the progress bar as a first starting value, and taking the first starting value as the starting value of the progress bar;
when the direction of the progress bar is decreased anticlockwise, obtaining a second initial value according to the starting point of the progress bar, and taking the second initial value as the initial value of the progress bar;
and when the direction of the progress bar is decreased clockwise, obtaining a third initial value according to the starting point of the progress bar, and taking the third initial value as the initial value of the progress bar.
4. The method for generating a countdown image according to claim 3, wherein when the progress bar direction decreases counterclockwise, obtaining a second starting value according to the starting point of the progress bar includes:
and when the direction of the progress bar is decreased anticlockwise, obtaining a second initial value according to the sum of the starting point of the progress bar and the circumferential angle.
5. The method for generating a countdown image according to claim 3, wherein when the progress bar direction is clockwise decreasing, obtaining a third starting value according to the starting point of the progress bar includes:
and when the direction of the progress bar is clockwise decreased, obtaining a third initial value according to the difference value between the starting point of the progress bar and the circumferential angle.
6. The method according to any one of claims 3 to 5, wherein the progress bar starting point is-pi/2.
7. The method for generating a countdown image according to claim 3, wherein the determining the association relationship between the progress bar end value and the countdown progress according to the progress bar direction includes:
when the direction of the progress bar is clockwise increasing or clockwise decreasing, the incidence relation between the end point value of the progress bar and the countdown progress is positive correlation;
when the direction of the progress bar is anticlockwise increased or anticlockwise decreased, the association relationship between the end point value of the progress bar and the countdown progress is negative correlation.
8. The method of generating a countdown image according to claim 1, wherein the acquiring a countdown progress of the countdown image includes:
acquiring current timing and total time corresponding to the countdown image;
and determining the countdown progress of the countdown image according to the ratio of the current timing to the total timing.
9. The generation method of a countdown image according to claim 1, wherein the countdown image includes a circular countdown image, and the basic graphic parameter includes a first radius parameter and a progress bar width parameter.
10. The method of claim 9, wherein the graphical drawing parameters comprise a second radius parameter and circle center coordinates of the circular countdown image.
11. The method of claim 10, wherein said deriving graphics rendering parameters for the countdown image from the base graphics parameters comprises:
determining a second radius parameter of the circular countdown image according to the first radius parameter and the progress bar width parameter, wherein the second radius parameter is smaller than the first radius parameter;
and determining the circle center coordinate of the circular countdown image according to the first radius parameter.
12. The method of generating a countdown image according to claim 6, wherein the graphic drawing parameter includes a fill color of the circular countdown image, and the generating the countdown image according to the graphic drawing parameter of the countdown image, the progress bar start point, the progress bar end point value, and the progress bar direction includes:
and calling an annular drawing interface of a Bezier curve according to the filling color, the circle center coordinate and the second radius parameter of the circular countdown image, the starting point of the progress bar, the end point value of the progress bar and the direction of the progress bar, and generating the circular countdown image.
13. An apparatus for generating a countdown image, comprising:
a basic parameter obtaining module, configured to obtain basic graphic parameters of the countdown image;
the drawing parameter determining module is used for obtaining the graphic drawing parameters of the countdown image according to the basic graphic parameters;
the progress end point determining module is used for acquiring a progress bar starting point and a countdown progress corresponding to the countdown image and a progress bar direction in the countdown image, and obtaining a progress bar end point value according to the progress bar starting point, the countdown progress and the progress bar direction;
and the countdown image generation module is used for generating the countdown image according to the graph drawing parameters of the countdown image, the starting point of the progress bar, the end point value of the progress bar and the direction of the progress bar.
14. An electronic device, comprising:
a processor; and
a memory for storing one or more programs that, when executed by the one or more processors, cause the one or more processors to implement the method of generating a countdown image according to any one of claims 1 to 12.
15. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out a method of generating a countdown image according to any one of claims 1 to 12.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011383169.1A CN112330773A (en) | 2020-11-30 | 2020-11-30 | Countdown image generation method and device, electronic equipment and computer medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011383169.1A CN112330773A (en) | 2020-11-30 | 2020-11-30 | Countdown image generation method and device, electronic equipment and computer medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112330773A true CN112330773A (en) | 2021-02-05 |
Family
ID=74307883
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011383169.1A Withdrawn CN112330773A (en) | 2020-11-30 | 2020-11-30 | Countdown image generation method and device, electronic equipment and computer medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112330773A (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106484432A (en) * | 2016-11-01 | 2017-03-08 | 武汉斗鱼网络科技有限公司 | A kind of progress bar method for customizing, device and progress bar |
| CN107346250A (en) * | 2017-07-16 | 2017-11-14 | 北京酷我科技有限公司 | A kind of stacking display algorithm of the progress bar of breath light effect |
| CN108279956A (en) * | 2017-01-03 | 2018-07-13 | 北京京东尚科信息技术有限公司 | Tempo instructions method and process indicating device |
| CN109144655A (en) * | 2018-09-05 | 2019-01-04 | 北京京东金融科技控股有限公司 | Method, apparatus, system and the medium of image Dynamic Display |
| CN109901894A (en) * | 2017-12-07 | 2019-06-18 | 腾讯科技（深圳）有限公司 | A kind of progress bar image generating method, device and storage medium |
| CN111506382A (en) * | 2020-04-26 | 2020-08-07 | 网易（杭州）网络有限公司 | Progress bar curve determination method and device, storage medium and electronic equipment |
-
2020
- 2020-11-30 CN CN202011383169.1A patent/CN112330773A/en not_active Withdrawn
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106484432A (en) * | 2016-11-01 | 2017-03-08 | 武汉斗鱼网络科技有限公司 | A kind of progress bar method for customizing, device and progress bar |
| CN108279956A (en) * | 2017-01-03 | 2018-07-13 | 北京京东尚科信息技术有限公司 | Tempo instructions method and process indicating device |
| CN107346250A (en) * | 2017-07-16 | 2017-11-14 | 北京酷我科技有限公司 | A kind of stacking display algorithm of the progress bar of breath light effect |
| CN109901894A (en) * | 2017-12-07 | 2019-06-18 | 腾讯科技（深圳）有限公司 | A kind of progress bar image generating method, device and storage medium |
| CN109144655A (en) * | 2018-09-05 | 2019-01-04 | 北京京东金融科技控股有限公司 | Method, apparatus, system and the medium of image Dynamic Display |
| CN111506382A (en) * | 2020-04-26 | 2020-08-07 | 网易（杭州）网络有限公司 | Progress bar curve determination method and device, storage medium and electronic equipment |
Non-Patent Citations (1)
| Title |
|---|
| 肠粉白粥_HOBEN: ""ios圆形倒计时控件的实现"", pages 1 - 4, Retrieved from the Internet <URL:《https://www.jianshu.com/p/80326a897bbb》> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6676703B2 (en) | Selective rasterization | |
| US20190318518A1 (en) | Graph drawing method, graph drawing system, server apparatus, graph drawing apparatus, and recording medium | |
| CN115908685A (en) | Scene rendering method, device, equipment and storage medium | |
| CN115330925A (en) | Image rendering method and device, electronic equipment and storage medium | |
| CN110539639A (en) | Instrument-based gradual change circular ring display method, medium, instrument and device | |
| CN109598672B (en) | Map road rendering method and device | |
| CN112330773A (en) | Countdown image generation method and device, electronic equipment and computer medium | |
| CN114913216A (en) | Method, device, medium and electronic equipment for identifying corner points of graph in image | |
| CN109816761B (en) | Graph conversion method, graph conversion device, storage medium and electronic equipment | |
| CN113506356B (en) | Method and device for drawing area map, readable medium and electronic equipment | |
| CN111295695A (en) | Three-dimensional grid data simplification method and device | |
| CN113096231B (en) | Image processing method and device, electronic equipment and storage medium | |
| CN109710122B (en) | Method and device for displaying information | |
| US10572026B2 (en) | Reference point generation on a vector path | |
| CN111354070B (en) | Stereoscopic graph generation method and device, electronic equipment and storage medium | |
| CN109816595B (en) | Image processing method and device | |
| CN113160379A (en) | Material rendering method and device, storage medium and electronic equipment | |
| CN112925593A (en) | Method and device for scaling and rotating target layer | |
| CN111611782B (en) | Connection point generation method and device | |
| CN112465717B (en) | Face image processing model training method, device, electronic equipment and medium | |
| CN112395826B (en) | Text special effect processing method and device | |
| CN113436325B (en) | Image processing method and device, electronic equipment and storage medium | |
| CN113706565B (en) | Image segmentation method, device, electronic equipment and storage medium | |
| WO2024131503A1 (en) | Special-effect image generation method and apparatus, and device and storage medium | |
| CN115212564A (en) | Track rendering method and device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WW01 | Invention patent application withdrawn after publication | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20210205 |