CN109901894B - Progress bar image generation method and device and storage medium - Google Patents

Progress bar image generation method and device and storage medium Download PDF

Info

Publication number
CN109901894B
CN109901894B CN201711286785.3A CN201711286785A CN109901894B CN 109901894 B CN109901894 B CN 109901894B CN 201711286785 A CN201711286785 A CN 201711286785A CN 109901894 B CN109901894 B CN 109901894B
Authority
CN
China
Prior art keywords
progress
image
task
target
bar
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.)
Active
Application number
CN201711286785.3A
Other languages
Chinese (zh)
Other versions
CN109901894A (en
Inventor
林焕彬
梁志杰
周文翊
吴益欢
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201711286785.3A priority Critical patent/CN109901894B/en
Publication of CN109901894A publication Critical patent/CN109901894A/en
Application granted granted Critical
Publication of CN109901894B publication Critical patent/CN109901894B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Abstract

The embodiment of the invention discloses a progress bar image generation method, a progress bar image generation device and a storage medium; the embodiment of the invention adopts the steps of obtaining configuration information of a task progress bar image, wherein the configuration information comprises the current task progress corresponding to a user identification and image parameter information of a progress bar background image; drawing a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image; acquiring target progress position information corresponding to the current task progress in a progress reference image; and inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification. According to the scheme, the corresponding progress bar image can be drawn based on the configuration information of the progress bar image, the situation that a plurality of pictures are adopted to synthesize the progress bar image is avoided, and the pictures do not need to be obtained from the network side equipment, so that the generation efficiency of the progress bar image can be improved, and the flow can be saved.

Description

Progress bar image generation method and device and storage medium
Technical Field
The invention relates to the technical field of image processing, in particular to a progress bar image generation method, a progress bar image generation device and a storage medium.
Background
The progress bar can display the speed, the completion degree, the size of the remaining unfinished tasks, the processing time possibly required and the like of the processing tasks in a picture form in real time when the computer processes the tasks, and the progress bar is generally displayed in a long strip shape, and is a currently common progress bar with reference to fig. 1 a.
The progress bar may be divided into various types according to task types, such as a download task progress bar, a level progress bar, and the like. The downloading task progress bar is used for displaying the completion degree, the incompletion degree and the like of the downloading task; the level progress bar is used for displaying level progress, the amount of uncompleted tasks for reaching the target level and the like.
The current generation mode of the progress bar is a mode based on picture synthesis, specifically, when the progress bar needs to be displayed, a background picture of the progress bar, such as the background picture 100 in fig. 1a and 1b, is obtained, a corresponding content picture of the progress bar, such as the content picture 1000 in fig. 1a and 1b, is selected from preset content pictures according to the current task progress, the background picture of the progress bar and the content of the progress bar are synthesized, and then the synthesized picture is rendered according to a rendering sample picture to obtain the required progress bar. Wherein the progress indicated in fig. 1a is different from that indicated in fig. 1 b.
However, in the current generation method of the progress bar, a plurality of pictures need to be used, the progress bar is obtained by performing synthesis rendering, the generation efficiency of the progress bar is low, and the pictures need to be acquired from a network side device, which consumes a large amount of traffic.
Disclosure of Invention
The embodiment of the invention provides a progress bar image generation method, a progress bar image generation device and a storage medium, which can improve the generation efficiency of a progress bar and save flow.
The embodiment of the invention provides a progress bar image generation method, which comprises the following steps:
acquiring configuration information of a task progress bar image, wherein the configuration information comprises a current task progress corresponding to a user identification and image parameter information of a progress bar background image;
drawing a corresponding progress bar background image in a canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image;
acquiring target progress position information corresponding to the current task progress in the progress reference image;
and inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification.
Correspondingly, an embodiment of the present invention further provides a progress bar image generating device, including:
the system comprises a configuration acquisition unit, a task progress bar image acquisition unit and a task progress bar image acquisition unit, wherein the configuration acquisition unit is used for acquiring configuration information of a task progress bar image, and the configuration information comprises a current task progress corresponding to a user identifier and image parameter information of a progress bar background image;
the drawing unit is used for drawing a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image;
the position acquisition unit is used for acquiring target progress position information corresponding to the current task progress in the progress reference image;
and the inserting unit is used for inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification.
Correspondingly, the embodiment of the present invention further provides a storage medium, where the storage medium stores instructions, and the instructions, when executed by a processor, implement any of the method for generating a progress bar image provided in the embodiments of the present invention.
The method comprises the steps of obtaining configuration information of a task progress bar image, wherein the configuration information comprises current task progress corresponding to a user identification and image parameter information of a progress bar background image; drawing a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image; acquiring target progress position information corresponding to the current task progress in a progress reference image; and inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification. According to the scheme, the corresponding progress bar image can be drawn based on the configuration information of the progress bar image, the situation that a plurality of pictures are adopted to synthesize the progress bar image is avoided, and the pictures do not need to be obtained from the network side equipment, so that the generation efficiency of the progress bar image can be improved, and the flow can be saved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
FIG. 1a is a schematic diagram of a prior art progress bar;
FIG. 1b is another schematic diagram of a prior art progress bar;
FIG. 2a is a schematic view of a scene of an image generation system provided by an embodiment of the invention;
fig. 2b is a first flowchart of a method for generating a progress bar image according to an embodiment of the present invention;
FIG. 2c is a schematic diagram illustrating a correspondence between parameters and appearances provided by an embodiment of the present invention;
fig. 2d is a first schematic diagram of a background image of the progress bar according to the embodiment of the present invention;
fig. 2e is a second schematic diagram of a background image of the progress bar according to the embodiment of the present invention;
FIG. 2f is a third schematic diagram of a background image of a progress bar according to an embodiment of the present invention;
fig. 2g is a first schematic diagram of a progress bar image provided by the embodiment of the present invention;
FIG. 2h is a schematic diagram illustrating a position calculation of a current progress according to an embodiment of the present invention;
FIG. 2i is a second schematic diagram of a progress bar image provided by an embodiment of the invention;
FIG. 2j is an animation diagram of a progress bar image according to an embodiment of the present invention;
fig. 3a is a second flowchart of a method for generating a progress bar image according to an embodiment of the present invention;
fig. 3b is a fourth schematic diagram of a background image of the progress bar according to the embodiment of the present invention;
fig. 3c is a fifth schematic diagram of a background image of the progress bar according to the embodiment of the present invention;
FIG. 3d is a schematic diagram illustrating another current progress location calculation according to an embodiment of the present invention;
FIG. 3e is a third schematic diagram of a progress bar image provided by an embodiment of the invention;
FIG. 3f is a fourth schematic diagram of a progress bar image provided by an embodiment of the invention;
fig. 4a is a third flowchart illustrating a method for generating a progress bar image according to an embodiment of the present invention;
FIG. 4b is a schematic diagram illustrating a position calculation of another current progress according to an embodiment of the present invention;
FIG. 4c is a fifth exemplary diagram of a progress bar image according to an embodiment of the present invention;
FIG. 4d is another animation diagram of a progress bar image provided by an embodiment of the invention;
fig. 5a is a schematic structural diagram of a first structure of a progress bar image generating apparatus according to an embodiment of the present invention;
fig. 5b is a schematic diagram of a second structure of the progress bar image generating apparatus according to the embodiment of the present invention;
fig. 5c is a schematic structural diagram of a third structure of a progress bar image generating apparatus according to an embodiment of the present invention;
fig. 5d is a schematic structural diagram of a third example of a progress bar image generating apparatus according to an embodiment of the present invention;
fig. 6 is a schematic structural diagram of a server according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The embodiment of the invention provides an image generation system, which comprises any one of the progress bar image generation devices provided by the embodiments of the invention, wherein the progress bar image generation device can be integrated in a terminal and other equipment, and the terminal can be a mobile phone, a tablet computer and the like. In addition, the system can also comprise other devices, such as a server and the like
Referring to fig. 2a, an embodiment of the present invention provides an image generation system, including: a terminal 10 and a server 20, the terminal 10 and the server 20 being connected via a network 30. The network 30 includes network entities such as routers and gateways, which are not shown in the figure. The terminal 10 may interact with the server 20 via a wired network or a wireless network, for example, to download applications (e.g., game applications) and/or application update packages and/or application-related data information or service information from the server 20. The terminal 10 may be a mobile phone, a tablet computer, a notebook computer, etc., and fig. 2a illustrates the terminal 10 as a mobile phone. Various applications required by the user, such as applications with entertainment functions (e.g., video applications, audio playing applications, reading software) and applications with service functions (e.g., map navigation applications, group buying applications, etc.), can be installed in the terminal 10.
Based on the system shown in fig. 2a, taking a game application as an example, the terminal 10 may download the game application and/or a game application update package and/or data information or service information (such as game screen data) related to the game application from the server 20 via the network 30 according to the requirement. By adopting the embodiment of the invention, the terminal 10 can obtain the configuration information of the task progress bar image, wherein the configuration information comprises the current task progress corresponding to the user identification and the image parameter information of the progress bar background image; drawing a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image; acquiring target progress position information corresponding to the current task progress in a progress reference image; inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification; the terminal 10 may display a task progress bar image corresponding to the user identification.
The example of fig. 2a is only an example of a system architecture for implementing the embodiment of the present invention, and the embodiment of the present invention is not limited to the system architecture shown in fig. 2a, and various embodiments of the present invention are proposed based on the system architecture.
In an embodiment, there is provided a progress bar image generating method, which may be executed by a processor of a terminal, as shown in fig. 2b, the progress bar image generating method including:
101. and acquiring configuration information of the task progress bar image, wherein the configuration information comprises task progress corresponding to the user identification and image parameter information of the progress bar background image.
The task progress bar image is used for displaying the state progress condition of the task in an image form, such as the completion degree of the current task, the size of the amount of uncompleted tasks, and the like. The tasks may include user identification of corresponding tier tasks, download tasks, upload tasks, and the like.
For example, when the task is a level task, at this time, the task progress bar image may be a level progress bar image for displaying the level progress of the user identifier, such as the current level of the user identifier, the progress required from the target level, and the like.
The level progress bar image can be applied to various scenes, such as a game scene, a social scene, a shopping scene, and the like. For example, in a game scenario, the level progress bar image may be used to display the progress of a game level of a user identifier (e.g., a game account number) in the game, such as the current game level of the user identifier (e.g., the game account number), the progress required from a target game level, and so on.
For another example, a level progress bar image is applied in a social scene, and the level progress bar can be used to display the progress of the level (such as member level, activity level, login time level, etc.) of the user identifier (social account) in the social network, such as the current social level of the user identifier (social account), the progress required from the target game level, and the like.
For another example, a level progress bar image is applied in a network shopping scenario, and the level progress bar can be used to display progress of a level (e.g. a member level) of a user identifier (shopping account) in the network shopping platform, such as a current social level of the user identifier (shopping account), a progress required from a target game level, and the like.
The configuration information of the task progress bar image is used for indicating the drawing of the task progress bar image; the configuration information may include: and the user identifies the corresponding current task progress, the image parameter information of the progress bar background image, the target task progress and the like.
The progress bar background image is a background or a basic image of the task progress bar image and can be used as a reference image of the task progress. The task progress bar image generally includes a progress bar background image and a progress identification image. The progress bar background image and the progress marker image are combined to represent the progress of the task.
The image parameter of the progress bar background image can be an image appearance parameter of the progress bar background image; the method can comprise the following steps: shape style information related to an image shape, image size information related to an image size (e.g., width and height), line style information related to an image line (e.g., image line width information), and the like.
For example, when the progress bar background image is in a circular arc shape, the shape style information related to the image shape may include: arc radius, arc angle information (e.g., arc deployment angle), etc.
Taking the progress bar background image as a semi-circular strip image as an example, the image parameters may include: the width and height of the drawing cloth (corresponding to the whole size of the background image of the progress bar), the radius of the circular ring (corresponding to the size of the circular ring), the line width of the circular ring (corresponding to the thickness of the circular ring), the expansion angle (corresponding to the angle of the circular ring and the expansion degree of the circular ring), the distance between the inner ring and the outer ring (corresponding to the gap between the inner ring and the outer ring), and the like. Referring to fig. 2c, the relationship between each image parameter and the appearance of the progress bar background image is shown.
102. And drawing a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image.
The progress bar background image is a background or a basic image of the task progress bar image, and the task progress bar image generally comprises the progress bar background image and a progress identification image. The progress bar background image may include a progress reference image, which is a reference or reference image of task progress, representing all possible task progress, i.e., all task progress from the initial progress to the target progress. The progress identification image is added into the progress reference image to indicate the current task progress.
In addition, the progress bar background image may also include some other images, such as, for example, a user's head portrait, etc.
For example, a corresponding progress bar background image can be drawn on a canvas according to the image parameter information and by canvas.
The Html5canvas is used to draw images on web pages, and the canvas element of Html5 draws images on web pages using JavaScript. The canvas is a rectangular area, each pixel of which can be controlled.
canvases have a variety of drawing paths, rectangles, circles, characters, and methods of adding images.
Wherein the progress bar background image may include a progress reference image; the shape of the progress reference image may be various, and may be a bar image, for example. The strip-shaped image is an image in the shape of a strip, such as a rectangular strip image, a circular strip image, a semicircular strip image, and the like. The shape of the bar graph may be configured according to actual requirements, and at this time, the image parameter information of the progress bar background image may include shape parameter information of the bar graph.
In the embodiment of the present invention, the expansion angle of the semicircular strip-shaped image may be various, and is not limited to 180 °, and may be any angle of 0 to 360 °, such as 45 degrees, 50 degrees, 60 degrees, and the like. That is, the semicircular ring is not limited to the special case of one half of the circular ring, but may be one fourth, one fifth, etc. of the circular ring.
For example, referring to fig. 2d, using canvas technology, a corresponding progress bar background image is drawn on a rectangular canvas according to the image parameter information, where the progress bar background image includes a semicircular ring strip image.
In an embodiment, in order to be able to accurately display the task progress situation, the progress bar background image may further include initial task progress information (such as an initial task amount), current task progress information (a currently completed task amount), and target task progress information (a target task amount).
For example, taking a game level task as an example, the initial task progress information may include initial game level information (e.g., silver IV), the current task progress information may include current game level information (e.g., silver II), and the target task progress information may include target game level information (e.g., gold IV). In an embodiment, in order to be able to display the task progress situation more accurately, the progress bar background image may further include: an identification image of the initial task progress and an identification image of the target task progress; at this time, the identification image of the initial task progress, the progress reference image and the identification image of the target task progress are sequentially connected.
The identification image may be configured according to actual requirements, and for example, may be a point, an avatar image, a virtual object image, or the like. At this time, the configuration information of the task progress bar image may further include: image parameter information of the identification image of the initial task progress and image parameter information of the identification image of the target task progress.
For example, taking a task as a member level task in a social platform as an example, referring to fig. 2e, the level progress bar background image 2 in the figure includes an identification image 21 of an initial task progress, a semi-circle progress reference image 22, and an identification image 23 of a target task progress, which are connected in sequence. The identification image 21 is a circle and the identification image 23 is a five-pointed star image.
In addition, the hierarchical level progress bar background image 20 may further include: member level information corresponding to the initial task progress (e.g., "silver member" in fig. 2 e), and target member level information corresponding to the target task progress (e.g., "masonry member" in fig. 2 e).
103. And acquiring target progress position information corresponding to the current task progress in the progress reference image.
For example, after obtaining the progress bar background image as shown in fig. 2d, referring to fig. 2f, a two-dimensional coordinate system may be established, and the corresponding progress position information (including the abscissa and the ordinate) of the current task progress in the bar image may be obtained, as shown in fig. 2f, the abscissa and the ordinate of the progress position information are (a, b).
104. And inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a progress bar image corresponding to the user identification.
The progress identification image may be set according to actual requirements, for example, may be a user avatar, a virtual article image, or other images.
Referring to fig. 2g, when it is determined that the horizontal and vertical coordinates of the progress position information are (a, b), a circular progress identification image may be inserted at a position corresponding to the coordinates.
Fig. 2g may further include some text information, for example, member level information corresponding to the initial task progress (e.g., "silver member" in fig. 2 e), target member level information corresponding to the target task progress (e.g., "brick and stone member" in fig. 2 e), and member level information corresponding to the current task progress (e.g., "gold member" in fig. 2 e). In addition, the method can further comprise the following steps: progress information from the target member level, and interaction result information generated when the target member level is reached (e.g., "five-fold purchase XXX item", etc.).
Optionally, in order to increase the expandability of the progress bar and visually and accurately reflect the task progress, the progress may be subdivided, for example, the progress may be subdivided into a plurality of small progresses, which are reflected in the progress bar image, that is, the progress reference image needs to be segmented, and each segment represents one small progress.
In one embodiment, segmentation can be performed according to the target task progress, and then the target progress position information is obtained. That is, the configuration information also includes the target task progress; at this time, the step of "obtaining the target progress position information corresponding to the current task progress in the progress reference image" may include:
dividing the progress reference image into a plurality of sections of sub-progress reference images according to the progress of the target task;
obtaining a progress ratio between the current task progress and the target task progress,
and acquiring target progress position information corresponding to the current task progress in the progress reference image according to the progress ratio and the image parameter information.
The task progress can be represented by a numerical value, for example, the target task progress can be n, the current task progress is m, n and m are positive integers, and n is less than or equal to m. Optionally, the number of the divided sub-schedule reference images is equal to the target task schedule value. For example, the progress reference image is divided into n pieces of sub-progress reference images.
After segmentation, the position information (such as horizontal and vertical coordinate values) of the current task progress m in the progress reference image can be calculated according to the progress ratio m/n between the current task progress m and the target task progress n and the image parameter information (such as image size information, angle information and the like) of the progress bar background image and the m/n.
For example, when the progress reference image is a semicircular progress reference image, at this time, the image parameter information of the progress bar background image may include: the semi-circular progress refers to the circular radius, circular angle and the like of the image; at this time, the semi-circular progress reference image can be divided into a plurality of sections of sub-progress reference images according to the progress of the target task, then, a progress ratio between the current task progress and the target task progress is obtained, and a target progress radian corresponding to the task progress in the progress reference image is obtained according to the progress ratio and the circular angle; and acquiring target position information corresponding to the current task progress according to the radian of the target progress and the radius of the circular ring.
For example, the semicircular ring strip-shaped image can be equally divided into n sections according to the target task progress n, and then the progress radian d corresponding to the current task progress m is obtained based on the progress ratio m/n and the semicircular ring angle theta. Such as radian d ═ (current task progress m/target task progress) × 180 × pi/180. And then, calculating the horizontal and vertical coordinate values of the current task progress m in the progress bar background image through the progress radian d and the circular ring radius r. The abscissa x and the ordinate y can be obtained, for example, by the following formula:
the abscissa x ═ radius r ═ cos (radian d × π/180) + radius r
The ordinate y is the radius r sin (radian d pi/180) + radius r.
For example, taking m 2 and n 5 as an example, referring to fig. 2h, after acquiring the progress bar background image shown in fig. 2d, the semicircular ring strip image may be divided into 5 equal parts, and then, by the formula: and (d) calculating the radian d corresponding to the current task progress 2 (m is the current task progress/m is the target task progress) × 180 × pi/180), and obtaining the horizontal and vertical coordinate values (a1, b1) corresponding to the progress 2 through the coordinate value formula, wherein as shown in fig. 2h, the position corresponding to the horizontal and vertical coordinate values (a1, b1) is the end position of the second segment.
Referring to fig. 2i, a progress indication image, such as a user's head portrait, may be inserted at a position corresponding to the abscissa value (a1, b 1).
Optionally, in order to intuitively and accurately express the task progress, different colors may be filled in different segments, for example, the configuration information of the progress bar image may further include: color configuration information corresponding to the sub-schedule reference image; after dividing the progress reference image into a plurality of sub-progress reference images, the method may further include: and performing color filling on the sub-progress reference image according to the color configuration information corresponding to the sub-progress reference image.
For example, different colors can be filled in different segments in fig. 2h, and the progress of the task such as game level can be identified by the colors, so that the learning cost is reduced.
Optionally, in order to save resources, in the embodiment of the present invention, when the current task progress is not equal to the initial task progress, the progress division may be performed, and when the current task progress is equal to the initial task progress, a corresponding progress identification image may be directly inserted into the starting position of the progress reference image, without performing the progress division and the position calculation, so as to save terminal resources. At this time, the configuration information of the progress bar background image further includes an initial task progress.
The initial task progress can be set according to actual requirements, for example, when the task progress is represented by numerical values, the initial task progress value can be set to be 0, 1, 2 and the like.
Taking the task as a game level task as an example, the initial task progress may be set to the lowest game level, or other game levels.
Optionally, in order to improve the user experience, a progress animation may be further provided, and the progress animation may be a slow-motion animation having an animation effect of the target progress position to which the progress identification image moves. The progress animation may be configured according to actual requirements, for example, the configuration information of the progress bar image may further include model information of the progress animation, and a duration of the progress animation.
In the embodiment of the invention, the position corresponding to each animation display time point can be calculated based on the model information of the progress animation, then, the corresponding progress identification image is inserted into the position, so that a series of progress bar images can be obtained, and the corresponding progress bar images are displayed according to the animation display time points, so that the animation effect of moving the identification images to the target progress position can be generated.
That is, the step of "inserting the corresponding progress identification image in the progress reference image according to the target progress position information" may include:
acquiring initial progress position information of the initial task progress in a progress reference image;
acquiring image insertion position information corresponding to an animation display time point according to the animation model information, the duration, the initial progress position information and the target progress position information;
and inserting a corresponding progress identification image into the progress reference image according to the image insertion position information.
Wherein the animation model information may include an animation function; the animation function is used for calculating image insertion position information corresponding to each animation display time point. For example, the animation function formula may include the following formula:
the image insertion position value L corresponding to the time point T is (target progress position value M-initial progress position value C) × current time T/duration T + initial progress position value C. The target position value M may include a position value corresponding to the current task progress, such as an abscissa value and/or an ordinate value; the initial progress position value may include a position value corresponding to the initial task progress, such as including an abscissa value, and/or an ordinate value. The general initial progress position value is 0.
For example, a current animation display time point T may be obtained, whether T is less than a duration time T is judged, if T is less than the duration time T, an image insertion position value corresponding to the animation display time point T is calculated according to the animation function, and a corresponding progress identification image is inserted into the progress reference image according to the image insertion position value; if not, for example, equal to the duration T, the calculation is stopped. After the progress identification image corresponding to each animation display time point is obtained, the progress identification image is displayed according to the animation display time point, so that the animation effect that the progress identification image moves to the target position is realized, and reference is made to fig. 2 j.
The method of the embodiment of the invention can be realized by loading the progress image generation code in the memory by the processor, and the progress image generation code can be uniformly stored by using a JSON object, thereby improving the application range of the scheme.
The method comprises the steps of obtaining configuration information of a task progress bar image, wherein the configuration information comprises current task progress corresponding to a user identification and image parameter information of a progress bar background image; drawing a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image; acquiring target progress position information corresponding to the current task progress in a progress reference image; inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification; according to the scheme, the corresponding progress bar image can be drawn based on the configuration information of the progress bar image, the situation that a plurality of pictures are adopted to synthesize the progress bar image is avoided, and the pictures do not need to be obtained from the network side equipment, so that the generation efficiency of the progress bar image can be improved, and the flow can be saved.
In addition, the scheme can further subdivide the progress, for example, the progress bar image is segmented, so that the progress bar image can visually and accurately display the task progress state, the scheme has strong expandability, the user experience is improved,
in addition, by adopting the scheme, when the user needs to modify the progress bar image, the user can modify the configuration parameters (such as angle, size and the like) according to actual requirements to change the appearance of the progress bar image so as to generate the required progress bar image, the progress bar image can be rapidly modified, the modification cost is reduced, and the reusability and the expandability of the scheme are improved.
In an embodiment, another method for generating a progress bar image is further provided in an embodiment of the present invention, as shown in fig. 3a, a specific flow of the method for generating a progress bar image is as follows:
201. the terminal obtains configuration information of the task progress bar image, wherein the configuration information comprises current task progress, initial task progress, target task progress and image parameter information of a progress bar background image corresponding to the user identification.
The task progress bar image is used for displaying the state progress condition of the task in an image form, such as the completion degree of the current task, the size of the amount of uncompleted tasks, and the like. The tasks may include user identification of corresponding tier tasks, download tasks, upload tasks, and the like.
For example, when the task is a level task, at this time, the task progress bar image may be a level progress bar image for displaying the level progress of the user identifier, such as the current level of the user identifier, the progress required from the target level, and the like.
And the configuration information of the task progress bar image is used for indicating the drawing of the task progress bar image. The configuration information comprises the current task progress, the initial task progress, the target task progress, the image parameter information of the progress bar background image and the like corresponding to the user identification.
The task progress may be represented by a numerical value, for example, the current task progress value is m, and the initial task progress value is 0, and the target task progress value is n.
The image parameter of the progress bar background image can be an image appearance parameter of the progress bar background image; the method can comprise the following steps: shape style information related to an image shape, image size information related to an image size (e.g., width and height), line style information related to an image line (e.g., image line width information), and the like. For example, when the progress bar background image is in a circular arc shape, the shape style information related to the image shape may include: arc radius, arc angle information (e.g., arc deployment angle), etc.
Taking the progress bar background image as a semi-circular strip image as an example, the image parameters may include: the width and height of the drawing cloth (corresponding to the whole size of the background image of the progress bar), the radius of the circular ring (corresponding to the size of the circular ring), the line width of the circular ring (corresponding to the thickness of the circular ring), the expansion angle (corresponding to the angle of the circular ring and the expansion degree of the circular ring), the distance between the inner ring and the outer ring (corresponding to the gap between the inner ring and the outer ring), and the like. Referring to fig. 2c, the relationship between each image parameter and the appearance of the progress bar background image is shown.
202. The terminal judges whether the current task progress is the same as the initial task progress, if not, step 203 is executed, and if so, step 207 is executed.
For example, when the initial task progress value is 0, it can be determined whether the current task progress value is zero.
203. And the terminal draws a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises an initial progress identification image, a progress reference image and a target progress identification image which are sequentially connected.
The progress bar background image is a background or a basic image of the task progress bar image, and the task progress bar image generally comprises the progress bar background image and a progress identification image. The progress bar background image may include a progress reference image, which is a reference or reference image of task progress, representing all possible task progress, i.e., all task progress from the initial progress to the target progress. The progress identification image is added into the progress reference image to indicate the current task progress.
For example, a corresponding progress bar background image can be drawn on a canvas according to the image parameter information and by canvas.
The shape of the progress reference image may be various, and for example, the progress reference image may be a bar image. The strip-shaped image is an image in the shape of a strip, such as a rectangular strip image, a circular strip image, a semicircular strip image, and the like. The shape of the bar graph can be configured according to actual requirements, and at this time, the configuration information of the task progress bar image may include shape parameter information of the bar graph.
In the embodiment of the present invention, the semi-circle progress reference image may be deployed at various angles, not only 180 °, but also any angle from 0 to 360 °, such as 45 degrees, 52 degrees, 60 degrees, and the like.
For example, referring to fig. 3b, a canvas technology is used to draw a corresponding progress bar background image on a rectangular canvas according to image parameter information, where the progress bar background image includes an initial progress identification image 31, a semicircular progress reference image 32, and a target task progress identification image 33, which are sequentially connected.
The identification image may be configured according to actual requirements, and for example, may be a point, an avatar image, a virtual object image, or the like. At this time, the configuration information of the task progress bar image may further include: image parameter information of the initial progress identification image and image parameter information of the target task progress identification image. For example, referring to fig. 3b, taking a task as a hierarchical task as an example, the initial progress identification image is a circle, and the target task progress image is a square block diagram. The initial level as well as the target level may also be included in the image shown in fig. 3 b.
204. And the terminal equally divides the progress reference image into a plurality of sections of sub-progress reference images according to the target task progress.
For example, when the progress reference image is a bar image and the target task progress value is n, the bar image may be equally divided into n sub-bar images. Referring to fig. 3c, assuming that n is 5, the semicircular annular stripe image may be equally divided into 5 sub-stripe images 320.
205. The terminal obtains a progress ratio between the current task progress and the target task progress, and obtains target progress position information corresponding to the current task progress in the progress reference image according to the progress ratio and the image parameter information.
The target progress position information may include an abscissa value and an ordinate value corresponding to the current task progress in the progress reference image.
For example, the progress reference image is a bar image, and after segmentation, the position information (such as horizontal and vertical coordinate values) of the current task progress m in the bar image can be calculated according to the progress ratio m/n between the current task progress m and the target task progress n and the image parameter information (such as image size information, angle information and the like) of the progress bar background image and the m/n.
Taking the progress reference image as the semicircular ring strip image as an example, equally dividing the semicircular ring strip image into n sections according to the progress n of the target task, and then acquiring the progress radian d corresponding to the progress m of the current task based on the progress ratio m/n and the semicircular ring angle theta. Such as radian d ═ (current task progress m/target task progress) × 180 × pi/180. And then, calculating the horizontal and vertical coordinate values of the current task progress m in the progress bar background image through the progress radian d and the circular ring radius r. The abscissa x and the ordinate y can be obtained, for example, by the following formula:
the abscissa x ═ radius r ═ cos (radian d × π/180) + radius r
The ordinate y is the radius r sin (radian d pi/180) + radius r.
For example, taking m-3 and n-5 as an example, referring to fig. 3d, after acquiring the progress bar background image shown in fig. 3c, the semicircular ring bar image may be divided into 5 equal parts, and then, by the formula: and (d) calculating the radian d corresponding to the current task progress 3 (m is the current task progress/m is the target task progress) × 180 × pi/180), and obtaining the horizontal and vertical coordinate values (a2, b2) corresponding to the progress 3 through the coordinate value formula, wherein as shown in fig. 3d, the position corresponding to the horizontal and vertical coordinate values (a2, b2) is the end position of the third segment.
206. And drawing a progress identification image by the terminal, and inserting the progress identification image into the progress reference image according to the target progress position information.
The terminal can draw the progress identification image in an off-line mode, and the progress identification image can be set according to actual requirements, for example, the progress identification image can be a user head portrait, a virtual article image or other images.
Referring to fig. 3e, a progress marker image, which may be a triangular block, may be inserted at an end position of the third segment according to the abscissa and ordinate values (a2, b2) of a position corresponding to the progress of the target task. Wherein, current level information is also included in fig. 3 e. In other embodiments, other progress-related information may also be included in the progress bar image.
207. And the terminal draws a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises an initial progress identification image, a progress reference image and a target progress identification image which are sequentially connected.
The process of drawing the progress bar background image may refer to the above description, and is not described herein again.
208. And drawing a progress identification image by the terminal, and inserting the progress identification image into the starting position of the progress reference image.
For example, referring to fig. 3f, a progress marker image, which is a triangular block, may be inserted at the start position of the progress reference image shown in fig. 3 d.
Optionally, in order to improve the user experience, a progress animation may be further provided, and the progress animation may be a slow-motion animation having an animation effect of the target progress position to which the progress identification image moves. The progress animation may be configured according to actual requirements, for example, the configuration information of the progress bar image may further include model information of the progress animation, and a duration of the progress animation. Specifically, the following are:
acquiring initial progress position information of the initial task progress in a progress reference image;
acquiring image insertion position information corresponding to an animation display time point according to the animation model information, the duration, the initial progress position information and the target progress position information;
inserting a corresponding progress identification image into the progress reference image according to the image insertion position information;
and displaying the corresponding progress bar image according to the animation display time point so as to realize the progress animation.
Wherein the animation model information may include an animation function; the animation function is used for calculating image insertion position information corresponding to each animation display time point. For example, the animation function formula may include the following formula:
the image insertion position value L corresponding to the time point T is (target progress position value M-initial progress position value C) × current time T/duration T + initial progress position value C. The target position value M may include a position value corresponding to the current task progress, such as an abscissa value and/or an ordinate value; the initial progress position value may include a position value corresponding to the initial task progress, such as including an abscissa value, and/or an ordinate value. The general initial progress position value is 0.
For example, a current animation display time point T may be obtained, whether T is less than a duration time T is judged, if T is less than the duration time T, an image insertion position value corresponding to the animation display time point T is calculated according to the animation function, and a corresponding progress identification image is inserted into the progress reference image according to the image insertion position value; if not, for example, equal to the duration T, the calculation is stopped. After the progress identification image corresponding to each animation display time point is obtained, the progress identification image is displayed according to the animation display time point, so that the animation effect that the progress identification image moves to the target position is realized, and reference is made to fig. 2 j.
The method of the embodiment of the invention can be realized by loading the progress image generation code in the memory by the processor, and the progress image generation code can be uniformly stored by using a JSON object, thereby improving the application range of the scheme.
The method comprises the steps of obtaining configuration information of a task progress bar image, wherein the configuration information comprises current task progress corresponding to a user identification and image parameter information of a progress bar background image; drawing a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image; acquiring target progress position information corresponding to the current task progress in a progress reference image; inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a progress bar image corresponding to the user identification; according to the scheme, the corresponding progress bar image can be drawn based on the configuration information of the progress bar image, the situation that a plurality of pictures are adopted to synthesize the progress bar image is avoided, and the pictures do not need to be obtained from the network side equipment, so that the generation efficiency of the progress bar image can be improved, and the flow can be saved. In addition, the scheme can further subdivide the progress, for example, the progress bar image is segmented, so that the progress bar image can visually and accurately display the task progress state, the scheme has strong expandability, the user experience is improved,
in addition, by adopting the scheme, when the user needs to modify the progress bar image, the user can modify the configuration parameters (such as angle, size and the like) according to actual requirements to change the appearance of the progress bar image so as to generate the required progress bar image, the progress bar image can be rapidly modified, the modification cost is reduced, and the reusability and the expandability of the scheme are improved.
In an embodiment, the method provided by the present invention is described in detail by taking a task as a level task and a progress bar as a semicircular progress bar as an example. Referring to fig. 4a, a method for generating a level progress bar includes the following specific steps:
401. the terminal obtains configuration information of the grade progress bar image, wherein the configuration information comprises a current grade progress value, an initial grade progress, a target task progress and image parameter information of the semi-circle bar image corresponding to the user identification.
The level progress bar image is used for displaying the level progress condition of the user identifier, such as the current level of the user identifier, the progress condition required by the distance from the target level, and the like.
The level progress bar image can be applied to various scenes, such as a game scene, a social scene, a shopping scene, and the like, and in this case, the level may include a game level, a social level, a shopping level, and the like. For example, in a game scenario, the level progress bar image may be used to display the progress of a game level of a user identifier (e.g., a game account number) in the game, such as the current game level of the user identifier (e.g., the game account number), the progress required from a target game level, and so on.
Wherein the image parameters may include: width and height of the canvas, radius of the circular ring, width of the circular ring, spreading angle, distance between the inner ring and the outer ring, etc. Referring to fig. 2c, the relationship between the image parameters and the appearance of the semi-circular bar images is shown.
In the embodiment of the present invention, the expansion angle of the semicircular strip may be various, and is not limited to 180 °, and may be any angle of 0 to 360 °, such as 45 °, 52 °, 60 °, and the like.
The level progress may be represented by a numerical value, for example, the current level progress value is m, the initial level progress value is 0, and the target level progress value is n.
The initial level corresponding to the initial level progress and the target level corresponding to the target level progress can be set according to actual requirements, for example, in a certain game, the initial level corresponding to the initial level progress can be silver IV, and the target level corresponding to the target level progress can be gold IV and the like.
402. The terminal judges whether the current level progress is the same as the initial level progress, if not, step 403 is executed, and if so, step 40 is executed.
For example, when the initial level progress value is 0, it can be determined whether the current level progress value is zero.
403. And the terminal draws an initial level progress identification image, a semi-circle strip-shaped image and a target level progress identification image which are sequentially connected in the canvas according to the image parameter information.
For example, the terminal may draw a corresponding image on a rectangular canvas according to the image parameter information using canvas technology.
The identification image may be configured according to actual requirements, and for example, may be a point, an avatar image, a virtual object image, or the like. At this time, the configuration information of the level progress bar image may further include: the image parameter information of the initial level progress identification image and the image parameter information of the target level progress identification image.
404. And the terminal equally divides the semicircular strip-shaped image into a plurality of sub-strip-shaped images according to the target grade progress.
For example, the semicircular annular strip-shaped image is equally divided into n sections according to the target level progress n.
In an embodiment, the terminal may further perform color filling on the sub-strip-shaped images according to color configuration information corresponding to the sub-strip-shaped images, so that colors of the level progress bar images are enriched, and a user can conveniently identify the level. At this time, the configuration information of the hierarchical progress bar image may further include color configuration information of the divided sub-bar images.
405. The terminal obtains a progress ratio between the current level progress and the target level progress, calculates a progress radian corresponding to the current level progress according to the progress ratio and the semi-circular ring expansion angle, and calculates target progress position information of the current level progress in the semi-circular ring strip-shaped image according to the progress radian and the circular ring radius.
For example, the progress radian d corresponding to the current level progress m is obtained based on the progress ratio m/n and the semicircular angle theta. Such as radian d (current grade progress m/target grade progress) 180 pi/180. And then, calculating the horizontal and vertical coordinate values of the current level progress m in the progress bar background image according to the progress radian d and the circular ring radius r. The abscissa x and the ordinate y can be obtained, for example, by the following formula:
the abscissa x ═ radius r ═ cos (radian d × π/180) + radius r
The ordinate y is the radius r sin (radian d pi/180) + radius r.
For example, taking m 1, n 5, and the level as the game level as an example, referring to fig. 4b, after the image is drawn, the semicircular bar image may be divided into 5 equal parts, and then, by the formula: and (d) calculating the radian d corresponding to the current level progress 1 (m of the current level progress/m of the target level progress) × 180 × pi/180), and obtaining the horizontal and vertical coordinate values (a3, b3) corresponding to the progress 1 through the coordinate value formula, wherein as shown in fig. 4b, the position corresponding to the horizontal and vertical coordinate values (a3, b3) is the end position of the first segment.
406. And the terminal draws a progress identification image and inserts the progress identification image into the strip-shaped image according to the target progress position information.
For example, the terminal may draw the progress identification image offline, and the progress identification image may be set according to actual requirements, for example, the progress identification image may be a user avatar, a virtual object image, or other images.
After the progress marker image is drawn, the progress marker image may be inserted into a position corresponding to the target progress position information, referring to fig. 4c, into the end position of the first segment.
Referring to fig. 4c, the hierarchical progress bar image may further include: initial level information (such as game level "gold IV") corresponding to the initial level progress, target level information (such as game level "platinum V") corresponding to the target level progress, and level information (such as game level "gold III") corresponding to the current level progress.
Further, in some embodiments, the hierarchical progress bar image may further include: for example, referring to fig. 4c, the progress information of the current level from the target level and the result output information associated with the achievement of the target level are also included in the game level progress bar image, and the progress information "win 5 fields to platinum V" of the current game level from the target game level and the result output information include "acquire XXX skin".
407. And the terminal draws an initial level progress identification image, a semi-circle strip-shaped image and a target level progress identification image which are sequentially connected in the canvas according to the image parameter information.
The process of drawing the progress bar background image may refer to the above description, and is not described herein again.
408. And drawing a progress identification image by the terminal, and inserting the progress identification image into the starting position of the semicircular strip-shaped image.
For example, referring to fig. 3f, a progress mark image, which is a triangular block, may be inserted at the start position of the bar image shown in fig. 3 d.
Optionally, in order to improve the user experience, a progress animation may be further provided, and the progress animation may be a slow-motion animation having an animation effect of the target progress position to which the progress identification image moves. The progress animation can be configured according to actual requirements, for example, the configuration information of the progress bar image can further include an animation function of the progress animation and a duration of the progress animation. Specifically, the following are:
the animation function is used for calculating image insertion position information corresponding to each animation display time point. For example, the animation function formula may include the following formula:
the image insertion position value L corresponding to the time point T is (target progress position value M-initial progress position value C) × current time T/duration T + initial progress position value C. The target position value M may include a position value corresponding to the current level progress, such as an abscissa value and/or an ordinate value; the initial progress position value may include a position value corresponding to the initial level progress, such as including an abscissa value, and/or an ordinate value. The general initial progress position value is 0.
For example, the current animation display time point T may be obtained, whether T is less than the duration time T is judged, if T is less than the duration time T, an image insertion position value corresponding to the animation display time point T is calculated according to the animation function, and a corresponding progress identification image is inserted into the bar-shaped image according to the image insertion position value; if not, for example, equal to the duration T, the calculation is stopped. After the progress identification image corresponding to each animation display time point is obtained, the progress identification image is displayed according to the animation display time point, so that the animation effect that the progress identification image moves to the target position is achieved, and reference is made to fig. 4 d.
The method of the embodiment of the invention can be realized by loading the progress image generation code in the memory by the processor, and the progress image generation code can be uniformly stored by using a JSON object, thereby improving the application range of the scheme.
The embodiment of the invention can parameterize the variables of the length, the width, the radius, the angle, the line width, the starting point, the progress color matching and the like of the progress bar, uniformly store JSON objects, and draw on Canvas according to the configuration variable parameters by adopting a Canvas code drawing mode, thereby changing the appearance size and the style of the progress bar without using pictures. The appearance of the progress bar can be changed in a parameter configuration mode, if the appearance needs to change in size, color and the like, relevant parameters can be modified according to needs to meet the needs, replacement pictures do not need to be made, and flow is saved.
In addition, the progress bar is expanded, the progress bar can be subdivided for the second time, and a plurality of states are represented by using simple arcs. Compared with the traditional technology, the method needs to be explained on the characters, the complex information is simplified by using the graphical technology, the user cognition is further improved, and the user experience is improved.
In order to better implement the progress bar image generation method provided by the embodiment of the invention, a progress bar image generation device is also provided in an embodiment. The meaning of the noun is the same as that in the above-mentioned progress bar image generation method, and the specific implementation details can refer to the description in the method embodiment.
In an embodiment, there is also provided a progress bar image generating apparatus, as shown in fig. 5a, which may include: a configuration acquisition unit 501, a drawing unit 502, a position acquisition unit 503, and an insertion unit 504;
a configuration obtaining unit 501, configured to obtain configuration information of a task progress bar image, where the configuration information includes a current task progress corresponding to a user identifier and image parameter information of a progress bar background image;
a drawing unit 502, configured to draw a corresponding progress bar background image in a canvas according to the image parameter information, where the progress bar background image includes a progress reference image;
a position obtaining unit 503, configured to obtain target progress position information corresponding to the current task progress in the progress reference image;
an inserting unit 504, configured to insert a corresponding progress identification image in the progress reference image according to the target progress position information, so as to obtain a task progress bar image corresponding to the user identification.
In an embodiment, the configuration information may further include: a target task progress; referring to fig. 5b, the position acquisition unit 503 may include: a molecule dividing unit 5031, a ratio obtaining subunit 5032 and a position obtaining subunit 5033;
a dividing unit 5031, configured to divide the progress reference image into multiple sub-progress reference images according to the target task progress;
a ratio obtaining sub-unit 5032 configured to obtain a progress ratio between the current task progress and the target task progress,
a position obtaining sub-unit 5033, configured to obtain, according to the progress ratio and the image parameter information, target progress position information corresponding to the progress reference image of the current task progress.
In one embodiment, the progress reference image is a semi-circular progress reference image; the image parameter information includes: the semi-circular progress refers to the circular ring radius and the circular ring angle of the image; at this time, the location obtaining sub-unit 5033 may be configured to:
acquiring a target progress radian corresponding to the task progress in the progress reference image according to the progress ratio and the circular ring angle;
and acquiring target position information corresponding to the current task progress according to the target progress radian and the circular ring radius.
In one embodiment, the configuration information further includes: color configuration information corresponding to the sub-schedule reference image; referring to fig. 5c, the progress bar image generating apparatus may further include a color filling unit 505;
the color filling unit 505 is configured to: after the division subunit 5031 divides the schedule reference image into a plurality of sub-schedule reference images, color filling is performed on the sub-schedule reference images according to color configuration information corresponding to the sub-schedule reference images.
In one embodiment, the configuration information further includes: an initial task progress;
the dividing unit 5031 is configured to divide the progress reference image into multiple sub-progress reference images according to the target task progress when the current task progress is not equal to the initial task progress
The inserting unit 504 is further configured to insert a corresponding progress identification image at a starting position of the progress reference image when the current task progress is equal to the initial task progress.
In one embodiment, the configuration information further includes: animation model information of the progress animation, and duration of the progress animation;
the inserting unit 504 is configured to:
acquiring initial progress position information of the initial task progress in the progress reference image;
acquiring image insertion position information corresponding to an animation display time point according to the animation model information, the duration, the initial progress position information and the target progress position information;
and inserting a corresponding progress identification image into the progress reference image according to the image insertion position information.
Optionally, referring to fig. 5d, the progress bar image generating apparatus may further include a display unit 506; and the progress identification image is used for displaying the corresponding progress identification image according to the animation display time point so as to realize the progress animation.
In a specific implementation, the above units may be implemented as independent entities, or may be combined arbitrarily to be implemented as the same or several entities, and the specific implementation of the above units may refer to the foregoing method embodiments, which are not described herein again.
The character animation implementation device can be integrated with a terminal, for example, the terminal is integrated in the terminal in the form of a client, and the terminal can be a mobile phone, a tablet computer and other devices.
As can be seen from the above, the progress bar image generating device in the embodiment of the present invention adopts the configuration obtaining unit 501 to obtain the configuration information of the task progress bar image, where the configuration information includes the current task progress corresponding to the user identifier and the image parameter information of the progress bar background image; drawing a corresponding progress bar background image in the canvas by the drawing unit 502 according to the image parameter information, the progress bar background image including a progress reference image; acquiring target progress position information corresponding to the current task progress in the progress reference image by a position acquisition unit 503; the inserting unit 504 inserts a corresponding progress identification image into the progress reference image according to the target progress position information, and obtains a task progress bar image corresponding to the user identification. According to the scheme, the corresponding progress bar image can be drawn based on the configuration information of the progress bar image, the situation that a plurality of pictures are adopted to synthesize the progress bar image is avoided, and the pictures do not need to be obtained from the network side equipment, so that the generation efficiency of the progress bar image can be improved, and the flow can be saved.
Referring to fig. 6, an embodiment of the present invention provides a terminal 600, which may include one or more processors 601 of a processing core, one or more memories 602 of a computer-readable storage medium, a Radio Frequency (RF) circuit 603, a power supply 604, an input unit 605, and a display unit 606. Those skilled in the art will appreciate that the terminal structure shown in fig. 6 is not intended to be limiting and may include more or fewer components than those shown, or some components may be combined, or a different arrangement of components. Wherein:
the processor 601 is a control center of the terminal, connects various parts of the entire terminal using various interfaces and lines, and performs various functions of the terminal and processes data by operating or executing software programs and/or modules stored in the memory 602 and calling data stored in the memory 602, thereby performing overall monitoring of the terminal. Optionally, processor 601 may include one or more processing cores; preferably, the processor 601 may integrate an application processor, which mainly handles operating systems, user interfaces, application programs, etc., and a modem processor, which mainly handles wireless communications. It will be appreciated that the modem processor described above may not be integrated into the processor 601.
The memory 602 may be used to store software programs and modules, and the processor 601 executes various functional applications and data processing by operating the software programs and modules stored in the memory 602.
The RF circuitry 603 may be used for receiving and transmitting signals during the process of transmitting and receiving information.
The terminal also includes a power supply 604 (e.g., a battery) for powering the various components, which may preferably be logically coupled to the processor 601 via a power management system to manage charging, discharging, and power consumption management functions via the power management system.
The terminal may further include an input unit 605, and the input unit 605 may be used to receive input numeric or character information and generate a keyboard, mouse, joystick, optical or trackball signal input in relation to user setting and function control.
The terminal may further include a display unit 606, and the display unit 606 may be used to display information input by the user or information provided to the user, and various graphical user interfaces of the terminal, which may be composed of graphics, text, icons, video, and any combination thereof. Specifically, in this embodiment, the processor 601 in the terminal loads the executable file corresponding to the process of one or more application programs into the memory 602 according to the following instructions, and the processor 601 runs the application programs stored in the memory 602, thereby implementing various functions as follows:
acquiring configuration information of a task progress bar image, wherein the configuration information comprises a current task progress corresponding to a user identification and image parameter information of a progress bar background image; drawing a corresponding progress bar background image in a canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image; acquiring target progress position information corresponding to the current task progress in the progress reference image; and inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification.
The detailed steps of the progress bar image generation method can refer to the description of the above method example, and are not described herein again.
As can be seen from the above, the terminal in the embodiment of the present invention may obtain configuration information of a task progress bar image, where the configuration information includes a current task progress corresponding to a user identifier and image parameter information of a progress bar background image; drawing a corresponding progress bar background image in the canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image; acquiring target progress position information corresponding to the current task progress in a progress reference image; and inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification. According to the scheme, the corresponding progress bar image can be drawn based on the configuration information of the progress bar image, the situation that a plurality of pictures are adopted to synthesize the progress bar image is avoided, and the pictures do not need to be obtained from the network side equipment, so that the generation efficiency of the progress bar image can be improved, and the flow can be saved.
Those skilled in the art will appreciate that all or part of the steps in the methods of the above embodiments may be implemented by associated hardware instructed by a program, which may be stored in a computer-readable storage medium, and the storage medium may include: read Only Memory (ROM), Random Access Memory (RAM), magnetic or optical disks, and the like.
The method, the apparatus and the storage medium for generating a progress bar image according to the embodiments of the present invention are described in detail above, and a specific example is applied in the description to explain the principle and the implementation of the present invention, and the description of the above embodiments is only used to help understanding the method and the core idea of the present invention; meanwhile, for those skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.

Claims (15)

1. A progress bar image generation method is characterized by comprising the following steps:
acquiring configuration information of a task progress bar image, wherein the configuration information comprises a current task progress corresponding to a user identifier and image parameter information of a progress bar background image, and the configuration information of the task progress bar image is used for indicating the drawing of the task progress bar image;
drawing a corresponding progress bar background image in a canvas according to the image parameter information, wherein the progress bar background image comprises a progress reference image;
acquiring target progress position information corresponding to the current task progress in the progress reference image;
inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification, wherein the progress bar background image and the progress identification image are combined together to represent the task progress.
2. The progress bar image generating method of claim 1, wherein the configuration information further includes: a target task progress;
acquiring target progress position information corresponding to the current task progress in the progress reference image, wherein the target progress position information comprises:
dividing the progress reference image into a plurality of sections of sub-progress reference images according to the progress of the target task;
obtaining a progress ratio between the current task progress and the target task progress,
and acquiring target progress position information corresponding to the progress reference image of the current task progress according to the progress ratio and the image parameter information.
3. The progress bar image generating method according to claim 2, wherein the progress reference image is a semi-circular progress reference image; the image parameter information includes: the semi-circular progress refers to the circular ring radius and the circular ring angle of the image;
acquiring target progress position information corresponding to the current task progress according to the progress ratio and the image parameter information, wherein the target progress position information comprises:
acquiring a target progress radian corresponding to the task progress in the progress reference image according to the progress ratio and the circular ring angle;
and acquiring target position information corresponding to the current task progress according to the target progress radian and the circular ring radius.
4. The progress bar image generating method according to claim 2, wherein the configuration information further includes: color configuration information corresponding to the sub-schedule reference image;
after dividing the progress reference image into a plurality of pieces of sub-progress reference images, the method further includes:
and according to the color configuration information corresponding to the sub-progress reference image, performing color filling on the sub-progress reference image.
5. The progress bar image generating method according to any one of claims 2 to 4, wherein the configuration information further includes: an initial task progress;
dividing the progress reference image into a plurality of sections of sub-progress reference images according to the progress of the target task, wherein the sub-progress reference images comprise:
when the current task progress is not equal to the initial task progress, dividing the progress reference image into a plurality of sections of sub-progress reference images according to the target task progress;
the method further comprises the following steps: and when the current task progress is equal to the initial task progress, inserting a corresponding progress identification image at the initial position of the progress reference image.
6. The progress bar image generating method of claim 5, wherein the configuration information further includes: animation model information of the progress animation, and duration of the progress animation;
inserting a corresponding progress identification image into the progress reference image according to the target progress position information, wherein the process identification image comprises the following steps:
acquiring initial progress position information of the initial task progress in the progress reference image;
acquiring image insertion position information corresponding to an animation display time point according to the animation model information, the duration, the initial progress position information and the target progress position information;
and inserting a corresponding progress identification image into the progress reference image according to the image insertion position information.
7. The progress bar image generation method of claim 6, further comprising: and displaying the corresponding progress identification image according to the animation display time point so as to realize the progress animation.
8. A progress bar image generating apparatus, comprising:
the system comprises a configuration acquisition unit, a task progress bar image acquisition unit and a task progress bar image acquisition unit, wherein the configuration acquisition unit is used for acquiring configuration information of a task progress bar image, and the configuration information comprises a current task progress corresponding to a user identifier and image parameter information of a progress bar background image;
the drawing unit is used for drawing a corresponding progress bar background image in a canvas according to the image parameter information, the progress bar background image comprises a progress reference image, and the configuration information of the task progress bar image is used for indicating the drawing of the task progress bar image;
the position acquisition unit is used for acquiring target progress position information corresponding to the current task progress in the progress reference image;
and the inserting unit is used for inserting a corresponding progress identification image into the progress reference image according to the target progress position information to obtain a task progress bar image corresponding to the user identification, wherein the progress bar background image and the progress identification image are combined together to represent the task progress.
9. The progress bar image generating apparatus of claim 8, wherein the configuration information further includes: a target task progress;
the position acquisition unit includes:
the dividing subunit is used for dividing the progress reference image into a plurality of sections of sub-progress reference images according to the progress of the target task;
a ratio obtaining subunit, configured to obtain a progress ratio between the current task progress and the target task progress,
and the position obtaining subunit is configured to obtain, according to the progress ratio and the image parameter information, target progress position information corresponding to the progress reference image of the current task progress.
10. The progress bar image generating apparatus according to claim 9, wherein the progress reference image is a semi-circular progress reference image; the image parameter information includes: the semi-circular progress refers to the circular ring radius and the circular ring angle of the image;
the position obtaining subunit is specifically configured to:
acquiring a target progress radian corresponding to the task progress in the progress reference image according to the progress ratio and the circular ring angle;
and acquiring target position information corresponding to the current task progress according to the target progress radian and the circular ring radius.
11. The progress bar image generating apparatus of claim 9, wherein the configuration information further includes: color configuration information corresponding to the sub-schedule reference image;
the progress bar image generating device further comprises a color filling unit;
the color filling unit is used for: and after the progress reference image is divided into a plurality of sections of sub-progress reference images by the dividing subunit, performing color filling on the sub-progress reference images according to color configuration information corresponding to the sub-progress reference images.
12. The progress bar image generating apparatus according to any one of claims 9 to 11, wherein the configuration information further includes: an initial task progress;
the dividing subunit is used for dividing the progress reference image into a plurality of sections of sub-progress reference images according to the progress of the target task when the current task progress is not equal to the initial task progress
The inserting unit is further configured to insert a corresponding progress identification image at a starting position of the progress reference image when the current task progress is equal to the initial task progress.
13. The progress bar image generating apparatus of claim 12, wherein the configuration information further includes: animation model information of the progress animation, and duration of the progress animation;
the insertion unit is used for:
acquiring initial progress position information of the initial task progress in the progress reference image;
acquiring image insertion position information corresponding to an animation display time point according to the animation model information, the duration, the initial progress position information and the target progress position information;
and inserting a corresponding progress identification image into the progress reference image according to the image insertion position information.
14. A storage medium storing instructions which, when executed by a processor, implement the progress bar image generating method according to any one of claims 1 to 7.
15. A terminal comprising a memory and a processor, the memory having stored therein a computer program, which, when executed by the processor, causes the processor to execute the progress bar image generation method according to any one of claims 1 to 7.
CN201711286785.3A 2017-12-07 2017-12-07 Progress bar image generation method and device and storage medium Active CN109901894B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711286785.3A CN109901894B (en) 2017-12-07 2017-12-07 Progress bar image generation method and device and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711286785.3A CN109901894B (en) 2017-12-07 2017-12-07 Progress bar image generation method and device and storage medium

