JointJS 中的两个端口位置

Question

我是 JointJS 的新手，我在处理门的位置时遇到了问题。

我有 3 个端口，1 个 'Out' 类型，2 个 'in' 类型。

我只想更改 'in' 类型端口之一的位置，但我不明白。

这里我留下一张图片和一个link的代码。立即感谢您的帮助。

var m1 = new joint.shapes.devs.Model({
    position: { x: 50, y: 50 },
    size: { width: 100, height: 30 },
    inPorts: ['in1','in2'],
    outPorts: ['out'],
    ports: {
      groups: {
        'in': {
          position: "top",
          attrs: {
            '.port-body': {
              r: "6",
              fill: 'blue',
              magnet: 'passive'
            },
            '.port-label': {
              fill: "transparent"
            }
          }
        },
        'out': {
          position: "bottom",
          portLabelMarkup: '<text fill="yellow"/>',
          attrs: {
            '.port-body': {
              r: "6",
              fill: 'red'
            },
            '.port-label': {
              fill: "transparent"
            }
          }
        }
      }
    },
    attrs: {
        '.label': { text: 'node 1', 'ref-x': .5, 'ref-y': .2 },
        rect: { fill: 'LightGrey', rx: 15, ry: 15 }
    }
}).addTo(graph);

Link of the code

Answer 1

我建议不要使用基于 devs.Model 的形状，因为它是端口的遗留实现。从 JointJS v1.0 开始，您可以将端口添加到任何形状。

例如：

var m1 = new joint.shapes.standard.Rectangle({
    position: { x: 425, y: 60 },
    size: { width: 200, height: 100 },
    ports: {
        groups: {
            'in': {
                position: {
                    name: 'top',
                    args: { dr: 0, dx: 0, dy: -9 }
                },
            }
        },
        items: [
            { group: 'in', args: { y: -10 }, id: 'portId'}
        ]

    }
});

端口位置是使用布局函数设置的。在您的示例中有 top 布局 - 这意味着端口位置是使用 joint.layout.Port.top 实现计算的。您可以使用端口上的 args 属性覆盖结果：

// set args on newly added
m1.addPort({ group: 'in', args: { y: -20 } });
// update existing
m1.portProp('portId', 'args/y', -20)

有关更多信息，请参阅布局文档：https://resources.jointjs.com/docs/jointjs/v2.2/joint.html#layout.Port

JointJS 中的两个端口位置

Two Ports positions in JointJS

javascript

jointjs