CN112132926A - Flow chart primitive style designer based on scalable vector diagram and design method thereof - Google Patents
Flow chart primitive style designer based on scalable vector diagram and design method thereof Download PDFInfo
- Publication number
- CN112132926A CN112132926A CN202010918096.5A CN202010918096A CN112132926A CN 112132926 A CN112132926 A CN 112132926A CN 202010918096 A CN202010918096 A CN 202010918096A CN 112132926 A CN112132926 A CN 112132926A
- Authority
- CN
- China
- Prior art keywords
- primitive
- style
- scalable vector
- label
- attribute
- 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
- 238000010586 diagram Methods 0.000 title claims abstract description 85
- 238000000034 method Methods 0.000 title claims abstract description 40
- 238000013461 design Methods 0.000 title claims abstract description 8
- 230000000694 effects Effects 0.000 claims description 37
- 239000003086 colorant Substances 0.000 claims description 18
- 230000005012 migration Effects 0.000 claims description 6
- 238000013508 migration Methods 0.000 claims description 6
- 230000007704 transition Effects 0.000 claims description 6
- 239000000306 component Substances 0.000 description 27
- 230000008569 process Effects 0.000 description 14
- 230000000007 visual effect Effects 0.000 description 9
- 238000004590 computer program Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000012800 visualization Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000002860 competitive effect Effects 0.000 description 1
- 239000008358 core component Substances 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000009969 flowable effect Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
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/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/001—Texturing; Colouring; Generation of texture or colour
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a flow chart primitive style designer based on a scalable vector diagram and a design method thereof, wherein the designer comprises the following steps: a scalable vector graphics generator component for performing: generating scalable vector diagrams of the four types of flow chart primitives according to the default style so as to customize the style of the flow chart primitives by a user; a scalable vector graphics editor component to perform: modifying the attribute of each label of the corresponding scalable vector diagram on the basis of the default style flow diagram primitive generated by the scalable vector diagram generator component; a flow chart style template generation component for performing: a flow style template file is generated for use by the flow designer. The invention provides a flow chart primitive style customizing function based on a scalable vector diagram drawing technology, so that the flow designer and the host system have the same style and the unified style.
Description
Technical Field
The invention relates to a flow chart primitive style designer based on a scalable vector diagram and a design method thereof, belonging to the technical field of computer business flow management.
Background
The process is a sequence flow formed by a group of activities according to a certain sequence, and an excellent business process system can improve the competitive advantage of enterprises and create great value for the enterprises. The generation of BPM provides thought guidance and technical support for enterprises to construct excellent business process systems. In order to enable a business process to operate normally, a process engine capable of operating a process well is required in a business process system.
Common open source process engines include jBPM, Activiti, Flowable, and the like. These flow engines are all capable of operating properly with flows that follow the BPMN2.0 specification, so developers often need to write business flows into XML files that conform to the specification for the flow engines to operate. Manually writing the flow definition file in the XML form is time-consuming and labor-consuming, and the flow cannot be visually displayed. To this end, many process engines provide online visual process editors. The difficulty of compiling the flow definition file is greatly improved by using a visual tool, and meanwhile, the flow definition is more visual, and the flow is conveniently checked and managed. However, in the visual process editor provided by the existing open source process engine, the process primitive has a fixed style and a single style, and cannot meet the requirement of different services and different scenes on the unification of visual interface styles.
Disclosure of Invention
The invention aims to overcome the defects of the prior art and provides a flow chart primitive style designer based on a scalable vector diagram and a design method thereof.
To solve the above technical problem, the present invention provides a scalable vector graphics based flowchart primitive style designer, comprising:
a scalable vector graphics generator component for performing: generating scalable vector diagrams of the four types of flow chart primitives according to the default style so as to customize the style of the flow chart primitives by a user;
a scalable vector graphics editor component to perform: modifying the attribute of each label of the corresponding scalable vector diagram on the basis of the default style flow diagram primitive generated by the scalable vector diagram generator component;
a flow chart style template generation component for performing: a flow style template file is generated for use by the flow designer.
As a preferred embodiment, the four types of flow chart primitives include: the system comprises an activity primitive, an event primitive, a gateway primitive and a migration line primitive, wherein the activity primitive comprises an artificial activity primitive, an automatic activity primitive and a sub-process primitive; the event primitives comprise a start event primitive, an end event primitive and an end event primitive; the gateway primitives comprise a single gateway primitive, a parallel gateway primitive and a plurality of gateway primitives.
As a preferred embodiment, the editable style of the active primitive comprises:
the thickness and the color of the rectangular frame respectively correspond to the 'stroke-width' and 'stroke' attributes of the 'rect' label in the SVG file;
the width, the height, the filling color and the fillet radius of the rectangle respectively correspond to the attributes of width, height, fill, rx and ry of a rect label in the SVG file;
the size and position of the characters, the size of the characters corresponds to the attribute of "font-size" of the "text" label, and the position of the characters is realized by changing the coordinates of the text box;
the size, the position and the filling color of the mark are controlled by setting a picture scaling attribute, the mark position is realized by modifying a 'translate' attribute, and the filling color is realized by modifying a 'fill' attribute of a 'path' label of the drawing mark.
As a preferred embodiment, the editable style of the event primitive comprises:
the thickness and the color of the circular frame correspond to the attributes of 'stroke-width' and 'stroke' of the 'circle' label in the SVG file;
the circle radius and the filling color correspond to the r and the file attributes of the circle label in the SVG file;
the text size corresponds to the "font-size" attribute of the "text" tag in the SVG file.
As a preferred embodiment, the editable style of the gateway primitive comprises:
the thickness and the color of the square frame correspond to the attributes of 'stroke-width' and 'stroke' of a 'path' label of the square drawn by the SVG file;
the method comprises the following steps of (1) scaling times of a square and filling colors, wherein the scaling times are changed by modifying a'd' attribute of a 'path' label for drawing the square, and the filling colors are changed by modifying a 'fill' attribute;
the mark scaling factor and the color, the scaling factor is changed by modifying the'd' attribute of the 'path' label of the drawing mark, and the color is changed by modifying the 'fill' attribute.
As a preferred embodiment, the editable style of the transition line primitive includes:
the line thickness and line color correspond to the attributes of 'stroke-width', 'stroke' and 'file' of a 'path' label for drawing lines and arrows in the SVG file;
the text size corresponds to the "font-size" attribute of the "text" tag in the SVG.
The invention also provides a method for designing the primitive style of the flow chart based on the scalable vector diagram, which comprises the following steps:
a scalable vector map generator step for performing: generating scalable vector diagrams of the four types of flow chart primitives according to the default style so as to customize the style of the flow chart primitives by a user;
a scalable vector graphics editor step for performing: modifying the attribute of each label of the corresponding scalable vector diagram on the basis of the default style flow diagram primitive generated by the scalable vector diagram generator component;
a flow pattern template generation step for executing: a flow style template file is generated for use by the flow designer.
As a preferred embodiment, the four types of flow chart primitives include: the system comprises an activity primitive, an event primitive, a gateway primitive and a migration line primitive, wherein the activity primitive comprises an artificial activity primitive, an automatic activity primitive and a sub-process primitive; the event primitives comprise a start event primitive, an end event primitive and an end event primitive; the gateway primitives comprise a single gateway primitive, a parallel gateway primitive and a plurality of gateway primitives.
As a preferred embodiment, the editable style of the active primitive comprises:
the thickness and the color of the rectangular frame respectively correspond to the 'stroke-width' and 'stroke' attributes of the 'rect' label in the SVG file;
the width, the height, the filling color and the fillet radius of the rectangle respectively correspond to the attributes of width, height, fill, rx and ry of a rect label in the SVG file;
the size and position of the characters, the size of the characters corresponds to the attribute of "font-size" of the "text" label, and the position of the characters is realized by changing the coordinates of the text box;
the size, the position and the filling color of the mark are controlled by setting a picture scaling attribute, the mark position is realized by modifying a 'translate' attribute, and the filling color is realized by modifying a 'fill' attribute of a 'path' label of the drawn mark;
the editable style of the event primitive comprises:
the thickness and the color of the circular frame correspond to the attributes of 'stroke-width' and 'stroke' of the 'circle' label in the SVG file;
the circle radius and the filling color correspond to the r and the file attributes of the circle label in the SVG file;
the size of the characters corresponds to the attribute of 'font-size' of a 'text' label in the SVG file;
the editable styles of the gateway primitives include:
the thickness and the color of the square frame correspond to the attributes of 'stroke-width' and 'stroke' of a 'path' label of the square drawn by the SVG file;
the method comprises the following steps of (1) scaling times of a square and filling colors, wherein the scaling times are changed by modifying a'd' attribute of a 'path' label for drawing the square, and the filling colors are changed by modifying a 'fill' attribute;
marking scaling times and colors, wherein the scaling times are changed by modifying the property'd' of a 'path' label of a drawn mark, and the colors are changed by modifying the property 'fill';
the editable style of the transition line primitive comprises the following steps:
the line thickness and line color correspond to the attributes of 'stroke-width', 'stroke' and 'file' of a 'path' label for drawing lines and arrows in the SVG file;
the text size corresponds to the "font-size" attribute of the "text" tag in the SVG.
As a preferred embodiment, said scalable vector image generator step specifically comprises: the scalable vector diagram generator directly adds DOM nodes on an Html page according to a default flow diagram primitive pattern by utilizing the characteristic that a scalable vector diagram and an Html DOM tree are easy to operate by using Javascript language, so that the effect of drawing the flow diagram primitive of the default pattern is achieved.
The invention achieves the following beneficial effects: firstly, the invention provides a flow chart primitive style designer based on a scalable vector diagram and a design method thereof aiming at solving the technical problems that in a visual flow editor provided by the existing open source flow engine, the flow chart primitive style is fixed and the style is single, and the technical requirements of different services and different scenes on the unified visual interface style cannot be met. Secondly, the designer provides a visual operation interface, can conveniently and quickly customize the primitive style of the flow chart, and is easy to integrate with the flow designer. Thirdly, the scalable vector diagram generator component and the scalable vector diagram editor component of the invention modify the scalable vector diagram on the basis of the default style by operating the scalable vector diagram, and the operation is simple, convenient and efficient; the flow chart style template generating component generates a flow chart style template used by the flow designer, so that the flow chart style template is conveniently integrated with the existing flow designer, the consistency of the primitive styles of the flow designer and the style designer is ensured, and the primitive style of the flow designer meets the requirements of users.
Drawings
FIG. 1 is a schematic diagram of a scalable vector graphics based flow chart primitive style designer in an embodiment of the present invention;
2(a) to 2(k) are respectively a preview schematic diagram of a front-end visualization interface in an embodiment of the present invention;
FIG. 3 is a diagram of default style flow chart primitive effects in an embodiment of the present invention;
fig. 4 is a diagram of the effects of the customized style flow chart primitive in an embodiment of the present invention.
Detailed Description
The invention is further described below with reference to the accompanying drawings. The following examples are only for illustrating the technical solutions of the present invention more clearly, and the protection scope of the present invention is not limited thereby.
Example 1: the invention provides a scalable vector diagram-based flow diagram primitive style designer, which comprises three core components, namely a scalable vector diagram generator component, a scalable vector diagram editor component and a flow pattern type template generation component. The scalable vector diagram generator component and the scalable vector diagram editor component belong to a front-end component, are developed by using Javascript + Html + Css language, and are mainly used for visually displaying flow diagram primitive pictures; the flow chart style template generation component belongs to a back-end component, is developed by using Java language, and is mainly used for organizing flow chart primitive styles generated by the front end into a flow chart style template file for a flow designer to use, so that the flow chart primitive styles in the flow designer are consistent with the flow chart primitive styles in the front-end component.
The front-end visual main interface effect graph is shown in fig. 2(a), the upper left part of a window is a primitive tree which displays different types of primitive names; the lower left style part of the window is a toolbar, and different editing tools are provided according to the attributes of different primitives; and the right side of the window is a primitive picture preview sub-window which is used for displaying the scalable vector diagram of the primitive.
And the scalable vector diagram generator component is used for generating scalable vector diagrams of the four types of flow diagram primitives according to the default style, so that a user can customize the styles of the flow diagram primitives on the basis of the scalable vector diagram generator component. The visualization window is opened for the first time, and a user clicks a leaf node in a primitive tree in the visualization window, so that a corresponding primitive picture can be generated in the primitive preview sub-window, and the effect graph is shown in fig. 2(b) -2 (k). The four types of flow chart primitives corresponding to the primitive tree are respectively an active primitive, an event primitive, a gateway primitive and a migration line primitive, as shown in fig. 3. The activity primitives comprise artificial activity primitives, automatic activity primitives and sub-process primitives; the event primitives comprise a start event primitive, an end event primitive and an end event primitive; the gateway primitives comprise a single gateway primitive, a parallel gateway primitive and a plurality of gateway primitives. The scalable vector diagram generator utilizes Javascript language to easily operate the scalable vector diagram and the specification of an Html DOM tree, and adds DOM nodes on an Html page directly according to a default flow diagram primitive pattern, so that the effect of drawing the flow diagram primitive of the default pattern is achieved. The drawn flow chart primitive is highly consistent with the primitive effect displayed in the flow designer, and the primitive style is easier to change through coding, thereby providing a basis for realizing the customization of the flow chart primitive style.
And the scalable vector diagram editor component is used for modifying the attribute of each label of the scalable vector diagram corresponding to the scalable vector diagram on the basis of the flow diagram primitive of the default style generated by the scalable vector diagram generator component, so that the style of the primitive can be changed, and the effect of editing the style is achieved. The styles that can be edited for different primitives are different.
For active primitives, the editable styles are:
(1) the thickness and the color of the rectangular frame respectively correspond to the 'stroke-width' and 'stroke' attributes of the 'rect' label in the SVG file;
(2) the width, the height, the filling color and the fillet radius of the rectangle respectively correspond to the attributes of width, height, fill, rx and ry of a rect label in the SVG file;
(3) the size and position of the characters, the size of the characters corresponds to the attribute of "font-size" of the "text" label, and the position of the characters is realized by changing the coordinates of the text box;
(4) the size, the position and the filling color of the mark are controlled by setting a picture scaling attribute, the mark position is realized by modifying a 'translate' attribute, and the filling color is realized by modifying a 'fill' attribute of a 'path' label of the drawing mark.
For event primitives, the editable styles are:
(1) the thickness and the color of the circular frame correspond to the attributes of 'stroke-width' and 'stroke' of the 'circle' label in the SVG file;
(2) the circle radius and the filling color correspond to the r and the file attributes of the circle label in the SVG file;
(3) the text size corresponds to the "font-size" attribute of the "text" tag in the SVG file.
For the gateway primitive, the editable styles are:
(1) the thickness and the color of the square frame correspond to the attributes of 'stroke-width' and 'stroke' of a 'path' label of the square drawn by the SVG file;
(2) the method comprises the following steps of (1) scaling times of a square and filling colors, wherein the scaling times are changed by modifying a'd' attribute of a 'path' label for drawing the square, and the filling colors are changed by modifying a 'fill' attribute;
(3) the mark scaling factor and the color, the scaling factor is changed by modifying the'd' attribute of the 'path' label of the drawing mark, and the color is changed by modifying the 'fill' attribute.
For the transition line primitive, the editable styles include:
(1) the line thickness and line color correspond to the attributes of 'stroke-width', 'stroke' and 'file' of a 'path' label for drawing lines and arrows in the SVG file;
(2) the text size corresponds to the "font-size" attribute of the "text" tag in the SVG.
After the user edits the primitive style, the attributes of the scalable vector graphics corresponding to all the primitives can be summarized and transmitted to the back end for use as primitive style data.
The flow chart style template generation component comprises a flow chart style template generator and a file system and is used for generating a flow chart style template file used by a flow designer. The primitives in the flow designer have some other functional information, such as anchor points, whether scalable, etc., which look the same but are more complex than the primitives generated in the front-end component. Therefore, the primitive style of the flow chart generated by the front-end component cannot be directly applied to the flow designer, and the flow style template file with a fixed format is generated by using the style information collected by the front-end component, so that the effect that the primitive style of the flow chart in the flow designer is consistent with the primitive style of the flow chart in the front-end component can be achieved. FIG. 4 shows the flowchart primitive effect diagram after the style is changed, in which the primitives modify most of the default styles and have a greater distinction degree from the default styles, thus confirming the effectiveness of the present invention.
Example 2: the invention also provides a method for designing the primitive style of the flow chart based on the scalable vector diagram, which comprises the following steps:
a scalable vector map generator step for performing: generating scalable vector diagrams of the four types of flow chart primitives according to the default style so as to customize the style of the flow chart primitives by a user;
a scalable vector graphics editor step for performing: modifying the attribute of each label of the corresponding scalable vector diagram on the basis of the default style flow diagram primitive generated by the scalable vector diagram generator component;
a flow pattern template generation step for executing: a flow style template file is generated for use by the flow designer.
Optionally, the four types of flow chart primitives include: the system comprises an activity primitive, an event primitive, a gateway primitive and a migration line primitive, wherein the activity primitive comprises an artificial activity primitive, an automatic activity primitive and a sub-process primitive; the event primitives comprise a start event primitive, an end event primitive and an end event primitive; the gateway primitives comprise a single gateway primitive, a parallel gateway primitive and a plurality of gateway primitives.
Optionally, the editable style of the active primitive includes:
the thickness and the color of the rectangular frame respectively correspond to the 'stroke-width' and 'stroke' attributes of the 'rect' label in the SVG file;
the width, the height, the filling color and the fillet radius of the rectangle respectively correspond to the attributes of width, height, fill, rx and ry of a rect label in the SVG file;
the size and position of the characters, the size of the characters corresponds to the attribute of "font-size" of the "text" label, and the position of the characters is realized by changing the coordinates of the text box;
the size, the position and the filling color of the mark are controlled by setting a picture scaling attribute, the mark position is realized by modifying a 'translate' attribute, and the filling color is realized by modifying a 'fill' attribute of a 'path' label of the drawn mark;
the editable style of the event primitive comprises:
the thickness and the color of the circular frame correspond to the attributes of 'stroke-width' and 'stroke' of the 'circle' label in the SVG file;
the circle radius and the filling color correspond to the r and the file attributes of the circle label in the SVG file;
the size of the characters corresponds to the attribute of 'font-size' of a 'text' label in the SVG file;
the editable styles of the gateway primitives include:
the thickness and the color of the square frame correspond to the attributes of 'stroke-width' and 'stroke' of a 'path' label of the square drawn by the SVG file;
the method comprises the following steps of (1) scaling times of a square and filling colors, wherein the scaling times are changed by modifying a'd' attribute of a 'path' label for drawing the square, and the filling colors are changed by modifying a 'fill' attribute;
marking scaling times and colors, wherein the scaling times are changed by modifying the property'd' of a 'path' label of a drawn mark, and the colors are changed by modifying the property 'fill';
the editable style of the transition line primitive comprises the following steps:
the line thickness and line color correspond to the attributes of 'stroke-width', 'stroke' and 'file' of a 'path' label for drawing lines and arrows in the SVG file;
the text size corresponds to the "font-size" attribute of the "text" tag in the SVG.
Optionally, the scalable vector map generator step specifically includes: the scalable vector diagram generator directly adds DOM nodes on an Html page according to a default flow diagram primitive pattern by utilizing the characteristic that a scalable vector diagram and an Html DOM tree are easy to operate by using Javascript language, so that the effect of drawing the flow diagram primitive of the default pattern is achieved.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks. These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks. These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solutions of the present invention and not for limiting the same, and although the present invention is described in detail with reference to the above embodiments, those of ordinary skill in the art should understand that: modifications and equivalents may be made to the embodiments of the invention without departing from the spirit and scope of the invention, which is to be covered by the claims.
Claims (10)
1. A scalable vector graphics based flow primitive style designer, comprising:
a scalable vector graphics generator component for performing: generating scalable vector diagrams of the four types of flow chart primitives according to the default style so as to customize the style of the flow chart primitives by a user;
a scalable vector graphics editor component to perform: modifying the attribute of each label of the corresponding scalable vector diagram on the basis of the default style flow diagram primitive generated by the scalable vector diagram generator component;
a flow chart style template generation component for performing: a flow style template file is generated for use by the flow designer.
2. The scalable vector graphics-based flow graphics primitive style designer of claim 1, wherein the four types of flow graphics primitives comprise: the system comprises an activity primitive, an event primitive, a gateway primitive and a migration line primitive, wherein the activity primitive comprises an artificial activity primitive, an automatic activity primitive and a sub-process primitive; the event primitives comprise a start event primitive, an end event primitive and an end event primitive; the gateway primitives comprise a single gateway primitive, a parallel gateway primitive and a plurality of gateway primitives.
3. The scalable vector graphics-based flow chart primitive style designer of claim 2, wherein the editable style for the active primitive comprises:
the thickness and the color of the rectangular frame respectively correspond to the 'stroke-width' and 'stroke' attributes of the 'rect' label in the SVG file;
the width, the height, the filling color and the fillet radius of the rectangle respectively correspond to the attributes of width, height, fill, rx and ry of a rect label in the SVG file;
the size and position of the characters, the size of the characters corresponds to the attribute of "font-size" of the "text" label, and the position of the characters is realized by changing the coordinates of the text box;
the size, the position and the filling color of the mark are controlled by setting a picture scaling attribute, the mark position is realized by modifying a 'translate' attribute, and the filling color is realized by modifying a 'fill' attribute of a 'path' label of the drawing mark.
4. The scalable vector graphics-based flow chart primitive style designer of claim 2, wherein the editable style for the event primitive comprises:
the thickness and the color of the circular frame correspond to the attributes of 'stroke-width' and 'stroke' of the 'circle' label in the SVG file;
the circle radius and the filling color correspond to the r and the file attributes of the circle label in the SVG file;
the text size corresponds to the "font-size" attribute of the "text" tag in the SVG file.
5. The scalable vector graphics-based flow chart primitive style designer of claim 2, wherein the editable style for the gateway primitive comprises:
the thickness and the color of the square frame correspond to the attributes of 'stroke-width' and 'stroke' of a 'path' label of the square drawn by the SVG file;
the method comprises the following steps of (1) scaling times of a square and filling colors, wherein the scaling times are changed by modifying a'd' attribute of a 'path' label for drawing the square, and the filling colors are changed by modifying a 'fill' attribute;
the mark scaling factor and the color, the scaling factor is changed by modifying the'd' attribute of the 'path' label of the drawing mark, and the color is changed by modifying the 'fill' attribute.
6. The scalable vector graphics-based flow chart primitive style designer of claim 2, wherein the editable style of the transition line primitive comprises:
the line thickness and line color correspond to the attributes of 'stroke-width', 'stroke' and 'file' of a 'path' label for drawing lines and arrows in the SVG file;
the text size corresponds to the "font-size" attribute of the "text" tag in the SVG.
7. The method for designing the primitive style of the flow chart based on the scalable vector diagram is characterized by comprising the following steps of:
a scalable vector map generator step for performing: generating scalable vector diagrams of the four types of flow chart primitives according to the default style so as to customize the style of the flow chart primitives by a user;
a scalable vector graphics editor step for performing: modifying the attribute of each label of the corresponding scalable vector diagram on the basis of the default style flow diagram primitive generated by the scalable vector diagram generator component;
a flow pattern template generation step for executing: a flow style template file is generated for use by the flow designer.
8. The scalable vector graphics-based flow chart primitive style design method of claim 7, wherein said four types of flow chart primitives comprise: the system comprises an activity primitive, an event primitive, a gateway primitive and a migration line primitive, wherein the activity primitive comprises an artificial activity primitive, an automatic activity primitive and a sub-process primitive; the event primitives comprise a start event primitive, an end event primitive and an end event primitive; the gateway primitives comprise a single gateway primitive, a parallel gateway primitive and a plurality of gateway primitives.
9. The method of claim 8, wherein said editable styles for active primitives comprise:
the thickness and the color of the rectangular frame respectively correspond to the 'stroke-width' and 'stroke' attributes of the 'rect' label in the SVG file;
the width, the height, the filling color and the fillet radius of the rectangle respectively correspond to the attributes of width, height, fill, rx and ry of a rect label in the SVG file;
the size and position of the characters, the size of the characters corresponds to the attribute of "font-size" of the "text" label, and the position of the characters is realized by changing the coordinates of the text box;
the size, the position and the filling color of the mark are controlled by setting a picture scaling attribute, the mark position is realized by modifying a 'translate' attribute, and the filling color is realized by modifying a 'fill' attribute of a 'path' label of the drawn mark;
the editable style of the event primitive comprises:
the thickness and the color of the circular frame correspond to the attributes of 'stroke-width' and 'stroke' of the 'circle' label in the SVG file;
the circle radius and the filling color correspond to the r and the file attributes of the circle label in the SVG file;
the size of the characters corresponds to the attribute of 'font-size' of a 'text' label in the SVG file;
the editable styles of the gateway primitives include:
the thickness and the color of the square frame correspond to the attributes of 'stroke-width' and 'stroke' of a 'path' label of the square drawn by the SVG file;
the method comprises the following steps of (1) scaling times of a square and filling colors, wherein the scaling times are changed by modifying a'd' attribute of a 'path' label for drawing the square, and the filling colors are changed by modifying a 'fill' attribute;
marking scaling times and colors, wherein the scaling times are changed by modifying the property'd' of a 'path' label of a drawn mark, and the colors are changed by modifying the property 'fill';
the editable style of the transition line primitive comprises the following steps:
the line thickness and line color correspond to the attributes of 'stroke-width', 'stroke' and 'file' of a 'path' label for drawing lines and arrows in the SVG file;
the text size corresponds to the "font-size" attribute of the "text" tag in the SVG.
10. The scalable vector graphics-based flow chart primitive style design method of claim 7, wherein said scalable vector graphics generator step comprises in particular: the scalable vector diagram generator directly adds DOM nodes on an Html page according to a default flow diagram primitive pattern by utilizing the characteristic that a scalable vector diagram and an Html DOM tree are easy to operate by using Javascript language, so that the effect of drawing the flow diagram primitive of the default pattern is achieved.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010918096.5A CN112132926A (en) | 2020-09-03 | 2020-09-03 | Flow chart primitive style designer based on scalable vector diagram and design method thereof |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010918096.5A CN112132926A (en) | 2020-09-03 | 2020-09-03 | Flow chart primitive style designer based on scalable vector diagram and design method thereof |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112132926A true CN112132926A (en) | 2020-12-25 |
Family
ID=73848301
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010918096.5A Pending CN112132926A (en) | 2020-09-03 | 2020-09-03 | Flow chart primitive style designer based on scalable vector diagram and design method thereof |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112132926A (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105808217A (en) * | 2014-12-30 | 2016-07-27 | 航天信息软件技术有限公司 | Flow chart drawing method and system based on XML |
| CN108563984A (en) * | 2018-03-02 | 2018-09-21 | 山东科技大学 | A kind of automatic identification and understanding method of procedural model figure |
-
2020
- 2020-09-03 CN CN202010918096.5A patent/CN112132926A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105808217A (en) * | 2014-12-30 | 2016-07-27 | 航天信息软件技术有限公司 | Flow chart drawing method and system based on XML |
| CN108563984A (en) * | 2018-03-02 | 2018-09-21 | 山东科技大学 | A kind of automatic identification and understanding method of procedural model figure |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20230367841A1 (en) | System and method for implementing containers which extract and apply semantic page knowledge | |
| CN111506310B (en) | Method, device, equipment and storage medium for generating multi-platform style | |
| CN108984172B (en) | Interface file generation method and device | |
| US11216253B2 (en) | Application prototyping tool | |
| CN111241454B (en) | Method, system and device for generating webpage codes | |
| TWI394055B (en) | Common charting using shapes | |
| CN109062567A (en) | Information management system quick development platform based on B/S structure | |
| JP2001243222A (en) | Method, system and medium recording program for preparing display rule of structured document as well as method, system and medium recording program for changing structured document and document type definition | |
| CN102662921B (en) | A kind of document processing method, device and editing machine | |
| CN108108194B (en) | User interface editing method and user interface editor | |
| CN114089958A (en) | Form visual configuration method and device | |
| CN112364496B (en) | Avionics simulation panel generation system based on HTML5 and VUE technologies | |
| CN110968294A (en) | Business domain model establishing system and method | |
| CN113918144A (en) | Method and system for generating reusable page based on image | |
| CN116245052A (en) | Drawing migration method, device, equipment and storage medium | |
| CN117032675B (en) | Dynamic form design method | |
| CN113362477A (en) | 3D data acquisition and monitoring control system and scene editing method thereof | |
| AU2019226189B2 (en) | A system for comparison and merging of versions in edited websites and interactive applications | |
| CN107656908A (en) | Method and system for implementing placeholder | |
| CN112132926A (en) | Flow chart primitive style designer based on scalable vector diagram and design method thereof | |
| US9372844B2 (en) | Automatically generating a business process flow GUI using a symbolic annotation language | |
| CN115840564A (en) | Integrated model construction method, device and system based on multi-frame construction model language | |
| CN115309476A (en) | Browser-based ofd file display and editing method | |
| CN108762750A (en) | A kind of visualization interface generation method and system based on FMP models | |
| JP4719743B2 (en) | Graph processing device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20201225 |