CN116048692A - Progress bar drawing method and device and electronic equipment - Google Patents

Progress bar drawing method and device and electronic equipment Download PDF

Info

Publication number
CN116048692A
CN116048692A CN202211653007.4A CN202211653007A CN116048692A CN 116048692 A CN116048692 A CN 116048692A CN 202211653007 A CN202211653007 A CN 202211653007A CN 116048692 A CN116048692 A CN 116048692A
Authority
CN
China
Prior art keywords
progress
parameters
target
line
arc
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.)
Pending
Application number
CN202211653007.4A
Other languages
Chinese (zh)
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.)
Pateo Connect Nanjing Co Ltd
Original Assignee
Pateo Connect Nanjing 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 Pateo Connect Nanjing Co Ltd filed Critical Pateo Connect Nanjing Co Ltd
Priority to CN202211653007.4A priority Critical patent/CN116048692A/en
Publication of CN116048692A publication Critical patent/CN116048692A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/20Drawing from basic elements, e.g. lines or circles
    • G06T11/206Drawing of charts or graphs

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • General Engineering & Computer Science (AREA)
  • Image Generation (AREA)

Abstract

The application discloses a progress bar drawing method and device and electronic equipment, and belongs to the field of interface data processing. The progress bar drawing method comprises the following steps: responding to the triggering operation of the target task, acquiring configuration information of a progress bar, wherein the configuration information comprises description parameters of lines forming a target graph, and the target graph is the shape of the progress bar when the progress is completed; executing at least one drawing process until a target graph is obtained, wherein the drawing process comprises the following steps: acquiring the execution progress of a target task; acquiring a first drawing parameter of a line forming a progress graph according to the execution progress and the description parameter; and according to the first drawing parameters, sequentially drawing lines of the progress pattern according to the initial drawing positions and the connection sequence to obtain the progress pattern, wherein the integrity of the progress pattern compared with the target pattern represents the execution progress. The method and the device can improve the flexibility of style change of the progress bar and improve the progress bar generation efficiency.

Description

