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