A flowchart drawing method, device, equipment and storage medium based on HTML5

Abstract

The present invention discloses a method, device, equipment and storage medium for drawing a flowchart based on HTML5, which relates to the technical field of graphic drawing. After initially drawing the flowchart display data onto the HTML5 canvas, the method binds mouse press events, mouse movement events and mouse release events that can capture internal elements based on the event propagation mechanism of HTML5 to the HTML5 canvas. Through these three events, when a node is dragged, an outline of the dragged node will be drawn on the flowchart to reflect the user's dragging, and it is ensured that the actual node and the exit are not redrawn. When the user finishes dragging, if the position changes, the truly dragged node will move to the new dragged position, and the exit will be recalculated and part of the flowchart will be redrawn. Furthermore, a complete drag only performs one calculation and redrawing, avoiding the phenomenon of dragging jamming, which can bring great performance improvement and extremely high user experience.

Description

Technical Field

[0001] The present invention belongs to the technical field of graphic drawing, and particularly relates to a flow chart drawing method, device, equipment and storage medium based on HTML5. Background Art

[0002] HTML5 (abbreviation for HyperText Markup Language 5) is a language description method for constructing Web content. As the next-generation standard of the Internet, it is a language method for constructing and presenting Internet content and is considered one of the core technologies of the Internet. The flow chart based on HTML5 graphic drawing technology mainly includes two major elements: nodes (i.e., steps) and exits (i.e., connections between nodes). Among them, nodes are further divided into creation nodes, approval nodes, and read-only nodes. Different types of nodes have certain differences in graphics and sizes, and nodes are connected through exits.

[0003] For the existing flow charts of HTML5 graphic drawing programs, when a user drags a node, the method of listening to the node movement event is used to capture the node movement trajectory, recalculate the positions of the exits connected to the node, and then redraw the flow chart. This node movement event will always be triggered at a certain fixed frequency during the dragging process, resulting in a waste of a large amount of client computing power, thus causing dragging lags and even causing the browser to freeze. In addition, for the existing flow charts of HTML5 graphic drawing programs, node types are not distinguished, and the node graphics are mainly hollow diamonds. There are also no obvious marks for whether a node and an exit have been passed through. As a result, users cannot intuitively view the types of each node and the nodes that have been passed through, not passed through, and are currently staying on the flow chart, thus greatly reducing the user experience. Summary of the Invention

[0004] The purpose of the present invention is to provide a flow chart drawing method, device, computer equipment and computer-readable storage medium based on HTML5 to solve the problem that the existing flow chart drawing scheme may cause dragging lags and even freeze the browser.

[0005] To achieve the above purpose, the present invention adopts the following technical solutions:

[0006] In a first aspect, a flow chart drawing method based on HTML5 is provided, including:

[0007] Obtain flow chart display data;

[0008] Analyze the data shown in the flow chart to obtain the node information of all nodes and the exit information of all exits. Among them, the node information includes the unique node identifier, abscissa value, and ordinate value of the node, and the exit information includes the unique identifiers of the two end nodes of the exit and the set of coordinate points. The exit refers to the connection line between two nodes, and the set of coordinate points includes the starting point of the exit line, the points passed by the exit line, and the ending point of the exit line;

[0009] For each node among all the nodes, encapsulate the corresponding node information into a node object and put it into the node list;

[0010] For each exit among all the exits, encapsulate the corresponding exit information into an exit object and put it into the exit list;

[0011] According to the node information of all the nodes, determine the maximum value of the first abscissa and the maximum value of the first ordinate in the positions of all the nodes, and according to the exit information of all the exits, determine the maximum value of the second abscissa and the maximum value of the second ordinate among the points passed by all the exit lines. Then, take the maximum value between the maximum value of the first abscissa and the maximum value of the second abscissa as the width of the HTML5 canvas, and take the maximum value between the maximum value of the first ordinate and the maximum value of the second ordinate as the height of the HTML5 canvas;

[0012] Traverse and analyze each node object in the node list to determine the graphics and colors of each node object. For each node object, use the HTML5 drawing program and draw the corresponding graphics and colors onto the HTML5 canvas according to the corresponding abscissa value and ordinate value;

[0013] Traverse and analyze each exit object in the exit list to determine the set of coordinate points to be drawn and the color of each exit object. For each exit object, use the HTML5 drawing program to draw the broken line determined by the corresponding set of coordinate points to be drawn and the color onto the HTML5 canvas;

[0014] Bind the mouse down event, mouse move event, and mouse up event to the HTML5 canvas. Among them, the mouse down event, the mouse move event, and the mouse up event are respectively events that capture internal elements based on the event propagation mechanism of HTML5;

[0015] When the mouse down event is triggered, if it is determined that the source object of this down event is a node, then use the HTML5 drawing program to generate a dotted rectangle or a copied graphic that exactly covers the node above the layer of this node, and record that this node has been selected and is in a draggable state;

[0016] When the mouse movement event is triggered, if it is determined that a node is pressed and selected and the source object of the current movement event is this node, then through the HTML5 drawing program, the dashed rectangle or copied graphic that originally covered this node is redrawn to the new position of the mouse movement;

[0017] When the mouse release event is triggered, if it is determined that a node is in a dragging state, then obtain the new position of the dashed rectangle or copied graphic that originally covered this node, and when it is determined again that this new position is different from the current position of this node, through the HTML5 drawing program, redraw the graphic and color of this node to this new position;

[0018] After redrawing the graphic and color of a certain node to a certain new position, for each exit with the certain node as the starting point or ending point of the exit line, re-determine the corresponding and new set of coordinate points to be drawn according to the certain new position, and through the HTML5 drawing program, redraw the polyline determined by the corresponding and new set of coordinate points to be drawn and the color to the HTML5 canvas.

