如何在jointJS-Rappid原子形状的中心添加图像

有什么方法可以在具有3个入口和3个出口的原子形状的中心添加图像？如何在jointJS-Rappid原子形状的中心添加图像

我不想独家为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 } 
      } 
     })

来源

2017-07-18 Reputated_Enginius

这是一个非常复杂的解决方案，但最后我想出了下面的代码的伟大工程，它的稳定：

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

来源

2017-07-31 09:57:37

请尝试以下，我添加了一个图像{}图像属性适用于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 } 
      } 
     })

来源

2017-07-28 07:43:39

谢谢，但它并没有我的情况下工作。原子具有与基本形状不同的属性，不幸的是它更复杂。 –

如何在jointJS-Rappid原子形状的中心添加图像

回答

相关问题