把HTML代码放在JointJS链接

Putting HTML code on JointJS link

本文关键字：JointJS 链接 HTML 代码      更新时间：2023-09-26

我现在已经使用JointJS工作了一段时间，设法创建包含HTML的元素。

然而，我遇到了另一个问题，是否有可能放置HTML代码，如href， img等，在JointJS链接上，我怎么做?

例如，如果我有这个链接，我如何修改它以包含HTML:

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

谢谢!

JointJS不直接支持链接中的HTML。然而，使用一点点JointJS技巧是可以做到的:

// Update position of our HTML whenever source/target or vertices of our link change:
link.on('change:source change:target change:vertices', function() { updateHTMLPosition(link, $html) });
// Update position of our HTML whenever a position of an element in the graph changes:
graph.on('change:position', function() { updateHTMLPosition(link, $html) });
var $html = $('<ul><li>one</li><li>two</li></ul>');
$html.css({ position: 'absolute' }).appendTo(paper.el);
// Function for updating position of our HTML list.
function updateHTMLPosition(link, $html) {
    var linkView = paper.findViewByModel(link);
    var connectionEl = linkView.$('.connection')[0];
    var connectionLength = connectionEl.getTotalLength();
    // Position our HTML to the middle of the link.
    var position = connectionEl.getPointAtLength(connectionLength/2);
    $html.css({ left: position.x, top: position.y });
}

有点老问题了，但我想我应该添加一些更多的想法。如果愿意，可以通过扩展链接对象，然后在需要的地方设置属性，向链接中的标签添加额外的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);
});
相关文章：