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

对于JointJS图中的链接，我尝试实现本教程（）来移动链接上的标签，但我不知道将

ConstraintElementView

放在哪里

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

ConstraintTelementView

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 }
        }
    })
});

由于它可在链接上移动，因此应捕捉到曼哈顿样式链接的每个段的中心。但我看不到有任何机会得到每一段的中心值

---

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

'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 });

    }
}

---

可通过纸张上

交互式对象的
labelMove
选项，使标签沿链接移动：


var纸张=新接缝直径纸张({
// ...
交互式：{labelMove:true}
// ...
})

此标志默认为
false
，但它会计算直接距离。我需要曼哈顿线。有没有可能得到曼哈顿每段距离的大小？只有两个注释：1。在IE11
中，未定义round
，Math.round不是合适的替代品。但是，完全删除
轮
也同样有效。2.我必须将此代码与
paper.on（）
一起使用，答案中不清楚。希望这对其他人有帮助。哦，我在文件里没看到。但我想将标签捕捉到线段的中心。不知道是否有可能得到每个段的大小。因此，我认为我必须使用类似于“user3848987”给出的解决方案。顺便说一下：箭头和删除图标干扰了标签的移动。是否可以通过单击而不是悬停链接来显示这些内容？
interactive:function（cellView）{return{labelMove:true，vertexAdd:false}
没有效果：不会添加顶点，但标签仍然不可移动……我有相同的交互选项（尽管我将其设置为对象而不是函数）它可以工作，但是你必须抓住标签的边缘，而不是里面的文本。