A vector card-type organization chart implemented by HTML5

The organization chart (Organization chart) is the most basic structure basis of the enterprise's process operation, department setting and function planning. and customer communication, many people have mentioned the need for a flexible tool to draw the organizational structure of the enterprise, today to bring you a twaver implementation of the organization chart, providing a variety of layout, in order to clearly present the functions of everyone in the organization, we customized the business card style to display the network element.

First look at the overall effect.

Let's start with a classic upper and lower level layout:

One more round layout:

These layouts with twaver to achieve is very suitable, the implementation is also very easy, twaver interior provides a variety of layout: From left to right, from the bottom up, the concrete can see Twaver Official document Introduction, here is not much to say.

Today we highlight the twaver if the net element in the implementation. Zoom in first to see the effect:

Here I borrowed the goddess Fan Bingbing's head. We assume that Fan Bingbing is the treasurer of the Finance Department, and I think fan ye as the head of the finance department is well-deserved, from the beginning of the North drift to the subsequent night of the crazy 80 million earned. Now the society, as long as the money to invest in real estate for half a lifetime without worry, gossip not much. Here we are using a business card-like way to present each network element on the organization chart, a picture on the left, the right is the title, the combination of vector and bitmap effect is also very good. So how is this network element implemented? 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 text on the right side of the rounded rectangle:

{shape: ' text ', Text: ' <%=getclient ("text")%> ', font: ' 12px "Microsoft yahei" ', Translate: {X:150,Y:135/2},}

Translate is to translate the text to the specified position, here we need to put on the right side, so we need to set the right, X, Y is relative to the upper left corner of the network element to set the origin.



Next you need to place an ellipse on the left side of the image for the organization node, where the ellipse can be described directly using 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 path paths, where the m,q,l represent Moveto,quadraticcurveto and lineto, such as M-45, which are moved to 45. Refer to our official documentation for specific meanings.

Next need to add the employee's picture, the picture here is a general bitmap, the bitmap needs to be registered before use. Since the original picture is square, need to cut out the shape of the rounded rectangle, speaking of cut, Twaver vector description support clip, the default is not clip, set clip, will be beyond the vector image of the area outside the crop, you can use shape to describe the cut area, Here we need to crop out the rounded rectangle, so set the same path path as the rectangle above.

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 documentation:

Html5-canvas-clipping-region-tutorial

Canvas-clip-image-in-a-circle

Well, the network element of an org chart is easy to implement. At the end of the data, we can see the overall effect.

For specific demo partners, please email to tw-service#servasoft.com, we will send you the full code.

A vector card-type organization chart implemented by HTML5