Criar linhas Horizontais no jointjs

Question

Como criar linha horizontal em jointjs.Eu quero chamar a simples linhas horizontais entre dois pontos em comum js .Alguém por favor pode me dizer como fazer isso.

Meus trabalhos aspecto :

  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 eu criei duas linha horizontal, como:

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

Mas não estou obtendo a linha no papel, enquanto a linha é impressa em paper2

Answer 1

Você pode usar um link para que:

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 é uma variável global exportado pelo JointJS e é uma pequena biblioteca para facilitar a manipulação SVG que é chamado de Vectorizer (http://jointjs.com/api#v).

Tenha em mente que se você quiser adicionar outra linha em outro papel (paper2), você deve primeiro clone a primeira:

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

Se você não fizer isso, a linha de paper é retirado e anexado ao paper2, é por isso que você não ver a linha paper mais.