Display hierarchical and organizational relationships with a topology diagram (4). A Topology diagram shows hierarchical organizations.

Display hierarchical and organizational relationships with a topology diagram (4). A Topology diagram shows hierarchical organizations.

Recently, ice and ice are very popular. There are all kinds of emotions in "growth of everything", and you dare to compete in "running male". In order to relieve the pressure on all the lions, we have specially created an organizational structure for the appearance burst table. You are welcome to get your own goddess of God.

The organization structure diagram is presented in a variety of ways and is widely used. It can be used in the presentation of organizational relationships between different departments of an enterprise within the group. Let's take a look at the effect of twaver.

Up and down layout:

 

Circular layout:

 

These la s are very suitable to be implemented using twaver, which is easy to implement. twaver provides multiple layout modes: left-to-right, bottom-up, for more information, see twaver's official documentation. I will not talk about it here. Today we will focus on the Network Element in twaver's implementation. First, zoom in to see the effect:

Here I borrowed Fan Bingbing's Avatar from the Goddess. We assume that Fan Bingbing is the cashier of the finance department. I think Fan Ye is well-deserved as the director of the Finance Department. from the beginning to the evening, he earned million yuan. In today's society, you don't have to worry about anything as long as you have money to invest in your real estate for the rest of your life. Here we use a nameboard method to present each network element on the organization chart. The title is on the left and the title is on the right. This combination of vector and bitmap is also very good. How can we implement this kind of network element? First, we need to define a rounded rectangle:

twaver.Util.registerImage('employee', {        w: 200,        h: 135,        cache: false,        origin: {x:0, y:0},        v: [{            shape: 'rect',            w: '100%',            h: '100%',            r: 8,            lineColor:'black',            lineWidth:2.5,            fill: '#F5ECCE',        }],    });

 

Put the text on the right of the rounded rectangle:

{            shape: 'text',            text: '<%=getClient("text")%>',            font: '12px "Microsoft Yahei"',            translate: {x:150,y:135/2},        }

Translate refers to the translation of text to the specified position. here we need to place it on the right. Therefore, we need to set the right, x, and y to the origin point in the upper left corner of the net element.

Next, you need to place an ellipse on the left side to put a picture of the organizational node. the ellipse here can be described directly by path.

{            shape: 'path',            data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z',            lineColor:'#BBBBBB',            lineWidth:1,            translate: {x: 60, y:135/2}        }

 

Data is used to describe the path of the path, where M, Q, L represent moveto, quadraticCurveTo and lineto, such as the M-45, is to move to the location of-45. For more information, see TWaver's official documentation.

Next, we need to add the employee's picture. Here we use a general bitmap. The bitmap must be registered before it can be used. Since the original image is square, the shape of the rounded rectangle needs to be reduced. When it comes to cropping, clip is supported in twaver's vector description. clip is not used by default. After clip is set, this will crop the area outside the vector image. You can use shape to describe the area to be cut. here we need to crop the rounded rectangle, therefore, set the same path as the above rectangle.

twaver.Util.registerImage('clip_pic', {        w: 128,        h: 128,        cache: false,        clip: {            shape: 'path',            data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z',        },        v: [{            shape: 'image',            x:-64,            y:-64,            name: '<%=getClient("pic")%>',        }],    });

 

For more use of clip, refer to the following documents:

Html5-canvas-clipping-region-tutorial

Canvas-clip-image-in-a-circle

Now, the network element of an organizational structure can be easily implemented. Finally, we randomly create some data to see the overall effect.

 

 

If you want a demo partner, please send an email to tw-service # servasoft.com and we will send you the complete code.