如何在自定义 JointJS 元素比例尺中制作路径？

Question

我定义了以下自定义 JointJS 元素：

joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
{
    size: { width: 400, height: 100 },
    attrs: {
        body: {
            strokeWidth: 2,
            stroke: '#000000',
            fill: '#FFFFFF',
        },
    },
}, 
{
    markup: [
        {
            tagName: 'g',
            selector: 'g1',
            attributes: {
                class: 'rotatable',
            },
            children: [
                {
                    tagName: 'g',
                    selector: 'g2',
                    attributes: {
                        class: 'scalable',
                    },
                    children: [
                        {
                            tagName: 'path',
                            selector: 'body',
                            attributes: {
                                d: 'm0,0l0,100l200,-25l200,25l0,-100l-200,25l-200,-25',
                            },
                        },
                    ]
                }
            ]
        },
    ],
});

但是，在形状上使用 resize 或 scale 不会调整它的大小。它总是以 400x100 结束。

我认为最初的问题是需要将其包裹在 class="scalable" <g> 中，但这也没有解决问题。

我也试过用<line>代替<path>，但没有成功。

谢谢！

Answer 1

答案在 refDResetOffset 属性中，该属性（与其他 ref 自定义属性一样随父级缩放）：

joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
    {
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
                refDResetOffset: 'm0,0l0,100l200,-25l200,25l0,-100l-200,25l-200,-25'
            },
        },
    }, 
    {
        markup: [
            {
                tagName: 'g',
                selector: 'g1',
                attributes: {
                    class: 'rotatable',
                },
                children: [
                    {
                        tagName: 'g',
                        selector: 'g2',
                        attributes: {
                            class: 'scalable',
                        },
                        children: [
                            {
                                tagName: 'path',
                                selector: 'body',
                            },
                        ]
                    }
                ]
            },
        ],
    });

如何在自定义 JointJS 元素比例尺中制作路径？

How to make a path in a custom JointJS element scale?

svg

jointjs