Speaking of twaver flow chart is endless, diverse. 3D, static, dynamic. This time to show you a full vector, very fresh and beautiful flowchart. First look at the effect:
See such a picture, is not think that is using a few stickers, if you think so, then you still have some understanding of twaver. We have mentioned earlier, this is a full vector flowchart, here can not use any stickers Oh, the following network elements are vector description, scaling is not distorted. Now let's introduce how vectors describe these elements.
Here we take the first example, to introduce how to use vector to describe this element, first we need to draw a rounded square, and the color is slightly gradient, we use a linear gradient, the middle is gray, white on both sides, the code is as follows:
Twaver. Util.registerimage (' process ', {w:48,h:42,linewidth:1,linecolor: ' #848484 ', V: [{shape: ' rect ', w:42,h:36,x: -21,y:-18 , r:4,gradient: {type: ' linear ', x1:0,y1: -25,x2:0,y2:25,stop: [{offset:0,color: ' White '},{offset:0.4,color: ' #D8D8D8 ' },{offset:1,color: ' White '}]}});
Look at the effect after the run:
Then this way to draw the middle of the orange small square, the same reason, is also the middle of a rounded rectangle, with an orange gradient:
{shape: ' rect ', w:36,h:30,x: -18,y: -15,r:3,gradient: {type: ' linear ', x1:0,y1: -20,x2:0,y2:25,stop: [{Offset:0,color : ' White '},{offset:0.4,color: ' #B45F04 '},{offset:1,color: ' White '}}}
The last is the middle of a few lines, you can use path to describe, you draw each pixel point, the code is as follows:
{shape: ' path ', data: ' m-12,-8l4,0m2,0l12,0m-9,-3l4,0m2,0l12,0m-6,2l4,0m2,0l12,0m-9,7l4,0m2,0l12,0 ', linewidth:1.5 , LineColor: ' #F2F2F2 ',}
Write here, you will not think how to get a vector of the picture so complex, pixels of what is also to calculate their own. If you do everything yourself, then you can also be a designer. hahaha, if you think you can, some simple art work is not to beg others, you can also do. However, if you feel complex, you can also directly use the artwork provided by the SVG image, through the Twaver converter directly to convert the above code.
Vector Pictures First of all, let us look at the link on how to draw an arrow, that is, the following effect:
Here we use the link icon attachment, link icon attachment can also use vector oh, is not great:
Link.setstyle (' Icons.names ', [' link_arrow ']);
The ' Link_arrow ' here is the name of our registered vector image.
Add the vector of the connection, the direction of the line also need to define their own. This is defined by Linkpath, which provides a way to set up the Linkpath on the network:
Network.setlinkpathfunction (Createlinkpath);
The direction of the connection we used the first level after the vertical way, you can also add a horizontal offset value, so that we can control the inflection point of the connection.
<strong> Double-click Expand, Merge Animations </strong>
The most important feature of this flowchart is the ability to merge and expand sub-processes, and to specify which points to pick up when merging, with the following effects:
So the flowchart will be much clearer, if you do not want to see the middle of the complex sub-process merged together.
Here we have recorded a video for everyone to enjoy:
http://v.youku.com/v_show/id_XOTQwODMzMjky.html?f=23725124
Interested friends can send email to tw-service#servasoft.com, we will present the complete code to you.
Realization of multi-level graph with topological diagram (III.) collapsible flowchart
