在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.
});
答案 0 :(得分:4)
您可以使用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 };
}
}
}
});