JointJS中圆形元素内标签无法居中问题求助

你之前的问题出在只设置了定位坐标，没给文本自身加居中锚点，而且参考元素的配置也有误。直接按下面的方法改就能搞定：

正确配置方式 #

方式一：初始化元素时直接配置 #

创建joint.shapes.standard.Circle时，给label补充文本锚点和正确的定位属性：

{
    "body": { 
        "fill": '#fff',
        "stroke": '#333',
        "strokeWidth": 1,
        "magnet": true
    },
    "label": { 
        "text": 'some label',
        "fontSize": 12,
        "fill": '#333',
        // 核心：让文本自身的中心对齐定位点
        "textAnchor": "middle",
        "dominantBaseline": "middle",
        // 参考body元素进行定位
        "ref": "body",
        "refX": "calc(0.5*w)",
        "refY": "calc(0.5*h)"
    }
}

方式二：动态修改已创建的元素 #

如果已经创建了元素，直接通过attr方法补全属性：

// 先设置文本锚点，确保文本居中
element.attr('label/textAnchor', 'middle');
element.attr('label/dominantBaseline', 'middle');
// 绑定到body元素，设置相对居中位置
element.attr('label/ref', 'body');
element.attr('label/refX', 'calc(0.5*w)');
element.attr('label/refY', 'calc(0.5*h)');

为什么之前的方法无效？ #

• 你只设置了x/y或refX，但文本默认是左上角对齐定位点，所以看起来偏了；加上textAnchor和dominantBaseline才能让文本中心和定位点重合。
• 错误设置了label/label属性，这个是多余的，应该用ref: "body"指定参考圆形的主体部分。

内容的提问来源于stack exchange，提问作者BairDev