.NET兑现的四层拓扑结构

.NET实现的四层拓扑结构

?

?

看着这图是不是很眼熟。没错，这是前段时间在Javaeye上风风雨雨的用Swing实现的四层网元拓扑图。看后深有感触，用Swing能做出这样的效果确实不易，何时我用.NET的也能用实现出这种的拓扑结构图。

?

看看TWaver早已出了.NET的版本，借助于TWaver强大的功能以及之前Swing的例子，我想实现起来应该也不是很难。今天就来分享一下我的思路。

首先我们先来看看整个系统的结构

?

?

很典型的四层拓扑，这四个层，我首先想到的也是用Group来实现，仿照之前Swing的例子，设置了group对应的属性

?

?

group.IsExpanded = true;            group.SetStyle(Styles.BODY_ALPHA, 0.8);            group.SetStyle(Styles.GROUP_FILL_COLOR, color);            group.SetStyle(Styles.GROUP_GRADIENT, Consts.GRADIENT_LINEAR_NORTHEAST);           group.SetStyle(Styles.LABEL_POSITION, Consts.POSITION_RIGHT);            group.SetStyle(Styles.LABEL_XOFFSET, 100);            group.SetStyle(Styles.LABEL_SIZE, 14);            group.SetStyle(Styles.LABEL_BOLD, true);           group.SetStyle(Styles.LABEL_FONT, new FontFamily("微软雅黑"));

?

double angle = group.Angle;double deep = group.Deep;double gap = bounds.Height / Math.Tan(angle * Math.PI / 180);PointCollection points = new PointCollection();Point p1 = new Point(bounds.X - gap, bounds.Y + bounds.Height);points.Add(p1);Point p2 = new Point(bounds.X + bounds.Width, bounds.Y + bounds.Height);points.Add(p2);Point p3 = new Point(bounds.X + bounds.Width + gap, bounds.Y);points.Add(p3);points.Add(new Point(bounds.X, bounds.Y));// Addpath.Data = this.CreateGeometry(points);this.AddComponent(path);this.AddBodyBounds(path.Data.Bounds);?// Add Bottom Rectanglepath = new Path();// Set Fillpath.Fill = Utils.CreateSolidColorBrush(fillColor);// Set Outlinethis.SetStroke(path);// Set DataRectangleGeometry rectangleGeometry = new RectangleGeometry();rectangleGeometry.Rect = new Rect(p1.X, p1.Y, p2.X-p1.X, deep);// Addpath.Data = rectangleGeometry;this.AddComponent(path);this.AddBodyBounds(path.Data.Bounds);?

哈哈，感觉还不错，可以达到预期的效果了。平行四边形准备好了，接下来我们在四边形加上一些节点试试。

?继续，用通用的方法创建四个group

接下来我们就要实现这个Demo中的亮点：穿透效果。就是上层节点和下层节点有关联时，不同层之间的连线怎么去穿越group，这个就涉及到TWaver中层的概念了，上面的四层结构网元之间的覆盖关系就是通过层来实现的，软件业务层是最上层的元素，可以通过设置这个层为最上一层，那么这层上的元素就会覆盖下面所有层的元素。连线的穿透也是这样的道理，我们可以将连线分为上下两部分，上半部分和from节点处于一层，下半部分和to节点处于一层，中间用一个虚拟的节点相连。

??

private void CreateCrossLayerLink(object fromID, object toID, bool left)        {            Node from = (Node)this.box.GetDataByID(fromID);            Node to = (Node)this.box.GetDataByID(toID);            if (from == null || to == null)            {                return;            }            ConnectPoint point = new ConnectPoint();            point.LayerID = from.LayerID;            double xOffset = -from.Width / 2 - 15;            if (left)            {                xOffset = from.Width / 2 + 15;            }            double yOffset = from.Height / 2 + 20;            double x = from.CenterLocation.X + xOffset;            double y = from.CenterLocation.Y + yOffset;            point.SetCenterLocation(x, y);            point.Parent = from.Parent;            this.box.Add(point);            LayerLink upLink = new LayerLink(from, point, true);            upLink.LayerID = from.LayerID;            upLink.Parent = from.Parent;            this.box.Add(upLink);            LayerLink downLink = new LayerLink(point, to, false);            downLink.LayerID = to.LayerID;            downLink.Parent = to.Parent;            this.box.Add(downLink);        }

?

?

?

效果很快就出来了，我们多创建几个连线试试

?

?

?

下面附上工程的源码，有兴趣的朋友可以继续实现连接的弯曲和告警效果。 LayerDemo

查看更多 下一篇