jointJS-Rappidの原子形状の中心に画像を追加する方法

Question

3つの入力ポートと3つの出力ポートを持つ原子形状の中心に画像を追加する方法はありますか？

私は、アトミック形状専用の解決策を望んでいません。それはカスタムシェイプかもしれませんが、カスタムシェイプの場合、インポートとアウトポートが必要です。

（この画像を追加せずに）私のこれまでのコードは次のとおりです。

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に{}に画像を追加しました。それを望むことは原子的にもうまくいく。

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