View unanswered posts | View active topics It is currently 2020-08-04 9:50



Reply to topic  [ 6 posts ] 
 自定义连线捆绑和展开显示问题! 
Author Message
新手上路

Joined: 2020-06-18 7:19
Posts: 23
Post 自定义连线捆绑和展开显示问题!
我的两个节点之间可能有多条连线,用 twaver自带的连线类型时,展开状态每个连线之间有间隔,但是自定义的连线就是重叠在一起的,自定义的连线借鉴的是你们例子中的Tilford Tree,求解决方法


2020-07-06 19:45
Profile
TWaver开发组
User avatar

Joined: 2019-04-23 11:02
Posts: 88
Post Re: 自定义连线捆绑和展开显示问题!
那个例子中使用的事 fromNode 和 toNode的点,把他们换成 传入参数(defaultPoints) 的第一个和最后一个作为起始点和结束点来算这样就可以了。
Code:
network.setLinkPathFunction(function (linkUI, defaultPoints) {
        // var f = linkUI.getFromPoint();
        // var t = linkUI.getToPoint();
        var f = defaultPoints.get(0);
        var t = defaultPoints.get(defaultPoints._as.length-1);
        var points = new twaver.List();
        points.add(f);
        points.add(t);
        var dx = Math.abs(f.x - t.x);
        var dy = Math.abs(f.y - t.y);
        if (linkUI.getElement().getClient('link.point.style') === 'CurlyBraces') {
          var cps = new twaver.List();
          cps.add({ x: f.x, y: f.y + dx / 2 });
          cps.add({ x: t.x, y: t.y - dx / 2 });
          cps.add(t);
          points.removeAt(1);
          points.add(cps);
          return points;
        }
        else {
          return defaultPoints;
        }
      });


2020-07-08 16:13
Profile
新手上路

Joined: 2020-06-18 7:19
Posts: 23
Post Re: 自定义连线捆绑和展开显示问题!
您可能没明白我的意思,我要使用曲线去展示两个节点之间的连线,当两个节点有多条连线的时候,不是去切换成别的连线样式,还是曲线的样式,只是要把曲线区分开!现在是两个节点多条连线时曲线重叠在一起了


2020-07-10 10:23
Profile
TWaver开发组
User avatar

Joined: 2019-04-23 11:02
Posts: 88
Post Re: 自定义连线捆绑和展开显示问题!
自定义连线: 设置网元setClient() 自定义属性,通过network.setLinkPathFunction方法,获取连线的点然后从新计算一遍(Tilford Tree 例子中就是这样做的);
或者你重新定义了 一个连线对象(比如MYlink),和其ui,重写其getLinkPoints方法也可以达到自定义连线的效果。
如果您是设置 setStyle() 设置 'link.type':'orthogonal'等属性,这是twaver自带的连线样式。

到底是不是自定义连线?自定义连线不是用setLinkPathFunction方法写的?
如果是,那么将 f 和 t 换成
var f = defaultPoints.get(0);
var t = defaultPoints.get(defaultPoints._as.length-1);
或许是代码给多了,我没有让你换成别的曲线,我说f,t换成上面两点来计算。不用完全把之前的setLinkPathFunction方法都拿过去, 那只是个例子。


2020-07-10 14:30
Profile
新手上路

Joined: 2020-06-18 7:19
Posts: 23
Post Re: 自定义连线捆绑和展开显示问题!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./twaver.js"></script>
<script>
//从下到上
function init() {
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box);

document.body.appendChild(network.getView());
network.adjustBounds({x:0, y:0, width:1800, height:500});

twaver.Styles.setStyle('link.from.yoffset',10);
twaver.Styles.setStyle('link.to.yoffset',-10);
twaver.Styles.setStyle('link.width',2);
twaver.Styles.setStyle('link.color','cyan');
network.setLinkPathFunction(function (linkUI, defaultPoints) {
var f = defaultPoints.get(0);
var t = defaultPoints.get(defaultPoints._as.length-1);

var points = new twaver.List();
points.add(f);
points.add(t);
var dx = Math.abs(f.x - t.x);
var dy = Math.abs(f.y - t.y);
if(t.x < f.x){
var cps = new twaver.List();
//从下到上
cps.add({y: f.y - 3*dy/5, x: f.x - dx/21});
cps.add({y: f.y - 1*dy/5, x: f.x - 22*dx/21});
cps.add(t);
}else{
var cps = new twaver.List();
//从下到上
cps.add({y: f.y - 3*dy/5, x: f.x + dx/21});
cps.add({y: f.y - 1*dy/5, x: f.x + 22*dx/21});
cps.add(t);
}

points.removeAt(1);
points.add(cps);

return points;

});

