在JointJS

Question

在自定義元素更改端口位置

我能創造利用從回答這個問題的一個自定義元素： Using predefined SVG file for creating a custom JointJS shape with ports

審查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/