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
- 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 }
}
})
});
- 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.
Ma questo calcola la distanza diretta. Mi serve la linea di Manhattan. – user3142695
quindi utilizzare "manhattanDistance" – user3848987
È possibile ottenere la dimensione di ogni segmento di una distanza di manhattan? – user3142695