Jointjs에서 수평선 만들기

Question

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

하지만 선이 종이에 인쇄되는 동안 종이에 선이 표시되지 않습니다2

Answer 1

이에 대한 링크를 사용할 수 있습니다.

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 더 이상.