JointJS模型 - 未分配文本屬性

Question

我正在創建一個簡單的joint.shapes.devs.Model並分配文本屬性，但文本不出來，而是標記爲「模型」。

function makeEditableElement(label) { 

     var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length; 

     // Compute width/height of the rectangle based on the number 
     // of lines in the label and the letter size. 0.6 * letterSize is 
     // an approximation of the monospace font letter width. 
     var letterSize = 15; 
     var width = 2 * (letterSize * (0.3 * maxLineLength + 1)); 
     var height = 2 * ((label.split('\n').length + 1) * letterSize); 

     return new joint.shapes.devs.Model({ 
      '.label': label, 
      size: { width: width, height: height }, 
      inPorts: [''], 
      outPorts: [''], 
      attrs: { '.inPorts circle': { r: 3 ,fill: 'gray', type: 'input',magnet: 'passive'}, 
        '.outPorts circle': { r: 3 ,fill: 'gray', type: 'output',magnet:'true' }, 
        rect: { width: width, height: height, fill: '#FFF' ,rx: 5,ry: 5, 'stroke-width':1.5, 'stroke': '#555' }, 
        text: { text: label, fill: '#555' , 'font-size': 13, magnet: true,'font-weight': 'normal'} 
       } 
     }); 
    } 
graph.addCell(makeEditableElement("foo")); 
joint.layout.DirectedGraph.layout(graph, { setLinkVertices: false }); 

請指出我是否缺少一些東西，因爲我是JointJS的新手。提前致謝。

Answer 1

我把它通過改變工作標籤內的'.label'的位置如下：

function makeEditableElement(label,x,y) { 

     var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length; 

     // Compute width/height of the rectangle based on the number 
     // of lines in the label and the letter size. 0.6 * letterSize is 
     // an approximation of the monospace font letter width. 
     var letterSize = 15; 
     var width = 2 * (letterSize * (0.3 * maxLineLength + 1)); 
     var height = 2 * ((label.split('\n').length + 1) * letterSize); 

     return new joint.shapes.devs.Model({ 
      id: label, 
      position: {x:x, y:y}, 
      size: { width: width, height: height, fill: 'transparent' ,rx: 5,ry: 5, 'stroke-width':1.5, 'stroke': '#31d0c6' }, 
      inPorts: [''], 
      outPorts: [''], 
      attrs: { '.label': {text: label}, 
        '.inPorts circle': { r: 3 ,fill: 'gray', type: 'input',magnet: 'passive'}, 
        '.outPorts circle': { r: 3 ,fill: 'gray', type: 'output',magnet:'true' }, 
        rect: { width: width, height: height, fill: 'transparent' ,rx: 5,ry: 5, 'stroke-width':1.5, 'stroke': '#31d0c6' }, 
        text: { text: label, magnet: true, 'font-size': letterSize, 'font-family': 'monospace' } 
       } 
     }); 
    } 

Answer 2

'.label'需要分配包含文本屬性的對象 - 要指定它只有字符串「foo」

嘗試，而不是執行以下操作：

... 

'.label': { text: label }, 

...