3

I have worked with JointJS now for a while, managing to create elements with HTML in them.

However, I am stuck with another problem, is it possible to place HTML code, like href, img etc, on a JointJS link and how do I do this?

For example, if I have this link, how do I modify it to contain HTML:

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

Thank you!

4

2 回答 2

3

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 });
}
于 2014-06-18T13:23:33.777 回答
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 回答