4-layer topology implemented by. NET

 

Some time ago, the four-layer network element topology chart on JavaEye had set off a Swing boom. After reading this, I am deeply touched by the fact that we can use. NET to implement this topology.

 

In fact, TWaver has already come out of the. NET version. I think it is not very difficult to use TWaver to implement it. With the help of the previous Swing example, this will soon be achieved. Let's share my thoughts today.

 

First, let's take a look at the structure of the entire system.

 

 

This is a typical layer-4 topology. The first thing I think of is to use a Group. In the same way as the previous Swing example, I set the group attributes.

 

View sourceprint? 1 group. IsExpanded = true;

 

2 group. SetStyle (Styles. BODY_ALPHA, 0.8 );

 

3 group. SetStyle (Styles. GROUP_FILL_COLOR, color );

 

4 group. SetStyle (Styles. GROUP_GRADIENT, Consts. GRADIENT_LINEAR_NORTHEAST );

 

5 group. SetStyle (Styles. LABEL_POSITION, Consts. POSITION_RIGHT );

 

6 group. SetStyle (style. LABEL_XOFFSET, 100 );

 

7 group. SetStyle (Styles. LABEL_SIZE, 14 );

 

8 group. SetStyle (Styles. LABEL_BOLD, true );

 

9 group. SetStyle (Styles. LABEL_FONT, new FontFamily (" "));

 

 

The results are not very satisfactory. For rectangular images, you can read TWaver-related documents and find that the parallelogram attribute is not set on the group. This is quite troublesome. I think it may be necessary to adopt a custom function. Fortunately, TWaver is more user-friendly in this regard, leaving corresponding interfaces for re-drawing.

 

I display the parallelogram of 3D. I want to set two attributes for 3Dgroup. One is the offset (angle), that is, the offset position of the group relative to the two points below the rectangle; the second is the depth, that is, the thickness of 3D. With these two parameters, we can customize them. We need to override the DrawContent () method of the group. In this method, we first extract the Group's own bound and draw the four points of the parallelogram according to the angle.

 

View sourceprint? 01 double angle = group. Angle;

 

02 double deep = group. Deep;

 

03 double gap = bounds. Height/Math. Tan (angle * Math. PI/180 );

 

04 PointCollection points = new PointCollection ();

 

05 Point p1 = new Point (bounds. X-gap, bounds. Y + bounds. Height );

 

06 points. Add (p1 );

 

07 Point p2 = new Point (bounds. X + bounds. Width, bounds. Y + bounds. Height );

 

08 points. Add (p2 );

 

09 Point p3 = new Point (bounds. X + bounds. Width + gap, bounds. Y );

 

10 points. Add (p3 );

 

11 points. Add (new Point (bounds. X, bounds. Y ));

 

12 // Add

 

13 path. Data = this. CreateGeometry (points );

 

14 this. AddComponent (path );

 

15 this. AddBodyBounds (path. Data. Bounds );

 

Next we need to draw the 3D effects below and on the right, and draw a small parallelogram below. We only need to calculate the four points of the Quadrilateral and it will be easy to draw. The four points can be obtained through the two points below the large parallelogram and the height:

 

View sourceprint? 01 // Add Bottom Rectangle

 

02 path = new Path ();

 

03 // Set Fill

 

04 path. Fill = Utils. CreateSolidColorBrush (fillColor );

 

05 // Set Outline

 

06 this. SetStroke (path );

 

07 // Set Data

 

08 RectangleGeometry rectangleGeometry = new RectangleGeometry ();

 

09 rectangleGeometry. Rect = new Rect (p1.X, p1.Y, p2.X-p1.X, deep );

 

10 // Add

 

11 path. Data = rectangleGeometry;

 

12 this. AddComponent (path );

 

13 this. AddBodyBounds (path. Data. Bounds );

 

The parallelogram on the right is similar. I will not explain it here. Check the Running Effect

 

 

Haha, I feel pretty good. It can achieve the expected results. The parallelogram is ready. Next, add some nodes to the parallelogram.

 

 

Continue, use a common method to create four groups

 

 

Next we will implement the highlights in this Demo: Penetration effect. This is how the connections between different layers traverse the group when the upper and lower layers are associated. This involves the concept of the TWaver middle layer, the layer-4 structure above covers the network elements. The software business layer is the top element. You can set this layer as the top layer, then, the elements on this layer will overwrite all the elements on the following layers. The connection penetration is the same. We can divide the connection into two parts: the upper part and the from node are in the first layer, the lower part and the to node are in the first layer, and a virtual node is in the middle.

 

View sourceprint? 01 private void createcroslayerlink (object fromID, object toID, bool left)

 

02 {

 

03 Node from = (Node) this. box. GetDataByID (fromID );

 

04 Node to = (Node) this. box. GetDataByID (toID );

 

05 if (from = null | to = null)

 

06 {

 

07 return;

 

08}

 

09 ConnectPoint point = new ConnectPoint ();

 

10 point. LayerID = from. LayerID;

 

11 double xOffset =-from. Width/2-15;

 

12 if (left)

 

13 {

 

14 xOffset = from. Width/2 + 15;

 

15}

 

16 double yOffset = from. Height/2 + 20;

 

17 double x = from. CenterLocation. X + xOffset;

 

18 double y = from. CenterLocation. Y + yOffset;

 

19 point. SetCenterLocation (x, y );

 

20 point. Parent = from. Parent;

 

21 this. box. Add (point );

 

22

 

23 LayerLink upLink = new LayerLink (from, point, true );

 

24 upLink. LayerID = from. LayerID;

 

25 upLink. Parent = from. Parent;

 

26 this. box. Add (upLink );

 

27

 

28 LayerLink downLink = new LayerLink (point, to, false );

 

29 downLink. LayerID = to. LayerID;

 

30 downLink. Parent = to. Parent;

 

31 this. box. Add (downLink );

 

32}

 

 

The effect was coming soon. Let's try creating several more connections.

 

 

The source code of the Project is attached below. If you are interested, you can continue to achieve the bending and alarm effects of the connection.