Erstellen Sie horizontale Linien in jointjs

Question

So erstellen Sie eine horizontale Linie in jointjs.Ich möchte einfache horizontale Linien zwischen zwei Punkten in Joint js zeichnen.Kann mir bitte jemand sagen, wie das geht.

Meine Papiere sehen aus wie :

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

Und ich habe zwei horizontale Linien erstellt wie:

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

Aber ich bekomme die Zeile nicht in Papier, während die Zeile in Papier2 gedruckt wird

Answer 1

Sie können dafür einen Link verwenden:

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

Oder SVG:

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

V ist eine globale Variable, die von JointJS exportiert wird und eine winzige Bibliothek zur einfacheren SVG-Manipulation ist, die als Vektorisierer bezeichnet wird (http://jointjs.com/api#v).

Denken Sie daran, dass, wenn Sie eine weitere Zeile in das andere Papier einfügen möchten (paper2), müssen Sie zuerst den ersten klonen:

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

Wenn Sie das nicht tun, wird die Zeile von paper wird herausgenommen und an die angehängt paper2, deshalb siehst du die Zeile nicht in paper Mehr.