标签（空格分隔）： js
var link = new JTopo.Link(nodeA, nodeZ, text); // 直线
var link = new JTopo.FoldLink(nodeA, nodeZ, text); // 折线
var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);// 二次折线
var link = new JTopo.CurveLink(nodeA, nodeZ, text); // 曲线
link.lineWidth = 6; // 线宽
link.dashedPattern = 5; // 虚线宽度间距
link.textOffsetY = 3; // 文本偏移量（向下3个像素）（可设置正负值）
link.strokeColor = '0,0,255';//（包括#000、#000000、0,0,0三种）
link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
link.arrowsRadius = 40; // 添加线的指向箭头
link.offsetGap =40; // 二次折线设置首末线的长度
link.bundleOffset = 20; // 折线拐角处的长度link.bundleGap = 20; // 线条之间的间隔
具体其他属性见下面demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jTopo线的属性</title>
<style>
ul.operate {
margin-top: 10px;
margin-left: 10px;
}
ul.operate li {
margin-top: 10px;
}
</style>
</head>
<body>
<canvas width="850" height="550" id="canvas"></canvas>
<ul class="operate">
<li>线的属性的改变</li>
<li>
<button id="changeLineColor">改变线的颜色</button>
</li>
<li>
<button id="changeLineWidth">改变线的粗细</button>
</li>
<li>
<button id="changeLineArrow">改变线的箭头</button>
</li>
<li> <button id="deleteLine">删除线</button></li>
</ul>
<script src="./jquery-3.3.1.min.js"></script>
<script src="./jtopo-0.4.7-min.js"></script>
<script src="./toolbar.js"></script>
<script>
$(document).ready(function () {
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
//显示工具栏
showJTopoToobar(stage);
var scene = new JTopo.Scene();
stage.add(scene);
scene.background = './img/bg.jpg';
stage.mode = "select";//可以框选多个节点、可以点击单个节点
var cloudNode = new JTopo.Node('root');
cloudNode.setSize(30, 30);
cloudNode.setLocation(360, 230);
cloudNode.setImage('./img/person.png');
cloudNode.layout = {
type: 'circle',
radius: 200
};
scene.add(cloudNode);
for (var i = 1; i < 20; i++) {
// var node = new JTopo.CircleNode('host' + i);
var node = new JTopo.Node('172.16.230.' + i);
node.fillStyle = '200,255,0';
node.radius = 15;
node.setLocation(scene.width * Math.random(), scene.height * Math.random());
node.setImage('./img/apple.jpg');
node.layout = {
type: 'circle',
radius: 80
};
scene.add(node);
var link = new JTopo.Link(cloudNode, node, '文字' + i);
link.strokeColor = '220,20,60';//JTopo.util.randomColor(); //1.线----颜色 '220,20,60'
link.font = "12px Consolas"; //2.线上字体大小
link.lineWidth = "1"; //3.线---粗细
link.arrowsRadius = 6; //4. 箭头大小---值越大箭头越大，值为null 表示没有箭头
// console.log("link========", link);
scene.add(link);
}
JTopo.layout.layoutNode(scene, cloudNode, true);
scene.addEventListener('mouseup', function (e) {
if (e.target && e.target.layout) {
JTopo.layout.layoutNode(scene, e.target, true);
}
});
$("#changeLineColor").click(function () {
var link= scene.selectedElements;
// console.log("---------选中的线的信息---------",link);
if ( link.length !=0 && link!= null && link[0].elementType == "link"){
// scene.remove(link);
// link[0].lineWidth = "10";
link[0].strokeColor = JTopo.util.randomColor();
}else{
alert("请选择一条线！");
}
})
$("#changeLineWidth").click(function () {
var link= scene.selectedElements;
// console.log("---------选中的线的信息---------",link);
if ( link.length !=0 && link!= null && link[0].elementType == "link"){
var linW = Math.ceil(Math.random()*10);
link[0].lineWidth = linW;
console.log("线宽是------",linW);
}else{
alert("请选择一条线！");
}
})
$("#changeLineArrow").click(function () {
var link= scene.selectedElements;
if ( link.length !=0 && link!= null && link[0].elementType == "link"){
var linW = Math.ceil(Math.random()*10);
link[0].arrowsRadius = linW;
console.log("线箭头是------",linW);
}else{
alert("请选择一条线！");
}
})
$("#deleteLine").click(function () {
var link= scene.selectedElements;
if ( link.length !=0 && link!= null && link[0].elementType == "link"){
scene.remove(link[0]);
}else{
alert("请选择一条线！");
}
})
});
</script>
</body>
</html>
线的属性.png
网友评论