3

私はしばらくの間 JointJS を使用して、HTML を含む要素を作成することに成功しました。

ただし、別の問題に 悩まされています。 href、imgなどの HTML コードを JointJS リンクに配置することはできますか?どうすればよいですか?

たとえば、次のリンクがある場合、HTML を含むように変更するにはどうすればよいですか。

var link = new joint.dia.Link({
        source: { id: sourceId },
        target: { id: targetId },
        attrs: { 
            '.connection': { 'stroke-width': 3, stroke: '#000000' }
        }
    });

ありがとうございました！

4

2 に答える 2

3

少し古い質問ですが、さらにアイデアを追加すると思いました。必要に応じて、リンク オブジェクトを拡張し、必要に応じて属性を設定することで、リンクのラベルに追加の svg マークアップを追加できます。例えば：

joint.shapes.custom.Link = joint.dia.Link.extend({
    labelMarkup: '<g class="label"><rect /><text /></g>'
});

このコードはラベルのマークアップをオーバーライドするため、そこに要素を追加できます。これらの要素の属性は、次の方法でも更新できます。

link.attr('text/text', "new text");

ただし、ハイパーリンクは機能しません (少なくとも Chrome では機能していません)。これは、Jointjs がモデル内のすべてのイベントをリッスンするためだと思います。したがって、Jointjs の組み込みイベントを使用して、接続のクリックをリッスンする必要があります。

paper.on('cell:pointerclick', function(cellView, evt, x, y){
    console.log(cellView);
});
于 2016-05-25T13:42:34.853 に答える