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：使鏈接標籤可以在鏈接本身上移動

回答

相關問題