在JointJS中，如何定位端口相对于端口的标签？

Question

我要放置标签的其相应的端口上JointJS joint.shapes.basic.Rect居中右，像这样的例子一个端口（即我能够从该自定义Model到codge）：

我试过很多东西，从

new joint.shapes.basic.Rect({ 
    'attrs': { 
     'text': { 
      'text': 'a' 
     }, 
     '.inPorts text': { 
      'ref': 'circle', 
      'ref-x': 0.5, 
      'x-alignment': 'middle', 
      'ref-y': 0.5, 
      'y-alignment': 'middle', 
      'text-anchor': 'middle' 
     } 
    }) 

改变端口对象本身无济于事。有没有定位端口标签相对于端口的例子？最好对于像Joint和Rects这样的JointJS中的简单形状？

我真的不想创建一个自定义形状来定位相对于端口的标签。

Answer 1

JoinJS v1.0为端口位置和端口标签位置引入了强大的布局功能。

var rect = new joint.shapes.basic.Rect({ 
    position: { x: 425, y: 60 }, 
    size: { width: 200, height: 100 }, 
    attrs: { 
     text: { text: '', fill: '#6a6c8a' }, 
     rect: { stroke: '#31d0c6', 'stroke-width': 2 } 
    }, 
    ports: { 
     groups: { 
      'a': { 
       // port position definition 
       position: 'top', 
       label: { 
        // label layout definition: 
        position: { 
         name: 'manual', args: { 
          y: 5, 
          attrs: { '.': { 'text-anchor': 'middle' } } 
         } 
        } 
       } 
      }, 
      'b': { 
       position: 'bottom', 
       label: { 
        position: { 
         name: 'bottom', args: { y: -5 } 
        } 
       } 
      } 
     } 
    } 
}); 

rect.addPort({ group: 'a', attrs: { 'text': { text: 'a' } } }); 
rect.addPort({ group: 'a', attrs: { 'text': { text: 'aaa' } } }); 
rect.addPort({ group: 'a', attrs: { 'text': { text: 'B' } } }); 
rect.addPort({ group: 'b', attrs: { 'text': { text: 'B' } } }); 
rect.addPort({ group: 'b', attrs: { 'text': { text: 'a' } } }); 
rect.addPort({ group: 'b', attrs: { 'text': { text: 'aaa' } } }); 

上述结果的代码如下：

更多信息请访问http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#layout.PortLabel