基本 Rect、jointjs 中文本的 2 种不同字体大小
2 different font sizes for text inside basic Rect, jointjs
我有一个像这样的基本矩形:
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'
}
}
});
我使用 clone()
创建更多类似的矩形:
var rect1 = rectShape.clone().translate(520, 10).attr('text/text','rect1');
我想在 rect 中有 2 个不同的单词,一个大小为 12,另一个大小为 8。知道我该怎么做吗?
谢谢!
您需要使用包含文本元素的新 SVG 标记创建一个自定义形状,该文本元素包含一个 <tspan>
代表您想要的每个单词。您可以调整来自标准 Rect 元素的标记。为每个元素指定不同的 class 名称,例如将 Rect 标记中的 <text/>
元素替换为 <text><tspan class="word1"/><tspan class="word2"/></text>
。形状定义如下所示:
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)
});
然后创建形状实例:
var rectShape = new joint.shapes.my.twoTextRect();
要设置 <tspan>
SVG 元素的文本,您可以使用
rectShape.attr('.word1/text', 'word 1');
rectShape.attr('.word2/text', 'word 2');
这会生成如下所示的元素:
您可以像这样克隆元素:
var clone = rectShape.clone().translate(520, 10).attr({'.word1': {text: 'clone1'}, '.word2': {text: 'clone2' }});
这会生成一个新元素:
我有一个像这样的基本矩形:
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'
}
}
});
我使用 clone()
创建更多类似的矩形:
var rect1 = rectShape.clone().translate(520, 10).attr('text/text','rect1');
我想在 rect 中有 2 个不同的单词,一个大小为 12,另一个大小为 8。知道我该怎么做吗?
谢谢!
您需要使用包含文本元素的新 SVG 标记创建一个自定义形状,该文本元素包含一个 <tspan>
代表您想要的每个单词。您可以调整来自标准 Rect 元素的标记。为每个元素指定不同的 class 名称,例如将 Rect 标记中的 <text/>
元素替换为 <text><tspan class="word1"/><tspan class="word2"/></text>
。形状定义如下所示:
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)
});
然后创建形状实例:
var rectShape = new joint.shapes.my.twoTextRect();
要设置 <tspan>
SVG 元素的文本,您可以使用
rectShape.attr('.word1/text', 'word 1');
rectShape.attr('.word2/text', 'word 2');
这会生成如下所示的元素:
您可以像这样克隆元素:
var clone = rectShape.clone().translate(520, 10).attr({'.word1': {text: 'clone1'}, '.word2': {text: 'clone2' }});
这会生成一个新元素: