官网

jtopo 一个好用的交互式HTML5图形软件

下载

jtopo-npm安装包-Javascript文档类资源-CSDN下载

引入

将 jtopo-1.3.8_trial-esm-min.js 文件放到assets文件下 import 引入

import {Stage,Layer,Node,Link,FoldLink,Graph,TreeLayout,TipNode,TextNode,AutoFoldLink,FlexionalLink,CircleNode,HtmlImage,
} from "@/assets/js/jtopo-1.3.8_trial-esm-min.js";

用官网上那种npm的引入方式，我用vite打包后部署就报 Maximum call stack size exceeded

使用

stage顶层对象可以包含多个layer，每个layer是分开渲染的，例如：可以把需要动画的内容放到一个单独的layer里面，可以减少消耗

var stage = new Stage("divId"); // 顶层对象（Stage）
var layer = new Layer(); // 层对象（Layer） Layer 是一个抽象对象，默认是完全透明的，上层对象为Stage.
layer.css({  // 设置颜色background: "rgb(33,38,41)",
});
layer.zoom(0.65, 0.65); // 设置缩放stage.addChild(layer); // 把layer添加到stage中
stage.setMode("drag"); // 设置场景拖拽
stage.show(); // 显示

添加一个块

let info = new Node("", 0, 0, 170, 230); // 参数依次为： 块附带的文本， 坐标x, 坐标y, 宽度, 高度
layer.addChild(info); // 将块添加到layer

添加文字

let text = new TextNode("123\n\n456", 50, 5, 100, 50); // 传参与Node相同 如果文字需要换行可以使用 \n
layer.addChild(text); // 添加

将两个块连线

let link = new Link("", parentNode, fromNode, "cb", "ct"); // 参数依次为： 线带的文字、开始块、结束块、开始块连线位置、结束块连线位置layer.addChild(link); // 将线添加到layer

把html作为图片使用, 这里注意传的是字符串而不是dom节点，样式需要使用行内样式，单独写css没有效果

var htmlImage = new HtmlImage(proxy.$refs.ammeterInfo.outerHTML,170,230); // 参数依次为：dom节点的文本、宽度、高度let info = new Node("", 0, 0, 170, 230);
info.setImage(htmlImage);
layer.addChild(info);

Node、TextNode、Link都是有 css 和 addChild 方法的，例如Node中添加一个TextNode，那么TextNode的位置就是相对于Node的；

jtopo 拓扑图的简单使用相关推荐

一张网络拓扑图的简单分析
参见附件,是一张公司的网络拓扑图,下面做一些简单分析. 拓扑图整体结构还是比较完善的,网络设备有汇聚层三层交换机,还有WIFI扩展.服务器方面有与AD域服务器和相关的应用服务器.网络带宽方面有两条,一 ...
多页面应用画拓扑图利器-jTopo
多页面应用画拓扑图利器-jTopo 文章目录多页面应用画拓扑图利器-jTopo 前言入门 api 结点连接其它解决数据问题前言 jTopo主要应用在多页面web网站上,一款完全基于HTML ...
如何使用VirtualBox与GNS3搭建思科设备实验环境
在做网络实验的时候发现其实Virual Box 跟GNS3搭配来用的话还是挺方便的,所以在这里发表一下环境的配置跟大家分享,如果发现有问题的也请各位看官不吝指教. 拓扑图: 因为分享的是怎么能让GNS ...
CCIE-LAB-第三篇-VRRP+SLA
CCIE-LAB-第三篇-VRRP+SLA 实际中,思科只会给你5个小时去做下面的全部配置这个是CCIE-LAB的拓扑图问题简单翻译做冗余,意思就是VRRP.必须用优先级. 每个路由器都要用p ...
怎么扫描同网段mac地址linux,如何快速收集局域网内的IP+MAC信息？用这个扫描器分分钟搞定！！！...
原标题:如何快速收集局域网内的IP+MAC信息?用这个扫描器分分钟搞定!!! 网工圈中国圈内最早的公益公众号,本号已认证(关注近 5w+) 关注科来MAC地址扫描器安装 1.右键" ...
二、LLC 谐振变换器
半桥 LLC 谐振变换器主电路结构如图所示,半桥 LLC 谐振变换器主电路可以分为四个部分,即:逆变网络.谐振网络.变压器及整流滤波网络.两个 MOSFET(S1.S2)以及它们的体二极管(D1.D ...
带你了解裸纤、专线、SDH、MSTP、MSTP+、OTN、PTN、IP-RAN的区别
傻傻分不清楚:裸纤.专线.SDH.MSTP.MSTP+.OTN.PTN.IP-RAN (一)裸纤裸纤也叫裸光纤,运营商提供一条纯净光纤线路,中间不经过任何交换机或路由器,只经过配线架或配线箱做光纤跳 ...
什么是裸纤、专线、SDH、MSTP、MSTP+、OTN、PTN-Vecloud微云
裸纤裸纤也叫裸光纤,运营商提供一条纯净光纤线路,中间不经过任何交换机或路由器,只经过配线架或配线箱做光纤跳纤,可以理解成运营商仅仅提供一条物理线路.实际项目中,裸光纤应用较多,比如某大学两个校区,相 ...
傻傻分不清楚：裸纤、专线、SDH、MSTP、MSTP+、OTN、PTN、IP-RAN！
(一)裸纤裸纤也叫裸光纤,运营商提供一条纯净光纤线路,中间不经过任何交换机或路由器,只经过配线架或配线箱做光纤跳纤,可以理解成运营商仅仅提供一条物理线路.实际项目中,裸光纤应用较多,比如某大学两个校 ...

jtopo 拓扑图的简单使用

官网

下载

引入

使用

jtopo 拓扑图的简单使用相关推荐

最新文章

热门文章