Use a topology to implement a multi-layer relationship diagram (3) foldable flowchart.
Speaking of TWaver, the flow chart is endless and varied. 2D, 3D, static, and dynamic. This time we will present a full vector, a very fresh and beautiful flow chart. Let's take a look at the effect:
Do you think it is not just a few pasters when you see such a figure? If you think so, you still know something about twaver. As we have mentioned above, this is a full vector flowchart. No textures are used here. The following network elements are described by vectors without distortion in scaling. Next we will introduce how to describe these network elements vector?
Here we take the first one as an example to introduce how to use vectors to describe this element. First, we need to draw a rounded corner square with a slight color gradient. Here we adopt a linear gradient, the middle is gray and the two sides are white. 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'}]}}]});
Check the running results:
Then draw the orange box in the middle in this way. In the same way, draw a rounded rectangle in the middle and use the 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'}]}}
Finally, there are several lines in the middle. You can use path to describe each pixel. 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 it here, do you think it is so complicated to get a vector image, and you have to calculate the pixels by yourself. If you do everything yourself, can you become an artist. Hahaha, if you think you can, some simple art jobs don't need to ask others, and you can do it yourself. However, if you think it is complicated, you can directly use the svg image provided by the artist to directly convert the code above through the twaver converter.
The vector image is mentioned here first. Let's look at how to draw an arrow on the link, which is the following effect:
Here we use the icon attachment of the link, and the icon attachment on the link can also use the vector. Is it very good:
link.setStyle('icons.names', ['link_arrow']);
Here, 'link _ arrow' is the registered vector image name.
With the vector of the link added, you also need to define the line direction. The linkpath is defined here. The network provides the method for setting the linkpath:
network.setLinkPathFunction(createLinkPath);
We use the vertical and horizontal offset to adjust the line direction, so that we can control the inflection point of the line.
<Strong> double-click to expand and merge animations </strong>
The biggest feature of this flow chart is that it can merge and expand sub-flows and specify which points to collapse during the merge. The effect after the merge is as follows:
In this way, the flowchart will be much clearer. If you don't want to look at complicated sub-flows in the middle, you can combine them.
Here we have recorded a video for your appreciation:
Http://v.youku.com/v_show/id_XOTQwODMzMjky.html? F = 23725124
If you are interested, you can send an email to tw-service # servasoft.com. We will present the complete code to you.
