Question

我是JointJS的新手，在处理门位置时遇到麻烦。

我有3个端口，其中1个是“ Out”类型，而2个是“ in”类型。

我只想更改一个“ in”型端口的位置，但我没有。

在这里我留下图像和代码链接。谢谢您的帮助。

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中的两个端口位置

1 个答案: