Créer des lignes horizontales dans jointjs

Question

Comment créer une ligne horizontale dans jointjs.Je souhaite dessiner des lignes horizontales simples entre deux points dans joint js. Quelqu'un peut-il me dire comment faire cela.

Mes papiers ressemblent à :

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

Et j'ai créé deux lignes horizontales comme :

  var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
    V(paper.viewport).append(line);
    V(paper2.viewport).append(line);

Mais je ne reçois pas la ligne sur papier alors que la ligne est imprimée sur papier2

Answer 1

Vous pouvez utiliser un lien pour cela :

graph.addCell(new joint.dia.Link({
   source: { x: 50, y: 100 },
   target: { x: 300, y: 100 }
}))

Ou SVG :

var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);

V est une variable globale exportée par JointJS et est une petite bibliothèque pour une manipulation SVG plus facile appelée Vectorizer (http://jointjs.com/api#v).

Gardez à l'esprit que si vous souhaitez ajouter une autre ligne dans l'autre papier (paper2), vous devez d'abord cloner le premier :

V(paper2.viewport).append(line.clone())

Si vous ne le faites pas, la ligne de paper est retiré et annexé au paper2, c'est pourquoi vous ne voyez pas la ligne paper plus.