[0019] Based on the above inventive concept, a flowchart redrawing solution that can avoid dragging jitter is provided, that is, after initially drawing the flowchart display data to the HTML5 canvas, bind mouse down event, mouse movement event and mouse release event that can capture internal elements based on the HTML5 event propagation mechanism to the HTML5 canvas, and through these three events, when a node is dragged, a contour of the dragged node will be drawn on the flowchart to reflect the user's dragging, and ensure that the actual node and exit are not redrawn. And when the user finishes dragging, if the position changes, the actually dragged node will move to the new dragged position, and recalculate the exits and redraw part of the flowchart area, so that a complete drag only performs one calculation and redrawing, avoiding the phenomenon of dragging jitter, which can bring great performance improvement and extremely high user experience, and is convenient for practical application and promotion.

[0020] In a possible design, after obtaining the node list and the exit list, the method further includes:

[0021] Traverse the node list and the exit list, find at least one associated exit corresponding to each node in the node list, and set the at least one associated exit to the exit list of the corresponding node object, so that the corresponding associated exit can be directly found through the node later, where the associated exit refers to the exit with the node as the starting point or ending point of the exit line.

[0022] In a possible design, traverse and analyze each node object in the node list to determine the graph and color of each node object, including:

[0023] For each node object in the node list, if it is determined that the corresponding node is a node not passed by the process, then determine the corresponding color as the first color; if it is determined that the corresponding node is a process stay node, then determine the corresponding color as the second color; if it is determined that the corresponding node is a node passed by the process, then determine the corresponding color as the third color, where the first color, the second color, and the third color are three different colors;

[0024] For each node object, if it is determined that the corresponding node type is a creation node, then determine the corresponding graph as the first graph with a start icon; if it is determined that the corresponding node type is an approval node, then determine the corresponding graph as the second graph with an approval icon; if it is determined that the corresponding node type is a read-only node, then determine the corresponding graph as the third graph with a read-only icon, where the first graph, the second graph, and the third graph are three different graphs.

[0025] In a possible design, after, for a certain node object, the corresponding graph and color are drawn onto the HTML5 canvas through an HTML5 drawing program according to the corresponding abscissa value and ordinate value, the method further includes:

[0026] Bind a mouse click event to the certain node object on the HTML5 canvas, so that when the mouse click event is triggered, an HTML5 layer pops up to display the node information of the certain node object;

[0027] And / or, add a first attribute value that is custom and unique to the node corresponding to the certain node object to the certain node object on the HTML5 canvas, so as to locate the object dragged by the user during subsequent dragging.

[0028] In a possible design, traverse and analyze each exit object in the exit list to determine the set of coordinate points to be drawn and the color of each exit object, including:

[0029] For each exit object in the exit list, if it is determined that the corresponding exit is an exit not passed by the process, then determine the corresponding color as the fourth color; if it is determined that the corresponding exit is an exit passed by the process, then determine the corresponding color as the fifth color, where the fourth color and the fifth color are two different colors;

[0030] For each of the export objects, analyze a series of coordinate points passed by the corresponding export broken line, and based on the positions and sizes of the node objects at both ends of the corresponding export, obtain the corresponding set of coordinate points to be drawn through intelligent fine-tuning.

[0031] In a possible design, after drawing the broken line determined by the corresponding set of coordinate points to be drawn and the color onto the HTML5 canvas through the HTML5 drawing program for a certain export object, the method further includes:

[0032] Bind a mouse hover event to the certain export object on the HTML5 canvas, so that when the mouse hover event is triggered, a floating HTML5 layer is displayed to show the export information of the certain export object;

[0033] And / or, add a second attribute value that is customized and unique to the export corresponding to the certain export object to the certain export object on the HTML5 canvas, so as to locate the export connected to the node object dragged by the user during subsequent dragging.

[0034] In a possible design, after redrawing the graph and color of a certain node to a new position, and for each export with the certain node as the starting point or ending point of the export line, redrawing the broken line determined by the corresponding new set of coordinate points to be drawn and the color onto the HTML5 canvas, the method further includes:

[0035] If it is determined that the maximum value of the third abscissa in the certain new position and all the new sets of coordinate points to be drawn is greater than the width of the HTML5 canvas, update the width of the HTML5 canvas to the maximum value of the third abscissa;

[0036] If it is determined that the maximum value of the third ordinate in the certain new position and all the new sets of coordinate points to be drawn is greater than the height of the HTML5 canvas, update the height of the HTML5 canvas to the maximum value of the third ordinate.

[0037] In a second aspect, there is provided an HTML5-based flowchart drawing device, including a data acquisition module, a data parsing module, an information encapsulation module, a canvas determination module, a node drawing module, an export drawing module, an event binding module, an event response module, and an export redrawing module;

[0038] The data acquisition module is used to acquire flowchart display data;

[0039] The data parsing module, communicatively connected to the data acquisition module, is used to parse the flowchart display data to obtain node information of all nodes and exit information of all exits. Among them, the node information includes the unique node identifier, abscissa value, and ordinate value of the node. The exit information includes the unique identifiers of the two end nodes of the exit and a set of coordinate points. The exit refers to the connection line between two nodes, and the set of coordinate points includes the starting point of the exit line, the passing points of the exit line, and the ending point of the exit line;

[0040] The information encapsulation module, communicatively connected to the data parsing module, is used to encapsulate the corresponding node information into a node object for each node in all the nodes and put it into the node list, and for each exit in all the exits, encapsulate the corresponding exit information into an exit object and put it into the exit list;

[0041] The canvas determination module, communicatively connected to the data parsing module, is used to determine the maximum value of the first abscissa and the maximum value of the first ordinate among the positions of all the nodes according to the node information of all the nodes, and determine the maximum value of the second abscissa and the maximum value of the second ordinate among the passing points of all the exit lines according to the exit information of all the exits. Then, take the maximum value between the maximum value of the first abscissa and the maximum value of the second abscissa as the width of the HTML5 canvas, and take the maximum value between the maximum value of the first ordinate and the maximum value of the second ordinate as the height of the HTML5 canvas;

[0042] The node drawing module, communicatively connected to the information encapsulation module and the canvas determination module respectively, is used to traverse and analyze each node object in the node list to determine the graph and color of each node object, and for each node object, draw the corresponding graph and color onto the HTML5 canvas through the HTML5 drawing program according to the corresponding abscissa value and ordinate value;

[0043] The exit drawing module, communicatively connected to the information encapsulation module and the canvas determination module respectively, is used to traverse and analyze each exit object in the exit list to determine the set of coordinate points to be drawn and the color of each exit object, and for each exit object, draw the polyline determined by the corresponding set of coordinate points to be drawn and the color onto the HTML5 canvas through the HTML5 drawing program;

[0044] The event binding module is communicatively connected to the node drawing module and the exit drawing module respectively, and is used to bind a mouse down event, a mouse move event, and a mouse up event to the HTML5 canvas. Among them, the mouse down event, the mouse move event, and the mouse up event are events for capturing internal elements based on the event propagation mechanism of HTML5 respectively;

[0045] The event response module is communicatively connected to the event binding module, and is used to, when the mouse down event is triggered, if it is determined that the source object of the current down event is a node, generate a dotted rectangle or a copy graph that exactly and completely covers the node above the layer of the node through the HTML5 drawing program, and record that the node has been selected and is in a draggable state, and when the mouse move event is triggered, if it is determined that a node has been pressed and selected and the source object of the current move event is the node, redraw the dotted rectangle or the copy graph that originally covered the node to the new position of the mouse movement through the HTML5 drawing program, and also when the mouse up event is triggered, if it is determined that a node is in a dragging state, obtain the new position of the dotted rectangle or the copy graph that originally covered the node, and when it is determined again that the new position is different from the current position of the node, redraw the graph and color of the node to the new position through the HTML5 drawing program;

[0046] The exit redrawing module is communicatively connected to the event response module, and is used to, after redrawing the graph and color of a certain node to a certain new position, for each exit with the certain node as the starting point or the ending point of the exit line, re-determine the corresponding and new set of coordinate points to be drawn according to the certain new position, and redraw the polyline determined by the corresponding and new set of coordinate points to be drawn and the color to the HTML5 canvas through the HTML5 drawing program.

[0047] In a third aspect, the present invention provides a computer device, including a memory, a processor, and a transceiver that are communicatively connected in sequence. Among them, the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the flowchart drawing method as described in the first aspect or any possible design in the first aspect.

[0048] In a fourth aspect, the present invention provides a computer-readable storage medium, on which instructions are stored. When the instructions are run on a computer, the flowchart drawing method as described in the first aspect or any possible design in the first aspect is executed.

[0049] Fifth aspect, the present invention provides a computer program product including instructions, which when running on a computer, cause the computer to execute the flowchart drawing method as described in the first aspect or any possible design in the first aspect.

[0050] Beneficial effects of the above solution:

[0051] (1) The present invention creatively provides a flowchart redrawing solution that can avoid dragging lags. That is, after initially drawing the flowchart display data onto the HTML5 canvas, bind mouse press events, mouse movement events, and mouse release events for the HTML5 canvas that can capture internal elements based on the HTML5 event propagation mechanism. Through these three events, when a node is dragged, an outline of the dragged node will be drawn on the flowchart to reflect the user's dragging, and it is ensured that the actual node and the exit are not redrawn. When the user finishes dragging, if the position changes, the truly dragged node will move to the new dragged position, and the exit and part of the flowchart area will be recalculated and redrawn. Thus, a complete drag only involves one calculation and redrawing, avoiding the phenomenon of dragging lags, which can bring great performance improvement and extremely high user experience.

[0052] (2) It can also greatly improve the user's recognition of flowchart nodes. Through the flowchart, the user can intuitively overview the types of nodes included and know what operations each process node needs to perform.

[0053] (3) By adding color flags indicating whether a node and an exit have been passed (flowed through), the user can intuitively know the flow state of the current process through the flowchart, which nodes have been passed and which have not, and where the current stop is, truly having a clear understanding in mind, facilitating practical application and promotion. Description of the Drawings

[0054] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0055] Figure 1 It is a flowchart diagram of the HTML5-based flowchart drawing method provided by the embodiments of the present application.

[0056] Figure 2 It is a structural diagram of the HTML5-based flowchart drawing device provided by the embodiments of the present application.

[0057] Figure 3Schematic diagram of the computer device provided by the embodiment of the present application. Detailed implementation manners

[0058] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the present invention will be briefly introduced below in combination with the accompanying drawings and the description of the embodiments or the prior art. Obviously, the following description of the structure of the drawings is only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings. It should be noted here that the description of these embodiment modes is used to help understand the present invention, but does not constitute a limitation to the present invention.

[0059] It should be understood that although terms such as first and second etc. may be used herein to describe various objects, these objects should not be limited by these terms. These terms are only used to distinguish one object from another. For example, the first object can be called the second object, and similarly, the second object can be called the first object, without departing from the scope of the exemplary embodiments of the present invention.

[0060] It should be understood that for the term "and / or" that may appear in this article, it is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, B exists alone, or A and B exist simultaneously, etc.; another example, A, B and / or C can mean any one of A, B and C or any combination of them; for the term " / and" that may appear in this article, it is a description of another association object relationship, indicating that there can be two relationships. For example, A / and B can mean: A exists alone or A and B exist simultaneously, etc.; in addition, for the character " / " that may appear in this article, generally it means that the front and back associated objects are an "or" relationship.

[0061] Embodiment:

[0062] As Figure 1 shown, the flowchart drawing method provided in the first aspect of this embodiment and based on HTML5 can be, but is not limited to, executed by a computer device with certain computing resources, such as executed by an electronic device such as a platform server, a personal computer (Personal Computer, PC, referring to a multi-purpose computer suitable for personal use in terms of size, price and performance; desktop computers, laptop computers to small laptop computers, tablet computers and ultrabooks, etc. all belong to personal computers), a smart phone, a personal digital assistant (Personal Digital Assistant, PDA) or a wearable device. As Figure 1 shown, the flowchart drawing method can be, but is not limited to, including the following steps S1 to S12.

[0063] S1. Obtain the flowchart display data.

[0064] In the step S1, the flowchart display data is maintained by the server, so it can be obtained from the server by, but not limited to, an asynchronous request method.

[0065] S2. Analyze the flowchart display data to obtain the node information of all nodes and the exit information of all exits. Among them, the node information includes, but is not limited to, the unique node identifier, abscissa value, and ordinate value of the node, etc. The exit information includes, but is not limited to, the unique identifiers of the two end nodes of the exit and the set of coordinate points. The exit refers to the connection line between two nodes, and the set of coordinate points includes, but is not limited to, the starting point of the exit line, the points passed by the exit line, and the end point of the exit line, etc.

[0066] In the step S2, the specific data analysis method is an existing method. In addition, the node information also includes, but is not limited to, the node display name, size, operator, etc. of the node.

[0067] S3. For each node among all the nodes, encapsulate the corresponding node information into a node object and put it into the node list.

[0068] S4. For each exit among all the exits, encapsulate the corresponding exit information into an exit object and put it into the exit list.

[0069] S5. According to the node information of all the nodes, determine the maximum value of the first abscissa and the maximum value of the first ordinate among the positions of all the nodes, and according to the exit information of all the exits, determine the maximum value of the second abscissa and the maximum value of the second ordinate among the points passed by all the exit lines. Then, take the maximum value between the maximum value of the first abscissa and the maximum value of the second abscissa as the width of the HTML5 canvas, and take the maximum value between the maximum value of the first ordinate and the maximum value of the second ordinate as the height of the HTML5 canvas.

[0070] In the step S5, the HTML5 canvas is the flowchart screen, which is an SVG (Scalable Vector Graphics, a graphics file format, meaning scalable vector graphics) element, and the node is a sub - element in the SVG element. Among them, the create node and archive node are ellipse elements, the approval node and read - only node are path elements, and the exit is also a path element.

[0071] S6. Traverse and analyze each node object in the node list, determine the graphics and colors of each node object, and for each node object, draw the corresponding graphics and colors onto the HTML5 canvas through an HTML5 drawing program according to the corresponding abscissa value and ordinate value.

[0072] In step S6, the HTML5 drawing program is an existing program based on HTML5 graphics drawing technology. In order to cultivate users' habits by using different graphic display effects for different types of nodes, so that users can intuitively know what types of nodes are on the flowchart, preferably, traverse and analyze each node object in the node list, and determine the graphics and colors of each node object, including but not limited to: for each node object in the node list, if it is determined that the corresponding node is a node that the process has not passed through, then determine the corresponding color as the first color; if it is determined that the corresponding node is a process stay node, then determine the corresponding color as the second color; if it is determined that the corresponding node is a node that the process has passed through, then determine the corresponding color as the third color, where the first color, the second color, and the third color are three different colors; for each node object, if it is determined that the corresponding node type is a creation node, then determine the corresponding graphic as the first graphic with a start icon; if it is determined that the corresponding node type is an approval node, then determine the corresponding graphic as the second graphic with an approval icon; if it is determined that the corresponding node type is a read-only node, then determine the corresponding graphic as the third graphic with a read-only icon, where the first graphic, the second graphic, and the third graphic are three different graphics. The specific method of determining the node type can be routinely analyzed and determined based on the specific content of the node information. In addition, the first color, the second color, and the third color can be exemplified as green, orange, and blue respectively, and the first graphic, the second graphic, and the third graphic can be exemplified as a circle, a diamond, and a rectangle respectively.

[0073] S7. Traverse and analyze each exit object in the exit list, determine the set of coordinate points to be drawn and the color of each exit object, and for each exit object, draw the broken line determined by the corresponding set of coordinate points to be drawn and the color onto the HTML5 canvas through the HTML5 drawing program.

[0074] In the step S7, similarly, in order to cultivate users' habits by using different graphic display effects for exits in different states, so that users can intuitively know what types the exit lines on the flowchart are. Preferably, traverse and analyze each exit object in the exit list, and determine the set of coordinate points to be drawn and colors for each exit object, including but not limited to: for each exit object in the exit list, if it is determined that the corresponding exit is an exit not passed by the process, determine the corresponding color as the fourth color, and if it is determined that the corresponding exit is an exit passed by the process, determine the corresponding color as the fifth color, where the fourth color and the fifth color are two different colors; for each of the exit objects, analyze a series of coordinate points passed by the corresponding exit polyline, and based on the positions and sizes of the node objects at both ends of the corresponding exit, obtain the corresponding set of coordinate points to be drawn through intelligent fine-tuning. The specific method for determining the exit type described above can be determined by conventional analysis based on the specific content of the exit information, and the above-mentioned coordinate point analysis and intelligent fine-tuning methods are also existing conventional methods. In addition, the fourth color and the fifth color can be, for example, light gray and red respectively.

[0075] S8. Bind a mouse down event, a mouse move event, and a mouse up event to the HTML5 canvas, where the mouse down event, the mouse move event, and the mouse up event are respectively events for capturing internal elements based on the event propagation mechanism of HTML5.

[0076] In the step S8, since the mouse down event, the mouse move event, and the mouse up event are respectively events for capturing internal elements based on the event propagation mechanism of HTML5, it can be made that only one event needs to be bound, thereby reducing performance loss.

[0077] S9. When the mouse down event is triggered, if it is determined that the source object of the current press event is a node, then through the HTML5 drawing program, generate a dashed rectangle or a copy graphic that exactly covers the node above the layer of the node, and record that the node has been selected and is in a draggable state.

[0078] In the step S9, the triggering method of the mouse down event can be but not limited to: when the user presses the mouse on the node element, trigger the mouse down event of the corresponding SVG element.

[0079] S10. When the mouse move event is triggered, if it is determined that a node has been pressed and selected and the source object of the current move event is the node, then through the HTML5 drawing program, redraw the dashed rectangle or the copy graphic that originally covered the node to the new position where the mouse moves.

[0080] In the step S10, the triggering method of the mouse movement event may but is not limited to: when the user presses the mouse on a node element and then moves the mouse, the mouse movement event of the corresponding SVG element is triggered. In addition, if the mouse is dragged continuously, the mouse movement event is repeatedly triggered, and the dashed rectangle or the copied graphic is continuously redrawn.

[0081] S11. When the mouse release event is triggered, if it is determined that a node is in the dragging state, obtain the new position of the dashed rectangle or the copied graphic that originally covered the node, and when it is determined again that the new position is different from the current position of the node, use the HTML5 drawing program to redraw the graphic and color of the node to the new position.

[0082] In the step S11, the triggering method of the mouse release event may but is not limited to: when the user releases the mouse, the mouse release event is triggered. After redrawing the graphic and color of the node to the new position, the position information of the corresponding node object in the node list can also be updated. In addition, when it is determined again that the new position is the same as the current position of the node, no processing is performed.

[0083] S12. After redrawing the graphic and color of a certain node to a certain new position, for each exit with the certain node as the starting point or the ending point of the exit line, re-determine the corresponding new set of coordinate points to be drawn according to the certain new position, and use the HTML5 drawing program to redraw the polyline determined by the corresponding new set of coordinate points to be drawn and the color on the HTML5 canvas.

[0084] In the step S12, the specific determination method of the new set of coordinate points to be drawn may but is not limited to the following: re-determine the exit line direction according to the certain new position, and then determine the new set of coordinate points to be drawn according to the exit line direction. After redrawing the corresponding polylines for each exit with the certain node as the starting point or the ending point of the exit line, the position information of the corresponding exit object in the exit list can also be updated to temporarily store the user operation result.

[0085] Based on the HTML5-based flowchart drawing method described in the foregoing steps S1 to S12, a flowchart redrawing solution that can avoid dragging jitter is provided. That is, after initially drawing the flowchart display data on the HTML5 canvas, the HTML5 canvas is bound with mouse press events, mouse movement events, and mouse release events of internal elements that can be captured based on the HTML5 event propagation mechanism. Through these three events, when a node is dragged, an outline of the dragged node is drawn on the flowchart to reflect the user's dragging, and it is ensured that the actual node and the exit are not redrawn. When the user finishes dragging, if the position changes, the truly dragged node moves to the new dragged position, and the exit and a partial area of the flowchart are recalculated and redrawn. Thus, a complete drag only involves one calculation and redrawing, avoiding the phenomenon of dragging jitter, which can bring great performance improvement and extremely high user experience and is convenient for practical application and promotion. In addition, the recognizability of flowchart nodes by users can be greatly improved. Through the flowchart, the types of nodes included can be intuitively overviewed, and it can be known what operations each process node needs to perform; and by adding color flags indicating whether they have been passed (flowed through) to the nodes and exits, users can intuitively know the flow state of the current process through the flowchart, which nodes have been passed, which have not, and where it currently stops, truly having a clear understanding in mind.

[0086] In a possible design, after obtaining the node list and the exit list, the method further includes, but is not limited to: traversing the node list and the exit list, finding at least one associated exit corresponding to each node in the node list, and setting the at least one associated exit into the exit list of the corresponding node object, so that the corresponding associated exit can be directly found through the node later. The associated exit refers to an exit with the node as the starting point or the ending point of the exit line. Thus, when redrawing the exit after each drag to a new position, there is no need to traverse again, which can further greatly improve the performance.

[0087] In a possible design, after drawing the corresponding graph and color on the HTML5 canvas for a certain node object through the HTML5 drawing program according to the corresponding abscissa value and ordinate value, the method further includes, but is not limited to: binding a mouse click event to the certain node object on the HTML5 canvas, so that when the mouse click event is triggered, an HTML5 layer pops up to display the node information of the certain node object; and / or adding a first attribute value that is custom-defined and unique to the node corresponding to the certain node object to the certain node object on the HTML5 canvas, so as to locate the object dragged by the user during subsequent dragging.

[0088] In a possible design, after drawing a polyline determined by a corresponding set of coordinate points to be drawn and colors on the HTML5 canvas for a certain exit object through the HTML5 drawing program, the method further includes, but is not limited to: binding a mouse hover event to the certain exit object on the HTML5 canvas, so that when the mouse hover event is triggered, an HTML5 layer is floatingly displayed to show the exit information of the certain exit object; and / or, adding a second attribute value that is custom-defined and unique to the exit corresponding to the certain exit object to the certain exit object on the HTML5 canvas, so as to locate the exit connected to the node object dragged by the user during subsequent dragging.

[0089] In a possible design, after redrawing the graph and color of a certain node to a new position and redrawing the polylines determined by the corresponding new sets of coordinate points to be drawn and colors for each exit with the certain node as the starting point or ending point of the exit line on the HTML5 canvas, the method further includes: if it is determined that the maximum value of the third abscissa in the certain new position and all the new sets of coordinate points to be drawn is greater than the width of the HTML5 canvas, updating the width of the HTML5 canvas to the maximum value of the third abscissa; if it is determined that the maximum value of the third ordinate in the certain new position and all the new sets of coordinate points to be drawn is greater than the height of the HTML5 canvas, updating the height of the HTML5 canvas to the maximum value of the third ordinate. In this way, the canvas size can be adapted to the dragging result.

