Crear líneas Horizontales en jointjs

Question

Cómo crear línea horizontal en jointjs.Quiero dibujar simples líneas horizontales entre dos puntos en el conjunto de js .Por favor alguien puede decirme cómo hacerlo.

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

Y he creado dos líneas horizontales 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);

Pero yo no estoy recibiendo la línea en el papel mientras la línea se imprime en paper2

Answer 1

Usted puede utilizar un enlace para que:

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 es una variable global exportado por JointJS y es una pequeña biblioteca para facilitar SVG manipulación que se llama Vectorizador (http://jointjs.com/api#v).

Tenga en cuenta que si desea agregar otra línea en el papel de otro (paper2), primero se debe clonar la primera:

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

Si no lo hace, la línea de paper se saca y se anexa a la paper2, por eso no ves la línea en paper ya.