Question

我使用jointjs绘制UML状态图，各种状态通过链接连接。在鼠标悬停在链接上时，会在点击链接被删除时显示十字符号。我想在链接上禁用交叉符号。

Answer 1

您需要创建一个从joint.dia.link扩展的自定义链接，并将该链接用于您的图表。查看joint.core.js以获取更多详细信息和joint.shapes.uml.js

步骤1。通过直接从joint.dia.link扩展或从下面扩展

来创建自定义uml链接

joint.shapes.uml.Generalization
joint.shapes.uml.Implementation
joint.shapes.uml.Aggregation
joint.shapes.uml.Composition
joint.shapes.uml.Association

joint.shapes.yourLink = joint.dia.Link.extend（{

//删除删除链接的十字架修改toolMarkUp，使其不显示如下所示，并使用新链接

toolMarkup: [
].join(''),

添加您当前为链接提供的其他属性，例如来源，目标等

}）

我项目的示例代码

  joint.shapes.deviceLink = joint.dia.Link.extend({

 // i modified the vertexMarkup to not create vertexes.
    vertexMarkup: [
        '<g class="marker-vertex-group" transform="translate(<%= x %>, <%= y %>)">',
        '<circle class="marker-vertex" idx="<%= idx %>" r="1" />',
        '</g>'
    ].join(''),


    defaults: joint.util.deepSupplement({
      type: 'deviceLink',
        connection: { name: 'orthogonal' },
        attrs: {
           '.connection': { stroke: '#fe854f', 'stroke-width': 3 },
            sourcePort:{text:''},
            targetPort:{text:''},
            '.link-tools .tool-remove circle': { r: 8, fill:'#fff',position: 0.5 },
        },
        labels: [ { position: 0.5, attrs: { text: { text: '' } } }  ]

    }, joint.dia.Link.prototype.defaults),
  });

  joint.shapes.deviceLinkView = joint.dia.LinkView.extend({
    mouseover: function (evt, x, y) {
   //my custom mouseover function
    },
    mouseout: function (evt, x, y) {
  // my custom mouseout function
  });

如何在Jointjs中禁用UML状态图中的链接删除？

1 个答案: