jtopo 拓扑图的简单使用

官网

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的；