View unanswered posts | View active topics It is currently 2019-11-22 6:48



Reply to topic  [ 11 posts ] 
 如何扩充link.Type 
Author Message
新手上路

Joined: 2019-02-22 13:42
Posts: 9
Post 如何扩充link.Type
如何扩充linkType以便达到多直角的连线方式


2019-02-22 13:47
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 如何扩充link.Type
您好!

采用 shapeLink 可以实现您的需求,不知道您是拖动创建还是通过代码进行创建的,如果是拖动创建的,可能比较难达到理想的效果,如果是通过代码创建的,很容易就达到您想要的效果了。


2019-02-22 18:07
Profile
新手上路

Joined: 2019-02-22 13:42
Posts: 9
Post Re: 如何扩充link.Type
现在通过setLinkPathFunction的方法实现了效果,但是部分拖动时拐点问题的点计算同步移动有问题,不能和默认移动效果保持一致


Attachments:
2019-02-25_10-17-34.gif
2019-02-25_10-17-34.gif [ 768.15 KiB | Viewed 1018 times ]
2019-02-25 10:20
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 如何扩充link.Type
您好!

看了您发的动图,我推测是因为您在设置 setLinkPathFunction 的时候,自己加了控制点,但是这些个控制点可能加的不够,才没能达到您想要的效果。

我举个例子来说吧:

比如我有一个需求,想要做这种下凹的折线样式
Attachment:
01.png
01.png [ 4.15 KiB | Viewed 1015 times ]


但是我想控制下凹的长度始终跟最靠近的网元保持一定的距离,就像下面这样
Attachment:
02.png
02.png [ 14.61 KiB | Viewed 1015 times ]


那么我就需要,对每个折线点的位置进行控制,控制它刚好能够达到我想要的效果,比如这里我是这样处理的:
Attachment:
03.png
03.png [ 19.14 KiB | Viewed 1015 times ]


通过计算位置,给一个偏移。

由于您的需求比较针对您的具体项目,我这边无法给出您一个具体的建议,我建议您在关检地方,加一些控制点,这些控制点的位置,是以起始点或者终止点的位置为参考的。

这样去做的话,应该能够满足您的需求了


2019-02-25 15:47
Profile
新手上路

Joined: 2019-02-22 13:42
Posts: 9
Post Re: 如何扩充link.Type
你说的我懂,现在就是通过加点已经基本实现了功能

但是在拖动的时候,拐点重合的位置不能一起动,就是twaver里头原来算法的正交直角那样的效果,这样不统一。

现在右边整体的group拖动没问题,就是group里头单个拖动,然后本来对齐好的四条先,就在直角处分开了,通过判断两个之间最小x距离差,也不行啊,这个就是目前的问题。

然后就是把group收起来时候,现在右边是直接合并为一条直线,左边是为两条线的,主要就是要效果统一。

归纳就是1/通过当前加点的效果整体拖动时中间竖线一起动(去x差值的一半实现),但单个移动时,中线不移动。
2/收缩group时,能像左边一样多条线保持平铺的效果,现在通过set函数之后,线是并到一起了

有没有什么好的意见,twaver的压缩混淆看的有点头疼了


Attachments:
2019-02-25_19-48-02.gif
2019-02-25_19-48-02.gif [ 603.47 KiB | Viewed 1010 times ]
333.png
333.png [ 5.63 KiB | Viewed 1010 times ]
222.png
222.png [ 12.44 KiB | Viewed 1010 times ]
2019-02-25 19:51
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 如何扩充link.Type
您好!

您的问题我仔细研究了一下,先回复一下您的第一个问题吧。

如果我没有理理解错误的话,左边的两个网元,分别都会跟右边的三个网元相连。那么如果想要连成您设想的效果,那么每个连线中间都需要设置三个控制点。

我现在假设从左到右依次为1号、2号、3号控制点。

正常的逻辑是根据起始点和终止点的位置来定中间 3 个控制点的位置,那么就会出现您图上的问题了。那么如果想要避免这样的问题,我下面提供一种思路,不知道符不符合您的要求。

