vue 集成jTopo 处理方法


Posted in Javascript onAugust 07, 2019

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

<template>
<div>
<PanelBase title="拓扑图">
<div slot="head-btns" class="panel-head-btns"></div>
<div slot="body-content">
<section class="table-section">
<canvas width="2000" height="600" id="canvas"></canvas>
</section>
</div>
</PanelBase>
</div>
</template>
let canvas = document.getElementById("canvas");
that.stage = new JTopo.Stage(canvas);
that.scene = new JTopo.Scene(that.stage);
that.scene.background = "/jtopo/aa.png";
let s1 = that.node("a1", 305, 43, "server.png");
s1.alarm = "2 W";
let s2 = that.node("a2", 365, 43, "server.png");
let s3 = that.node("a3", 425, 43, "server.png");
let g1 = that.node("a4", 366, 125, "gather.png");
that.linkNode(s1, g1, true);
that.linkNode(s2, g1, true);
that.linkNode(s3, g1, true);
let w1 = that.node("a5", 324, 167, "wanjet.png");
that.linkNode(g1, w1);
let c1 = that.node("a6", 364, 214, "center.png");
that.linkNode(w1, c1);
let cloud = that.node("a7", 344, 259, "cloud.png");
that.linkNode(c1, cloud);
let c2 = that.node("a8", 364, 328, "center.png");
that.linkNode(cloud, c2);
let w2 = that.node("a9", 324, 377, "wanjet.png");
that.linkNode(c2, w2);
linkNode(nodeA: number, nodeZ: number, f: boolean) {
/**连线*/
let link;
if (f) {
link = new JTopo.FoldLink(nodeA, nodeZ);
} else {
link = new JTopo.Link(nodeA, nodeZ);
}
link.direction = "vertical";
this.scene.add(link);
return link;
},
hostLink(nodeA: any, nodeZ: any, name: string) {
let link1 = new JTopo.FlexionalLink(nodeA, nodeZ, name);
//var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
//var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);// 二次折线
link1.shadow = false;
link1.offsetGap = 44;
this.scene.add(link1);
return link1;
}

总结

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

Javascript 相关文章推荐
JavaScript.Encode手动解码技巧
Jul 14 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
js添加事件的通用方法推荐
May 15 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
vue路由教程之静态路由
Sep 03 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 #Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 #Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 #Javascript
javascript for循环性能测试示例
Aug 07 #Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 #Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 #Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 #Javascript
You might like
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
JavaScript中的闭包
2016/02/24 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
骨干教师事迹材料
2014/12/17 职场文书
2014年度考核工作总结
2014/12/24 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Java SSM配置文件案例详解
2021/08/30 Java/Android
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