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

Question

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

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

有什么方法可以将样式从圆形设置为矩形？请建议我可以覆盖的所有班级名称。

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