2015-10-20 6 views
15

Per i collegamenti - in un diagramma JointJS - Ho provato a implementare questo tutorial (http://jointjs.com/tutorial/constraint-move-to-circle) per spostare le etichette sul collegamento, ma non capisco dove mettere il ConstraintElementView .JointJS: rendere mobile l'etichetta di collegamento sul collegamento stesso

  1. Vorrei rendere l'etichetta di un collegamento mobile sul collegamento. Quindi, come posso definire il collegamento come "percorso" per l'etichetta mobile?

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

etichetta collegamento

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

carta

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 } 
     } 
    }) 
}); 
  1. Poiché è mobile sul collegamento, dovrebbe essere allineato al centro di ogni segmento del collegamento in stile manhattan. Ma non vedo alcuna possibilità di ottenere il valore del centro di ogni segmento.

risposta

5

Non è necessario creare alcun percorso. Basta cambiare la posizione dell'etichetta calcolando il suo valore relativo - ovviamente può anche usare valori assoluti.

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

    } 
} 
+0

Ma questo calcola la distanza diretta. Mi serve la linea di Manhattan. – user3142695

+0

quindi utilizzare "manhattanDistance" – user3848987

+0

È possibile ottenere la dimensione di ogni segmento di una distanza di manhattan? – user3142695

1

Abilitazione etichette siano mobile lungo pubblicitari possono essere effettuate tramite l'opzione labelMove dell'oggetto interactive sulla carta:

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

Questo flag default false.

+0

Oh, non l'ho visto nei documenti. Ma voglio far scattare l'etichetta al centro di un segmento. Non so se è possibile ottenere la dimensione di ogni segmento. Quindi per quello penso di dover usare qualcosa di simile alla soluzione fornita da 'user3848987'. – user3142695

+0

A proposito: la freccia e l'icona di rimozione disturbano lo spostamento delle etichette. È possibile visualizzarli facendo clic e non passando il mouse sul collegamento? – user3142695

+0

'interactive: function (cellView) {return {labelMove: true, vertexAdd: false}}' non ha effetto: il vertice non verrà aggiunto, ma l'etichetta non è ancora mobile ... – user3142695