问题
I have a basic Rect shape like this:
var rectShape = new joint.shapes.basic.Rect({
position: { x: 60, y: 10 },
size: { width: 160, height: 35 },
attrs: {
rect: {
fill: '#F5F5F5'
},
text: {
fill: '#FC8A26',
'font-size': 12,
'font-weight': 'bold',
'font-variant': 'small-caps'
}
}
});
I use clone()
to create more rectangles like that one:
var rect1 = rectShape.clone().translate(520, 10).attr('text/text','rect1');
I want to have 2 different words inside the rect, one at the size 12 and the other at the size 8. Any idea on how I can do that?
Thank you!
回答1:
you need to create a custom shape with new SVG markup containing a text element that contains a <tspan>
for each word that you want. You could adapt the markup from the standard Rect element. Give each element a different class name, for example replace the <text/>
element in the Rect markup with <text><tspan class="word1"/><tspan class="word2"/></text>
. The shape definition would look like this:
joint.shapes.my.twoTextRect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',
defaults: joint.util.deepSupplement({
type: 'my.twoTextRect',
attrs: {
rect: { fill: 'white', stroke: 'black', 'stroke-width': 1, 'follow-scale': true, width: 160, height: 35 },
text: { ref: 'rect' },
'.word1': { 'font-size': 12 },
'.word2': { 'font-size': 8 }
},
size: { width: 160, height: 35 }
}, joint.shapes.basic.Generic.prototype.defaults)
});
Then to create your shape instance:
var rectShape = new joint.shapes.my.twoTextRect();
To set the text of the <tspan>
SVG elements you can use
rectShape.attr('.word1/text', 'word 1');
rectShape.attr('.word2/text', 'word 2');
This results in an element that looks like this:
You can clone the element like this:
var clone = rectShape.clone().translate(520, 10).attr({'.word1': {text: 'clone1'}, '.word2': {text: 'clone2' }});
And this makes a new element:
来源:https://stackoverflow.com/questions/29556728/2-different-font-sizes-for-text-inside-basic-rect-jointjs