JointJS：使链接标签能够在链接本身上移动

Question

在 JointJS 图表中的链接中，我尝试实现这个教程 (http://jointjs.com/tutorial/constraint-move-to-circle) 来移动链接上的标签，但是我不知道应该把ConstraintElementView放在哪里。

1. 我想使链接的标签可以在链接上移动。那么，我如何将链接定义为可移动标签的“路径”？

ConstraintElementView

var constraint = label; // ???

var ConstraintElementView = joint.dia.ElementView.extend({

    pointerdown: function(evt, x, y) {
        var position = this.model.get('position');
        var size = this.model.get('size');
        var center = g.rect(position.x, position.y, size.width, size.height).center();
        var intersection = constraint.intersectionWithLineFromCenterToPoint(center);
        joint.dia.ElementView.prototype.pointerdown.apply(this, [evt, intersection.x, intersection.y]);
    },
    pointermove: function(evt, x, y) {
        var intersection = constraint.intersectionWithLineFromCenterToPoint(g.point(x, y));
        joint.dia.ElementView.prototype.pointermove.apply(this, [evt, intersection.x, intersection.y]);
    }
});

链接标签

paper.on({
    /**
    *   Doubleclick on link: Add label for link
    */
    'cell:pointerdblclick': function(cellView, event, x, y){            
        if (cellView.model.isLink()) {
            cellView.model.label(0, {
                position: .5,
                attrs: {
                    rect: { fill: '#eeeeee' },
                    text: { text: 'text', 'font-size': 12, ref: 'rect' }
                }
            });
        }
    }
});

纸张

var paper = new joint.dia.Paper({
    el: $('#canvas'),
    width: 801,
    height: 496,
    model: graph,
    gridSize: 10,
    elementView: ConstraintElementView,
    defaultLink: new joint.dia.Link({
        router: { name: 'manhattan' },
        connector: { name: 'rounded' },
        attrs: {
            '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#6a6c8a', stroke: '#6a6c8a' },
            '.connection': { stroke: '#6a6c8a', 'stroke-width': 2 }
        }
    })
});

2. 由于它可以在连接线上移动，所以应该将其捕捉到曼哈顿风格连接线的每个段落的中心。但我找不到获取每个段落中心值的机会。

Note: I have translated the content to Chinese as requested.

- user3142695

Answer 1

您不需要创建任何路径。只需通过计算其相对值（当然也可以使用绝对值）来更改标签的位置。

'cell:pointermove': function(event, x, y) {
    if (event.model.isLink()) {
            var clickPoint  = { x: event._dx, y: event._dy },
                lengthTotal = event.sourcePoint.manhattanDistance(event.targetPoint),
                length      = event.sourcePoint.manhattanDistance(clickPoint),
                position    = round(length / lengthTotal, 2);

            event.model.label(0, { position: position });

    }
}

- user3848987

---

但是这个计算的是直线距离，我需要曼哈顿距离。 - user3142695

能否获取曼哈顿距离的每个分段大小？ - user3142695

只有两点需要注意：1. 在IE11中，round未定义，而Math.round不是一个合适的替代品。然而，完全删除round同样有效。2. 我必须使用paper.on()来运行这段代码，这在答案中并不清楚。希望这能帮助其他人。 - Vitani

Answer 2

通过画布上的 interactive 对象的 labelMove 选项，可以使标签沿着链接可移动：

var paper = new joint.dia.Paper({ // ... interactive: { labelMove: true } // ... })

此标记默认为false。

- dave

---

哦，我在文档中没有看到那个。但我想把标签捕捉到线段的中心。不知道是否可以获取每个线段的大小。因此，我认为我必须使用类似于“user3848987”提供的解决方案。 - user3142695

顺便说一下：箭头和删除图标会干扰标签的移动。是否可以通过点击而不是悬停链接来显示它们？ - user3142695

交互式：function(cellView) { return { labelMove: true, vertexAdd: false } } 没有效果：顶点不会被添加，但标签仍然无法移动... - user3142695

我有相同的交互选项（虽然我将其设置为对象而不是函数），它可以工作，但你必须抓住标签的边缘，而不是内部的文本。 - Ian Horwill