Crear líneas Horizontales en jointjs
-
21-12-2019 - |
Pregunta
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
Solución
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.