Publications (2)

Publication Number Publication Date
CN109901894A CN109901894A (en) 2019-06-18
CN109901894B true CN109901894B (en) 2021-06-08

Family

ID=66939489

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711286785.3A Active CN109901894B (en) 2017-12-07 2017-12-07 Progress bar image generation method and device and storage medium

Country Status (1)

Country Link
CN (1) CN109901894B (en)

Families Citing this family (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2021061745A1 (en) * 2019-09-24 2021-04-01 Nova Southeastern University Systems and methods for mentoring students and facilitating their entry into healthcare professions
CN111324404B (en) * 2020-01-20 2023-11-24 北京有竹居网络技术有限公司 Information acquisition progress display method and device, electronic equipment and readable medium
CN111399736B (en) * 2020-03-17 2021-09-21 腾讯科技(深圳)有限公司 Progress bar control method, device and equipment and readable storage medium
CN111596853B (en) * 2020-04-29 2021-09-07 五八有限公司 Method and device for realizing rolling indicator, electronic equipment and storage medium
CN112306616B (en) * 2020-11-23 2023-09-29 北京百家科技集团有限公司 Loading display processing method and device, computer equipment and storage medium
CN112330773A (en) * 2020-11-30 2021-02-05 广州博冠信息科技有限公司 Countdown image generation method and device, electronic equipment and computer medium
CN112435308B (en) * 2020-11-30 2023-11-14 成都新潮传媒集团有限公司 Drawing method and device of annular progress bar and storage medium
CN112579083A (en) * 2020-12-09 2021-03-30 京东数字科技控股股份有限公司 Image display method and device, electronic equipment and storage medium
CN112544675B (en) * 2020-12-23 2022-08-19 智锐达仪器科技南通有限公司 Livestock carcass skin source tracing code spraying method, inkjet printer and control method
CN112711417A (en) * 2020-12-30 2021-04-27 上海铼锶信息技术有限公司 Manufacturing method of progress bar and electronic equipment
CN112949249B (en) * 2021-02-20 2023-06-02 山东英信计算机技术有限公司 Method, system and device for determining element placement position
CN113961281A (en) * 2021-08-13 2022-01-21 叮联信息技术有限公司 Internet-based task progress display method and device
CN113837019A (en) * 2021-08-31 2021-12-24 北京新氧科技有限公司 Cosmetic progress detection method, device, equipment and storage medium
CN114071238A (en) * 2021-11-12 2022-02-18 北京百度网讯科技有限公司 Method, apparatus, device, medium and product for generating video progress bar
CN114627225A (en) * 2022-03-16 2022-06-14 北京字跳网络技术有限公司 Method and device for rendering graphics and storage medium

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2012106269A1 (en) * 2011-01-31 2012-08-09 Cbs Interactive, Inc. Media playback control
CN103577063A (en) * 2012-07-23 2014-02-12 Lg电子株式会社 Mobile tmerinal and control method thereof
CN104461479A (en) * 2013-09-13 2015-03-25 腾讯科技(深圳)有限公司 Timing method and device
CN105227830A (en) * 2015-09-01 2016-01-06 上海由零网络科技有限公司 A kind of method for processing video frequency and processing system for video
CN105306667A (en) * 2014-07-17 2016-02-03 Lg电子株式会社 Mobile terminal and controlling method thereof
CN105472469A (en) * 2015-12-08 2016-04-06 小米科技有限责任公司 Video playing progress adjusting method and apparatus
CN106935254A (en) * 2017-02-16 2017-07-07 珠海格力电器股份有限公司 The display control method of media player progress bar, system and media player
CN106990951A (en) * 2017-02-22 2017-07-28 福建天泉教育科技有限公司 The method for drafting and system of a kind of progress bar
CN107122188A (en) * 2017-04-26 2017-09-01 网易(杭州)网络有限公司 The method and device of project process bar image generation
CN107436766A (en) * 2017-07-31 2017-12-05 北京酷我科技有限公司 The Processing Algorithm of self-defined shape progress bar under a kind of Mac

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100303450A1 (en) * 2009-05-29 2010-12-02 Nokia Corporation Playback control

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2012106269A1 (en) * 2011-01-31 2012-08-09 Cbs Interactive, Inc. Media playback control
CN103577063A (en) * 2012-07-23 2014-02-12 Lg电子株式会社 Mobile tmerinal and control method thereof
CN104461479A (en) * 2013-09-13 2015-03-25 腾讯科技(深圳)有限公司 Timing method and device
CN105306667A (en) * 2014-07-17 2016-02-03 Lg电子株式会社 Mobile terminal and controlling method thereof
CN105227830A (en) * 2015-09-01 2016-01-06 上海由零网络科技有限公司 A kind of method for processing video frequency and processing system for video
CN105472469A (en) * 2015-12-08 2016-04-06 小米科技有限责任公司 Video playing progress adjusting method and apparatus
CN106935254A (en) * 2017-02-16 2017-07-07 珠海格力电器股份有限公司 The display control method of media player progress bar, system and media player
CN106990951A (en) * 2017-02-22 2017-07-28 福建天泉教育科技有限公司 The method for drafting and system of a kind of progress bar
CN107122188A (en) * 2017-04-26 2017-09-01 网易(杭州)网络有限公司 The method and device of project process bar image generation
CN107436766A (en) * 2017-07-31 2017-12-05 北京酷我科技有限公司 The Processing Algorithm of self-defined shape progress bar under a kind of Mac

Also Published As

Publication number Publication date
CN109901894A (en) 2019-06-18

Similar Documents

Publication Publication Date Title
CN109901894B (en) Progress bar image generation method and device and storage medium
CN105976417B (en) Animation generation method and device
CN108176048B (en) Image processing method and device, storage medium and electronic device
EP3882865A1 (en) Object loading method, device, storage medium, and electronic device
CN107358649B (en) Processing method and device of terrain file
CN112933597B (en) Image processing method, image processing device, computer equipment and storage medium
CN108337547B (en) Character animation realization method, device, terminal and storage medium
CN105913471B (en) The method and apparatus of picture processing
CN111957040B (en) Detection method and device for shielding position, processor and electronic device
CN109885367B (en) Interactive chat implementation method, device, terminal and storage medium
CN112241993B (en) Game image processing method and device and electronic equipment
CN112070906A (en) Augmented reality system and augmented reality data generation method and device
CN112967367B (en) Water wave special effect generation method and device, storage medium and computer equipment
CN113630557B (en) Image processing method, apparatus, device, storage medium, and computer program product
CN109395387B (en) Three-dimensional model display method and device, storage medium and electronic device
CN110930484B (en) Animation configuration method and device, storage medium and electronic device
CN106815880B (en) Animation multiplexing method and system
CN111494952A (en) Webpage end object display method and device and readable storage medium
CN101976195A (en) Method and device for setting user interface
CN108959311B (en) Social scene configuration method and device
CN104881230A (en) Method and equipment for performing man-machine interaction on touch control terminal
CN108305310B (en) Character animation realization method, device, terminal and storage medium
CN111167119A (en) Game development display method, device, equipment and storage medium
CN112750182A (en) Dynamic effect implementation method and device and computer readable storage medium
CN105892663A (en) Information processing method and electronic device

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
GR01 Patent grant
GR01 Patent grant