在vue项目中，用JTopo画关系碰撞图

1：引入jtopo文件

2：jtopo是基于canvas，所以需要一个canvas画布

3：

var canvas = document.getElementById('canvas');
this.canvas = canvas//保存在vue的data数据中
//抽象的舞台对象对应一个Canvas对象，所有图形展示的地方
var stage = new JTopo.Stage(canvas);
this.stage = stage //保存在vue的data数据中
//场景对象
var scene = new JTopo.Scene(stage);
this.scene = scene//保存在vue的data数据中
// //背景颜色设置
// scene.background='#CDC5BF';

4:画出图形的事件

lianxian(){
// var canvas = document.getElementById('canvas');
// //抽象的舞台对象对应一个Canvas对象，所有图形展示的地方
// var stage = new JTopo.Stage(canvas);
// //场景对象
// var scene = new JTopo.Scene(stage);
// // //背景颜色设置
// // scene.background='#CDC5BF';

//节点添加
var node1 = new JTopo.CircleNode('node1');
node1.radius = 24; // 半径
node1.alpha = 0.7;
node1.fillColor = '35,142,116'; // 填充颜色
node1.setLocation(30, 30);
node1.textPosition = 'Middle_Center'; // 文本位置
this.scene.add(node1);

//节点添加
var node2 = new JTopo.CircleNode('node2');
node2.radius = 24; // 半径
node2.alpha = 0.7;
node2.fillColor = '35,142,116'; // 填充颜色
node2.setLocation(300, 100);
node2.textPosition = 'Middle_Center'; // 文本位置
this.scene.add(node2);

//节点添加
var node3 = new JTopo.CircleNode('node3');
node3.radius = 24; // 半径
node3.alpha = 0.7;
node3.fillColor = '35,142,116'; // 填充颜色
node3.setLocation(200, 400);
node3.textPosition = 'Middle_Center'; // 文本位置
this.scene.add(node3);

//连线
var link = new JTopo.Link(node1, node2,'通信录好友');
link.lineWidth = 1; // 线宽
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
link.strokeColor = '87,131,194';
link.arrowsRadius = 5; //箭头大小
this.scene.add(link);
//连线
var link = new JTopo.Link(node1, node3,'通信录好友');
link.lineWidth = 1; // 线宽
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
link.strokeColor = '87,131,194';
link.arrowsRadius = 5; //箭头大小
this.scene.add(link);
},

5：清空的事件

//清空jtopo画布
jtopoClear(){
this.scene.clear()
}

在vue项目中，用JTopo画关系碰撞图

猜你喜欢