端口可以​​从圆形改为矩形吗？

Question

我正在使用 JointJS 端口。默认端口显示为圆圈：

https://resources.jointjs.com/tutorial/ports

有什么方法可以将样式从圆形格式化为矩形吗？请建议任何 class 我可以覆盖它的名称。

Answer 1

那里的教程使用 devs.Model 形状，这种方法有点过时...

端口配置中有一个markup选项，详情请见https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Element.ports

我推荐一个端口演示 (https://github.com/clientIO/joint/tree/master/demo/ports)。甚至还有您可能正在寻找的形状：

var g6 = new joint.shapes.basic.Circle({
    position: { x: 50, y: 50 },
    size: { width: 500, height: 300 },
    attrs: {
        text: { text: 'compensateRotation: true', fill: '#6a6c8a' },
        circle: { stroke: '#31d0c6', 'stroke-width': 2 }
    },
    ports: {
        groups: {
            'a': {
                position: {
                    name: 'ellipseSpread',
                    args: { startAngle: 0, dr: 0, compensateRotation: true }
                },
                label: {
                    position: 'radial'
                },
                attrs: {
                    rect: {
                        stroke: '#31d0c6',
                        'stroke-width': 2,
                        width: 20,
                        height: 20,
                        x: -10,
                        y: -10
                    },
                    '.dot': {
                        fill: '#fe854f',
                        r: 2
                    },
                    text: {
                        fill: '#6a6c8a'
                    }
                },
                markup: '<g><rect/><circle class="dot"/></g>'
            }
        }
    }
});