合同jsに水平線を作成します

Question

合同jsで水平線を作成する方法JS JSの2点間に単純な水平線を描きたいと思っています。

私の論文は次のようになります：

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

.

と私は2つの水平線を作成しました：

  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で印刷されている間、私は紙に回線を取得していません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操作がベクトル化されています（ http：//jointjs.com/api#v ）

他の紙に別の行を追加したい場合（paper2）、最初に最初にクローンを複製する必要があります。

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

.

それをしない場合は、paperからの行が作成され、paper2に追加されます。そのため、paperで行が表示されない理由です。