好资源导航 » 文章资讯 » vue 集成jTopo 处理方法

vue 集成jTopo 处理方法

2023-08-18 01:05:05 69

jTopo帮助说明网站

http://www.jtopo.com/index.html

使用例子：

http://www.jtopo.com/demo/helloworld.html

不建议直接安装github上的代码，因为代码版本不是最新，有部分功能未实现。

下载最新的js类库文件放到 vue 项目public 文件夹下。

引入 import"/jtopo/jtopo-0.4.8-min.js";


letcanvas=document.getElementById("canvas");
that.stage=newJTopo.Stage(canvas);
that.scene=newJTopo.Scene(that.stage);
that.scene.background="/jtopo/aa.png";
lets1=that.node("a1",305,43,"server.png");
s1.alarm="2W";
lets2=that.node("a2",365,43,"server.png");
lets3=that.node("a3",425,43,"server.png");
letg1=that.node("a4",366,125,"gather.png");
that.linkNode(s1,g1,true);
that.linkNode(s2,g1,true);
that.linkNode(s3,g1,true);
letw1=that.node("a5",324,167,"wanjet.png");
that.linkNode(g1,w1);
letc1=that.node("a6",364,214,"center.png");
that.linkNode(w1,c1);
letcloud=that.node("a7",344,259,"cloud.png");
that.linkNode(c1,cloud);
letc2=that.node("a8",364,328,"center.png");
that.linkNode(cloud,c2);
letw2=that.node("a9",324,377,"wanjet.png");
that.linkNode(c2,w2);
linkNode(nodeA:number,nodeZ:number,f:boolean){
/**连线*/
letlink;
if(f){
link=newJTopo.FoldLink(nodeA,nodeZ);
}else{
link=newJTopo.Link(nodeA,nodeZ);
}
link.direction="vertical";
this.scene.add(link);
returnlink;
},
hostLink(nodeA:any,nodeZ:any,name:string){
letlink1=newJTopo.FlexionalLink(nodeA,nodeZ,name);
//varlink=newJTopo.FlexionalLink(nodeA,nodeZ,text);
//varlink=newJTopo.FlexionalLink(nodeA,nodeZ,text);//二次折线
link1.shadow=false;
link1.offsetGap=44;
this.scene.add(link1);
returnlink1;
}

总结

以上所述是小编给大家介绍的vue集成jTopo处理方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
514930285
czq8825@qq.com

vue 集成jTopo 处理方法

热门推荐

随机推荐