JointJS 链接 : Custom Markup?

Question

所以，我正在尝试使用 JointJS 创建一个 ERD 工具，并希望创建一个带有类似标记的自定义链接

<path><rect><path>

这个想法是在链接中间有一个菱形，我知道我可以用一个元素和两个链接来做到这一点，但我真的希望能够在链接中有一些自定义标记。这能做到吗？如果是这样，如何？

Answer 1

您可以拥有自己的链接标记，就像其他元素一样。但是，提供的 Link标记代码是相当复杂的，比方说，一个 Rect .在 joint.js :

joint.dia.Link = joint.dia.Cell.extend({

// The default markup for links.
markup: [
    '<path class="connection" stroke="black" d="M 0 0 0 0"/>',
    '<path class="marker-source" fill="black" stroke="black" d="M 0 0 0 0"/>',
    '<path class="marker-target" fill="black" stroke="black" d="M 0 0 0 0"/>',
    '<path class="connection-wrap" d="M 0 0 0 0"/>',
    '<g class="labels"/>',
    '<g class="marker-vertices"/>',
    '<g class="marker-arrowheads"/>',
    '<g class="link-tools"/>'
].join(''),

如您所见，不像 Rect Link实际上是由几个对象组成的。这仅适用于 Link ;还有 labels 的标记, vertices等，您可能必须考虑这些，具体取决于您的要求。

就我而言，我添加了一个工具提示 --- HTML <title>元素 --- 到元素。对于 Rect我只是硬编码:

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/><title/></g>'

但对于 Link我选择去:

initialize: function()
{
  // called from Backbone constructor
  // call base initialize()
  joint.dia.Link.prototype.initialize.apply(this, arguments);

  // link markup is so complex that we need to fetch its definition
  var markup = (this.markup || this.get('markup'));
  // append <title> to markup, so that it covers whole path
  markup += '<title/>';
  this.set('markup', markup);
}

这至少应该给你一个开始。