Showing hierarchical and organizational relationships with topological diagrams (iv)

Recent ice is very fire, "all things Grow" in the amorous feelings, "Running Man" in the Dare to fight, in order to alleviate the pressure of the siege lion, we specially produced a Yan Value Explosion table Organization chart, welcome everyone to receive their own goddess of God

Organization Chart is presented in a variety of ways, the use is very extensive, can be applied within the group, the organization of various departments of the enterprise. Let's take a look at the effect of twaver implementation.

Top and bottom layouts:

Circular 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, you can see Twaver Official document introduction. Here is not much to say, today we focus on 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 ', {        $,        135,        false,        Origin: {x:0, y:0},        V: [{            ' rect ',            ' 100% ',            ' 100% ',             8,            linecolor:' black ',            linewidth:2.5,            ' #F5ECCE ' ,        }],    });

Put text on the right side of the rounded rectangle:

{            ' text ',            ' <%=getclient ("text")%> ',            ' 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.

{            ' path ',            ' m-45,-25q-45,-64,0,-64q45,-64,45,-25l45,25q45,64,0,64q-45,64,-45,25z ' ,            linecolor:' #BBBBBB ',            linewidth:1,            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 Twaver's 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 ', {        $        ,        +,false,        clip: {            ' path ',            ' m-45,-25q-45,-64,0,-64q45,-64,45,-25l45,25q45,64,0,64q-45,64,-45,25z '  ,        },        V: [{            ' image ',            x:-64,            y:-64,            ' <%= 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.

Showing hierarchical and organizational relationships with topological diagrams (iv)