将 1 号控制点和 2 号控制点位置写死,始终是根据左边 group 的 rect 来做一定的偏移,这样就不会出现上述问题了。

Code:
<script>
    var box, network;

    box = new twaver.ElementBox();

    network = new twaver.vector.Network(box);

    document.body.appendChild(network.getView());
    network.adjustBounds({
        x: 0,
        y: 0,
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    });

    var node1 = new twaver.Follower({
        name: 'node1'
    });
    node1.setLocation(150, 150);
    box.add(node1);

    var node2 = new twaver.Follower({
        name: 'node2'
    });
    node2.setLocation(150, 300);
    box.add(node2);

    var group1 = new twaver.Group();
    box.add(group1);
    group1.setExpanded(true);
    node1.setParent(group1);
    node2.setParent(group1);

    var node3 = new twaver.Follower({
        name: 'node3'
    });
    node3.setLocation(450, 150);
    box.add(node3);

    var node4 = new twaver.Follower({
        name: 'node4'
    });
    node4.setLocation(500, 300);
    box.add(node4);

    var node5 = new twaver.Follower({
        name: 'node5'
    });
    node5.setLocation(550, 200);
    box.add(node5);

    var group2 = new twaver.Group();
    box.add(group2);
    group2.setExpanded(true);
    node3.setParent(group2);
    node4.setParent(group2);
    node5.setParent(group2);

    box.add(new twaver.Link(node1, node3));
    box.add(new twaver.Link(node1, node4));
    box.add(new twaver.Link(node1, node5));
    box.add(new twaver.Link(node2, node3));
    box.add(new twaver.Link(node2, node4));
    box.add(new twaver.Link(node2, node5));

    network.setLinkPathFunction(function(linkUI, defaultPoints) {
        var f = linkUI.getFromPoint();
        var t = linkUI.getToPoint();

        var link = linkUI.getElement();
        var fromNode = link.getFromNode();

        var group = fromNode.getParent();
        var rect = network.getElementUI(group).getBodyRect();

        var points = new twaver.List();
        points.add(f);

        var p1, p2, p3;

        if(fromNode === node1){
            p1 = {
                x: rect.x + rect.width + 100,
                y: f.y
            };
            p2 = {
                x: rect.x + rect.width + 100,
                y: rect.y + rect.height/2
            };
            p3 = {
                x: t.x,
                y: rect.y + rect.height/2
            };
        }else if(fromNode === node2){
            p1 = {
                x: rect.x + rect.width + 100,
                y: f.y
            };
            p2 = {
                x: rect.x + rect.width + 100,
                y: rect.y + rect.height/2
            };
            p3 = {
                x: t.x,
                y: rect.y + rect.height/2
            };
        }

        points.add(p1);
        points.add(p2);
        points.add(p3);
       
        points.add(t);

        setTimeout(function () {
            network.invalidateElementUIs();
        }, 0);

        return points;
    })

    function addPoint(x, y) {
        return { x, y };
    }
</script>


2019-02-26 15:53
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 如何扩充link.Type
您好!

您的第二个问题,不太好解决,因为本质来说,分组之间是不存在连线的,这种平行的连线只会出现在某两个网元之间存在多条连线的时候,并且 link.bundle.expanded 属性为 true 的情况。

因此想要达到您想要的效果,就必须要进行处理了。

有一个思路是,当判断分组闭合的时候,将原本的连线隐藏起来,通过 setVisible 方法隐藏。然后,再分组之间创建几条新的连线代替原来的连线,其实节点和终止节点都是 group,如果展开的时候,又将临时创建的节点给删除掉,将原本的连线 setVisible 属性设为 true,给还原回来。


2019-02-26 16:02
Profile
新手上路

Joined: 2019-02-22 13:42
Posts: 9
Post Re: 如何扩充link.Type
wuzhiqin wrote:
您好!

您的问题我仔细研究了一下,先回复一下您的第一个问题吧。

如果我没有理理解错误的话,左边的两个网元,分别都会跟右边的三个网元相连。那么如果想要连成您设想的效果,那么每个连线中间都需要设置三个控制点。

我现在假设从左到右依次为1号、2号、3号控制点。

正常的逻辑是根据起始点和终止点的位置来定中间 3 个控制点的位置,那么就会出现您图上的问题了。那么如果想要避免这样的问题,我下面提供一种思路,不知道符不符合您的要求。

将 1 号控制点和 2 号控制点位置写死,始终是根据左边 group 的 rect 来做一定的偏移,这样就不会出现上述问题了。

Code:
<script>
    var box, network;

    box = new twaver.ElementBox();

    network = new twaver.vector.Network(box);

    document.body.appendChild(network.getView());
    network.adjustBounds({
        x: 0,
        y: 0,
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    });

    var node1 = new twaver.Follower({
        name: 'node1'
    });
    node1.setLocation(150, 150);
    box.add(node1);

    var node2 = new twaver.Follower({
        name: 'node2'
    });
    node2.setLocation(150, 300);
    box.add(node2);

    var group1 = new twaver.Group();
    box.add(group1);
    group1.setExpanded(true);
    node1.setParent(group1);
    node2.setParent(group1);

    var node3 = new twaver.Follower({
        name: 'node3'
    });
    node3.setLocation(450, 150);
    box.add(node3);

    var node4 = new twaver.Follower({
        name: 'node4'
    });
    node4.setLocation(500, 300);
    box.add(node4);

    var node5 = new twaver.Follower({
        name: 'node5'
    });
    node5.setLocation(550, 200);
    box.add(node5);

    var group2 = new twaver.Group();
    box.add(group2);
    group2.setExpanded(true);
    node3.setParent(group2);
    node4.setParent(group2);
    node5.setParent(group2);

    box.add(new twaver.Link(node1, node3));
    box.add(new twaver.Link(node1, node4));
    box.add(new twaver.Link(node1, node5));
    box.add(new twaver.Link(node2, node3));
    box.add(new twaver.Link(node2, node4));
    box.add(new twaver.Link(node2, node5));

    network.setLinkPathFunction(function(linkUI, defaultPoints) {
        var f = linkUI.getFromPoint();
        var t = linkUI.getToPoint();

        var link = linkUI.getElement();
        var fromNode = link.getFromNode();

        var group = fromNode.getParent();
        var rect = network.getElementUI(group).getBodyRect();

        var points = new twaver.List();
        points.add(f);

        var p1, p2, p3;

        if(fromNode === node1){
            p1 = {
                x: rect.x + rect.width + 100,
                y: f.y
            };
            p2 = {
                x: rect.x + rect.width + 100,
                y: rect.y + rect.height/2
            };
            p3 = {
                x: t.x,
                y: rect.y + rect.height/2
            };
        }else if(fromNode === node2){
            p1 = {
                x: rect.x + rect.width + 100,
                y: f.y
            };
            p2 = {
                x: rect.x + rect.width + 100,
                y: rect.y + rect.height/2
            };
            p3 = {
                x: t.x,
                y: rect.y + rect.height/2
            };
        }

        points.add(p1);
        points.add(p2);
        points.add(p3);
       
        points.add(t);

        setTimeout(function () {
            network.invalidateElementUIs();
        }, 0);

        return points;
    })

    function addPoint(x, y) {
        return { x, y };
    }
</script>


此处提供的想法,其实类似了最开始通过ShapeLink的方式来做,只移动和node最接近的第一个点,其他拐点全部写死,但是这样效果不太好,之前不知道如何通过元素获取UI类,通过上面代码知道了通过getElementUI(Link);可以获取了。

现在考虑的实现方式是,就是通过默认生成一套位置效果,就是初始化效果,之后通过addIntercationListener的监听,通过e.kind==='clickElement' && e.element instanceof tw.Group的方式区分原素,分别设置不同的setLinkPointsFunction来实现效果

现在的问题就成了,可以区分当前为Group,但是无法放别其他元素,应为Group继承自Follwer,而Follwer继承自Node。

那么现在正在尝试为Group时,一套画点函数,其他就使用另外一套。现在正在尝试这个。

感谢之前的回复


2019-02-27 11:06
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 如何扩充link.Type
InoriHimea wrote:
wuzhiqin wrote:
您好!

您的问题我仔细研究了一下,先回复一下您的第一个问题吧。

如果我没有理理解错误的话,左边的两个网元,分别都会跟右边的三个网元相连。那么如果想要连成您设想的效果,那么每个连线中间都需要设置三个控制点。

我现在假设从左到右依次为1号、2号、3号控制点。

正常的逻辑是根据起始点和终止点的位置来定中间 3 个控制点的位置,那么就会出现您图上的问题了。那么如果想要避免这样的问题,我下面提供一种思路,不知道符不符合您的要求。

将 1 号控制点和 2 号控制点位置写死,始终是根据左边 group 的 rect 来做一定的偏移,这样就不会出现上述问题了。

Code:
<script>
    var box, network;

    box = new twaver.ElementBox();

    network = new twaver.vector.Network(box);

    document.body.appendChild(network.getView());
    network.adjustBounds({
        x: 0,
        y: 0,
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    });

    var node1 = new twaver.Follower({
        name: 'node1'
    });
    node1.setLocation(150, 150);
    box.add(node1);

    var node2 = new twaver.Follower({
        name: 'node2'
    });
    node2.setLocation(150, 300);
    box.add(node2);

    var group1 = new twaver.Group();
    box.add(group1);
    group1.setExpanded(true);
    node1.setParent(group1);
    node2.setParent(group1);

    var node3 = new twaver.Follower({
        name: 'node3'
    });
    node3.setLocation(450, 150);
    box.add(node3);

    var node4 = new twaver.Follower({
        name: 'node4'
    });
    node4.setLocation(500, 300);
    box.add(node4);

    var node5 = new twaver.Follower({
        name: 'node5'
    });
    node5.setLocation(550, 200);
    box.add(node5);

    var group2 = new twaver.Group();
    box.add(group2);
    group2.setExpanded(true);
    node3.setParent(group2);
    node4.setParent(group2);
    node5.setParent(group2);

    box.add(new twaver.Link(node1, node3));
    box.add(new twaver.Link(node1, node4));
    box.add(new twaver.Link(node1, node5));
    box.add(new twaver.Link(node2, node3));
    box.add(new twaver.Link(node2, node4));
    box.add(new twaver.Link(node2, node5));

    network.setLinkPathFunction(function(linkUI, defaultPoints) {
        var f = linkUI.getFromPoint();
        var t = linkUI.getToPoint();

        var link = linkUI.getElement();
        var fromNode = link.getFromNode();

        var group = fromNode.getParent();
        var rect = network.getElementUI(group).getBodyRect();

        var points = new twaver.List();
        points.add(f);

        var p1, p2, p3;

        if(fromNode === node1){
            p1 = {
                x: rect.x + rect.width + 100,
                y: f.y
            };
            p2 = {
                x: rect.x + rect.width + 100,
                y: rect.y + rect.height/2
            };
            p3 = {
                x: t.x,
                y: rect.y + rect.height/2
            };
        }else if(fromNode === node2){
            p1 = {
                x: rect.x + rect.width + 100,
                y: f.y
            };
            p2 = {
                x: rect.x + rect.width + 100,
                y: rect.y + rect.height/2
            };
            p3 = {
                x: t.x,
                y: rect.y + rect.height/2
            };
        }

        points.add(p1);
        points.add(p2);
        points.add(p3);
       
        points.add(t);

        setTimeout(function () {
            network.invalidateElementUIs();
        }, 0);

        return points;
    })

    function addPoint(x, y) {
        return { x, y };
    }
</script>


此处提供的想法,其实类似了最开始通过ShapeLink的方式来做,只移动和node最接近的第一个点,其他拐点全部写死,但是这样效果不太好,之前不知道如何通过元素获取UI类,通过上面代码知道了通过getElementUI(Link);可以获取了。

现在考虑的实现方式是,就是通过默认生成一套位置效果,就是初始化效果,之后通过addIntercationListener的监听,通过e.kind==='clickElement' && e.element instanceof tw.Group的方式区分原素,分别设置不同的setLinkPointsFunction来实现效果

现在的问题就成了,可以区分当前为Group,但是无法放别其他元素,应为Group继承自Follwer,而Follwer继承自Node。

那么现在正在尝试为Group时,一套画点函数,其他就使用另外一套。现在正在尝试这个。

感谢之前的回复


您好!

您对我们公司 twaver 框架理解的很透彻,确实如您所说的一样,Group 是继承于 Follower 而 Follower 又是继承自 Node。

比如某个网元是 Group,那么下面这些判断都是 true 了:

Code:
group instanceof twaver.Group
group instanceof twaver.Follower
group instanceof twaver.Node


解决这个问题的方式也很简单。

当可能会存在上述情况的时候,您可以采用朝网元上添加 client 属性的方式,也就是通过设置 node.setClient("type", "myType") 来添加区分的类型。 以后如果想区分网元的时候,可以这样判断:
Code:
if(node.getClient("type") === "myType"){
    // 做一些操作
}


2019-02-27 15:02
Profile
新手上路

Joined: 2019-02-22 13:42
Posts: 9
Post Re: 如何扩充link.Type
wuzhiqin wrote:
InoriHimea wrote:
wuzhiqin wrote:
您好!

您的问题我仔细研究了一下,先回复一下您的第一个问题吧。

如果我没有理理解错误的话,左边的两个网元,分别都会跟右边的三个网元相连。那么如果想要连成您设想的效果,那么每个连线中间都需要设置三个控制点。

我现在假设从左到右依次为1号、2号、3号控制点。

正常的逻辑是根据起始点和终止点的位置来定中间 3 个控制点的位置,那么就会出现您图上的问题了。那么如果想要避免这样的问题,我下面提供一种思路,不知道符不符合您的要求。

将 1 号控制点和 2 号控制点位置写死,始终是根据左边 group 的 rect 来做一定的偏移,这样就不会出现上述问题了。

Code:
<script>
    var box, network;

    box = new twaver.ElementBox();

    network = new twaver.vector.Network(box);

    document.body.appendChild(network.getView());
    network.adjustBounds({
        x: 0,
        y: 0,
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    });

    var node1 = new twaver.Follower({
        name: 'node1'
    });
    node1.setLocation(150, 150);
    box.add(node1);

    var node2 = new twaver.Follower({
        name: 'node2'
    });
    node2.setLocation(150, 300);
    box.add(node2);

    var group1 = new twaver.Group();
    box.add(group1);
    group1.setExpanded(true);
    node1.setParent(group1);
    node2.setParent(group1);

    var node3 = new twaver.Follower({
        name: 'node3'
    });
    node3.setLocation(450, 150);
    box.add(node3);

    var node4 = new twaver.Follower({
        name: 'node4'
    });
    node4.setLocation(500, 300);
    box.add(node4);

    var node5 = new twaver.Follower({
        name: 'node5'
    });
    node5.setLocation(550, 200);
    box.add(node5);

    var group2 = new twaver.Group();
    box.add(group2);
    group2.setExpanded(true);
    node3.setParent(group2);
    node4.setParent(group2);
    node5.setParent(group2);

    box.add(new twaver.Link(node1, node3));
    box.add(new twaver.Link(node1, node4));
    box.add(new twaver.Link(node1, node5));
    box.add(new twaver.Link(node2, node3));
    box.add(new twaver.Link(node2, node4));
    box.add(new twaver.Link(node2, node5));

    network.setLinkPathFunction(function(linkUI, defaultPoints) {
        var f = linkUI.getFromPoint();
        var t = linkUI.getToPoint();

        var link = linkUI.getElement();
        var fromNode = link.getFromNode();

        var group = fromNode.getParent();
        var rect = network.getElementUI(group).getBodyRect();

        var points = new twaver.List();
        points.add(f);

        var p1, p2, p3;

        if(fromNode === node1){
            p1 = {
                x: rect.x + rect.width + 100,
                y: f.y
            };
            p2 = {
                x: rect.x + rect.width + 100,
                y: rect.y + rect.height/2
            };
            p3 = {
                x: t.x,
                y: rect.y + rect.height/2
            };
        }else if(fromNode === node2){
            p1 = {
                x: rect.x + rect.width + 100,
                y: f.y
            };
            p2 = {
                x: rect.x + rect.width + 100,
                y: rect.y + rect.height/2
            };
            p3 = {
                x: t.x,
                y: rect.y + rect.height/2
            };
        }

        points.add(p1);
        points.add(p2);
        points.add(p3);
       
        points.add(t);

        setTimeout(function () {
            network.invalidateElementUIs();
        }, 0);

        return points;
    })

    function addPoint(x, y) {
        return { x, y };
    }
