CN102004974B - Flow showing method and device - Google Patents
Flow showing method and device Download PDFInfo
- Publication number
- CN102004974B CN102004974B CN201010616426.1A CN201010616426A CN102004974B CN 102004974 B CN102004974 B CN 102004974B CN 201010616426 A CN201010616426 A CN 201010616426A CN 102004974 B CN102004974 B CN 102004974B
- Authority
- CN
- China
- Prior art keywords
- path
- node
- information
- module
- flow
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Landscapes
- Image Generation (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention provides a kind of flow showing method, comprising: step 102, describe according to the element defined in flow data file, obtain the information of the node in described flow process, the information in path; Step 104, according to the information of described node, the information in described path, draws described node, described path; Step 106, operates described node, described path, and repaints described node, described path according to the operation carried out.The present invention also provides a kind of flow process demonstration device.By the present invention, flow process can be represented neatly, comprising functions such as needs support curved path, support path pull, more can be user-friendly to.
Description
Technical field
The present invention relates to the visualization technique of operation flow, in particular to a kind of flow showing method and device.
Background technology
In many Large Information Systems, Business Stream is indispensable part.As the approval process of accounting voucher, the follow-up flow process etc. of customer sales chance.These stream data definitions often more complicated, and different business scopes are not only that flow logic can be different, and the data of transmission, flow nodes, processing mode also has a lot of difference.In order to the flow process set up according to different business model better being presented to user, the operation flow logic that user is browsed current, state are very clear, and need a set of like this assembly that represents, this assembly not only can meet above business demand, and in order to save development resources and cost, need to possess cross-platform, transplantable characteristic, in the middle of the product line that can be applied to different platform.
Analyze the data exhibiting assembly of current comparative maturity, can learn to possess cross-platform, seamless embedding and the assembly that represents for service logic flow data merely and few, major part is mainly used in and represents the statistics of basic report data.Wherein press close to most the Power Charts series of products having InfoSoft Global (P) company of our demand.This product realizes based on Flash technology, can meet most of demand point, but this assembly cannot support curved path, and path itself cannot carry out pulling layout, and cannot support closed loop between two nodes.And for a lot of service logic flow process, above-mentioned functions is indispensable part.
Therefore, need a kind of mode representing operation flow newly, flow process can be represented neatly, comprising functions such as needs support curved path, support path pull, more can be user-friendly to.
Summary of the invention
Technical matters to be solved by this invention is, needs a kind of mode representing operation flow newly, can represent flow process neatly, comprising functions such as needs support curved path, support path pull, more can be user-friendly to.
In view of this, the invention provides a kind of flow showing method, comprising: step 102, describe according to the element defined in flow data file, obtain the information of the node in described flow process, the information in path; Step 104, according to the information of described node, the information in described path, draws described node, described path; Step 106, operates described node, described path, and repaints described node, described path according to the operation carried out.By this technical scheme, user can adjust node, path.
In technique scheme, preferably, in described step 104, generate predefined graphic elements, for drawing described node, described path.Pre-defined algorithm can be adopted to generate various graphic elements.
In technique scheme, preferably, in described step 104, represented with curve or straight line two kinds of modes in described path, the type of described curve comprises Bezier.By this technical scheme, path can be presented by curve.
In technique scheme, preferably, in described step 106, described operation comprises: pull the label on described node, described path, described path; Select the display mode in described path.
In technique scheme, preferably, in described step 104, draw described node, described path by Flash.
The present invention also provides a kind of flow process demonstration device, comprising: data structure package module, describes, obtain the information of the node in described flow process, the information in path according to the element defined in flow data file; Integral layout administration module, according to the information of described node, the information in described path, draws described node, described path; User operation module, operates described node, described path for user, and described integral layout administration module also repaints described node, described path according to the operation carried out.By this technical scheme, user can adjust node, path.
In technique scheme, preferably, also comprising: pel factory module, generating predefine graphic elements, for drawing described node, described path; Described integral layout module adopts described graphic elements to draw described node, described path.Pel factory module can adopt pre-defined algorithm to generate various graphic elements.
In technique scheme, preferably, described path represents with curve or straight line two kinds of modes by described integral layout administration module, and the type of described curve comprises Bezier.By this technical scheme, path can be presented by curve.
In technique scheme, preferably, described operation comprises: described user is pulled the label on described node, described path, described path by described user operation module; Described user is by the display mode in path described in described user operation model choice.
In technique scheme, preferably, described integral layout administration module draws described node, described path by Flash.
By above technical scheme, a kind of flow showing method and device can be realized, flow process can be represented neatly, comprising functions such as needs support curved path, support path pull, more can be user-friendly to.
Accompanying drawing explanation
Fig. 1 is the process flow diagram of flow showing method according to an embodiment of the invention;
Fig. 2 is the block diagram of flow process demonstration device according to an embodiment of the invention;
Fig. 3 is the block schematic illustration of flow process demonstration device according to an embodiment of the invention;
Fig. 4 is the operating diagram of the pel factory module generation node of flow process demonstration device according to an embodiment of the invention;
Fig. 5 is the operating diagram in the pel factory module generation path of flow process demonstration device according to an embodiment of the invention;
Fig. 6 is the operating diagram that the data encapsulation module of flow process demonstration device according to an embodiment of the invention carries out data encapsulation;
Fig. 7 is the schematic diagram of the integral layout administration module drafting node of flow process demonstration device according to an embodiment of the invention;
Fig. 8 is the schematic diagram of the integral layout administration module drawing path of flow process demonstration device according to an embodiment of the invention;
Fig. 9 is the schematic diagram that flow process demonstration device according to an embodiment of the invention realizes integration of user interaction functionality;
Figure 10 is the schematic diagram of the visible process that flow process demonstration device according to an embodiment of the invention is drawn.
Embodiment
In order to more clearly understand above-mentioned purpose of the present invention, feature and advantage, below in conjunction with the drawings and specific embodiments, the present invention is further described in detail.
Set forth a lot of detail in the following description so that fully understand the present invention, but the present invention can also adopt other to be different from other modes described here and implement, and therefore, the present invention is not limited to the restriction of following public specific embodiment.
Fig. 1 is the process flow diagram of flow showing method according to an embodiment of the invention.
As shown in Figure 1, the invention provides a kind of flow showing method, comprising: step 102, describe according to the element defined in flow data file, obtain the information of the node in described flow process, the information in path; Step 104, according to the information of described node, the information in described path, draws described node, described path; Step 106, operates described node, described path, and repaints described node, described path according to the operation carried out.By this technical scheme, user can adjust node, path.
In technique scheme, in described step 104, generate predefined graphic elements, for drawing described node, described path.Pre-defined algorithm can be adopted to generate various graphic elements.
In technique scheme, in described step 104, represented with curve or straight line two kinds of modes by described path drawing, the type of described curve comprises Bezier.By this technical scheme, path can be presented by curve.
In technique scheme, in described step 106, described operation comprises: pull the label on described node, described path, described path; Select the display mode in described path.
In technique scheme, in described step 104, draw described node, described path by Flash.
Fig. 2 is the block diagram of flow process demonstration device according to an embodiment of the invention.
As shown in Figure 2, the present invention also provides a kind of flow process demonstration device 200, comprising: data structure package module 202, according in the data file of flow process, obtains the information of the node in described flow process, the information in path; Integral layout administration module 204, according to the information of described node, the information in described path, draws described node, described path; User operation module 206, operates described node, described path for user, and described integral layout administration module 204 also repaints described node, described path according to the operation carried out.By this technical scheme, user can adjust node, path.
In technique scheme, also comprise: pel factory module 208, generates predefined graphic elements, for drawing described node, described path; Described integral layout module 204 adopts described graphic elements to draw described node, described path.Pel factory module 208 can adopt pre-defined algorithm to generate various graphic elements.
In technique scheme, described path drawing is curve by described integral layout administration module 204, and the type of described curve comprises Bezier.By this technical scheme, path can be presented by curve.
In technique scheme, described operation comprises: described user is pulled the label on described node, described path, described path by described user operation module 206; Described user selects the display mode in described path by described user operation module 206.
In technique scheme, described integral layout administration module 204 draws described node, described path by Flash.
Fig. 3 is the block schematic illustration of flow process demonstration device according to an embodiment of the invention.
As shown in Figure 3, in the present embodiment, flow process demonstration device can comprise four modules:
Pel factory module 302: by importing parameter into, generates the various basic figure element for drawing node, path.As: polygon color lump node, icon node, camber line, dotted line etc.
Pel factory module 302 uses singlet, and factory mode realizes.Unified encapsulation has been carried out to the various basic figure element method for drafting that process flow diagram is used.Achieving of this module: node represents supports various figure, color matching, and Custom Icons, and can with static or dynamic mode output information problem.Working method can enter shown in Fig. 4, the nodal information namely by importing into, reads color wherein, draws the information such as shape or icon path, then uses the basic function interface that Flash provides, draws.In order to produce the special-effect of node pel, pel factory module 302 can be carried out matrix to color data and be added multiplication generation gradient color, and shows 3-D effect in the mode combining fundamental figure.As round platform body: pel factory module 302 can use two ellipsoid body and trapezoidal and adjust it and block der group formed body itself, finally uses gradient color to play up and shows lighting effect.
The principle of the output of pel factory module 302 process path line, as shown in Figure 5.For the drafting of curved path, achieve the flow logic relation represented between each transaction nodes, comprise many condition branch and loop redirect demand.Concrete drafting relates to two aspects, choosing and vectorial drafting of Bezier reference mark.In order to curve can be made more attractive in appearance, our reference mark uses trigonometric function to calculate, look for the method with circle path point: node radius angle setting 120 degree, according to node coordinate, calculate chord length, radius length, finally determines the perpendicular bisector of radius node line string and the intersection point of circular arc, namely our reference mark of choosing.Determine starting point, terminal, reference mark we also just obtain a unique Bezier.
Vector drafting we take to be parallel to circular arc string, on curve tangent line point of contact, drawing the mode of isosceles triangle.Vertex of a triangle is our point of contact, and sensing is that we are from terminal to the vector direction of starting point string.Leg-of-mutton two waist length choose 15 pixels, and angle chooses 30 degree, thus determine base two point coordinate of isosceles triangle.Flash is finally used to provide basic function to draw out vectorial little triangle.
Data structure package module 304:
Data structure package module 304 is for the node used in assembly, and all related data structures in path carry out encapsulation definition.Corresponding object structure can be converted into by data structure package module 304 after Xml persistant data is loaded into, be delivered to other modules and use.Nodal information comprises: orientation, color, size, information, associated path data etc.; Routing information comprises: head and the tail node data, color, live width etc.The working method of data structure package module 304 as shown in Figure 6, the display of left side label be XML file descriptor format for a node, right side is shown as the data structure display format of this node.
At this, the data giving the XML file of node illustrate:
And the data of path XML file illustrate:
| Path XML bookmark name | Label explanation |
| Strength | Path width |
| Label | Path label |
| From | Path starting point |
| To | Path termination |
| Curve_type | Path form (straight line, curve) |
| Curve_height | Camber |
| Color | Path color |
| Float | Float label in path, mouse mobile display |
Integral layout administration module 306:
Integral layout administration module 306 uses singlet pattern to realize equally, according to the node imported into, and path data information, the pixel orientation of location node on painting canvas.When user pulls layout to assembly element simultaneously, also need the change of real-time response canvas element data, again determine node orientation and path locus.Process due to path locus is the line based on secondary Bezier, and therefore carrying out controlling calculation to line radian is also one of critical function of this module.
Integral layout administration module 306 draws the flow process of node as shown in Figure 7:
Step 702, gets parms;
Step 704, determines whether to use Custom Icons from parameter;
Step 706, as do not used Custom Icons, according to the primitive information provided in parameter, calling the method that element draws factory, generating node elements;
Step 708, as used Custom Icons, is then loaded into corresponding picture by api interface from external file;
Step 710, according to the initial position provided in parameter, carries out painting canvas layout.
Step 712, if comprise comment in parameter, also needs to create node label element, additional on this node as daughter element.
Step 714, last registered user pulls readjustment computing function, and for pulling in process user, the orientation of real-time computing node in painting canvas, carries out layout.
The flow process of integral layout administration module 306 drawing path is as shown in Figure 8:
Step 802, acquisition approach parameter;
Step 804, first determines path line by the first nodal information in parameter;
Step 806, judges the drafting form in path according to curve sign;
Step 808, if straight line then directly draws line pel;
Step 810, if curve, the technical scheme due to this enforcement is the equation curve based on Bezier, therefore needs the reference mark finding Bezier;
Step 812, draws the pel of Bezier;
Step 814, determines radian with reference to orientation, Bezier reference mark, curve plotting pel and control line pel again after waiting reference mark to determine.
Step 816, step curved path itself can carry out radian control, distributing adjustment, after therefore path element generates, also needs registered user to pull readjustment computing function, with node call back function function, for pulling in process user, real-time calculating path.
Step 818, draws head and the tail vector direction;
Step 820, drawing path label element, completes the drawing process in whole path.
Wherein, integral layout administration module is to the support of the functions such as node, the pulling of path, adjustment, and realizing interface can as shown in Figure 9, and in Fig. 9, square frame marks element with using mouse per family and pulls layout, greatly strengthen the expressive force of assembly.User can also use and click selecting paths manifestation mode by mouse right button simultaneously.
Frame supported module 308:
Frame supported module 308 is loading entrances of whole assembly, encapsulates the display frame of Flash, layer, actions menu, and the loading of persistant data.Xml data Load Mapping is corresponding object structure, and the node obtained other modules calculated, and graphics path element is shown on painting canvas, and framework support module 308 is also for responding the feature operations such as the pulling of process user, adjustment simultaneously.
Finally, the flow path visual figure drawn according to the technical scheme of the present embodiment can be as shown in Figure 10.
According to technical scheme of the present invention, can realize a kind of flow showing method and device, its advantage is:
1) Custom Icons node: allow user to use picture resource to show as node.
2) provide element figure node: assembly provides various shape method for drafting, allow user to be shown as node by parameter configuration.
3) support curved path, closed loop: parameter configuration can be passed through in path, cross user operation and change its morphologic appearance.
4) path pulls layout: for curved path, can pull the orientation that reference mark changes curve, radian by mouse.
5) show that label pulls layout: more enough use icons pull the real position changing label.Avoid layout occlusion.
6) path display mode change: path can switch between straight line and curve.
The foregoing is only the preferred embodiments of the present invention, be not limited to the present invention, for a person skilled in the art, the present invention can have various modifications and variations.Within the spirit and principles in the present invention all, any amendment done, equivalent replacement, improvement etc., all should be included within protection scope of the present invention.
Claims (4)
1. a flow showing method, is characterized in that, comprising:
Step 102, describe according to the element defined in flow data file, obtain the information of the node in described flow process, the information in path, wherein, described flow data file comprises XML file;
Step 104, according to the information of described node, the information in described path, draw described node, described path, draw described node, described path by Flash, represented with curve or straight line two kinds of modes in described path, the type of described curve comprises Bayside curve;
Step 106, operates described node, described path, and repaints described node, described path according to the operation carried out;
Step 108, registered user pulls readjustment computing function.
2. flow showing method according to claim 1, is characterized in that, in described step 104, generates predefined graphic elements, for drawing described node, described path.
3. a flow process demonstration device, is characterized in that, comprising:
Data structure package module, describe according to the element defined in flow data file, obtain the information of the node in described flow process, the information in path, wherein, described flow data file comprises XML file;
Integral layout administration module, according to the information of described node, the information in described path, draw described node, described path, described node, described path is drawn by Flash, described path represents with curve or straight line two kinds of modes by described integral layout administration module, and the type of described curve comprises Bezier;
User operation module, operates described node, described path for user, and described integral layout administration module also repaints described node, described path according to the operation carried out, and wherein, described operation comprises:
Described user is pulled the label on described node, described path, described path by described user operation module;
Registered user pulls readjustment computing function.
4. flow process demonstration device according to claim 3, is characterized in that, also comprise:
Pel factory module, generates predefined graphic elements, for drawing described node, described path;
Described integral layout module adopts described graphic elements to draw described node, described path.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201010616426.1A CN102004974B (en) | 2010-12-30 | 2010-12-30 | Flow showing method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201010616426.1A CN102004974B (en) | 2010-12-30 | 2010-12-30 | Flow showing method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102004974A CN102004974A (en) | 2011-04-06 |
| CN102004974B true CN102004974B (en) | 2015-10-21 |
Family
ID=43812321
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201010616426.1A Active CN102004974B (en) | 2010-12-30 | 2010-12-30 | Flow showing method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102004974B (en) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104346170A (en) * | 2014-10-15 | 2015-02-11 | 浪潮(北京)电子信息产业有限公司 | Canvas-based topological graph generating method and device |
| CN106875454A (en) * | 2016-07-20 | 2017-06-20 | 阿里巴巴集团控股有限公司 | A kind of gradient color generation method and device |
| CN107391467A (en) * | 2017-06-08 | 2017-11-24 | 北京小度信息科技有限公司 | Report component layout information processing method and processing device |
| CN111723183B (en) * | 2019-03-20 | 2023-05-23 | 上海智臻智能网络科技股份有限公司 | Method and device for adjusting dialogue flow in intelligent question and answer |
| CN110363828A (en) * | 2019-06-18 | 2019-10-22 | 深圳壹账通智能科技有限公司 | A kind of method for drawing flow chart and the equipment for drawing flow chart |
| CN110781239A (en) * | 2019-10-25 | 2020-02-11 | 北京锐安科技有限公司 | Data display method, device, equipment and storage medium |
| CN111381757A (en) * | 2020-03-11 | 2020-07-07 | 上海索辰信息科技有限公司 | Timing diagram activity callback processing system and method |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101650798A (en) * | 2009-09-14 | 2010-02-17 | 中国科学院计算技术研究所 | Flow modeling method |
| CN101770523A (en) * | 2008-12-29 | 2010-07-07 | 北京卫星环境工程研究所 | Design method of production flow |
| CN101784058A (en) * | 2009-12-30 | 2010-07-21 | 北京市天元网络技术股份有限公司 | Method and device for selecting network performance measuring points |
| CN101876900A (en) * | 2009-11-24 | 2010-11-03 | 恒生电子股份有限公司 | Method for automatically adjusting and distributing flow chart and device thereof |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101882080A (en) * | 2010-06-18 | 2010-11-10 | 北京神州泰岳软件股份有限公司 | Method for customizing tooltip of topological graph node |
| CN101859249B (en) * | 2010-07-15 | 2013-04-24 | 山东中创软件工程股份有限公司 | Method, device and system for realizing automatic flow with manual tasks |
-
2010
- 2010-12-30 CN CN201010616426.1A patent/CN102004974B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101770523A (en) * | 2008-12-29 | 2010-07-07 | 北京卫星环境工程研究所 | Design method of production flow |
| CN101650798A (en) * | 2009-09-14 | 2010-02-17 | 中国科学院计算技术研究所 | Flow modeling method |
| CN101876900A (en) * | 2009-11-24 | 2010-11-03 | 恒生电子股份有限公司 | Method for automatically adjusting and distributing flow chart and device thereof |
| CN101784058A (en) * | 2009-12-30 | 2010-07-21 | 北京市天元网络技术股份有限公司 | Method and device for selecting network performance measuring points |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102004974A (en) | 2011-04-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102004974B (en) | Flow showing method and device | |
| CN102136946B (en) | Optical network topology graph drawing method and topological subsystem | |
| CN103019682B (en) | A kind of method being combined in display data in SVG by self-defined figure | |
| CN112182700A (en) | BIM three-dimensional building model display method based on Web end | |
| US7930678B2 (en) | Visualizing and modeling interaction relationships among entities | |
| CN104239044A (en) | Dynamic generation method for graphical user interface | |
| CN106990961B (en) | Method for establishing WebGL graphic rendering engine | |
| CN104254878A (en) | Apparatus and method for creating three-dimensional object | |
| CN109471626A (en) | Page logic structure, page generation method, page data processing method and device | |
| CN108769361B (en) | Control method of terminal wallpaper, terminal and computer-readable storage medium | |
| CN102903138B (en) | A kind of two-dimensional digital character skeleton method of operating considering shape | |
| CN106846490A (en) | A kind of cambered surface model generating method and device | |
| CN113744417B (en) | Dimension marking method of complex node model | |
| CN110764757B (en) | Interactive graphic drawing engine based on HTML5 | |
| CN109903388A (en) | The cloud processing method and system of cabinet body generation three-view diagram | |
| CN105867930A (en) | Display method and device for function calling relation and terminal | |
| CN103295258A (en) | Novel multifunctional atmospheric science data graphic rendering engine | |
| CN112562036B (en) | Method for drawing configuration system turnout icon by linear polygon | |
| CN105740543A (en) | QML based graphical electric power system modeling method and modeling system | |
| CN102663160A (en) | Method for constructing three-dimensional physical circuit design model | |
| CN107728984A (en) | A kind of virtual reality picture display control program | |
| CN108986034A (en) | A kind of raster data coordinate transformation method, system, terminal device and storage medium | |
| CN116721211A (en) | Drawing method of three-dimensional military plotting icon | |
| CN101303649B (en) | Method and apparatus for generating model building language geometric notation | |
| CN208522789U (en) | A kind of electronic display board management system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 100094 Haidian District North Road, Beijing, No. 68 Applicant after: Yonyou Network Technology Co., Ltd. Address before: 100094 Beijing city Haidian District North Road No. 68, UFIDA Software Park Applicant before: UFIDA Software Co., Ltd. |
|
| COR | Change of bibliographic data | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant |