如何在jointJS-Rappid原子形狀的中心添加圖像

Question

有什麼方法可以在具有3個入口和3個出口的原子形狀的中心添加圖像？

我不想獨家爲Atomic形狀提供解決方案。它可能是一個自定義的形狀，但在自定義形狀的情況下，我希望它具有入口和出口。

我到目前爲止的代碼（不添加這個圖像）：

new joint.shapes.devs.Atomic({ 
      size: { width: 4, height: 3 }, 
      inPorts: ['in1','in2','in3'], 
      outPorts: ['out1','out2','out3'], 
      attrs: { 
     rect: { fill: '#ffffff', rx: 2, ry: 2 }, 
text: { text: 'Workitem', fill: '#000000', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 }, 
     '.inPorts circle': { fill: '#dddddd', opacity: 0.9 }, 
      '.outPorts circle': { fill: '#dddddd', opacity: 0.9 }, 
     '.inPorts text, .outPorts text': { 'font-size': 9 } 
      } 
     }) 

Answer 1

這是一個非常複雜的解決方案，但最後我想出了下面的代碼的偉大工程，它的穩定：

/*Code to create a new Workitem Shape with an image inside it*/ 
var graph = new joint.dia.Graph; 
var paper = new joint.dia.Paper({ 
    el: $('#paper'), 
    width: 600, 
    height: 600, 
    gridSize: 20, 
    model: graph 
}); 

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: 80, 
     height: 80 
    }, 
    attrs: { 
     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' 
     }, 
     '.label': { 
     text: 'My Workitem', 
     'ref-y': +65, 
     'font-size': 14 
     }, 
     '.inPorts circle': { 
     fill: '#dddddd', opacity: 0.9 
     }, 
     '.outPorts circle': { 
     fill: '#dddddd', opacity: 0.9 
     }, 
     '.inPorts text, .outPorts text': { 'font-size': 9 }, 
     image: { 
     'xlink:href': 'img/person.png', 
     width: 80, 
     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: 200, 
    y: 250 
    }, 
    size: { 
    width: 150, 
    height: 100 
    }, 
    inPorts: ['in1', 'in2','in3'], 
    outPorts: ['out1', 'out2', 'out3'] 
}); 

graph.addCell(imageModel); 

Answer 2

請嘗試以下，我添加了一個圖像{}圖像屬性適用於joint.shapes.basic.device的ATTRS。希望它也適用於Atomic。

new joint.shapes.devs.Atomic({ 
      size: { width: 4, height: 3 }, 
      inPorts: ['in1','in2','in3'], 
      outPorts: ['out1','out2','out3'], 
      attrs: { 
     rect: { fill: '#ffffff', rx: 2, ry: 2 }, 
     image: { xlink:href: '/path to image' }, 

text: { text: 'Workitem', fill: '#000000', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 }, 
     '.inPorts circle': { fill: '#dddddd', opacity: 0.9 }, 
      '.outPorts circle': { fill: '#dddddd', opacity: 0.9 }, 
     '.inPorts text, .outPorts text': { 'font-size': 9 } 
      } 
     })