Question

我正在尝试使用JointJS创建图形，其中Link从输出端口od 1元素开始，并且可以与整个其他元素（或当前元素本身）连接 - 不仅与输入端口连接。我的想法是修改输入端口样式，覆盖它所属的元素，但我有任何方式更改端口形状的问题，它在元素的左侧总是一个小圆圈，我的css都没有工作。有人可以提出任何建议吗？

Answer 1

您可以按如下方式更新端口attrib0utes：

var a = new joint.shapes.devs.Model({
    position: { x: 50, y: 50 },
    size: { width: 100, height: 100 },
    attrs: {
        '.port-label': {
            fill: 'red'
        },
        // change position and size of the 'a' port
        '.inPorts .port0 circle': {
            r: 15,
          'ref-x': -20,
          'ref-y': 10,
          stroke: 'red',
          'stroke-width': 5
        }, 
        // change color on a single port 
        '.inPorts .port0 .port-label': {
            fill: 'blue',
        }
    },
    inPorts: ['a', 'aa', 'aaa'],
    outPorts: ['b']

https://jsfiddle.net/vtalas/43sthc6g/

但是，您不需要使用端口来实现此目的，您可以直接连接到整个元素：

var a = new joint.shapes.basic.Rect({
    size: { width: 100, height: 100 },
    position: { x: 300, y: 300 },
    attrs: {
        'rect': { magnet: true }
    }

}).addTo(graph);

var b = new joint.shapes.basic.Rect({
    size: { width: 100, height: 100 },
    position: { x: 100, y: 100 },
    attrs: {
        'rect': { magnet: true }
    }
}).addTo(graph);

new joint.dia.Link({ source: { id: b.id }, target: { id: a.id } }).addTo(graph);

结果：https://jsfiddle.net/vtalas/davLzsng/

在JointJS中更改端口设计

1 个答案: