Question

我想将JointJS 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' } })的端口标签放在其各自端口的中心位置，就像这个例子（我能够从这个自定义Model中提取）：

我尝试了很多东西，来自

import pyperclip
text = pyperclip.paste()
lines = text.split('\n')
for i in range(len(lines)):
    last, first = lines[i].split(', ')
    lines[i] = first + " " + last
text = '\n'.join(lines) 
pyperclip.copy(text)

更改端口对象本身无济于事。是否有相对于端口定位端口标签的示例？最好是JointJS中的简单形状，如Models和Rects？

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

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中，如何定位端口标签相对于端口？

1 个答案: