Structure of the vector card type implemented by HTML5

Structure of the vector card type implemented by HTML5


Organization chart is the most basic structural basis for enterprise process operations, department settings, and functional planning. When talking with customers, many people mentioned the need for a flexible tool to draw an organizational structure that presents the Enterprise. Today, we will bring you an organizational structure chart implemented by TWaver, multiple la s are provided. To clearly present the functions of each person in an organization, we have customized the business card style to display the network element.

First, let's look at the overall effect.

First, let's look at a classic up-down hierarchical layout:

 

Then we have a 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.

Today we will focus on twaver's network element. 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 our 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.