拓扑包V1.0

下面的链接是基于此拓扑包的demo。

http://10.79.148.15:9005

该版本拓扑包具有三个特性：

1. 易用性：拓扑包封装全面，可快速上手搭建出基本拓扑
2. 可扩展性：拓扑包基于WebGL的引擎框架，更加方便二次开发。
3. 灵活性：随拿随用，无论大型拓扑还是小型拓扑都能灵活支持。

效率测试：该拓扑包目前可完美支撑4000个点和线。

功能介绍：

• 全局功能

  1. 拖拽（整体拓扑拖拽，拖拽过程中鼠标会改变样式）
  2. 框选（与拖拽相互切换，可同时选择多台设备）
  3. 缩放（可通过缩放来显示和隐藏点和线的标签，并自适应更改线的粗细、图片的大小等等）
  4. 居中（自适应画布去居中显示整张拓扑）
  5. 更换模板（更换背景画布和点的颜色）
  6. 显示隐藏元素（可隐藏全部被选中的元素）

• 点

  1. 拖拽（单点拖拽和框选拖拽）
  2. 高亮显示（点击后放大突出并加上边框，可以在高亮区域内的任何地方触发点的事件）
  3. 更换图片（在初始化拓扑时，将所有用到的图片存入到一张雪碧图中，加载的时候只加载一张图片，即可获得拓扑所需的所有图片，减少请求次数，提高响应效率）
  4. 点的下面可以添加label（可自定义样式和文字）
  5. 点四周可以添加图标样式，增强表现效果。（支持上下左右、左上、右上、左下、右下八个位置）

• 线

  1. 此版本的拓扑包中线的样式，目前包括四种，分别为直线、曲线、直线虚线和曲线虚线。
  2. 当点击线的时候表示选中这条线并增添高亮效果，并且可在线上添加事件。
  3. 线的颜色和粗细等可通过样式设置
  4. 线有三种形式的箭头，分别为（源到目的、目的到源、双向）
  5. 两点之间多条线，可选择多条曲线或多条直线，并且可通过双击来展开闭合。
  6. 线的两端都可以添加标签，并且可随线的方向翻转。

• 组

  1. 拖拽（按住组的区域移动，即可拖拽整个组，并且可联动相关联的组）
  2. 组上可添加标签，样式可自定义，位置分别可设置上、中、下三种。
  3. 可自行设置组的形状、颜色、透明度，目前支持椭圆、多边形和长方形三种表现形式。
  4. 展开和闭合为组的扩展功能，通过双击组来设展开闭合组，可让网络更加简洁直观。
  5. 除了上述以点组成组的方式，包内还支持一种以线为单位组成的组，这样可以更灵活的表示以接口为单位的三层拓扑图。

• 其他

1. 数据流的创建原理同线，流动方向表示从原点流动到目的点，可自行调节流的长度。
2. 右键功能。
3. tooltip提示，样式可自定义（遇到边界自动调节，保证不出边界）