직사각형의 중심 대신 상단에 위치 텍스트가 붙습니다.

Question

JointJS에서는 가운데 대신에 레이블을 어떻게 배치 할 수 있습니까? 이 같은 일부 일 : 코딩에 따라서

가 :

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

당신은 ref-y 속성을 사용할 수 있습니다, 예를 들어,

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. 
}); 

편집는 :

refX은 "특별한 속성"그룹의 일부입니다. 모든 속성의 목록은 여기에서 찾을 수 있습니다 : http://resources.jointjs.com/docs/jointjs/v2.0/joint.html#dia.attributes이 정의를 정의 할 수도 있습니다

속성 :

어느 글로벌 특별한 속성 - 가 joint.dia.attributes 네임 스페이스를 확장 (인 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 }; 
    } 
}; 

을 또는 특정 도형에 대한 특수 속성 (속성 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 }; 
      } 
     } 
    } 
});