var node1 = new twaver.Node();
node1.setName("node1");
node1.setLocation(831, 320);
box.add(node1);

var node2 = new twaver.Node();
node2.setName("node2");
node2.setLocation(129, 128);
box.add(node2);

var node3 = new twaver.Node();
node3.setName("node3");
node3.setLocation(246, 128);
box.add(node3);

var node4 = new twaver.Node();
node4.setName("node4");
node4.setLocation(363, 128);
box.add(node4);

var node5 = new twaver.Node();
node5.setName("node5");
node5.setLocation(480, 128);
box.add(node5);

var node6 = new twaver.Node();
node6.setName("node6");
node6.setLocation(597, 128);
box.add(node6);

var node7 = new twaver.Node();
node7.setName("node7");
node7.setLocation(714, 128);
box.add(node7);

var node8 = new twaver.Node();
node8.setName("node8");
node8.setLocation(831, 128);
box.add(node8);

var node9 = new twaver.Node();
node9.setName("node9");
node9.setLocation(948, 128);
box.add(node9);

var node10 = new twaver.Node();
node10.setName("node10");
node10.setLocation(1065, 128);
box.add(node10);

var node11 = new twaver.Node();
node11.setName("node11");
node11.setLocation(1182, 128);
box.add(node11);

var node12 = new twaver.Node();
node12.setName("node12");
node12.setLocation(1299, 128);
box.add(node12);

var node13 = new twaver.Node();
node13.setName("node13");
node13.setLocation(1416, 128);
box.add(node13);

var node14 = new twaver.Node();
node14.setName("node14");
node14.setLocation(1533, 128);
box.add(node14);

//从下到上
var link1 = new twaver.Link(node1, node2);
box.add(link1);
var link11 = new twaver.Link(node1, node2);
box.add(link11);
var link111 = new twaver.Link(node1, node2);
box.add(link111);
var link2 = new twaver.Link(node1, node3);
box.add(link2);
var link3 = new twaver.Link(node1, node4);
box.add(link3);
var link4 = new twaver.Link(node1, node5);
box.add(link4);
var link5 = new twaver.Link(node1, node6);
box.add(link5);
var link6 = new twaver.Link(node1, node7);
box.add(link6);
var link7 = new twaver.Link(node1, node8);
box.add(link7);
var link8 = new twaver.Link(node1, node9);
box.add(link8);
var link9 = new twaver.Link(node1, node10);
box.add(link9);
var link10 = new twaver.Link(node1, node11);
box.add(link10);
var link11 = new twaver.Link(node1, node12);
box.add(link11);
var link12 = new twaver.Link(node1, node13);
box.add(link12);
var link13 = new twaver.Link(node1, node14);
box.add(link13);

//从上到下
// var link1 = new twaver.Link(node2, node1);
// box.add(link1);
// var link2 = new twaver.Link(node3, node1);
// box.add(link2);
// var link3 = new twaver.Link(node4, node1);
// box.add(link3);
// var link4 = new twaver.Link(node5, node1);
// box.add(link4);
// var link5 = new twaver.Link(node6, node1);
// box.add(link5);
// var link6 = new twaver.Link(node7, node1);
// box.add(link6);
// var link7 = new twaver.Link(node8, node1);
// box.add(link7);
// var link8 = new twaver.Link(node9, node1);
// box.add(link8);
// var link9 = new twaver.Link(node10, node1);
// box.add(link9);
// var link10 = new twaver.Link(node11, node1);
// box.add(link10);
// var link11 = new twaver.Link(node12, node1);
// box.add(link11);
// var link12 = new twaver.Link(node13, node1);
// box.add(link12);
// var link13 = new twaver.Link(node14, node1);
// box.add(link13);
}
</script>
</head>
<body onload='init()'>
</body>
</html>

这个例子里面node1和node2之间有三条连线,但是是重叠的,我的诉求是不让他们重叠


2020-07-10 15:07
Profile
TWaver开发组
User avatar

Joined: 2019-04-23 11:02
Posts: 88
Post Re: 自定义连线捆绑和展开显示问题!
因为你的方向是从上至下的,参照link.type表 设置上下连线的的样式,他会计算出多条连线时默认的关联点,defaultPoints就更新了,这样就没问题了。
有多条连线的 设置 .setStyle('link.type', 'orthogonal.vertical');


2020-07-10 16:15
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to: