在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