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

至少应该给你一个开始。

JointJS链接：自定义标记？

1 个答案: