Jointjs端口圖像elemnt

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包的演示文件夾中的例子之一的圖像元素。

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