Crea linee orizzontali in jointjs
-
21-12-2019 - |
Domanda
Come creare la linea orizzontale in jointjs.i Voglio disegnare semplici linee orizzontali tra due punti in joint js. Come qualcuno per favore dimmi come farlo.
I miei documenti sembrano:
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: w,
height:h,
model: graph,
gridsize:4
});
var paper2 = new joint.dia.Paper({
el: $('#myimage'),
width: w,
height:600,
model: graph,
interactive : false
});
.
E ho creato due linee orizzontali come:
var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);
V(paper2.viewport).append(line);
.
Ma non sto ottenendo la linea in carta mentre la linea è stampata in carta2
Soluzione
È possibile utilizzare un link per questo:
graph.addCell(new joint.dia.Link({
source: { x: 50, y: 100 },
target: { x: 300, y: 100 }
}))
.
o svg:
var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);
.
V
è una variabile globale esportata da JointJS ed è una minuscola biblioteca per una facile manipolazione SVG che si chiama vectorizer ( http://jointjs.com/api#v ).
Tieni presente che se vuoi aggiungere un'altra linea nell'altra carta (paper2
), devi prima clonare il primo:
V(paper2.viewport).append(line.clone())
.
Se non lo fai, la riga da paper
viene estratta e aggiunta al paper2
, ecco perché non vedi più la linea in paper
.