网元可视化视图组件(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
