Twaver-HTML5基础学习(25)网元可视化视图组件(Network)-阿里云开发者社区

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

2024-09-25 16

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这篇文章介绍了Twaver-HTML5中的网元可视化视图组件(Network)的层次结构，包括view、rootCanvas和topCanvas的使用方法和示例。

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