Jointjs-Positionstext oben statt Mitte für Rechteck

Question

In JointJS wie kann ich das Etikett oben statt mittig positionieren. Manche Dinge wie folgt aus:

So bei der Codierung:

var r1 = new joint.shapes.basic.Rect({ 
    position: { x: 20, y: 20 }, 
    size: { width: 200, height: 200 }, 
    attrs: { rect: { fill: '#E74C3C' }, text: { text: 'Parent' } } // I want to position text on top. 
}); 

Answer 1

Sie können das ref-y Attribut, z.B.

var r1 = new joint.shapes.basic.Rect({ 
    position: { x: 200, y: 20 }, 
    size: { width: 200, height: 200 }, 
    attrs: { rect: { fill: '#E74C3C' }, text: { text: 'Parent', 'ref-y': 20} } // I want to position text on top. 
}); 

bearbeitet:

refX ist Teil des "spezielles Attribut" -Gruppe. Liste aller Attribute sind hier zu finden: http://resources.jointjs.com/docs/jointjs/v2.0/joint.html#dia.attributes

ist es auch möglich, benutzerdefinierte Attribute zu definieren:

Entweder globale spezielle Attribute - Erweiterung des joint.dia.attributes Namensraum (attr linestyle):

joint.dia.attributes.lineStyle = { 
    set: function(lineStyle, refBBox, node, attrs) { 

     var n = attrs['strokeWidth'] || attrs['stroke-width'] || 1; 
     var dasharray = { 
      'dashed': (4*n) + ',' + (2*n), 
      'dotted': n + ',' + n 
     }[lineStyle] || 'none'; 

     return { 'stroke-dasharray': dasharray }; 
    } 
}; 

oder ein spezielles Attribut für die bestimmte Form (Attribut d):

var Circle = joint.dia.Element.define('custom.Circle', { 
    markup: '<g class="rotatable"><ellipse/><text/><path/></g>', 
    attrs: { 
     ellipse: { 
      fill: '#FFFFFF', 
      stroke: '#cbd2d7', 
      strokeWidth: 3, 
      lineStyle: 'dashed', 
      fitRef: true 
     }, 
     path: { 
      stroke: '#cbd2d7', 
      strokeWidth: 3, 
      lineStyle: 'dotted', 
      fill: 'none', 
      d: ['M', 0, '25%', '100%', '25%', 'M', '100%', '75%', 0, '75%'] 
     }, 
     text: { 
      fill: '#cbd2d7', 
      fontSize: 20, 
      fontFamily: 'Arial, helvetica, sans-serif', 
      refX: '50%', 
      refY: '50%', 
      transform: 'rotate(45) scale(0.5,0.5)', 
      yAlignment: 'middle', 
      xAlignment: 'middle' 
     } 
    } 

}, { 

}, { 

    // Element specific special attributes 
    attributes: { 

     d: { 
      // The path data `d` attribute to be defined via an array. 
      // e.g. d: ['M', 0, '25%', '100%', '25%', 'M', '100%', '75%', 0, '75%'] 
      qualify: _.isArray, 
      set: function(value, refBBox) { 
       var i = 0; 
       var attrValue = value.map(function(data, index) { 
        if (_.isString(data)) { 
         if (data.slice(-1) === '%') { 
          return parseFloat(data)/100 * refBBox[((index - i) % 2) ? 'height' : 'width']; 
         } else { 
          i++; 
         } 
        } 
        return data; 
       }).join(' '); 
       return { d: attrValue }; 
      } 
     } 
    } 
});