JointJS,快速制作具有已定义形状的自定义形状

时间:2021-04-21 04:37:04

标签: javascript jointjs rappid

有没有办法用已经定义的形状制作自定义形状? 我想用已经定义的单元格形状制作新的单元格形状

例如...(这不是工作代码,我想要这样)

{
    type: 'usercustom.Images',
    size: { width: 53, height: 42 },
    attrs: [
        {
            type: 'standard.Image',
            size: { width: 53, height: 42 },
            attrs: {
                root: {
                    dataTooltip: 'Image1',
                    dataTooltipPosition: 'left',
                    dataTooltipPositionSelector: '.joint-stencil'
                },
                image: {
                    xlinkHref: '/assets/imageIcons/Image1.png'
                },
                body: {
                    fill: 'transparent',
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    strokeDasharray: '0'
                },
                label: {
                    text: 'Image1',
                    fontFamily: 'Roboto Condensed',
                    fontWeight: 'Normal',
                    fontSize: 11,
                    fill: '#c6c7e2'
                }
            }
        },
        {
            type: 'standard.Image',
            size: { width: 53, height: 42 },
            attrs: {
                root: {
                    dataTooltip: 'Image2',
                    dataTooltipPosition: 'left',
                    dataTooltipPositionSelector: '.joint-stencil'
                },
                image: {
                    xlinkHref: '/assets/imageIcons/Image2.png'
                },
                body: {
                    fill: 'transparent',
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    strokeDasharray: '0'
                },
                label: {
                    text: 'Image2',
                    fontFamily: 'Roboto Condensed',
                    fontWeight: 'Normal',
                    fontSize: 11,
                    fill: '#c6c7e2'
                }
            }
        }
    ],
    markup: [{
        tagName: 'g',
        children: [{
            tagName: 'image',
            selector: 'image'
        },{
            tagName: 'image',
            selector: 'image2'
        }]
    }, {
        tagName: 'text',
        selector: 'label'
    }]
}

在此示例代码中,自定义元素的类型(usercustom.Images)有两个已定义的类型形状(standard.Image)。

standard.Image Type 已经存在。我想围绕两个(或三个,四个......)制作一个外壳。

你有什么好的想法吗?

提前致谢。

0 个答案:

没有答案