</script>


此处提供的想法,其实类似了最开始通过ShapeLink的方式来做,只移动和node最接近的第一个点,其他拐点全部写死,但是这样效果不太好,之前不知道如何通过元素获取UI类,通过上面代码知道了通过getElementUI(Link);可以获取了。

现在考虑的实现方式是,就是通过默认生成一套位置效果,就是初始化效果,之后通过addIntercationListener的监听,通过e.kind==='clickElement' && e.element instanceof tw.Group的方式区分原素,分别设置不同的setLinkPointsFunction来实现效果

现在的问题就成了,可以区分当前为Group,但是无法放别其他元素,应为Group继承自Follwer,而Follwer继承自Node。

那么现在正在尝试为Group时,一套画点函数,其他就使用另外一套。现在正在尝试这个。

感谢之前的回复


您好!

您对我们公司 twaver 框架理解的很透彻,确实如您所说的一样,Group 是继承于 Follower 而 Follower 又是继承自 Node。

比如某个网元是 Group,那么下面这些判断都是 true 了:

Code:
group instanceof twaver.Group
group instanceof twaver.Follower
group instanceof twaver.Node


解决这个问题的方式也很简单。

当可能会存在上述情况的时候,您可以采用朝网元上添加 client 属性的方式,也就是通过设置 node.setClient("type", "myType") 来添加区分的类型。 以后如果想区分网元的时候,可以这样判断:
Code:
if(node.getClient("type") === "myType"){
    // 做一些操作
}



啊,对啊,设置自定义属性,我都给忘了,毕竟是第一次做,还有很多api方法不太熟悉,都是重demo中看,然后慢慢做这个流程呢图的

按照分类型的方式设置不同的绘制发现,现在效果也基本与需求相当了。

感谢!!


Attachments:
File comment: 单个
2019-02-28_13-22-13.gif
2019-02-28_13-22-13.gif [ 643.13 KiB | Viewed 953 times ]
File comment: 整体
2019-02-28_13-20-30.gif
2019-02-28_13-20-30.gif [ 782.88 KiB | Viewed 953 times ]
2019-02-28 13:24
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:11
Posts: 164
Post Re: 如何扩充link.Type
InoriHimea wrote:
啊,对啊,设置自定义属性,我都给忘了,毕竟是第一次做,还有很多api方法不太熟悉,都是重demo中看,然后慢慢做这个流程呢图的

按照分类型的方式设置不同的绘制发现,现在效果也基本与需求相当了。

感谢!!



您这效果已经不错了,我们公司的技术人员同样也是在与客户的交流中不断的完善我们的产品,而且很多灵感也是从客户身上学习到的。

不客气,多沟通多交流,共同进步。


2019-02-28 14:13
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 11 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest


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:  
cron