[0090] As Figure 2 shown, the second aspect of this embodiment provides a virtual device for implementing the HTML5-based flowchart drawing method described in the first aspect or any possible design in the first aspect, including a data acquisition module, a data parsing module, an information encapsulation module, a canvas determination module, a node drawing module, an exit drawing module, an event binding module, an event response module, and an exit redrawing module;

[0091] The data acquisition module is used to acquire flowchart display data;

[0092] The data parsing module is communicatively connected to the data acquisition module and is used to parse the flowchart display data to obtain the node information of all nodes and the exit information of all exits. Among them, the node information includes the node unique identifier, abscissa value, and ordinate value of the node, the exit information includes the unique identifiers of the two end nodes of the exit and the set of coordinate points, the exit refers to the connection line between two nodes, and the set of coordinate points includes the starting point of the exit line, the passing point of the exit line, and the ending point of the exit line;

[0093] The information encapsulation module is communicatively connected to the data parsing module. For each node among all the nodes, it encapsulates the corresponding node information into a node object and puts it into the node list, and for each exit among all the exits, it encapsulates the corresponding exit information into an exit object and puts it into the exit list;

[0094] The canvas determination module is communicatively connected to the data parsing module. It determines the maximum value of the first abscissa and the maximum value of the first ordinate in the locations of all the nodes according to the node information of all the nodes, and determines the maximum value of the second abscissa and the maximum value of the second ordinate among the points passed by all the exit lines according to the exit information of all the exits. Then, it takes the maximum value between the maximum value of the first abscissa and the maximum value of the second abscissa as the width of the HTML5 canvas, and takes the maximum value between the maximum value of the first ordinate and the maximum value of the second ordinate as the height of the HTML5 canvas;

[0095] The node drawing module is communicatively connected to the information encapsulation module and the canvas determination module respectively. It traverses and analyzes each node object in the node list, determines the graphics and colors of each node object, and for each node object, draws the corresponding graphics and colors onto the HTML5 canvas through the HTML5 drawing program according to the corresponding abscissa value and ordinate value;

[0096] The exit drawing module is communicatively connected to the information encapsulation module and the canvas determination module respectively. It traverses and analyzes each exit object in the exit list, determines the set of coordinate points to be drawn and the color of each exit object, and for each exit object, draws the broken line determined by the corresponding set of coordinate points to be drawn and the color onto the HTML5 canvas through the HTML5 drawing program;

[0097] The event binding module is communicatively connected to the node drawing module and the exit drawing module respectively. It binds the mouse down event, mouse move event and mouse up event to the HTML5 canvas, where the mouse down event, mouse move event and mouse up event are events that capture internal elements based on the event propagation mechanism of HTML5;

[0098] The event response module, communicatively connected to the event binding module, is configured to, when the mouse press event is triggered, if it is determined that the source object of the current press event is a node, generate, through the HTML5 drawing program, a dashed rectangle or a copied graphic that exactly and completely covers the node above the layer of the node, record that the node has been selected and is in a draggable state, and when the mouse move event is triggered, if it is determined that a node has been pressed and selected and the source object of the current move event is the node, redraw, through the HTML5 drawing program, the dashed rectangle or the copied graphic that originally covered the node to the new position of the mouse movement, and also when the mouse release event is triggered, if it is determined that a node is in a dragging state, obtain the new position of the dashed rectangle or the copied graphic that originally covered the node, and when it is determined again that the new position is different from the current position of the node, redraw, through the HTML5 drawing program, the graphic and color of the node to the new position;

[0099] The exit redrawing module, communicatively connected to the event response module, is configured to, after redrawing the graphic and color of a certain node to a certain new position, for each exit with the certain node as the starting point or the ending point of the exit line, re-determine the corresponding and new set of coordinate points to be drawn according to the certain new position, and redraw, through the HTML5 drawing program, the polyline determined by the corresponding and new set of coordinate points to be drawn and the color onto the HTML5 canvas.

[0100] For the working process, working details and technical effects of the foregoing device provided in the second aspect of this embodiment, reference may be made to the flowchart drawing method described in the first aspect or any possible design in the first aspect, which will not be elaborated herein.

[0101] Such as Figure 3As shown, in the third aspect of this embodiment, a computer device for executing the flowchart drawing method described in the first aspect or any possible design in the first aspect is provided, including a memory, a processor, and a transceiver that are communicatively connected in sequence. Among them, the memory is used to store computer programs, the transceiver is used to send and receive messages, and the processor is used to read the computer programs and execute the flowchart drawing method described in the first aspect or any possible design in the first aspect. Specifically, for example, the memory may include, but is not limited to, random access memory (RAM), read-only memory (ROM), flash memory, first input first output (FIFO), and / or first input last output (FILO), etc.; the processor may include, but is not limited to, a microprocessor of the STM32F105 series. In addition, the computer device may further include, but is not limited to, a power module, a display screen, and other necessary components.

[0102] For the working process, working details, and technical effects of the aforementioned computer device provided in the third aspect of this embodiment, reference may be made to the flowchart drawing method described in the first aspect or any possible design in the first aspect, which will not be elaborated here.

[0103] In the fourth aspect of this embodiment, a computer-readable storage medium storing instructions for the flowchart drawing method described in the first aspect or any possible design in the first aspect is provided, that is, instructions are stored on the computer-readable storage medium. When the instructions run on a computer, the flowchart drawing method described in the first aspect or any possible design in the first aspect is executed. Among them, the computer-readable storage medium refers to a carrier for storing data, which may include, but is not limited to, floppy disks, optical discs, hard disks, flash memories, USB flash drives, and / or memory sticks, etc. The computer may be a general-purpose computer, a dedicated computer, a computer network, or other programmable devices.

