Jointjs 如何向圆中添加端口

我可以使用

joint.shapes.devs.Model

将端口添加到矩形中，但对于圆形来说，这不起作用

以下是我尝试向circle添加端口的内容：

var circle1 = new joint.shapes.basic.Circle({
                            position: {x: 100, y: 225},
                            size: {width: 51, height: 51},
                            outPorts: [''],
                            attrs: {
                                '.': {magnet: true},
                                '.label': {text: '', 'ref-x': .4, 'ref-y': .2},
                                '.inPorts circle': {type: 'input'},
                                '.outPorts circle': {type: 'output'},
                                '.port-body': {r: 4}
                            }
                        });
                        graph.addCell(circle1);

---

我可以看到圆是创建的，但没有端口。我找不到这方面的任何文档。任何帮助都将不胜感激。感谢

下面的示例演示了如何定义具有矩形端口的圆形元素

joint.shapes.devs.CircleModel = joint.shapes.devs.Model.extend({

    markup: '<g class="rotatable"><g class="scalable"><circle class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
    portMarkup: '<g class="port port<%= id %>"><rect class="port-body"/><text class="port-label"/></g>',

    defaults: joint.util.deepSupplement({

        type: 'devs.CircleModel',
        attrs: {
            '.body': { r: 50, cx: 50, stroke: 'blue', fill: 'lightblue' },
            '.label': { text: 'Circle Model', 'ref-y': 0.5, 'y-alignment': 'middle' },
            '.port-body': { width: 10, height: 10, x: -5, stroke: 'gray', fill: 'lightgray', magnet: 'active' }
        }

    }, joint.shapes.devs.Model.prototype.defaults)
});

用法示例：

var circleModel = new joint.shapes.devs.CircleModel({
    position: { x: 500, y: 100 },
    size: { width: 100, height: 100 },
    inPorts: ['a'],
    outPorts: ['b']
});
graph.addCell(circleModel);

JS小提琴：

---

端口

？？此行出错：找不到符号idIt仅在端口中显示。我看不到输出端口…对于前面的注释，我将

端口

更改为

端口

是否有任何

guid（）

函数可以传递，或者我已经为它编写了一个循环？端口ID是自动生成的。您不应该像以前那样更改标记。我已经创建了一个小提琴，显示上面的代码可以工作。我建议将jointjs更新到最新版本。在哪里可以获得jointjs的0.94版本。在官方网站下载页面上，显示0.93的输出端口不可见，因为您将所有端口ID设置为

1

。如果不需要矩形端口（），请尝试注释

portMarkup

和

.port-body

attrs。恐怕我无法帮助您解决JSP语法问题。

var circleModel = new joint.shapes.devs.CircleModel({
    position: { x: 500, y: 100 },
    size: { width: 100, height: 100 },
    inPorts: ['a'],
    outPorts: ['b']
});
graph.addCell(circleModel);