所以,我正在尝试使用 JointJS 创建一个 ERD 工具,并希望创建一个带有类似标记的自定义链接
<path><rect><path>
这个想法是在链接中间有一个菱形,我知道我可以用一个元素和两个链接来做到这一点,但我真的希望能够在链接中有一些自定义标记。这能做到吗?如果是这样,如何?
最佳答案
您可以拥有自己的链接标记,就像其他元素一样。但是,提供的 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 链接 : Custom Markup?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38446209/