Question

我正在使用关节js绘制图表，所以，我创建一些带有文本的矩形对象，但我需要将该文本对齐到左边：

var rectname = new joint.shapes.basic.Rect({
            position: { x: 110, y: y_value },
            size: { width: 450, height: 45 },
            attrs: { 
                rect: { fill: bgcolor2,'stroke-width': 0 },
                text: {
                    text: 'Any text here',
                    fill: 'white'
                    'ref-x': .5, 
                    'ref-y': .5, 
                    ref: 'rect', 
                    'y-alignment': 'middle', 
                    'x-alignment': 'left'
                }
            }
        });

我已经尝试过像这样的文本属性，但它不起作用：

{{1}}

并尝试在“中间”设置x和y对齐而没有结果。

有什么想法吗？提前谢谢

Answer 1

使用标签设置元素的文本并使用＆＃39; text-anchor＆＃39;用于设置文本对齐的属性，如下所示

var rectname = new joint.shapes.basic.Rect({
        position: { x: 110, y: y_value },
        size: { width: 450, height: 45 },
        attrs: {
            '.label': {text: 'Any text here', 'text-anchor': 'end'}
        }
    });

有关text-anchor属性的更多信息，请点击此处 https://developer.mozilla.org/en/docs/Web/SVG/Attribute/text-anchor

Answer 2

到下一个感兴趣的开发者：

我有多行字符串，所以jointjs会将每个字符串放在中心（不是很酷）。我的解决方案：

text: { text: code, fill: 'gray', fontSize: fontSize, fontFamily, 'text-anchor': 'left', 'ref-x': borderSize / 2 }

此时，我已经知道计算出所需的宽度，只是添加了一个边框。

联合js如何将文本对齐到rect对象的左侧

2 个答案: