如何将端口添加到圆圈

Question

我可以使用 joint.shapes.devs.Model 将端口添加到矩形，但同样不适用于圆。

这是我尝试将端口添加到圈子的内容：

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);

我可以看到 Circle 已创建但没有端口。我找不到任何关于此的文档。任何帮助，将不胜感激。谢谢

Answer 1

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

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)
});

重要的是要告诉本文不要使用默认 dia.ElementView 进行渲染，而是使用 devs.ModelView 进行渲染。为此，只需在与相关模型相同的命名空间中定义视图，并在模型名称末尾添加 "View"。

joint.shapes.devs.CircleModelView = joint.shapes.devs.ModelView;

用法示例：

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 Fiddle:

http://jsfiddle.net/kumilingus/gpfu7o4f/1/

如何将端口添加到圆圈

How to add ports to a circle

jointjs