Question

image = new joint.shapes.basic.Image({
    position : {
        x : 250,
        y : 250
    },
    size : {
        width : 90,
        height : 90
    },
    attrs : {
        image : {
            "xlink:href" : image_link,
         width : 100,
            height : 100
        }
    }
});

我想将端口添加到关节js的图像元素

Answer 1

您可以使用下面的代码，该代码位于jointjs npm包的demo文件夹中的一个示例中。

joint.shapes.devs.MyImageModel = joint.shapes.devs.Model.extend({

    markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><image/><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',

    defaults: joint.util.deepSupplement({

        type: 'devs.MyImageModel',
        size: { width: 70, height: 50 },
        attrs: {
            '.port-body': {
                r: 5,
                magnet: true,
                stroke: '#000000'
            },
//            rect: { stroke: '#d1d1d1', fill: { type: 'linearGradient', stops: [{offset: '0%', color: 'white'}, {offset: '50%', color: '#d1d1d1'}], attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' } } },
//            circle: { stroke: 'gray' },
            '.inPorts circle': { fill: '' },
            '.outPorts circle': { fill: '' },
            image: { 'xlink:href': '/images/rout6.gif', width: 70, height: 50, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'x-alignment': 'middle', 'y-alignment': 'middle' }
        }

    }, joint.shapes.devs.Model.prototype.defaults)
});

joint.shapes.devs.MyImageModelView = joint.shapes.devs.ModelView;

// Usage:

var imageModel = new joint.shapes.devs.MyImageModel({
    position: { x: 10, y: 190 },
    size: { width: 70, height: 50 },
    inPorts: [''],
    outPorts: ['']
});
stencilGraph.addCell(imageModel);

Jointjs Ports to image element

1 个答案: