Создание горизонтальных линий в jointjs
-
21-12-2019 - |
Вопрос
Как создать горизонтальную линию в jointjs.Я хочу нарисовать простые горизонтальные линии между двумя точками в joint js.Кто-нибудь, пожалуйста, может сказать мне, как это сделать.
Мои документы выглядят так :
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
});
И я создал две горизонтальные линии, подобные:
var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);
V(paper2.viewport).append(line);
Но я не получаю строку на бумаге, пока строка печатается на paper2
Решение
Для этого вы можете воспользоваться ссылкой:
graph.addCell(new joint.dia.Link({
source: { x: 50, y: 100 },
target: { x: 300, y: 100 }
}))
Или SVG:
var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);
V
является глобальной переменной, экспортируемой JointJS, и представляет собой крошечную библиотеку для упрощения манипулирования SVG, которая называется Vectorizer (http://jointjs.com/api#v).
Имейте в виду, что если вы хотите добавить еще одну строку в другой документ (paper2
), вы должны сначала клонировать первый:
V(paper2.viewport).append(line.clone())
Если вы этого не сделаете, строка из paper
извлекается и добавляется к paper2
, вот почему вы не видите строку в paper
больше.