CN115393474A - Method and system for rapidly drawing flow chart - Google Patents
Method and system for rapidly drawing flow chart Download PDFInfo
- Publication number
- CN115393474A CN115393474A CN202210999940.0A CN202210999940A CN115393474A CN 115393474 A CN115393474 A CN 115393474A CN 202210999940 A CN202210999940 A CN 202210999940A CN 115393474 A CN115393474 A CN 115393474A
- Authority
- CN
- China
- Prior art keywords
- component
- node
- component node
- connecting line
- dragged
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a system for quickly drawing a flow chart, which respond to a newly increased request of a component node, and judge whether a mutual shielding relation exists between the newly dragged component node and an existing component node in a current canvas if the component node is newly dragged from the outside of the canvas; if the mutual shielding relation exists, calculating the coordinate position of the newly dragged component node according to the position of the existing component node, and translating the newly dragged component node downwards according to the calculation result; if a component node is newly added on the periphery of the selected component node, determining the direction of a connecting line according to the whole layout mode of the process, and determining the coordinates of two end points of the connecting line according to the set distance; determining coordinates of four corner points of the newly added component node according to the type of the newly added component node; generating a newly added component node according to the coordinates of the four corner points; and realizing the connection between the nodes of the newly added components and the nodes of the selected components according to the connection direction and the coordinates of the connection end points.
Description
Technical Field
The invention relates to the technical field of flow chart drawing, in particular to a method and a system for quickly drawing a flow chart.
Background
The statements in this section merely provide background information related to the present disclosure and may not constitute prior art.
In the process of drawing the service flow, the relative position relationships and the connection lines of different service nodes are required to be manually operated in the drawing process, and different flow nodes are connected and arranged in relative positions. Thereby adjusting the display form and the aesthetic degree of the process.
1. The current drawing mode is mainly used for tiling and displaying each node of the flow one by one in the drawing process of the flow by using a dragging mode, and the connection between the nodes and the adjustment of the position are required to be manually carried out.
2. The problems mainly generated by manual adjustment are that the drawing process is complex, the drawing difficulty is high, and the flow chart is not attractive in drawing.
3. In the process of drawing the business process, the drawing process efficiency is low and the process drawing layout is unreasonable due to the fact that the composition tool is used unskilled by the business.
Disclosure of Invention
In order to solve the defects of the prior art, the invention provides a method and a system for quickly drawing a flow chart;
in a first aspect, the invention provides a method for rapidly drawing a flow chart;
a method for rapidly drawing a flow chart comprises the following steps:
responding to a newly added request of the component node, and judging whether the newly added component node is newly dragged into a component node from outside the canvas or a component node is newly added at the periphery of the selected component node;
if the component node is newly dragged from the outside of the canvas, judging whether a mutual shielding relation exists between the newly dragged component node and the existing component node in the current canvas; if the mutual shielding relation exists, calculating the coordinate position of the newly dragged component node according to the position of the existing component node, and translating the newly dragged component node downwards according to the calculation result;
if a component node is newly added on the periphery of the selected component node, determining the direction of a connecting line according to the whole layout mode of the process, and determining the coordinates of two end points of the connecting line according to the set distance; determining coordinates of four corner points of the newly added component node according to the type of the newly added component node; generating a newly added component node according to the coordinates of the four corner points; and realizing the connection between the nodes of the newly added components and the nodes of the selected components according to the connection direction and the connection end point coordinates.
In a second aspect, the present invention provides a fast drawing system of a flowchart;
a system for fast rendering of a flow chart, comprising:
a response module configured to: responding to a newly added request of the component node, and judging whether the newly added component node is newly dragged into a component node from outside the canvas or newly added with a component node at the periphery of the selected component node;
a first rendering module configured to: if the component node is newly dragged from the outside of the canvas, judging whether a mutual shielding relation exists between the newly dragged component node and the existing component node in the current canvas; if the mutual shielding relation exists, calculating the coordinate position of the newly dragged component node according to the position of the existing component node, and translating the newly dragged component node downwards according to the calculation result;
a second rendering module configured to: if a component node is newly added on the periphery of the selected component node, determining the direction of a connecting line according to the whole layout mode of the process, and determining the coordinates of two end points of the connecting line according to the set distance; determining coordinates of four corner points of the newly added component node according to the type of the newly added component node; generating a newly added component node according to the coordinates of the four corner points; and realizing the connection between the nodes of the newly added components and the nodes of the selected components according to the connection direction and the connection end point coordinates.
In a third aspect, the present invention further provides an electronic device, including:
a memory for non-transitory storage of computer readable instructions; and
a processor for executing the computer readable instructions,
wherein the computer readable instructions, when executed by the processor, perform the method of the first aspect.
In a fourth aspect, the present invention also provides a storage medium, non-transitory computer readable instructions, wherein the non-transitory computer readable instructions, when executed by a computer, perform the instructions of the method of the first aspect.
In a fifth aspect, the invention also provides a computer program product comprising a computer program for implementing the method of the first aspect when run on one or more processors.
Compared with the prior art, the invention has the beneficial effects that:
by using the quick connection automatic positioning mode, personnel with lower level can quickly finish the drawing of the flow as long as the personnel know the related business requirements, and the drawn flow chart has reasonable layout and attractive display.
The flow drawing efficiency in the flow drawing process is improved, and the learning cost of developers is reduced. The rationality of the process modeling layout is improved, and the attractiveness of process display is improved.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, are included to provide a further understanding of the invention, and are incorporated in and constitute a part of this specification, illustrate exemplary embodiments of the invention and together with the description serve to explain the invention and not to limit the invention.
Fig. 1 is a flowchart of a node of a newly added component according to a first embodiment;
FIG. 2 is a flowchart of deleting a component node according to the first embodiment;
FIG. 3 is a flowchart of nodes of a dragging component according to the first embodiment;
fig. 4 is a drawing effect diagram of the first embodiment.
Detailed Description
It is to be understood that the following detailed description is exemplary and is intended to provide further explanation of the invention as claimed. Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs.
It is noted that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of exemplary embodiments according to the invention. As used herein, the singular forms "a", "an", and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise, and it should be understood that the terms "comprises" and "comprising", and any variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
The embodiments and features of the embodiments of the present invention may be combined with each other without conflict.
All data are obtained according to the embodiment and are legally applied on the data on the basis of compliance with laws and regulations and user consent.
Interpretation of terms: the flow chart is as follows: a flow diagram is a graphical representation of information flow, point of view flow, or component flow through a system. In a business system, a flow diagram is used primarily to illustrate a process. This process can be either a process flow on a production line or a management process necessary to accomplish a task.
Example one
The embodiment provides a method for rapidly drawing a flow chart;
as shown in fig. 1, a fast drawing method of a flowchart includes:
s101: responding to a newly added request of the component node, and judging whether the newly added component node is newly dragged into a component node from outside the canvas or newly added with a component node at the periphery of the selected component node;
s102: if a component node is newly dragged from the outside of the canvas, judging whether a mutual shielding relation exists between the newly dragged component node and the existing component node in the current canvas; if the mutual shielding relation exists, calculating the coordinate position of the newly dragged component node according to the position of the existing component node, and translating the newly dragged component node downwards according to the calculation result;
s103: if a component node is newly added on the periphery of the selected component node, determining the direction of a connecting line according to the whole layout mode of the process, and determining the coordinates of two end points of the connecting line according to the set distance; determining coordinates of four corner points of the newly added component node according to the type of the newly added component node; generating a newly added component node according to the coordinates of the four corner points; and realizing the connection between the nodes of the newly added components and the nodes of the selected components according to the connection direction and the coordinates of the connection end points.
Further, the calculating a coordinate position of a newly dragged component node according to a position of an existing component node specifically includes:
according to the visual display design specification, in order to ensure the display aesthetic degree of the automatic drawing process, the distance between two adjacent nodes is set to be 63PX, the width and the height of the manual activity node are 27PX and 23PX, the width and the height of the gateway are 27PX and 27PX, and the width and the height of the ending node are 23PX and 23PX.
Setting the coordinates of the start node as S [ SX, SY ], and calculating four positions of the new dragged node according to the formula:
upper left [ SX +63, SY + H/2], lower left [ SX +63, SY-H/2],
right up [ SX +63+ W, SY + H/2], right down [ SX +63+ W, SY-H/2].
Where W represents the width of the newly towed-in component and H represents the height of the newly towed-in component.
Taking the newly dragged node as the user task active node as an example, the new coordinate position is as follows:
upper left [ SX +63, SY +23/2], lower left [ SX +63, SY-23/2],
right upper [ SX +63+27, SY +23/2], right lower [ SX +63+27, SY-23/2].
Further, the direction of the connecting line is determined according to the overall layout mode of the process, and the coordinates of two end points of the connecting line are determined according to the set distance; the method specifically comprises the following steps:
the coordinates of the first end point are the center points of the boundary lines of the selected component nodes; the selected component node boundary line is a boundary on the selected component node, which is close to the newly added component;
the coordinate of the second end point is a coordinate determined by drawing a ray towards the connecting line from the central point of the boundary line of the selected component node as a starting point, and intercepting the ray according to the set distance.
Further, determining coordinates of four corner points of the newly added component node according to the type of the newly added component node; the method specifically comprises the following steps:
types of newly added components, including: user task active node (UserTask), gateWay node (GateWay), end node (EndEvent).
The values of W and H in the above formula are determined according to the type of addition.
It should be appreciated that the flow components are added quickly: the rapid addition of components is divided into the following two cases.
The first condition is as follows: a new component node a is dragged directly into the canvas. When a new component node is dragged into the canvas, whether the new dragged component node has a mutual covering relation with the existing component nodes in the current canvas is calculated. And if the component node newly dragged into the canvas has a covering relationship with the current canvas and the component node B already exists, automatically and downwards translating the component node A according to the coordinate of the current component node B and the type of the component node A, and calculating the coordinate position of the new component node.
Case two: and quickly adding a new component node after the component is selected. And determining the direction of the connecting line and the coordinates of two points of the connecting line according to the selected process node P and in combination with the overall process layout mode (horizontal layout or vertical layout). And determining coordinates of four position points of the newly added node, namely, the upper left position point, the lower left position point, the upper right position point and the lower right position point according to the type of the newly added process node. And automatically creating a new flow graph according to the calculated coordinate position, and quickly connecting the selected node P with the newly-added node N according to the calculated connecting line coordinate.
Further, as shown in fig. 2, the method further includes:
s104: responding to a deletion request of the component node, and acquiring a coordinate position of the component node to be deleted and an associated line of the component node to be deleted;
s105: acquiring an association component connected with an association line;
s106: deleting the nodes of the components to be deleted, and calculating two original connecting lines between the nodes of the components to be deleted and the associated components according to the coordinates of the associated components; and taking the start point coordinate of one original connecting line as the start point coordinate of the new connecting line between the associated components, taking the end point coordinate of the other original connecting line as the end point coordinate of the new connecting line between the associated components, and connecting the associated components according to the start point coordinate and the end point coordinate of the new connecting line.
Further, according to the coordinates of the associated component, two original connecting lines between the associated component and the node of the component to be deleted are calculated; taking the start coordinate of one of the original connecting lines as the start coordinate of the new connecting line between the associated components, and taking the end coordinate of the other original connecting line as the end coordinate of the new connecting line between the associated components, specifically comprising:
and finding associated nodes M1 and M2 according to the deleted node P, and finding lines L1 and L2 respectively connected with P by the M1 and the M2, wherein the starting point coordinate of the L1 is the starting point coordinate of a new connecting line L between the associated nodes M1 and M2, and the end point coordinate of the L2 is the end point coordinate of the new connecting line L between the associated nodes M1 and M2.
It should be appreciated that the flow components are deleted quickly: when any one component node P in the selected canvas carries out the deletion operation.
The first step is as follows: and determining the unique identifier of the component, the position of the process node P and the type of the component node P according to the component selected by the mouse.
The second step: and searching for the connection relation between the acquired component node P and other components according to the acquired component identifier.
The third step: and acquiring the connection line associated with the component node P to be deleted and the information of the process component nodes M1 and M2 connected with the other end of the connection line.
The fourth step: deleting the current flow node, and calculating the relative position between the component nodes M1 and M2 according to the obtained coordinates and component types of the component nodes M1 and M2. And judging boundary points B1 and B2 when the component nodes M1 and M2 are connected according to the position relation.
The fifth step: the coordinates of the start and stop points of the new connecting line L between the modules M1 and M2 are calculated based on the connecting boundary points. Quickly connecting M1 and M2
And a sixth step: and updating the node information stored in the canvas to provide calculation support for other subsequent operations.
Further, as shown in fig. 3, the method further includes:
s107: responding to a dragging request of a component node, and acquiring a connecting line associated with the dragged component node;
s108: acquiring an associated component connected with a connecting line associated with a dragged component node;
s109: acquiring an original coordinate position and a target coordinate position of a dragged component node; calculating the offset according to the original coordinate position and the target coordinate position; and calculating a bending point of a connecting line between the node of the dragged component and the associated node and coordinate positions of end points at two ends of the connecting line according to the offset, thereby realizing dragging of the node of the dragged component.
Further, calculating an offset according to the original coordinate position and the target coordinate position; the method specifically comprises the following steps:
assuming that the original coordinate position is S [ SX, SY ], the coordinate position after dragging is E [ EX, EY ], and the offset of the x-axis is:
OX＝EX-SX；
the y-axis offset is:
OY＝EY-SY；
wherein SX and SY represent the values of the original coordinate on the x-axis and the y-axis respectively.
Further, calculating a bending point of a connecting line between a node of the dragged component and the associated node and coordinate positions of end points at two ends of the connecting line according to the offset; the method specifically comprises the following steps:
as shown in FIG. 4, the bending point 1 has coordinates of [ X0+ (X1 + OX-X0)/2, Y1];
the coordinate of bending point 2 is [ X0+ (X1 + OX-X0)/2, Y1+ OY ].
Wherein, X0 represents the abscissa value of the starting point of the connecting line L1, X1 represents the abscissa value of the connecting line dragging front end point, Y1 represents the ordinate value of the connecting line dragging front end point, OX represents the X-axis offset, OY represents the Y-axis offset, and the connecting line L1 represents the connecting line between the node of the dragged component and the first associated node;
the coordinate of the bending point 3 is [ X3+ (X4 + OX-X3)/2;
the coordinate of bending point 4 is [ X3+ (X4 + OX-X3)/2, Y4+ OY ].
Wherein, X3 represents an abscissa value of a starting point before dragging the connecting line L2, X4 represents an abscissa value of a terminal point after dragging the connecting line L2, Y4 represents an ordinate value of a terminal point before dragging the connecting line, OX represents an X-axis offset, OY represents a Y-axis offset, and the connecting line L2 represents a connecting line between the node of the dragged component and the second associated node.
As should be appreciated, the quick drag component: when any one component P in the selected canvas performs the dragging operation.
The first step is as follows: and determining the unique identification of the component, the position of the flow node P and the type of the component P according to the component selected by the mouse.
The second step: and searching for the connection relation between the acquisition component P and other components according to the acquired component identification.
The third step: and acquiring information of a connection associated with the node P to be dragged and the flow component M1 and the possible M2 connected with the other end of the connection.
The fourth step: and obtaining the coordinate of the determined point after the dragging node P is dragged, calculating the new coordinate change of the dragging node, and calculating the bending point of the connecting line and the coordinate position of the connecting line according to the Y coordinate offset of the M1 and M2 nodes.
The fifth step: and updating the node information stored in the canvas to provide calculation support for other subsequent operations.
Example two
The embodiment provides a quick drawing system of a flow chart;
a system for fast rendering of a flow chart, comprising:
a first response module configured to: responding to a newly added request of the component node, and judging whether the newly added component node is newly dragged into a component node from outside the canvas or newly added with a component node at the periphery of the selected component node;
a first rendering module configured to: if the component node is newly dragged from the outside of the canvas, judging whether a mutual shielding relation exists between the newly dragged component node and the existing component node in the current canvas; if the mutual shielding relation exists, calculating the coordinate position of the newly dragged component node according to the position of the existing component node, and translating the newly dragged component node downwards according to the calculation result;
a second rendering module configured to: if a component node is newly added on the periphery of the selected component node, determining the direction of a connecting line according to the whole layout mode of the process, and determining the coordinates of two end points of the connecting line according to the set distance; determining coordinates of four corner points of the newly added component node according to the type of the newly added component node; generating a newly added component node according to the coordinates of the four corner points; and realizing the connection between the nodes of the newly added components and the nodes of the selected components according to the connection direction and the connection end point coordinates.
Further, the direction of the connecting line is determined according to the overall layout mode of the process, and the coordinates of two end points of the connecting line are determined according to the set distance; the method specifically comprises the following steps:
the coordinates of the first end point are the center points of the boundary lines of the selected component nodes; the selected component node boundary line is a boundary on the selected component node close to the newly added component;
and the coordinate of the second end point is a coordinate determined by drawing a ray towards the direction of the connecting line from the central point of the boundary line of the selected component node as a starting point, and intercepting the ray according to the set distance.
Further, the system further comprises:
a second response module configured to: responding to a deletion request of the component node, and acquiring a coordinate position of the component node to be deleted and an associated line of the component node to be deleted;
a first acquisition module configured to: acquiring an association component connected with an association line;
a deletion module configured to: deleting the nodes of the components to be deleted, and calculating the relative positions of the associated components according to the coordinates of the associated components; determining a connection boundary when the associated components are connected with each other according to the relative positions of the associated components; and according to the connection boundary, taking the central point of the connection boundary as the coordinates of the start point and the end point of the new connecting line between the associated components, and connecting the associated components according to the coordinates of the start point and the end point of the new connecting line.
Further, the system further comprises:
a third response module configured to: responding to a dragging request of a component node, and acquiring a connecting line associated with the dragged component node;
a second acquisition module configured to: acquiring an associated component connected with a connecting line associated with a dragged component node;
a drag module configured to: acquiring an original coordinate position and a target coordinate position of a node of a dragged component; calculating the offset according to the original coordinate position and the target coordinate position; and calculating the bending point of a connecting line between the node of the dragged component and the associated node and the coordinate positions of end points at two ends of the connecting line according to the offset, thereby realizing the dragging of the node of the dragged component.
It should be noted here that the response module, the first rendering module and the second rendering module correspond to steps S101 to S103 in the first embodiment, and the modules are the same as the examples and application scenarios realized by the corresponding steps, but are not limited to the disclosure of the first embodiment. It should be noted that the modules described above as part of a system may be implemented in a computer system such as a set of computer-executable instructions.
In the foregoing embodiments, the descriptions of the embodiments have different emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
The proposed system can be implemented in other ways. For example, the above-described system embodiments are merely illustrative, and for example, the division of the above-described modules is merely a logical functional division, and in actual implementation, there may be another division, for example, a plurality of modules may be combined or may be integrated into another system, or some features may be omitted, or not executed.
EXAMPLE III
The present embodiment also provides an electronic device, including: one or more processors, one or more memories, and one or more computer programs; wherein, a processor is connected with the memory, the one or more computer programs are stored in the memory, and when the electronic device runs, the processor executes the one or more computer programs stored in the memory, so as to make the electronic device execute the method according to the first embodiment.
It should be understood that in this embodiment, the processor may be a central processing unit CPU, and the processor may also be other general purpose processors, digital signal processors DSP, application specific integrated circuits ASIC, off-the-shelf programmable gate arrays FPGA or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, and so on. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory may include both read-only memory and random access memory and may provide instructions and data to the processor, and a portion of the memory may also include non-volatile random access memory. For example, the memory may also store device type information.
In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in a processor or instructions in the form of software.
The method in the first embodiment may be directly implemented by a hardware processor, or may be implemented by a combination of hardware and software modules in the processor. The software modules may be located in ram, flash, rom, prom, or eprom, registers, among other storage media as is well known in the art. The storage medium is located in a memory, and a processor reads information in the memory and completes the steps of the method in combination with hardware of the processor. To avoid repetition, it is not described in detail here.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the technical solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
Example four
The present embodiments also provide a computer-readable storage medium for storing computer instructions, which when executed by a processor, perform the method of the first embodiment.
The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (10)
1. A method for quickly drawing a flow chart is characterized by comprising the following steps:
responding to a newly added request of the component node, and judging whether the newly added component node is newly dragged into a component node from outside the canvas or a component node is newly added at the periphery of the selected component node;
if the component node is newly dragged from the outside of the canvas, judging whether a mutual shielding relation exists between the newly dragged component node and the existing component node in the current canvas; if the mutual shielding relation exists, calculating the coordinate position of the newly dragged component node according to the position of the existing component node, and translating the newly dragged component node downwards according to the calculation result;
if a component node is newly added on the periphery of the selected component node, determining the direction of a connecting line according to the whole layout mode of the process, and determining the coordinates of two end points of the connecting line according to the set distance; determining coordinates of four corner points of the newly added component node according to the type of the newly added component node; generating a newly added component node according to the coordinates of the four corner points; and realizing the connection between the nodes of the newly added components and the nodes of the selected components according to the connection direction and the connection end point coordinates.
2. The method for rapidly drawing a flow chart according to claim 1, wherein the direction of the connecting line is determined according to the overall layout mode of the flow chart, and the coordinates of two end points of the connecting line are determined according to the set distance; the method specifically comprises the following steps:
the coordinates of the first end point are the center points of the boundary lines of the selected component nodes; the selected component node boundary line is a boundary on the selected component node, which is close to the newly added component;
and the coordinate of the second end point is a coordinate determined by drawing a ray towards the direction of the connecting line from the central point of the boundary line of the selected component node as a starting point, and intercepting the ray according to the set distance.
3. The method for fast rendering of a flow chart as claimed in claim 1, said method further comprising:
responding to a deletion request of the component node, and acquiring a coordinate position of the component node to be deleted and an associated line of the component node to be deleted;
acquiring an association component connected with an association line;
deleting the node of the component to be deleted, and calculating the relative position of the associated component according to the coordinate of the associated component; determining a connection boundary when the associated components are connected with each other according to the relative positions of the associated components; and according to the connection boundary, taking the central point of the connection boundary as the coordinates of the start point and the end point of the new connecting line between the associated components, and connecting the associated components according to the coordinates of the start point and the end point of the new connecting line.
4. The method for fast rendering of a flow chart as claimed in claim 1, said method further comprising:
responding to a dragging request of a component node, and acquiring a connecting line associated with the dragged component node;
acquiring an associated component connected with a connecting line associated with a dragged component node;
acquiring an original coordinate position and a target coordinate position of a dragged component node; calculating the offset according to the original coordinate position and the target coordinate position; and calculating the bending point of a connecting line between the node of the dragged component and the associated node and the coordinate positions of end points at two ends of the connecting line according to the offset, thereby realizing the dragging of the node of the dragged component.
5. A system for fast rendering of a flow chart, comprising:
a first response module configured to: responding to a newly added request of the component node, and judging whether the newly added component node is newly dragged into a component node from outside the canvas or a component node is newly added at the periphery of the selected component node;
a first rendering module configured to: if a component node is newly dragged from the outside of the canvas, judging whether a mutual shielding relation exists between the newly dragged component node and the existing component node in the current canvas; if the mutual shielding relation exists, calculating the coordinate position of the newly dragged component node according to the position of the existing component node, and translating the newly dragged component node downwards according to the calculation result;
a second rendering module configured to: if a component node is newly added on the periphery of the selected component node, determining the direction of a connecting line according to the whole layout mode of the process, and determining the coordinates of two end points of the connecting line according to the set distance; determining coordinates of four corner points of the newly added component node according to the type of the newly added component node; generating a newly added component node according to the coordinates of the four corner points; and realizing the connection between the nodes of the newly added components and the nodes of the selected components according to the connection direction and the connection end point coordinates.
6. The system for rapidly rendering a flowchart according to claim 5, wherein the direction of the connecting line is determined according to the overall layout mode of the flowchart, and the coordinates of the two end points of the connecting line are determined according to the set distance; the method specifically comprises the following steps:
the coordinates of the first end point are the center points of the boundary lines of the selected component nodes; the selected component node boundary line is a boundary on the selected component node close to the newly added component;
and the coordinate of the second end point is a coordinate determined by drawing a ray towards the direction of the connecting line from the central point of the boundary line of the selected component node as a starting point, and intercepting the ray according to the set distance.
7. The system for fast rendering of a flowchart as recited in claim 5, further comprising:
a second response module configured to: responding to a deletion request of the component node, and acquiring a coordinate position of the component node to be deleted and an associated line of the component node to be deleted;
a first acquisition module configured to: acquiring an association component connected with an association line;
a deletion module configured to: deleting the node of the component to be deleted, and calculating the relative position of the associated component according to the coordinate of the associated component; determining a connection boundary when the associated components are connected with each other according to the relative positions of the associated components; and according to the connection boundary, taking the central point of the connection boundary as the coordinates of the start point and the end point of the new connecting line between the associated components, and connecting the associated components according to the coordinates of the start point and the end point of the new connecting line.
8. The system for fast rendering of a flowchart as recited in claim 5, further comprising:
a third response module configured to: responding to a dragging request of a component node, and acquiring a connecting line associated with the dragged component node;
a second acquisition module configured to: acquiring an associated component connected with a connecting line associated with a dragged component node;
a drag module configured to: acquiring an original coordinate position and a target coordinate position of a dragged component node; calculating the offset according to the original coordinate position and the target coordinate position; and calculating a bending point of a connecting line between the node of the dragged component and the associated node and coordinate positions of end points at two ends of the connecting line according to the offset, thereby realizing dragging of the node of the dragged component.
9. An electronic device, comprising:
a memory for non-transitory storage of computer readable instructions; and
a processor for executing the computer readable instructions,
wherein the computer readable instructions, when executed by the processor, perform the method of any of claims 1-7.
10. A storage medium storing non-transitory computer-readable instructions, wherein the non-transitory computer-readable instructions, when executed by a computer, perform the instructions of the method of any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210999940.0A CN115393474A (en) | 2022-08-19 | 2022-08-19 | Method and system for rapidly drawing flow chart |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210999940.0A CN115393474A (en) | 2022-08-19 | 2022-08-19 | Method and system for rapidly drawing flow chart |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115393474A true CN115393474A (en) | 2022-11-25 |
Family
ID=84120975
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210999940.0A Pending CN115393474A (en) | 2022-08-19 | 2022-08-19 | Method and system for rapidly drawing flow chart |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115393474A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116167365A (en) * | 2023-04-18 | 2023-05-26 | 安徽思高智能科技有限公司 | Flow chart generation method based on form template |
| CN116860222A (en) * | 2023-08-21 | 2023-10-10 | 深圳思谋信息科技有限公司 | Algorithm flow editing method and related device |
-
2022
- 2022-08-19 CN CN202210999940.0A patent/CN115393474A/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116167365A (en) * | 2023-04-18 | 2023-05-26 | 安徽思高智能科技有限公司 | Flow chart generation method based on form template |
| CN116860222A (en) * | 2023-08-21 | 2023-10-10 | 深圳思谋信息科技有限公司 | Algorithm flow editing method and related device |
| CN116860222B (en) * | 2023-08-21 | 2023-12-15 | 深圳思谋信息科技有限公司 | Algorithm flow editing method and related device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN115393474A (en) | Method and system for rapidly drawing flow chart | |
| CN107898393B (en) | Block adjusting method and device for cleaning robot and robot | |
| CN109753641B (en) | Method and device for changing object position, electronic equipment and storage medium | |
| CN109324722B (en) | Method, device and equipment for adding nodes of thought guide graph and storage medium | |
| CN110675471B (en) | Node connection line generation method, device, equipment and storage medium | |
| JP2019046457A (en) | Method, apparatus, and device for generating visual model layout of space | |
| CN110941937B (en) | Electronic device, package drawing generation method, and computer-readable storage medium | |
| CN110247794B (en) | Topological graph display method and device in multiple layout modes | |
| CN112084557A (en) | Method, device and equipment for quickly calculating house type design area and storage medium | |
| CN111241643A (en) | Method and device for machining polygonal cabinet and electronic equipment | |
| CN106919762B (en) | Finite element grid array modeling method | |
| CN114241032A (en) | Area analysis-based region division method, device, equipment and storage medium | |
| CN112836257A (en) | Indoor pipeline deployment method and system based on BIM and multi-terminal cooperation | |
| CN111914046A (en) | Generation method and device of target seating chart and computer equipment | |
| CN116342745A (en) | Editing method and device for lane line data, electronic equipment and storage medium | |
| CN113158281A (en) | Pipeline arrangement model generation method and device, computer equipment and storage medium | |
| CN111104707B (en) | Method, system and medium for constructing middle and outer scaffold of digital building | |
| CN110490952B (en) | Drawing method of welding process diagram | |
| CN113808023A (en) | Map data storage method and device, cleaning robot and storage medium | |
| CN108920749B (en) | Pipeline two-dimensional and three-dimensional data updating method and device and computer readable storage medium | |
| CN113434935B (en) | Method, apparatus, computer device and readable storage medium for marking temporary size | |
| CN112765304B (en) | Automatic completion method and device for polyline boundary scatter points and related equipment | |
| CN113486624B (en) | Method and device for realizing automatic equidistant PCB wiring and electronic equipment | |
| CN115147628B (en) | House image data processing method and device, terminal equipment and medium | |
| CN115906225A (en) | Component net height analysis method and device and computer equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |