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

【问题标题】：How to Add an image in the center of an Atomic shape in jointJS-Rappid如何在jointJS-Rappid中的原子形状的中心添加图像
【发布时间】：2017-07-18 10:02:27
【问题描述】：

有什么方法可以在具有 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 }
            }
        })

【问题讨论】：

标签： javascript jquery json jointjs rappid

【解决方案1】：

请尝试以下操作，我将图像添加到 attrs {} 图像属性适用于joint.shapes.basic.device。希望它也适用于 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 }
            }
        })

【讨论】：

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

【解决方案2】：

这是一个非常复杂的解决方案，但最后我想出了以下代码，它运行良好且稳定：

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

【讨论】：