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

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

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

层次结构

Network分为三个层次,最底层是view(div),在此基础上放置两个Canvas,分别是rootCanvastopCanvas
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

目录
相关文章
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
41 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
42 1
|
2月前
html基础知识学习
html基础知识学习
35 0
|
2月前
|
数据可视化 小程序 JavaScript
DIYGW可视化快速生成VUE3静态html页面
DIYGW可视化快速生成VUE3静态html页面
48 0
|
2月前
|
小程序 数据可视化 开发工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
33 0
|
6月前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
移动开发 前端开发 搜索推荐
(前端开发入门必看)一口气读完HTML5与CSS3基础教程,快速建造前端思维(更新中)
(前端开发入门必看)一口气读完HTML5与CSS3基础教程,快速建造前端思维(更新中)
126 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
194 0
|
移动开发 运维 前端开发
HTML5 + CSS3 列表 表格 媒体元素学习笔记(四)
HTML5 + CSS3 列表 表格 媒体元素学习笔记(四)
113 0
HTML5 + CSS3 列表 表格 媒体元素学习笔记(四)