[0104] For the working process, working details, and technical effects of the aforementioned computer-readable storage medium provided in the fourth aspect of this embodiment, reference may be made to the flowchart drawing method described in the first aspect or any possible design in the first aspect, which will not be elaborated here.

[0105] In the fifth aspect of this embodiment, a computer program product containing instructions is provided. When the instructions run on a computer, the computer is made to execute the flowchart drawing method described in the first aspect or any possible design in the first aspect. Among them, the computer may be a general-purpose computer, a dedicated computer, a computer network, or other programmable devices.

[0106] Finally, it should be noted that the above are only the preferred embodiments of the present invention and are not intended to limit the protection scope of the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. A flowchart drawing method based on HTML5, characterized in that Including: Obtain flowchart display data; Parse the flowchart display data to obtain node information of all nodes and exit information of all exits. Among them, the node information includes the unique node identifier, abscissa value, and ordinate value of the node. The exit information includes the unique identifiers of the two end nodes of the exit and a set of coordinate points. The exit refers to the connection line between two nodes. The set of coordinate points includes the starting point of the exit line, the points passed by the exit line, and the ending point of the exit line; For each node among all the nodes, encapsulate the corresponding node information into a node object and put it into the node list; For each exit among all the exits, encapsulate the corresponding exit information into an exit object and put it into the exit list; According to the node information of all the nodes, determine the maximum value of the first abscissa and the maximum value of the first ordinate among the positions of all the nodes. And according to the exit information of all the exits, determine the maximum value of the second abscissa and the maximum value of the second ordinate among the points passed by all the exit lines. Then take the maximum value between the maximum value of the first abscissa and the maximum value of the second abscissa as the width of the HTML5 canvas, and take the maximum value between the maximum value of the first ordinate and the maximum value of the second ordinate as the height of the HTML5 canvas; Traverse and analyze each node object in the node list to determine the graph and color of each node object. And for each node object, use the HTML5 drawing program and draw the corresponding graph and color onto the HTML5 canvas according to the corresponding abscissa value and ordinate value; Traverse and analyze each exit object in the exit list to determine the set of coordinate points to be drawn and the color of each exit object. And for each exit object, use the HTML5 drawing program to draw the broken line determined by the corresponding set of coordinate points to be drawn and the color onto the HTML5 canvas; Bind the mouse down event, mouse move event, and mouse up event to the HTML5 canvas. Among them, the mouse down event, the mouse move event, and the mouse up event are respectively events that capture internal elements based on the event propagation mechanism of HTML5; When the mouse down event is triggered, if it is determined that the source object of this down event is a node, then use the HTML5 drawing program to generate a dotted rectangle or a copy graphic that exactly covers this node above the layer of this node, and record that this node has been selected and is in a draggable state; When the mouse move event is triggered, if it is determined that a node has been pressed and selected and the source object of this move event is this node, then use the HTML5 drawing program to redraw the dotted rectangle or the copy graphic that originally covered this node to the new position of the mouse movement; When the mouse release event is triggered, if it is determined that a node is in a dragging state, the new position of the dotted rectangle or the copied graphic that originally covers the node is obtained, and when it is determined again that the new position is different from the current position of the node, the graphic and color of the node are redrawn to the new position through the HTML5 drawing program; After the graphics and color of a certain node are redrawn to a certain new position, for each exit with the certain node as the starting point of the exit line or the end point of the exit line, the corresponding and new set of coordinate points to be drawn is re-determined according to the certain new position, and the broken line determined by the corresponding and new set of coordinate points to be drawn and the color is redrawn on the HTML5 canvas through the HTML5 drawing program.

2. The flowchart drawing method according to claim 1, wherein After obtaining the node list and the exit list, the method further includes: Traverse the node list and the exit list, find out at least one associated exit corresponding to each node in the node list, and set the at least one associated exit to the exit list of the corresponding node object, so that the corresponding associated exit can be directly found through the node later, wherein the associated exit refers to an exit with a node as the starting point or the end point of the exit line.

3. The flowchart drawing method according to claim 1, wherein, Traversing and analyzing each node object in the node list to determine the graphics and colors of each node object includes: For each node object in the node list, if the corresponding node is determined to be a node that the process has not passed through, the corresponding color is determined to be a first color, if the corresponding node is determined to be a node where the process stops, the corresponding color is determined to be a second color, and if the corresponding node is determined to be a node that the process has passed through, the corresponding color is determined to be a third color, wherein the first color, the second color and the third color are three different colors; For each of the node objects, if the corresponding node type is determined to be a creation node, the corresponding graphic is determined to be a first graphic with a start icon, and if the corresponding node type is determined to be an approval node, the corresponding graphic is determined to be a second graphic with an approval icon, and if the corresponding node type is determined to be a read-only node, the corresponding graphic is determined to be a third graphic with a read-only icon, wherein the first graphic, the second graphic and the third graphic are three different graphics.

4. The flowchart drawing method according to claim 1, wherein After drawing the corresponding graphics and colors on the HTML5 canvas according to the corresponding horizontal coordinate values and vertical coordinate values for a certain node object through the HTML5 drawing program, the method further includes: Binding a mouse click event to the certain node object on the HTML5 canvas, so that when the mouse click event is triggered, an HTML5 layer pops up to display node information of the certain node object; And / or, a first attribute value that is customized and uniquely identifies a node corresponding to the certain node object is added to the certain node object on the HTML5 canvas, so as to locate the object dragged by the user during subsequent dragging.