Progress bar drawing method and device and electronic equipment
Technical Field
The application belongs to the field of interface data processing, and particularly relates to a progress bar drawing method and device and electronic equipment.
Background
The progress bar is a control for describing the processing progress of the computer processing task in real time and reflecting the completion degree of the processing task and the amount of unfinished tasks.
The current progress bar generation process mainly depends on the advanced disposition of.9 pictures, wherein.9 is a special picture format. The specific generation comprises calling pictures matched with the current task progress from the previously deployed pictures according to the current task progress. And synthesizing the picture with the background picture to obtain a synthesized picture. And rendering and displaying the synthesized picture to obtain a progress bar.
However, the method for generating the progress bar depends on the picture deployed in advance, so that once the pattern of the progress bar such as size, color, style and the like needs to be changed, the picture of the pattern needed by the progress bar needs to be redrawn and deployed, which results in lower flexibility of pattern change of the progress bar and lower generation efficiency of the progress bar.
Disclosure of Invention
The embodiment of the application provides a progress bar drawing method, a device and electronic equipment, which can solve the problems that the current progress bar style change is low in flexibility and the progress bar generation efficiency is low.
In a first aspect, an embodiment of the present application provides a method for drawing a progress bar, where the method includes:
Responding to the triggering operation of a target task, and acquiring configuration information of a progress bar, wherein the configuration information comprises description parameters of lines forming a target graph, and the target graph is the shape of the progress bar when the progress is completed;
executing at least one drawing process until the target graph is obtained, wherein the drawing process comprises the following steps:
acquiring the execution progress of the target task;
according to the execution progress and the description parameters, obtaining first drawing parameters of lines forming a progress graph, wherein the first drawing parameters are at least used for indicating the types, initial drawing positions, connection sequences and lengths of the lines;
and according to the first drawing parameters, sequentially drawing lines of the progress pattern according to the initial drawing positions and the connection sequence to obtain the progress pattern, wherein the progress pattern represents the execution progress compared with the integrity of the target pattern.
Optionally, the target graph is rectangular, and the description parameter further includes a width of the progress bar; the step of obtaining a first drawing parameter of a line forming a progress graph according to the execution progress and the description parameter comprises the following steps:
calculating a target width of the progress bar corresponding to the execution progress according to the execution progress and the width;
And according to the target width and the description parameters, acquiring a first drawing parameter of a line forming a progress pattern, wherein the length of the progress pattern is the target width.
Optionally, the target graph is a rounded rectangle, and the obtaining, according to the target width and the description parameter, a first drawing parameter of a line forming the progress graph includes:
when the target width is smaller than or equal to the length of the round angle, acquiring the first drawing parameters according to the description parameters, wherein the first drawing parameters comprise drawing parameters of a first arc line, a first straight line, a second arc line and a second straight line;
when the target width is larger than the fillet length and the target width is smaller than the difference value between the width and the fillet length, acquiring the first drawing parameters according to the description parameters, wherein the first drawing parameters comprise drawing parameters of a first arc line, a third line, a first line, a fourth line, a second arc line and a second line;
when the target width is greater than or equal to the difference between the width and the fillet length, acquiring the first drawing parameters according to the description parameters, wherein the first drawing parameters comprise drawing parameters of a first arc line, a third arc line, a first straight line, a fourth arc line, a fourth straight line, a second arc line and a second straight line, the first arc line, the second arc line, the third arc line and the fourth arc line respectively correspond to four fillets of the fillet rectangle, and the fillet length is the length of a connecting line of two endpoints of the fillet in the horizontal direction.
Optionally, the description parameters include: the circle center coordinates, the radius, the circle center angle, the drawing starting angle and the drawing direction corresponding to each round angle and the height of the round angle rectangle;
the drawing parameters of each arc include: the circular center coordinates of the round corners corresponding to the arc lines, the radius, the drawing initial angle, the drawing direction and the drawing end angle of the arc lines, wherein the drawing end angle is determined according to the target width and the radius, and the arc lines comprise: the first arc, the second arc, the third arc, and the fourth arc;
the drawing parameters of each straight line include: and drawing end point coordinates of the straight line, wherein the straight line comprises the first straight line, the second straight line, the third straight line and the fourth straight line, and the drawing end point coordinates are determined according to the connection sequence, the target width and the height.
Optionally, the fillet length is determined based on the radius and central angle of one of the fillets.
Optionally, the target graph is a circle, and the obtaining, according to the execution progress and the description parameter, a first drawing parameter of a line forming the progress graph includes:
Calculating a central angle corresponding to the arc line in the progress graph according to the execution progress;
when the central angle is smaller than 360 degrees, determining that the progress pattern is in a fan shape, and acquiring the first drawing parameters according to the description parameters and the central angle, wherein the first drawing parameters comprise drawing parameters of the arc line, the fifth straight line and the sixth straight line;
and when the central angle is equal to 360 degrees, determining the progress pattern as the target pattern, and acquiring a first drawing parameter of the target pattern according to the description parameter.
Optionally, the description parameters include: the center coordinates, the radius, the drawing initial angle and the drawing direction of the target graph;
the drawing parameters of the arc line comprise: the circle center coordinates, the radius, the drawing start angle, the drawing direction and the drawing end angle of the arc line, wherein the drawing end angle is the circle center angle;
the drawing parameters of each straight line include: and drawing end point coordinates of the straight line, wherein the straight line comprises the fifth straight line and the sixth straight line, and the drawing end point coordinates are determined according to the connection sequence.
Optionally, the configuration information further includes: a second drawing parameter for indicating at least a type, a start drawing position, a connection order, and a length of the line constituting the background figure, the start drawing position in the second drawing parameter being the same as the start drawing position in the first drawing parameter, the background figure being the target figure, the method further comprising, before the performing at least one drawing process:
And sequentially drawing lines of the background graph according to the initial drawing position and the connection sequence of the second drawing parameters according to the second drawing parameters to obtain the background graph.
Optionally, the first drawing parameters further include: filling colors; and according to the first drawing parameters, drawing lines of the progress pattern in sequence according to the initial drawing position and the connection sequence to obtain the progress pattern, wherein the steps comprise:
sequentially drawing lines of the progress graph according to the first drawing parameters, the initial drawing positions and the connection sequence to obtain an intermediate graph;
and performing color filling on the intermediate graph according to the filling color to obtain the progress graph.
In a second aspect, an embodiment of the present application provides a progress bar drawing device, where the device includes:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for responding to the triggering operation of a target task and acquiring configuration information of a progress bar, the configuration information comprises description parameters of lines forming a target graph, and the target graph is the shape of the progress bar when the progress is completed;
the execution module is used for executing at least one drawing process until the target graph is obtained, and the drawing process comprises the following steps:
Acquiring the execution progress of the target task;
according to the execution progress and the description parameters, obtaining first drawing parameters of lines forming a progress graph, wherein the first drawing parameters are at least used for indicating the types, initial drawing positions, connection sequences and lengths of the lines;
and according to the first drawing parameters, sequentially drawing lines of the progress pattern according to the initial drawing positions and the connection sequence to obtain the progress pattern, wherein the progress pattern represents the execution progress compared with the integrity of the target pattern.
In a third aspect, an embodiment of the present application provides an electronic device, including: a processor and a memory; the memory is used for storing a computer program; the processor is configured to implement the method steps of any one of claims 1 to 9 when executing a program stored on the memory.
In a fourth aspect, embodiments of the present application provide a readable storage medium, which when executed by a processor of an electronic device, causes the electronic device to perform the method of any one of claims 1 to 9.
In the embodiment of the application, after the configuration information of the progress bar is obtained in response to the triggering operation of the target task, at least one drawing process is executed to draw a progress pattern matched with the execution progress of the target task until a target pattern indicating that the execution of the target task is completed is obtained. Wherein the configuration information includes description parameters of lines constituting the target graphic. The drawing processing comprises the steps of obtaining the execution progress of a target task; acquiring a first drawing parameter of a line forming a progress graph according to the execution progress and the description parameter; and according to the first drawing parameters, drawing lines of the progress pattern according to the initial drawing positions and the connection sequence in sequence to obtain the progress pattern. The progress pattern indicates execution progress compared to the integrity of the target pattern, and the first drawing parameter is used for indicating at least the type, the initial drawing position, the connection sequence and the length of the line.
According to the technical scheme, when the execution progress of the target task is obtained each time according to the configuration information of the progress bar, a progress pattern matched with the execution progress is drawn, and the execution progress of the target task is represented by the integrity of the progress pattern compared with the integrity of the target pattern indicated by the description parameter in the configuration information. Therefore, under the condition that the style of the progress bar needs to be changed, the description parameters of the target graphics in the configuration information are changed, the progress graphics of the new style are drawn, and the change of the style of the progress bar is realized. Compared with the related art, the method and the device avoid redrawing and deploying pictures of the patterns required by the progress bar when the patterns of the progress bar are changed, reduce the changing cost of the patterns of the progress bar, improve the flexibility of the pattern changing of the progress bar, and improve the generating efficiency of the progress bar.
Drawings
Fig. 1 is a flowchart of a progress bar drawing method provided in an embodiment of the present application;
FIG. 2 is one of the flowcharts of a rendering processing method provided in the embodiment of the present application;
FIG. 3 is a second flowchart of a drawing processing method according to an embodiment of the present disclosure;
FIG. 4 is one of the schematic diagrams of a progress bar provided in the embodiments of the present application;
FIG. 5 is a schematic diagram of calculation of fillet length according to an embodiment of the present application;
FIG. 6 is one of the schematic diagrams of the calculation of the end angle of the drawing provided in the embodiment of the present application;
FIG. 7 is a second schematic view of a progress bar according to an embodiment of the present disclosure;
FIG. 8 is a third schematic view of a progress bar according to an embodiment of the present disclosure;
FIG. 9 is a second schematic diagram of the calculation of the end angle of the drawing according to the embodiment of the present application;
FIG. 10 is a third flowchart of a rendering processing method according to an embodiment of the present disclosure;
FIG. 11 is a fourth schematic diagram of a progress bar provided in an embodiment of the present application;
fig. 12 is a block diagram of a progress bar drawing apparatus provided in an embodiment of the present application;
fig. 13 is a block diagram of an electronic device provided in an embodiment of the present application.
Detailed Description
The following description of the embodiments of the present application will be made clearly and fully with reference to the accompanying drawings, in which it is evident that the embodiments described are some, but not all, of the embodiments of the present application. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, are intended to be within the scope of the present application.
The method, the device and the electronic equipment for drawing the progress bar provided by the embodiment of the application are described in detail through specific embodiments and application scenes thereof with reference to the accompanying drawings.
Referring to fig. 1, a flowchart of a progress bar drawing method according to an embodiment of the present application is shown. The progress bar drawing method is applied to the electronic equipment. The electronic device may be a mobile phone, tablet computer, personal computer, wearable device, etc. Wherein the electronic device is a device having an operating system. Alternatively, the operating system may be an Android operating system, or an ios operating system, or the like. As shown in fig. 1, the progress bar drawing method includes the following steps 101 to 102.
Step 101, responding to the triggering operation of the target task, and acquiring configuration information of a progress bar, wherein the configuration information comprises description parameters of lines forming a target graph, and the target graph is the shape of the progress bar when the progress is completed.
In this embodiment of the present application, after executing a triggering operation of a target task, a user may enable an electronic device to receive the triggering operation of the target task, execute the target task in response to the triggering operation, and obtain configuration information of a progress bar, so as to deploy the progress bar. The progress bar may be used to reflect the execution progress of the target task.
Wherein the progress bar configuration information includes description parameters of one or more lines constituting the target graphic. The description parameter is used for describing relevant information of the line. Alternatively, the description parameters may include the width, height, drawing parameters of each line constituting the target image, and the like of the target graphic. The rendering parameters may be used to indicate the type of line, the starting rendering position, the connection order, the length, etc.
Illustratively, the progress bar is a rectangular progress bar and the target graphic is a rectangle. The configuration information includes the width and height of the rectangle. Or the progress bar is a rounded rectangle progress chart, and the target graph is a rounded rectangle. The configuration information comprises the width and the height of the fillet rectangle, the center coordinates and the radius corresponding to each of four fillets of the fillet rectangle, the center angle, the drawing starting angle and the drawing direction, the lengths of four sides of the fillet rectangle and the like. Alternatively, the target pattern is a rounded rectangle. The configuration information comprises the width and the height of the fillet rectangle and the end point coordinates and the radius of two tangent line segments corresponding to each fillet in four fillets of the fillet rectangle, wherein the two tangent line segments corresponding to the fillet refer to two line segments tangent to the fillet. Or the progress bar is a circular progress bar, and the target graph is circular. The configuration information comprises circle center coordinates, radius, drawing start angle and drawing direction of the circle.
Alternatively, the configuration information may be information that the user writes to the electronic device to cause the electronic device to be stored locally. Alternatively, the configuration information may be information that the electronic device reads from a third party device.
In one example, the target task is a delete task of file a, and the trigger operation is a click operation on a delete identifier of file a. The user clicks the deletion identifier of the file A on the electronic device, so that the electronic device receives clicking operation on the deletion identifier, and accordingly configuration information of a progress bar is obtained in response to the clicking operation to generate the progress bar, wherein the progress bar is used for reflecting execution progress of a deletion task of the file A.
For another example, when the operating system of the electronic device is an android operating system, the electronic device may obtain the configuration information of the progress bar from the attr file. The attr file is used to store configuration information of a progress bar for user registration.
And 102, executing at least one drawing process until a target graph is obtained. The drawing process includes: acquiring the execution progress of a target task; according to the execution progress and the description parameters, obtaining first drawing parameters of lines forming a progress graph, wherein the first drawing parameters are at least used for indicating the types, initial drawing positions, connection sequences and lengths of the lines; and according to the first drawing parameters, sequentially drawing lines of the progress pattern according to the initial drawing positions and the connection sequence to obtain the progress pattern, wherein the integrity of the progress pattern compared with the target pattern represents the execution progress.
In this embodiment of the present application, after the electronic device responds to the triggering operation of the target task, one or more drawing processes may be executed to obtain, for one or more times, the execution progress of the target task, and a progress pattern matched with the execution progress is drawn according to the same initial drawing position, until the target pattern is obtained by drawing, that is, the execution of the target task is completed. The progress graph represents the execution progress of the target task compared with the completeness of the target graph. It is to be understood that, in the case of performing the drawing process a plurality of times, the starting drawing positions of the drawn lines each time are the same, so that the progress pattern obtained by the drawing process of the next time can be made to completely cover the progress pattern obtained by the drawing process of the previous time, so as to represent the latest execution progress of the target task.
In an alternative implementation manner, after the electronic device responds to the triggering operation of the target task, the first drawing process may be executed, and it is determined whether the progress pattern obtained through the drawing process is the target pattern. If yes, ending the execution progress bar drawing method; if not, the second drawing process is executed, and whether the progress pattern obtained by the drawing process is a target pattern is judged. If yes, ending the execution progress bar drawing method; and if not, executing the third drawing process, wherein the process graph obtained through the drawing process is the target graph so as to represent that the execution of the target task is completed. It is easy to understand that when the execution progress indicates that the execution is completed, the progress graph drawn according to the execution progress and the description parameters is the target graph.
The execution progress of the target task refers to the execution completion degree of the target task. Alternatively, the value of the execution progress may be a percentage value. Alternatively, the execution progress may take a value of 0 to 100. Alternatively, the execution progress may take a value of 0 to 1, or the like. The initial drawing position in the first drawing parameter refers to the initial drawing position of all lines constituting the progress pattern, i.e., the initial drawing position of the progress pattern. The connection order is the connection order of a plurality of lines constituting the progress pattern.
In the embodiment of the application, after the configuration information of the progress bar is obtained in response to the triggering operation of the target task, at least one drawing process is executed to draw a progress pattern matched with the execution progress of the target task until a target pattern indicating that the execution of the target task is completed is obtained. Wherein the configuration information includes description parameters of lines constituting the target graphic. The drawing processing comprises the steps of obtaining the execution progress of a target task; acquiring a first drawing parameter of a line forming a progress graph according to the execution progress and the description parameter; and according to the first drawing parameters, drawing lines of the progress pattern according to the initial drawing positions and the connection sequence in sequence to obtain the progress pattern. The progress pattern indicates execution progress compared to the integrity of the target pattern, and the first drawing parameter is used for indicating at least the type, the initial drawing position, the connection sequence and the length of the line.
According to the technical scheme, when the execution progress of the target task is obtained each time according to the configuration information of the progress bar, a progress pattern matched with the execution progress is drawn, and the execution progress of the target task is represented by the integrity of the progress pattern compared with the integrity of the target pattern indicated by the description parameter in the configuration information. Therefore, under the condition that the style of the progress bar needs to be changed, the description parameters of the target graphics in the configuration information are changed, the progress graphics of the new style are drawn, and the change of the style of the progress bar is realized. Compared with the related art, the method and the device avoid redrawing and deploying pictures of the patterns required by the progress bar when the patterns of the progress bar are changed, reduce the changing cost of the patterns of the progress bar, improve the flexibility of the pattern changing of the progress bar, and improve the generating efficiency of the progress bar.
In this embodiment of the present application, the shape of the progress bar may be various, that is, the shape of the target graphic may be various. For example, the target pattern may be rectangular, circular, annular, etc., and the rectangle may also be a right-angle rectangle and a rounded rectangle. The following embodiments of the present application further describe a progress bar drawing method by taking a target graph as a rectangle and a circle as an example.
First alternative implementation: the target pattern is rectangular. The descriptive parameters also include the width of the progress bar. As shown in fig. 2, the rendering process performed by the electronic device includes the following steps 201 to 204.
Step 201, obtaining the execution progress of the target task.
The explanation and implementation of this step refer to the foregoing related explanation and implementation, and this will not be repeated in the embodiments of the present application.
Step 202, calculating a target width of the progress bar corresponding to the execution progress according to the execution progress and the width.
In this embodiment of the present application, the ratio of the value of the execution progress to the value of the execution progress when the execution is completed is equal to the ratio of the target width to the width. Alternatively, in the case where the value of the execution progress is 0 to 100, the target width L1 calculated from the execution progress x and the width L0 satisfies: l1=x++100×l0.
Step 203, according to the target width and the description parameter, obtaining a first drawing parameter of a line forming the progress pattern, wherein the length of the progress pattern is the target width.
In an alternative implementation, the target pattern is a rounded rectangle. As shown in fig. 3, the process of the electronic device obtaining the first drawing parameters of the lines constituting the progress pattern according to the target width and the description parameters may include the following steps 301 to 305.
Step 301, judging whether the target width is smaller than or equal to the fillet length. If yes, go to step 302; if not, go to step 303.
The length of the round angle is the length of a connecting line of two end points of one round angle in the round angle rectangle in the horizontal direction. As shown in fig. 4, the fillet length is L2. Taking the example that the progress bar moves from left to right, whether the target width L1 is smaller than or equal to the fillet length L2 is judged, so that the shape of the progress pattern with the length being the target width is judged.
Alternatively, in the case where the fillet length is included in the description parameter, the fillet length may be obtained from the description parameter. Alternatively, in the case where the radius and the central angle of the rounded corner are included in the description parameter, it may be determined based on the radius and the central angle corresponding to one rounded corner. As shown in fig. 5, the fillet length L2 satisfies: l2=r× (1-cos α). R is radius and alpha is central angle. For example, when the central angle is 90 °, the fillet Radius L is a Radius R (Radius).
Step 302, obtaining a first drawing parameter according to the description parameter, wherein the first drawing parameter comprises drawing parameters of a first arc line, a first straight line, a second arc line and a second straight line.
In this embodiment of the application, first pitch arc and second pitch arc correspond with the two fillet of fillet rectangle respectively, and these two fillets are located the same limit of fillet rectangle. The first straight line and the second straight line are connected with the two fillets.
Taking fig. 4 as an example, in the case where the target width L1 is less than or equal to the fillet length L2, the progress pattern with the length being the target width is 401. Progress graphic 401 includes: a first arc 4011, a first straight line 4012, a second arc 4013, and a second straight line 4014. The first drawing parameters include drawing parameters of a first arc, a first straight line, a second arc, and a second straight line. Wherein the first arc may correspond to a rounded corner located at an upper left corner of the rounded rectangle. The second arc may correspond to a rounded corner in the rounded rectangle that is located at the lower left corner. The first straight line and the second straight line are both connected with the first arc line and the second arc line. The second straight line may correspond to the short side on the left in the rounded rectangle.
Alternatively, the description parameters may include: the circle center coordinates, the radius, the circle center angle, the drawing starting angle, the drawing direction and the height of the fillet rectangle corresponding to each fillet in the fillet rectangle. The drawing parameters of the first arc include: circle center coordinates, radius, drawing start angle, drawing direction and drawing end angle of the round angle corresponding to the first arc line. The drawing parameters of the first straight line include: and drawing an end point coordinate of the first straight line. The drawing parameters of the second arc line include: circle center coordinates, radius, drawing start angle, drawing direction and drawing end angle of the round angle corresponding to the first arc line. The drawing parameters of the second straight line include: and drawing an endpoint coordinate of the second straight line. Wherein, the drawing end angle is determined according to the target width and radius. The drawing end point coordinates are determined according to the connection order of the lines constituting the progress pattern, the target width and the height.
The following steps A1 to A2 are also included before step 302.
In step A1, a drawing end angle corresponding to the first arc line and a drawing end angle corresponding to the second arc line are determined according to the target width and the radius.
Alternatively, as shown in fig. 6, the drawing end angle corresponding to the first arc and the drawing end angle corresponding to the second arc are determined according to the target width, the radius, and the first formula.
Wherein the first formula satisfies: degre1=pi/2- (arcsin ((R-L1)/(R))/(pi×180). The depth 1 is a drawing end angle, R is a radius, and L1 is a target width. In fig. 6, β is arcsin ((R-X)/(R)). It is to be understood that, when the degree1 is the drawing end angle of the first arc, R is the radius of the first arc; when the depth 1 is the drawing end angle of the second arc, R is the radius of the second arc.
In step A2, the drawing end point coordinates of the first straight line and the drawing end point coordinates of the second straight line are determined according to the starting drawing position, the connection order of the lines constituting the progress pattern, the target width and the target height.
In the case where the origin of the coordinates of the page is the upper left corner of the page, please refer to fig. 4, in an alternative implementation, in the case where the connection order is the first arc, the first straight line, the second arc, and the second straight line, the drawing endpoint coordinates of the first straight line are (L1, H). The drawing end point coordinates of the second straight line are coordinates of the starting drawing position.
In another alternative implementation, in the case where the connection order is the first arc, the second line, the second arc, and the first line, the drawing end point coordinates of the first line are coordinates of the starting drawing position. The drawing end coordinates of the second straight line are (0, Y), y=h1+2×h2, H1 is the length of the middle and short sides of the rounded rectangle, and H2 is sin β×r.
Step 303, determining whether the target width is smaller than the difference between the width and the fillet length. If yes, go to step 304; if not, go to step 305.
As shown in fig. 4, the difference between the width and the rounded length is the length of the middle and long sides of the rounded rectangle. Taking the progress bar moving from left to right as an example, whether the difference L0-L2 between the width of the target width X and the length of the round angle is the width is judged, so as to judge the shape of the progress pattern with the length being the target width.
Step 304, obtaining a first drawing parameter according to the description parameter, wherein the first drawing parameter comprises drawing parameters of a first arc line, a third line, a first line, a fourth line, a second arc line and a second line.
In the embodiment of the present application, taking fig. 7 as an example, in the case where the target width L1 is greater than the fillet length L2 and the target width L1 is smaller than the difference value L0-L2 between the width and the fillet length, the progress pattern with the length being the target width is 701. Progress graphic 701 includes: a first arc 7011, a third straight line 7015, a first straight line 7012, a fourth straight line 7016, a second arc 7013, and a second straight line 7014. The first rendering parameters include: drawing parameters of the first arc line, the third line, the first line, the fourth line, the second line and the second arc line.
Alternatively, the description parameters may include: the circle center coordinates, the radius, the circle center angle, the drawing starting angle, the drawing direction and the height of the fillet rectangle corresponding to each fillet in the fillet rectangle. The drawing parameters of the first arc include: circle center coordinates, radius, drawing start angle, drawing direction and drawing end angle of the round angle corresponding to the first arc line. The drawing parameters of the third straight line include: and drawing an end point coordinate of the third straight line. The drawing parameters of the first straight line include: and drawing an end point coordinate of the first straight line. And drawing an end point coordinate of the fourth straight line. The drawing parameters of the second arc line include: circle center coordinates, radius, drawing start angle, drawing direction and drawing end angle of the round angle corresponding to the first arc line. The drawing parameters of the second straight line include: and drawing an endpoint coordinate of the second straight line.
The following steps B1 to B2 are also included before step 304.
In step B1, when the target width is greater than the fillet length L2, the central angle corresponding to the first arc is determined as the drawing end angle of the first arc, and the central angle corresponding to the second arc is determined as the drawing end angle of the second arc.
In step B2, the drawing end point coordinates of the first straight line, the drawing end point coordinates of the second straight line, the drawing end point coordinates of the third straight line, and the drawing end point coordinates of the fourth straight line are determined according to the starting drawing position, the connection order of the lines constituting the progress pattern, the target width, and the height.
In the case where the origin of the page coordinates is the upper left corner of the page, please refer to fig. 7, in an alternative implementation
In the embodiment, when the connection order is the first arc line, the third line, the first line, the fourth line, the second arc line 5, and the second line, the lengths of the third line and the fourth line are the difference between the target width L1 and the rounded length L2, the drawing end point coordinates of the third line are (L1, 0), and the drawing end point coordinates of the fourth line are (L2, H). The length of the first straight line is the height of the rounded rectangle, and the drawing endpoint coordinates of the first straight line are (L1, H). The length of the second straight line is the length of the short side in the rounded rectangle, and the drawing end point coordinate of the second straight line is the coordinate of the initial drawing position.
And 0, step 305, acquiring a first drawing parameter according to the description parameter, wherein the first drawing parameter comprises drawing parameters of a first arc line, a third arc line, a first line, a fourth arc line, a fourth line, a second arc line and a second line.
In this embodiment of the application, third pitch arc and fourth pitch arc correspond with the two fillets of fillet rectangle respectively, and these two fillets are located the same limit of fillet rectangle.
5 taking FIG. 8 as an example, when the target width L1 is greater than the fillet length L2, and the target width L1 is greater than or equal to
In the case of the difference L0-L2 between the width and the fillet length, the progress pattern with the length being the target width is 801. Progress graphic 801 includes: first arc 8011, third straight line 8015, third arc 8017, first straight line 8012, fourth arc 8018, fourth straight line 8016, second arc 8013, second straight line 8014.
The first drawing parameters include drawing parameters of a first arc, a third line, a third arc, a first line, a fourth arc, a fourth line 0, a second arc, and a second line. Wherein, the third arc line and the rounded rectangle are in middle position
And the round corners at the upper right corner correspond to each other. The fourth arc line corresponds to a round corner located at the right lower corner in the round corner rectangle.
Alternatively, the description parameters may include: the circle center coordinates, the radius, the circle center angle, the drawing starting angle, the drawing direction and the height of the fillet rectangle corresponding to each fillet in the fillet rectangle. The first arc is drawn
The number includes: circle center coordinates, radius, drawing start angle, drawing direction and drawing end angle of the first arc line 5 of the round angle corresponding to the first arc line. The drawing parameters of the third line include drawing end point coordinates of the third line.
The drawing parameters of the third radian include: the circle center coordinates, the radius, the drawing starting angle, the drawing direction and the drawing ending angle of the round angle corresponding to the third arc line. The drawing parameters of the first straight line include: and drawing an end point coordinate of the first straight line. The drawing parameters of the fourth radian include: the circle center coordinates, the radius, the drawing starting angle, the drawing direction and the drawing ending angle of the round angle corresponding to the fourth arc line. Drawing of fourth straight line
The manufacturing parameters include: and drawing an end point coordinate of the fourth straight line. The drawing parameters of the second arc line include: center coordinates, radius, drawing initial angle, drawing direction of round angle corresponding to first arc line 5 and drawing junction of first arc line
Angle of beam. The drawing parameters of the second straight line include: and drawing an endpoint coordinate of the second straight line.
The following steps C1 to C2 are also included before step 305.
In step C1, when the target width L1 is greater than or equal to the difference L0-L2 between the width and the fillet length,
and under the condition of being smaller than the width, determining the central angle corresponding to the first arc line as the drawing end 0 angle of the first arc line, determining the central angle corresponding to the second arc line as the drawing end angle of the second arc line, and according to the target
And determining a drawing end angle corresponding to the third arc line and a drawing end angle corresponding to the fourth arc line by the width and the radius.
Alternatively, as shown in fig. 9, the drawing end angle corresponding to the third arc line and the drawing end angle corresponding to the fourth arc line are determined according to the target width, the radius, and the second formula.
Wherein the second formula satisfies: degre2=pi/2- (arcsin ((L1-l0+r)/(R))/(pi×5.180). The depth 2 is the drawing end angle, L1 is the target width, L0 is the width of the rounded rectangle, and R is
Radius. In fig. 8, γ is arcsin ((l1—l0+r)/(R)). It is easy to note that when the degree2 is the drawing end angle of the third arc, R is the radius of the third arc; when the depth 2 is the drawing end angle of the fourth arc, R is the radius of the fourth arc.
In step C2, in the case where the target width L1 is equal to the width L0 of the rounded rectangle, the central angle corresponding to the first 0 arc is determined as the drawing end angle of the first arc, and the central angle corresponding to the second arc is determined
The drawing end angle of the second arc line is determined, the central angle corresponding to the third arc line is determined as the drawing end angle of the third arc line, and the central angle corresponding to the fourth arc line is determined as the drawing end angle of the fourth arc line.
In step C3, the drawing end point coordinates of the first straight line and the drawing end point coordinates of the second straight line are determined according to the starting drawing position, the connection order of the lines constituting the progress pattern, the target width and the target height.
5 in the case where the origin of the page coordinates is the upper left corner of the page, please refer to FIG. 8, in an alternative implementation
In the embodiment, when the connection order is the first arc line, the third arc line, the first line, the fourth arc line, the fourth line, the second arc line, and the second line, the lengths of the third line and the fourth line are the difference between the target width L1 and the fillet length L2, the drawing end point coordinate of the third line is (L1, 0), and the drawing end point coordinate of the fourth line is (L2, H). The drawing end coordinates of the first straight line are (L1, Y), y=h1+2×h2, H1 is the length of the middle and short sides of the rounded rectangle, and H2 is sin β×r. The length of the second straight line is the length of the short side in the rounded rectangle, and the drawing end point coordinate of the second straight line is the coordinate of the initial drawing position.
And 204, sequentially drawing lines of the progress pattern according to the initial drawing position and the connection sequence according to the first drawing parameters to obtain the progress pattern.
Optionally, when the target graph is a rounded rectangle, the electronic device may sequentially call a drawing function corresponding to the type to which the line belongs to draw the line according to the drawing parameters of the line from the initial drawing position according to the connection sequence, so as to obtain the progress graph. Alternatively, the arc rendering functions to which the arcs correspond may be arc and arcTo. The straight line drawing function corresponding to the straight line may be lineTo.
In an alternative implementation, in the case where the first drawing parameter includes drawing parameters of a first arc, a first straight line, a second arc, and a second straight line, the connection order is assumed to be the first arc, the first straight line, the second arc, and the second straight line. The electronic device sequentially draws the lines of the progress pattern according to the initial drawing position and the connection sequence according to the first drawing parameter, and the process of obtaining the progress pattern can comprise the following steps:
the electronic device may call a path-shift function according to the starting drawing position, and determine the line drawing starting point as the starting drawing position. The electronic equipment sequentially calls an arc line drawing function to draw a first arc line according to the drawing parameters of the first arc line in a connection sequence, calls a straight line drawing function to draw the first straight line according to the drawing parameters of the first straight line, calls an arc line drawing function to draw a second arc line according to the drawing parameters of the second arc line, calls a straight line drawing function to draw the second straight line according to the drawing parameters of the second straight line, and obtains a progress graph. It is easy to be sure that the drawing start point of the first arc line is the initial drawing position, the drawing start point of the first straight line is the drawing end point of the first arc line, the drawing start point of the second arc line is the drawing end point of the first straight line, the drawing start point of the second straight line is the drawing end point of the second arc line, and the drawing end point of the second straight line is the initial drawing position.
Illustratively, the path-movement function is moveTo (x 1, y 1). x1 and y1 are respectively the abscissa corresponding to the initial drawing position, and the path moving function is used for explicitly designating the line drawing starting point of the drawing path. The arc rendering function is arc (x 2, y2, radius, startAngle, endAngle, anticlockwise). x2 and y2 are respectively the abscissa and ordinate of the circle center corresponding to the arc line. radius is the radius corresponding to the arc. startAngle is the drawing start angle of the arc. endAngle is the drawing end angle corresponding to the arc line. an anticlockwise is the drawing direction of an arc. The straight line drawing function is lineTo (x 3, y 3). x3 and y3 are the drawing end coordinates of the straight line, respectively.
The electronic device calls a moveTo (x 0, y 0) according to the initial drawing position, calls arc (x 2, y2, R,1 x pi, degree11, false) according to the drawing parameters of the first arc in sequence according to the connection sequence, calls lineTo (x 1, y 1) according to the drawing parameters of the first straight line to draw the first straight line, calls arc (x 2, y2, R,1 x pi, degree11, true) according to the drawing parameters of the second arc to draw the second straight line, and calls lineTo (x 1, y 1) according to the drawing parameters of the second straight line to draw the second straight line. Wherein x0, y0 represents the abscissa corresponding to the start drawing position. False indicates that the drawing direction is clockwise, true indicates that the drawing direction is counterclockwise,
It should be noted that, in the case that the first drawing parameters include drawing parameters of the first arc line, the third line, the first line, the fourth line, the second arc line and the second line, or in the case that the first drawing parameters include drawing parameters of the first arc line, the third line, the first line, the fourth arc line, the fourth line, the second arc line and the second line, the electronic device draws lines of the progress pattern in sequence according to the initial drawing position and the connection sequence according to the first drawing parameters, and the implementation process of the progress pattern can refer to the foregoing implementation process of the progress pattern in the case that the first drawing parameters include drawing parameters of the first arc line, the first line, the second arc line and the second line, and draws lines of the progress pattern in sequence according to the initial drawing position and the connection sequence according to the first drawing parameters, so as to obtain the implementation process of the progress pattern.
A second alternative implementation: the target pattern is circular. As shown in fig. 10, the drawing process performed by the electronic apparatus includes the following steps 1001 to 1005.
Step 1001, the execution progress of the target task is obtained.
The explanation and implementation of this step refer to the foregoing related explanation and implementation, and this will not be repeated in the embodiments of the present application.
Step 1002, calculating a central angle corresponding to the camber line in the progress graph according to the execution progress.
In this embodiment of the present application, the ratio of the value of the execution progress to the value of the execution progress when the execution is completed is equal to the ratio of the central angle of the progress pattern corresponding to the execution progress to 360. Optionally, in the case where the value of the execution progress is 0 to 100, the central angle θ corresponding to the arc line in the progress pattern calculated according to the execution progress x satisfies: θ=x+.100×360.
And step 1003, when the central angle is smaller than 360 degrees, determining that the progress pattern is a sector, and acquiring a first drawing parameter according to the description parameter and the central angle, wherein the first drawing parameter comprises drawing parameters of an arc line, a fifth straight line and a sixth straight line.
In this embodiment, please refer to fig. 11, the graph is 1101 when the central angle is smaller than 306 degrees. The progress pattern is composed of an arc 11011, a fifth straight line 11012, and a sixth straight line 11013.
In an alternative implementation, the description parameters may include: the center coordinates, the radius, the drawing starting angle and the drawing direction of the target graph. The rendering parameters of the arc include: center coordinates, radius, drawing start angle, drawing direction and drawing end angle of arc. The drawing end angle is a central angle. The drawing parameters of the fifth straight line include: and drawing an endpoint coordinate of the fifth straight line. The drawing parameters of the sixth straight line include: and drawing an endpoint coordinate of the sixth straight line. And the drawing end point coordinates are determined according to the connection sequence of the progress patterns.
Then the following step D1 is also included prior to step 1003.
In step D1, the drawing end point coordinates of the fifth straight line and the drawing end point coordinates of the sixth straight line are determined according to the starting drawing position, the connection order and the center coordinates.
In the case where the origin of the page coordinates is the upper left corner of the page, as shown in fig. 11, in an alternative implementation, in the case where the drawing direction of the target graph is clockwise, and the connection order is an arc, a fifth straight line, and a sixth straight line, the lengths of the fifth straight line and the sixth straight line are both radii of the target graph. And the drawing end point coordinate of the fifth straight line is the circle center coordinate of the target graph. The drawing end point coordinates of the sixth straight line are the starting drawing positions.
In another alternative implementation, in the case where the drawing direction of the target graphic is clockwise and the connection order is an arc, a sixth straight line, and a fifth straight line, the drawing end point coordinates of the fifth straight line are the start drawing positions. And the drawing end point coordinate of the sixth straight line is the circle center coordinate of the target graph.
And step 1004, when the central angle is equal to 360 degrees, determining the progress pattern as a target pattern, and acquiring a first drawing parameter of the target pattern according to the description parameter.
Optionally, the description parameters include: the center coordinates, the radius, the drawing starting angle and the drawing direction of the target graph. The first rendering parameters include: center coordinates, radius, drawing start angle, drawing direction and drawing end angle of the target graph. The angle value corresponding to the drawing end angle is 360 degrees.
Step 1005, sequentially drawing lines of the progress pattern according to the initial drawing position and the connection sequence according to the first drawing parameters, and obtaining the progress pattern.
Optionally, the electronic device may sequentially call a drawing function corresponding to a type to which the line belongs to draw the line according to the drawing parameters of the line forming the progress graph from the initial drawing position according to the connection sequence, so as to obtain the progress graph. Alternatively, the arc rendering functions to which the arcs correspond may be arc and arcTo. The straight line drawing function corresponding to the straight line may be lineTo.
It should be noted that, when the first drawing parameters include the drawing parameters of the arc line, the fifth line and the sixth line, the electronic device draws the line of the progress pattern according to the initial drawing position and the connection sequence according to the first drawing parameters, and the implementation process of obtaining the progress pattern may refer to the foregoing case when the first drawing parameters include the drawing parameters of the first arc line, the first line, the second arc line and the second line, and the electronic device draws the line of the progress pattern according to the initial drawing position and the connection sequence according to the first drawing parameters, so as to obtain the implementation process of the progress pattern. When the first drawing parameter is the drawing parameter of the target graph, the arc drawing function can be directly called according to the first drawing parameter to obtain the progress graph.
In some embodiments of the present application, the progress bar may include the aforementioned drawn progress graphic and a background graphic, where the background graphic is a target graphic. Therefore, the progress graph and the background graph together represent the execution progress of the target task, so that the execution progress of the target task can be reflected more intuitively by the graph compared with the integrity of the target graph.
Optionally, the configuration information further includes: and a second rendering parameter of the line constituting the background pattern. The second rendering parameter is used to render the background graphic. The second drawing parameter is used to indicate at least the type, the start drawing position, the connection order, and the length of the line constituting the background figure. Wherein the starting drawing position in the second drawing parameter is the same as the starting drawing position in the first drawing parameter so that the background graphic and the progress image drawn when the execution progress indicates that the execution is completed completely overlap.
In an alternative implementation, where the target graphic is a rounded rectangle, the second rendering parameters include: the method comprises the steps of starting drawing positions, connection sequences, circle center coordinates corresponding to each round angle, radiuses, circle center angles (drawing end angles), drawing starting angles, drawing directions and drawing end coordinates of each side. In another alternative implementation, where the target graphic is circular, the second rendering parameters include: center coordinates, radius, drawing start angle, drawing end angle (2 x pi), drawing direction.
Based on this, before performing the rendering process at least once in step 102, the method further includes: and according to the second drawing parameters, sequentially drawing lines of the background graph according to the initial drawing positions and the connection sequence of the second drawing parameters to obtain the background graph. For example, as shown in the dashed line patterns in fig. 4, 7, 8, 11.
The electronic device sequentially draws the lines of the background graph according to the initial drawing position and the connection sequence of the second drawing parameters according to the second drawing parameters, and the implementation process of obtaining the background graph can refer to the implementation process of sequentially drawing the lines of the progress graph according to the initial drawing position and the connection sequence of the first drawing parameters and the initial drawing position and the connection sequence of the second drawing parameters according to the first drawing parameters under the condition that the first drawing parameters comprise the first arc line, the first straight line, the second arc line and the second straight line.
In some embodiments of the present application, the progress graphic and/or the background graphic in the progress bar may have a filling color, so as to improve the display effect of the progress bar, and in the case that the filling colors of the progress graphic and the background graphic are inconsistent, the integrity difference of the progress graphic and the background graphic may be further intuitively reflected, so as to improve the display effect of the execution progress corresponding to the progress bar.
Optionally, the first drawing parameters further include: filling the color. The electronic equipment sequentially draws lines of the progress pattern according to the initial drawing position and the connection sequence according to the first drawing parameters, and a progress pattern obtaining process comprises the following steps:
sequentially drawing lines of the progress patterns according to the initial drawing positions and the connection sequence according to the first drawing parameters to obtain intermediate patterns; and performing color filling on the intermediate graph according to the filling color to obtain a progress graph. Optionally, the electronic device may call a color filling function to perform color filling on the intermediate graph according to the filling color, so as to obtain a progress graph. The color filling function is used for filling the color of the intermediate graph according to the filling color. Illustratively, the color fill function may be a solidaroid: color, or an android: startColor, android: centrcolor, or the like.
Similarly, further optionally, the second rendering parameter further includes: filling the color. The electronic equipment sequentially draws lines of the background graph according to the initial drawing position and the connection sequence of the second drawing parameters and the second drawing parameters, and the process for obtaining the background graph comprises the following steps: sequentially drawing lines of the background graph according to the initial drawing position and the connection sequence according to the second drawing parameters to obtain an intermediate background graph; and performing color filling on the middle background graph according to the filling color to obtain the background graph. The color filling is performed on the intermediate background graph according to the filling color, and the implementation process of obtaining the background graph can refer to the implementation process of obtaining the progress graph by performing color filling on the intermediate graph according to the filling color, which is not described in detail in the embodiment of the present application.
In summary, according to the method for drawing a progress bar provided in the embodiments of the present application, after the configuration information of the progress bar is obtained in response to the triggering operation of the target task, at least one drawing process is performed to draw a progress pattern matching with the execution progress of the target task until a target pattern indicating that the execution of the target task is completed is obtained. Wherein the configuration information includes description parameters of lines constituting the target graphic. The drawing processing comprises the steps of obtaining the execution progress of a target task; acquiring a first drawing parameter of a line forming a progress graph according to the execution progress and the description parameter; and according to the first drawing parameters, drawing lines of the progress pattern according to the initial drawing positions and the connection sequence in sequence to obtain the progress pattern. The progress pattern indicates execution progress compared to the integrity of the target pattern, and the first drawing parameter is used for indicating at least the type, the initial drawing position, the connection sequence and the length of the line.
According to the technical scheme, when the execution progress of the target task is obtained each time according to the configuration information of the progress bar, a progress pattern matched with the execution progress is drawn, and the execution progress of the target task is represented by the integrity of the progress pattern compared with the integrity of the target pattern indicated by the description parameter in the configuration information. Therefore, under the condition that the style of the progress bar needs to be changed, the description parameters of the target graphics in the configuration information are changed, the progress graphics of the new style are drawn, and the change of the style of the progress bar is realized. Compared with the related art, the method and the device avoid redrawing and deploying pictures of the patterns required by the progress bar when the patterns of the progress bar are changed, reduce the changing cost of the patterns of the progress bar, improve the flexibility of the pattern changing of the progress bar, and improve the generating efficiency of the progress bar.
Referring to fig. 12, a block diagram of a progress bar drawing apparatus according to an embodiment of the present application is shown. As shown in fig. 12, the progress bar drawing apparatus 1200 includes: an acquisition module 1201 and an execution module 1202.
An obtaining module 1201, configured to obtain, in response to a trigger operation of a target task, configuration information of a progress bar, where the configuration information includes description parameters of lines forming a target graph, and the target graph is a shape of the progress bar when the progress is completed;
an execution module 1202, configured to execute at least one rendering process until a target graphic is obtained, where rendering process 5 includes:
acquiring the execution progress of a target task;
according to the execution progress and the description parameters, obtaining first drawing parameters of lines forming a progress graph, wherein the first drawing parameters are at least used for indicating the types, initial drawing positions, connection sequences and lengths of the lines;
and according to the first drawing parameters, drawing 0 lines of the progress pattern according to the initial drawing position and the connection sequence in sequence to obtain the progress pattern, wherein the progress pattern represents the execution progress compared with the integrity of the target pattern.
According to the embodiment of the application, according to the configuration information of the progress bar, when the execution progress of the target task is obtained each time, a progress graph matched with the execution progress is drawn, and the execution progress of the target task is represented by the integrity of the progress graph compared with the integrity of the target graph indicated by the description parameter in the configuration information. Thus, in
Under the condition that the style of the progress bar needs to be changed, changing the description parameters of the target graphics in the configuration information, drawing 5 the progress graphics of the new style, and realizing the change of the style of the progress bar. Compared with the related art, the method avoids changing
And when the progress bar is in the form, drawing and deploying the pictures of the required form of the progress bar again, so that the change cost of the form of the progress bar is reduced, the flexibility of the form change of the progress bar is improved, and the generation efficiency of the progress bar is improved.
Optionally, the target graph is rectangular, and the description parameter further comprises the width of the progress bar; execution module 1202, further for:
0, calculating a target width corresponding to the progress bar and the execution progress according to the execution progress and the width;
and acquiring a first drawing parameter of the lines forming the progress pattern according to the target width and the description parameter, wherein the length of the progress pattern is the target width.
Optionally, the target graphic is a rounded rectangle, and the execution module 1202 is further configured to:
when the target width is smaller than or equal to the length of the round angle, acquiring a first drawing parameter according to the description parameter, wherein the 5 first drawing parameter comprises drawing parameters of a first arc line, a first straight line, a second arc line and a second straight line;
when the target width is larger than the length of the round angle and the target width is smaller than the difference value between the width and the length of the round angle, acquiring a first drawing parameter according to the description parameter, wherein the first drawing parameter comprises drawing parameters of a first arc line, a third line, a first line, a fourth line, a second arc line and a second line;
When the target width is greater than or equal to the difference value of the width and the length of the round angle, acquiring a first drawing parameter according to the description parameter, wherein the first drawing parameter comprises drawing parameters of a first arc line, a third straight line, a third arc line, a first straight line, a fourth arc line, a fourth straight line, a second arc line and a second straight line, the first arc line, the second arc line, the third arc line and the fourth arc line respectively correspond to four round angles of the round angle rectangle, and the length of the round angle is the length of a connecting line of two endpoints of the round angle in the horizontal direction.
Optionally, the description parameters include: the circle center coordinates, the radius, the circle center angle, the drawing starting angle and the drawing direction corresponding to each round corner, and the height of the round corner rectangle;
the drawing parameters of each arc include: circle center coordinates of rounded corners corresponding to the arc lines, the radius, a drawing start angle, a drawing direction and a drawing end angle of the arc lines, wherein the drawing end angle is determined according to the target width and the radius, and the arc lines comprise: the first arc line, the second arc line, the third arc line and the fourth arc line;
the drawing parameters of each straight line include: and drawing end point coordinates of the straight line, wherein the straight line comprises a first straight line, a second straight line, a third straight line and a fourth straight line, and the end point coordinates are determined according to the connection sequence, the target width and the target height.
Optionally, the fillet length is determined based on the radius and central angle of a fillet.
Optionally, the target graphic is circular, and the execution module 1202 is further configured to:
calculating a central angle corresponding to the arc line in the progress graph according to the execution progress;
when the central angle is smaller than 360 degrees, determining that the progress pattern is a sector, and acquiring a first drawing parameter according to the description parameter and the central angle, wherein the first drawing parameter comprises drawing parameters of an arc line, a fifth straight line and a sixth straight line;
and when the central angle is equal to 360 degrees, determining the progress pattern as a target pattern, and acquiring a first drawing parameter of the target pattern according to the description parameter.
Optionally, the description parameters include: center coordinates, radius, drawing initial angle and drawing direction of the target graph;
the drawing parameters of the arc line comprise: the method comprises the steps of circle center coordinates, radius, drawing initial angle, drawing direction and drawing end angle of an arc line, wherein the drawing end angle is the circle center angle;
the drawing parameters of each straight line include: and drawing end point coordinates of a straight line, wherein the straight line comprises a fifth straight line and a sixth straight line, and the end point coordinates are determined according to the connection sequence.
Optionally, the configuration information further includes: the method further includes the steps of: and a drawing module.
And the drawing module is used for sequentially drawing the lines of the background graph according to the initial drawing position and the connection sequence of the second drawing parameters and obtaining the background graph.
Optionally, the first drawing parameters further include: filling colors; execution module 1202, further for:
sequentially drawing lines of the progress patterns according to the initial drawing positions and the connection sequence according to the first drawing parameters to obtain intermediate patterns;
and performing color filling on the intermediate graph according to the filling color to obtain a progress graph.
In summary, in the progress bar drawing device provided in the embodiment of the present application, after the configuration information of the progress bar is obtained in response to the triggering operation of the target task, at least one drawing process is performed to draw a progress pattern matching the execution progress of the target task until a target pattern indicating that the execution of the target task is completed is obtained. Wherein the configuration information includes description parameters of lines constituting the target graphic. The drawing processing comprises the steps of obtaining the execution progress of a target task; acquiring a first drawing parameter of a line forming a progress graph according to the execution progress and the description parameter; and according to the first drawing parameters, drawing lines of the progress pattern according to the initial drawing positions and the connection sequence in sequence to obtain the progress pattern. The progress pattern indicates execution progress compared to the integrity of the target pattern, and the first drawing parameter is used for indicating at least the type, the initial drawing position, the connection sequence and the length of the line.
According to the technical scheme, when the execution progress of the target task is obtained each time according to the configuration information of the progress bar, a progress pattern matched with the execution progress is drawn, and the execution progress of the target task is represented by the integrity of the progress pattern compared with the integrity of the target pattern indicated by the description parameter in the configuration information. Therefore, under the condition that the style of the progress bar needs to be changed, the description parameters of the target graphics in the configuration information are changed, the progress graphics of the new style are drawn, and the change of the style of the progress bar is realized. Compared with the related art, the method and the device avoid redrawing and deploying pictures of the patterns required by the progress bar when the patterns of the progress bar are changed, reduce the changing cost of the patterns of the progress bar, improve the flexibility of the pattern changing of the progress bar, and improve the generating efficiency of the progress bar.
Please refer to fig. 13, which illustrates a block diagram of an electronic device provided in the present application. As shown in fig. 13, the electronic device includes: processor 1301, memory 1302, and computer programs stored on memory 1302 and executable on processor 1301. The processor 1301 implements the progress bar drawing method provided by the foregoing embodiment when executing a computer program.
The embodiment of the application also provides a readable storage medium, which when executed by a processor of an electronic device, enables the electronic device to execute the progress bar drawing method provided in the foregoing embodiment.
The embodiments of the present application have been described above with reference to the accompanying drawings, but the present application is not limited to the above-described embodiments, which are merely illustrative and not restrictive, and many forms may be made by those of ordinary skill in the art without departing from the spirit of the present application and the scope of the claims, which are also within the protection of the present application.

Claims (12)

1. A progress bar drawing method, characterized in that the method comprises:
responding to the triggering operation of a target task, and acquiring configuration information of a progress bar, wherein the configuration information comprises description parameters of lines forming a target graph, and the target graph is the shape of the progress bar when the progress is completed;
executing at least one drawing process until the target graph is obtained, wherein the drawing process comprises the following steps:
acquiring the execution progress of the target task;
according to the execution progress and the description parameters, obtaining first drawing parameters of lines forming a progress graph, wherein the first drawing parameters are at least used for indicating the types, initial drawing positions, connection sequences and lengths of the lines;
And according to the first drawing parameters, sequentially drawing lines of the progress pattern according to the initial drawing positions and the connection sequence to obtain the progress pattern, wherein the progress pattern represents the execution progress compared with the integrity of the target pattern.
2. The method of claim 1, wherein the target graphic is rectangular, and the description parameter further comprises a width of the progress bar; the step of obtaining a first drawing parameter of a line forming a progress graph according to the execution progress and the description parameter comprises the following steps:
calculating a target width of the progress bar corresponding to the execution progress according to the execution progress and the width;
and according to the target width and the description parameters, acquiring a first drawing parameter of a line forming a progress pattern, wherein the length of the progress pattern is the target width.
3. The method according to claim 2, wherein the target graph is a rounded rectangle, and the obtaining the first drawing parameters of the lines forming the progress graph according to the target width and the description parameters includes:
when the target width is smaller than or equal to the length of the round angle, acquiring the first drawing parameters according to the description parameters, wherein the first drawing parameters comprise drawing parameters of a first arc line, a first straight line, a second arc line and a second straight line;
When the target width is larger than the fillet length and the target width is smaller than the difference value between the width and the fillet length, acquiring the first drawing parameters according to the description parameters, wherein the first drawing parameters comprise drawing parameters of a first arc line, a third line, a first line, a fourth line, a second arc line and a second line;
when the target width is greater than or equal to the difference between the width and the fillet length, acquiring the first drawing parameters according to the description parameters, wherein the first drawing parameters comprise drawing parameters of a first arc line, a third arc line, a first straight line, a fourth arc line, a fourth straight line, a second arc line and a second straight line, the first arc line, the second arc line, the third arc line and the fourth arc line respectively correspond to four fillets of the fillet rectangle, and the fillet length is the length of a connecting line of two endpoints of the fillet in the horizontal direction.
4. A method according to claim 3, wherein the description parameters include: the circle center coordinates, the radius, the circle center angle, the drawing starting angle and the drawing direction corresponding to each round angle and the height of the round angle rectangle;
The drawing parameters of each arc include: the circular center coordinates of the round corners corresponding to the arc lines, the radius, the drawing initial angle, the drawing direction and the drawing end angle of the arc lines, wherein the drawing end angle is determined according to the target width and the radius, and the arc lines comprise: the first arc, the second arc, the third arc, and the fourth arc;
the drawing parameters of each straight line include: and drawing end point coordinates of the straight line, wherein the straight line comprises the first straight line, the second straight line, the third straight line and the fourth straight line, and the drawing end point coordinates are determined according to the connection sequence, the target width and the height.
5. The method of claim 4, wherein the fillet length is determined based on the radius and central angle of one of the fillets.
6. The method according to claim 1, wherein the target graphic is a circle, and the obtaining the first drawing parameters of the line forming the progress graphic according to the execution progress and the description parameters includes:
calculating a central angle corresponding to the arc line in the progress graph according to the execution progress;
when the central angle is smaller than 360 degrees, determining that the progress pattern is in a fan shape, and acquiring the first drawing parameters according to the description parameters and the central angle, wherein the first drawing parameters comprise drawing parameters of the arc line, the fifth straight line and the sixth straight line;
And when the central angle is equal to 360 degrees, determining the progress pattern as the target pattern, and acquiring a first drawing parameter of the target pattern according to the description parameter.
7. The method of claim 6, wherein the descriptive parameters include: the center coordinates, the radius, the drawing initial angle and the drawing direction of the target graph;
the drawing parameters of the arc line comprise: the circle center coordinates, the radius, the drawing start angle, the drawing direction and the drawing end angle of the arc line, wherein the drawing end angle is the circle center angle;
the drawing parameters of each straight line include: and drawing end point coordinates of the straight line, wherein the straight line comprises the fifth straight line and the sixth straight line, and the drawing end point coordinates are determined according to the connection sequence.
8. The method of claim 1, wherein the configuration information further comprises: a second drawing parameter for indicating at least a type, a start drawing position, a connection order, and a length of the line constituting the background figure, the start drawing position in the second drawing parameter being the same as the start drawing position in the first drawing parameter, the background figure being the target figure, the method further comprising, before the performing at least one drawing process:
And sequentially drawing lines of the background graph according to the initial drawing position and the connection sequence of the second drawing parameters according to the second drawing parameters to obtain the background graph.
9. The method of any one of claims 1 to 8, wherein the first rendering parameters further comprise: filling colors; and according to the first drawing parameters, drawing lines of the progress pattern in sequence according to the initial drawing position and the connection sequence to obtain the progress pattern, wherein the steps comprise:
sequentially drawing lines of the progress graph according to the first drawing parameters, the initial drawing positions and the connection sequence to obtain an intermediate graph;
and performing color filling on the intermediate graph according to the filling color to obtain the progress graph.
10. A progress bar drawing apparatus, characterized in that the apparatus comprises:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for responding to the triggering operation of a target task and acquiring configuration information of a progress bar, the configuration information comprises description parameters of lines forming a target graph, and the target graph is the shape of the progress bar when the progress is completed;
the execution module is used for executing at least one drawing process until the target graph is obtained, and the drawing process comprises the following steps:
Acquiring the execution progress of the target task;
according to the execution progress and the description parameters, obtaining first drawing parameters of lines forming a progress graph, wherein the first drawing parameters are at least used for indicating the types, initial drawing positions, connection sequences and lengths of the lines;
and according to the first drawing parameters, sequentially drawing lines of the progress pattern according to the initial drawing positions and the connection sequence to obtain the progress pattern, wherein the progress pattern represents the execution progress compared with the integrity of the target pattern.
11. An electronic device, comprising:
a processor and a memory;
the memory is used for storing a computer program;
the processor is configured to implement the method steps of any one of claims 1 to 9 when executing a program stored on the memory.
12. A readable storage medium, characterized in that instructions in the readable storage medium, when executed by a processor of an electronic device, enable the electronic device to perform the method of any one of claims 1 to 9.
CN202211653007.4A 2022-12-21 2022-12-21 Progress bar drawing method and device and electronic equipment Pending CN116048692A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211653007.4A CN116048692A (en) 2022-12-21 2022-12-21 Progress bar drawing method and device and electronic equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211653007.4A CN116048692A (en) 2022-12-21 2022-12-21 Progress bar drawing method and device and electronic equipment

Publications (1)

Publication Number Publication Date
CN116048692A true CN116048692A (en) 2023-05-02

Family

ID=86124660

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211653007.4A Pending CN116048692A (en) 2022-12-21 2022-12-21 Progress bar drawing method and device and electronic equipment

Country Status (1)

Country Link
CN (1) CN116048692A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117541461A (en) * 2024-01-10 2024-02-09 广州中望龙腾软件股份有限公司 Arc scaling drawing method, device, equipment and medium

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117541461A (en) * 2024-01-10 2024-02-09 广州中望龙腾软件股份有限公司 Arc scaling drawing method, device, equipment and medium
CN117541461B (en) * 2024-01-10 2024-05-10 广州中望龙腾软件股份有限公司 Arc scaling drawing method, device, equipment and medium

Similar Documents

Publication Publication Date Title
JP2021516820A (en) Map rendering methods, equipment, computer equipment and computer programs
US9692965B2 (en) Omnidirectional image editing program and omnidirectional image editing apparatus
CN116048692A (en) Progress bar drawing method and device and electronic equipment
CN109544658B (en) Map rendering method and device, storage medium and electronic device
CA2776678A1 (en) Method and device for rendering areas bounded by curves using a gpu
CN112346725B (en) Page design method, device, equipment and storage medium
WO2019163129A1 (en) Virtual object display control device, virtual object display system, virtual object display control method, and virtual object display control program
CN113112581A (en) Texture map generation method, device and equipment for three-dimensional model and storage medium
CN113688545A (en) Visualization method and system for finite element post-processing result and data processing terminal
KR20150099414A (en) Method and device for processing a geometry image of a 3d scene
US9202148B2 (en) Image processing apparatus and method for generating stencil data of a stroke based on shape information, connection-point information, and end-point information
CN111798361A (en) Rendering method, rendering device, electronic equipment and computer-readable storage medium
CN118154760B (en) Real-time interaction method and system based on three-dimensional engine on model surface
KR100723421B1 (en) Method for rendering by point interpolation, apparatus for rendering by point interpolation and readable medium
CN114375464A (en) Ray tracing dynamic cells in virtual space using bounding volume representations
CN115937470A (en) Graphics processing unit, method of processing subdivision points thereof, and storage medium
JPH11161819A (en) Image processor, its method and recording medium recording image processing program
CN114529657A (en) Rendering image generation method and device, computer equipment and storage medium
CN113963083A (en) Programming building block drawing method, building block building method and device and electronic equipment
US10297036B2 (en) Recording medium, information processing apparatus, and depth definition method
CN113064539B (en) Special effect control method and device, electronic equipment and storage medium
CN110415351B (en) Method, device and system for constructing three-dimensional grid based on single image
CN113724364A (en) Setting method and device for realizing shielding by utilizing polygon and no rendering of body
JP4325812B2 (en) Vector image drawing circuit and vector image drawing method
CN111729322A (en) Model stroke processing method and device, computer equipment and readable storage medium

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