jTopo的基本使用

<canvas width="800" height="500" id="canvas"
style=" background-color:#EEEEEE; border:1px solid #444;">

Jtopo的核心对象有6个，分别是Stage（舞台对象），Scene（场景对象），Node（节点对象），Link（连线对象），Container（容器对象），Effect.Animate（动画效果）

ar canvas = document.getElementById('canvas');
varstage = new JTopo.Stage(canvas);// 创建一个舞台对象
//显示工具栏
// showJTopoToobar(stage);
var scene = new JTopo.Scene(stage); // 创建一个场景对象
// scene.background = './img/bg.jpg';var node = new JTopo.Node("Hello"); // 创建一个节点
node.setLocation(409, 269); // 设置节点坐标
scene.add(node); // 放入到场景中
node.setSize(40, 40);  // 尺寸
node.alpha =1;  // 透明度
node.setImage('static/images/text/mao.png'); // 设置图片
// 事件
stage.eagleEye.visible = true; //开启鹰眼
stage.wheelZoom = 0.85; //缩放比例为0.85

1 Stage：

1.1 Mode属性：

 stage.mode = 'normal'; //可以框选多个节点、可以点击单个节点

normal[默认] 可以点击选中单个节点（按住Ctrl可以选中多个），点中空白处可以拖拽整个画面
drag 该模式下不可以选择节点，只能拖拽整个画面
select 可以框选多个节点、可以点击单个节点
edit 在默认基础上增加了：选中节点时可以通过6个控制点来调整节点的宽、高
1.2 add/remove（scene）函数：

将一个场景加入到/移除出舞台效果

1.3 setCenter（x,y）函数：

设置舞台的中心坐标点（舞台平移）

在这里插入代码片

2 Scene：

2.1 Mode属性和Stage属性一致

2.2 alpha属性：场景的透明度

2.3 show()/hide() 函数：

表示场景的显示/隐藏

2.4 add/remove(element)函数：

添加对象到当前场景/移除场景中的某个元素

2.5 findElements（code）函数：

查找场景中的对象

3 Node：

3.1 dragable/selected/editAble/rotate属性：

设置节点是否可以被拖动/是否被选中/是否可编辑/节点旋转的角度

3.2 setImage（url）/setBound（x,y,width,height）函数：

设置节点的图片/坐标和宽，高

4.各种事件

eventTo(){node.mousedown(function(event){if(event.button == 2){node.text = '按下右键';                    }else if(event.button == 1){node.text = '按下中键';                    }else if(event.button == 0){node.text = '按下左键';    }                });node.mouseup(function(event){                if(event.button == 2){node.text = '松开右键';                    }else if(event.button == 1){node.text = '松开中键';                    }else if(event.button == 0){node.text = '松开左键';    }});    node.click(function(event){                    console.log("单击");                });    node.dbclick(function(event){                console.log("双击");                });node.mousedrag(function(event){                console.log("拖拽");});    node.mouseover(function(event){                console.log("mouseover");                });node.mousemove(function(event){                console.log("mousemove");                });    node.mouseout(function(event){                console.log("mouseout");                });    }

部分内容参照

jTopo的基本使用相关推荐

关于jTopo的引用
jTopo是一款 2 D和3D模型展示的插件,不过目前文档不是很齐全,刚开始看的时候就有点懵了,因为你在网上很难找到jTopo的资料.下面我就介绍一下jTopo 的引用吧. 1.首先在官网上下载到jT ...
jtopo绘图帧数与cpu使用率
jtopo绘图页面一打开,cpu就飙高原来是jtopo每秒24帧的绘图导致cpu飙高了把帧数降低到10帧看看 cpu总算降下来了, 缺点就是拖动图标的时候不够流畅, 一般要20帧以上才会有流畅的感 ...
火狐浏览器jtopo节点切换tab后消失报错NS_ERROR_FAILURE的解决
火狐浏览器切换tab后流程节点消失,js报错NS_ERROR_FAILURE,网上查询该错误为元素隐藏后火狐相关的api调用会抛异常,只要先判断下元素的display属性是否为none,为none就不 ...
手绘topo图组件 vue + element-ui + jtopo
系统不识别美元符号,emit和Message前需要加$符号 html部分 <div class="close-it" @click="closePage" ...
Vue+JTopo（一）
1.下载js jtopo 更新下载 (不知道为什么网站被封禁了--在这提供下我现在用的 jtopo-1.4.4_trial-esm-min.js) 链接:https://pan.baidu.com/s ...
JTopo添加动态连线
效果如下先在 JTopo 的 link 原型上定义一个方法 window.requestAnimationFrame = window.requestAnimationFrame || window ...
html 拓扑图开源,GitHub - pylixm/zJTopo: 开源拓扑图工具类jTopo的扩展,jtopo是一个不错的拓扑图,基于html5 canvas,功能强大...
zJTopo 开源拓扑图工具类jTopo的扩展说明该项目依赖于开源拓扑图工具类jTopo,详情:JTopo 联系本人:799378666@qq.com ###扩展api简介 ///获取该场景下所有 ...
php画网络拓扑图,jtopo js插件绘制网络拓扑图
一.实现的功遇新是直朋能到能 1.拓扑的基遇新是直朋能到分览本绘制 2.拓扑放射遇新是直朋能到分览性布局 3.多级拓扑遇新是直朋能到分览的实现 4.下级拓扑节点的隐藏与新直能分支调二浏页器朋代说,展现 ...
jTopo入门简单实现拓扑图
最近项目中需要绘制拓扑图,于是研究了下绘制拓扑图的组件,jtopo是一款比较简单易上手的开发工具包,分享给大家. jtopo特点 1.完全基于HTML5 Canvas开发,API平易近人.几乎简单到了 ...
多页面应用画拓扑图利器-jTopo
多页面应用画拓扑图利器-jTopo 文章目录多页面应用画拓扑图利器-jTopo 前言入门 api 结点连接其它解决数据问题前言 jTopo主要应用在多页面web网站上,一款完全基于HTML ...

jTopo的基本使用

jTopo的基本使用相关推荐

最新文章

热门文章