在 JointJS 的自定义元素中更改端口位置

Question

我能够利用这个问题的答案创建自定义元素：

查看 JointJS 教程后，我看不出如何将端口移动到元素上的不同位置。

谢谢

示例代码： http://jsfiddle.net/jshubert/9a8brrun/

var el1 = new joint.shapes.devs.Model({
  markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
  size: {
    width: 100,
    height: 100
  },
  position: {
    x: 50,
    y: 75
  },
  attrs: {
   '.label': { text: 'SW_1', 'ref-x': .1, 'ref-y': .01},
    '.body': {
      width: 1024,
      height: 768,
      'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
      preserveAspectRatio: 'none'
    }
  },
  inPorts: ['1'],
  outPorts: ['2']
});

Answer 1

ref-x, ref-y 应用于适当的选择器可以做到这一点，例如。

'.inPorts .port0 .port-body' : {'ref-x': -20, 'ref-y': -20}

http://jsfiddle.net/9a8brrun/1/

在 JointJS 的自定义元素中更改端口位置

Changing Port Location in custom element in JointJS

svg

ports

shapes

jointjs