javascript - 联合js如何将文本与矩形对象左侧对齐

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'
                }
            }
        });

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

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'
                }
            }
        });

还尝试将 x 和 y 对齐设置为“中间”，但没有结果。

请问有什么想法吗？提前致谢

Answer 1

使用标签设置元素的文本，并使用“text-anchor”属性设置文本对齐方式，如下所示

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'}
        }
    });

有关文本 anchor 属性的更多信息可以在此处找到 https://developer.mozilla.org/en/docs/Web/SVG/Attribute/text-anchor