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

对于链接 - 在JointJS图中 - 我试图实现本教程（http://jointjs.com/tutorial/constraint-move-to-circle）来移动链接上的标签，但我不明白在哪里放置ConstraintElementView 。JointJS：使链接标签可以在链接本身上移动

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

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

因为它可以通过链接移动，所以它应该捕捉到曼哈顿式链接的每个部分的中心。但我不认为有机会获得每个细分市场中心的价值。

来源

2015-10-20 user3142695

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

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

    } 
}

来源

2015-11-01 08:10:50 user3848987

但是这是计算直接距离。我需要曼哈顿线。 – user3142695

然后使用'曼哈顿距离' – user3848987

是否有可能获得曼哈顿距离的每个部分的大小？ – user3142695

启用标签是可沿链路可以通过interactive对象的纸张上的labelMove选项来完成：

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

此标志默认为false。

来源

2015-11-03 15:23:44 dave

哦，我没有在文档中看到。但我想将标签贴到细分市场的中心。不知道是否有可能获得每个细分市场的规模。因此，我认为我必须使用类似于'user3848987'给出的解决方案。 – user3142695

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

'interactive：function（cellView）{return {labelMove：true，vertexAdd：false}}'没有效果：顶点不会被添加，但标签仍然不可移动... – user3142695

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

回答

相关问题