5. The flowchart drawing method according to claim 1, wherein Traversing and analyzing each outlet object in the outlet list to determine a set of coordinate points and colors to be drawn for each outlet object, including: For each export object in the export list, if it is determined that the corresponding export is an export that the process has not passed through, the corresponding color is determined to be the fourth color, and if it is determined that the corresponding export is an export that the process has passed through, the corresponding color is determined to be the fifth color, where the fourth color and the fifth color are two different colors; For each of the export objects, analyze a series of coordinate points passed by the corresponding export polyline, and based on the positions and sizes of the node objects at both ends of the corresponding export, obtain the corresponding set of coordinate points to be drawn through intelligent fine-tuning.

6. The flowchart drawing method according to claim 1, characterized in that After, for a certain export object, drawing the polyline determined by the corresponding set of coordinate points to be drawn and the color onto the HTML5 canvas through the HTML5 drawing program, the method further includes: Binding a mouse hover event to the certain export object on the HTML5 canvas, so that when the mouse hover event is triggered, an HTML5 layer is floatingly displayed to show the export information of the certain export object; And / or, adding a second attribute value that is customized and unique to the export corresponding to the certain export object to the certain export object on the HTML5 canvas, so as to locate the export connected to the node object dragged by the user during subsequent dragging.

7. The flowchart drawing method according to claim 1, characterized in that, After redrawing the graph and color of a certain node to a new position, and for each export with the certain node as the starting point or ending point of the export line, redrawing the polyline determined by the corresponding new set of coordinate points to be drawn and the color onto the HTML5 canvas, the method further includes: If it is determined that the maximum value of the third abscissa in the certain new position and all the new sets of coordinate points to be drawn is greater than the width of the HTML5 canvas, update the width of the HTML5 canvas to the maximum value of the third abscissa; If it is determined that the maximum value of the third ordinate in the certain new position and all the new sets of coordinate points to be drawn is greater than the height of the HTML5 canvas, update the height of the HTML5 canvas to the maximum value of the third ordinate.

8. A flowchart drawing device based on HTML5, characterized in that It includes a data acquisition module, a data parsing module, an information encapsulation module, a canvas determination module, a node drawing module, an export drawing module, an event binding module, an event response module, and an export redrawing module; The data acquisition module is used to acquire flowchart display data; The data parsing module, communicatively connected to the data acquisition module, is used to parse the flowchart display data to obtain the node information of all nodes and the export information of all exports. Among them, the node information includes the node unique identifier, abscissa value, and ordinate value of the node, the export information includes the unique identifiers of the two end nodes of the export and the set of coordinate points, the export refers to the connection line between two nodes, and the set of coordinate points includes the starting point of the export line, the points passed by the export line, and the ending point of the export line; The information encapsulation module is communicatively connected to the data parsing module and is used to encapsulate the corresponding node information into a node object for each node in all the nodes and put it into the node list, and encapsulate the corresponding exit information into an exit object for each exit in all the exits and put it into the exit list; The canvas determination module is communicatively connected to the data parsing module and is used to determine the maximum value of the first abscissa and the maximum value of the first ordinate in the locations of all the nodes according to the node information of all the nodes, and determine the maximum value of the second abscissa and the maximum value of the second ordinate in the points passed by all the exit lines according to the exit information of all the exits, and then use the maximum value between the maximum value of the first abscissa and the maximum value of the second abscissa as the width of the HTML5 canvas, and use the maximum value between the maximum value of the first ordinate and the maximum value of the second ordinate as the height of the HTML5 canvas; The node drawing module is communicatively connected to the information encapsulation module and the canvas determination module respectively, and is used to traverse and analyze each node object in the node list, determine the graphics and colors of each node object, and draw the corresponding graphics and colors onto the HTML5 canvas for each node object through the HTML5 drawing program according to the corresponding abscissa value and ordinate value; The exit drawing module is communicatively connected to the information encapsulation module and the canvas determination module respectively, and is used to traverse and analyze each exit object in the exit list, determine the set of coordinate points to be drawn and the colors of each exit object, and draw the broken line determined by the corresponding set of coordinate points to be drawn and the colors onto the HTML5 canvas for each exit object through the HTML5 drawing program; The event binding module is communicatively connected to the node drawing module and the exit drawing module respectively, and is used to bind the mouse down event, the mouse move event and the mouse up event to the HTML5 canvas, wherein the mouse down event, the mouse move event and the mouse up event are events that capture internal elements based on the event propagation mechanism of HTML5; The event response module, communicatively connected to the event binding module, is configured to, when the mouse press event is triggered, if it is determined that the source object of the current press event is a node, generate, through the HTML5 drawing program, a dotted rectangle or a copied graphic that exactly and completely covers the node above the layer of the node, record that the node has been selected and is in a draggable state, and when the mouse move event is triggered, if it is determined that a node has been pressed and selected and the source object of the current move event is the node, redraw, through the HTML5 drawing program, the dotted rectangle or the copied graphic that originally covered the node to the new position of the mouse movement, and also when the mouse release event is triggered, if it is determined that a node is in a dragging state, obtain the new position of the dotted rectangle or the copied graphic that originally covered the node, and when it is determined again that the new position is different from the current position of the node, redraw, through the HTML5 drawing program, the graphic and color of the node to the new position; The exit redrawing module, communicatively connected to the event response module, is configured to, after redrawing the graphic and color of a certain node to a certain new position, for each exit with the certain node as the starting point or the ending point of the exit line, re-determine the corresponding and new set of coordinate points to be drawn according to the certain new position, and redraw, through the HTML5 drawing program, the polyline determined by the corresponding and new set of coordinate points to be drawn and the color onto the HTML5 canvas.

9. A computer device, characterized in that, It includes a memory, a processor, and a transceiver that are communicatively connected in sequence. Among them, the memory is used to store computer programs, the transceiver is used to send and receive messages, and the processor is used to read the computer programs and execute the flowchart drawing method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that , Instructions are stored on the computer-readable storage medium, and when the instructions run on a computer, the flowchart drawing method according to any one of claims 1 to 7 is executed.

Images