在JointJS中，如何定位端口相对于端口的标签？

Question

我想将 JointJS joint.shapes.basic.Rect 端口的标签放在其各自端口的中心，就像这个例子（我能够从这个自定义 Model 中得到）：

我尝试了很多东西，来自

  new joint.shapes.basic.Rect({
    'attrs': {
        'text': {
          'text': 'a'
        },
        '.inPorts text': {
          'ref': 'circle',
          'ref-x': 0.5,
          'x-alignment': 'middle',
          'ref-y': 0.5,
          'y-alignment': 'middle',
          'text-anchor': 'middle'
        }
    })

更改端口对象本身无济于事。是否有相对于端口定位端口标签的示例？更适合 JointJS 中的简单形状，如模型和矩形？

我真的不想创建自定义形状只是为了相对于端口定位标签。

Answer 1

JoinJS v1.0 为端口位置和端口标签位置引入了强大的布局功能。

var rect = new joint.shapes.basic.Rect({
    position: { x: 425, y: 60 },
    size: { width: 200, height: 100 },
    attrs: {
        text: { text: '', fill: '#6a6c8a' },
        rect: { stroke: '#31d0c6', 'stroke-width': 2 }
    },
    ports: {
        groups: {
            'a': {
                // port position definition
                position: 'top',
                label: {
                    // label layout definition:
                    position: {
                        name: 'manual', args: {
                            y: 5,
                            attrs: { '.': { 'text-anchor': 'middle' } }
                        }
                    }
                }
            },
            'b': {
                position: 'bottom',
                label: {
                    position: {
                        name: 'bottom', args: { y: -5 }
                    }
                }
            }
        }
    }
});

rect.addPort({ group: 'a', attrs: { 'text': { text: 'a' } } });
rect.addPort({ group: 'a', attrs: { 'text': { text: 'aaa' } } });
rect.addPort({ group: 'a', attrs: { 'text': { text: 'B' } } });
rect.addPort({ group: 'b', attrs: { 'text': { text: 'B' } } });
rect.addPort({ group: 'b', attrs: { 'text': { text: 'a' } } });
rect.addPort({ group: 'b', attrs: { 'text': { text: 'aaa' } } });

上面的代码结果是这样的：

有关详细信息，请访问 http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#layout.PortLabel

在JointJS中，如何定位端口相对于端口的标签？

In JointJS, how does one position the label of a port relative to the port?

jointjs