Question

我有一个自定义的jointjs Rect形状，它显示有两种不同字体大小的文本：

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: 'twoTextRect',
    attrs: {
        rect: { fill: 'white', stroke: 'black', 'stroke-width': 1, 'follow-scale': true, width: 160, height: 160},
        text: { ref: 'rect', 'font-size':20},
        '.word1': { 'fill':'red'},
        '.word2': { 'fill':'blue'}
    },
    size: { width: 160, height: 35 }
}, joint.shapes.basic.Generic.prototype.defaults)});

然后我创建我的形状实例并设置word1和word2的文本：

var rect3 = new twoTextRect();
rect3.attr('.word1/text' , 'aaa');
rect3.attr('.word2/text', 'bbbbbb');

我根据这个答案创建了它：2 different font sizes for text inside basic Rect, jointjs

问题是我在word1和word2中设置的文本重叠而不是以raw，word1和word2显示，都是从rect的开头开始而不是一个接一个地出现......我做错了什么？

谢谢！

Answer 1

尝试使用下面或类似的选项定位文本，使它们不重叠

'.word1': { 'fill':'red', ref-x:0.5, ref-y:1},
'.word2': { 'fill':'blue', , ref-x:0.5, ref-y:1}

使用多个tspan标签在jointjs形状中重叠的文本

1 个答案: