Twaver-HTML5基础学习(25)网元可视化视图组件(Network)

网元可视化视图组件(Network)

层次结构

Network分为三个层次，最底层是view(div),在此基础上放置两个Canvas,分别是rootCanvas和topCanvas。
rootCanvas用于绘制背景和网元,topCanvas可用于绘制附件、告警、编辑框等元素。

view

View是最底层div元素，rootCanvas和topCanvas均放置在这个div上。
获取方式:network.getView()
示例:如修改背景颜色

 network.getView().style.backgroundColor = "#ccc"

network.getView()能直接拿到view这个div。

rootCanvas

rootCanvas:用户绘制一些比较底层的元素，如背景、网元、自定义其他元素。
获取方式:

network.getRootCanvas();

绘制顺序:
(1)绘制背景,内部调用$backgroundUI.draw(ctx, this);
(2)拦截绘制paintBottom内容:内部调用this.paintBottom(ctx, dirtyRect);
(3)绘制网元:ui.paint(ctx);

添加背景图片

box.setStyle('background.type', 'image');
box.setStyle('background.image', 'image_name');

实现：
首先注册图片

 returnRegisterImage("/static/topoimages/ditu.png", network)
 // returnRegisterImage("/static/topoimages/dev2.png", network)
  // 添加背景图片  首先注册图片
  box.setStyle('background.type', 'image')
  box.setStyle('background.image', 'ditu')

在背景图片和网元之间绘制一张网状表格例子

topCanvas

获取方式:network.getTopCanvas();

绘制顺序:
(1)绘制Marker等元素:this.paintMarker(ctx);
(2)拦截绘制paintTop内容:内部调用this.paintTop(ctx,dirtyRect);

示例：在topCanvas层绘制公司信息

  network.paintTop = function (ctx, dirtyRect) {
    
    
        var img = new Image();
        img.src = "./twaver.png";
        ctx.drawImage(img, 1150, 500, 100, 100);
        ctx.font = "26px 宋体";
        ctx.strokeStyle = "#E38A0A";
        ctx.strokeText("版权所有 © 2004-2015 赛瓦软件 Serva Software | 沪ICP备10200962号", 450, 620);
        }

学习参考：TWaver Documents