Crea linee orizzontali in jointjs

Question

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

Answer 1

È 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.