如何扩展JointJS的Standard Rectangle形状以添加SVGTextElement？

这个需求完全可行，无需从头创建自定义形状，直接基于Standard Rectangle扩展即可，以下是具体实现方式：

实现步骤 #

• 继承joint.shapes.standard.Rectangle类
• 在markup中添加<text>元素，同时通过attrs配置文本的样式与位置
• 复用原矩形的所有特性，仅新增文本功能

代码示例 #

// 定义带文本的扩展矩形
joint.shapes.standard.LabeledRect = joint.shapes.standard.Rectangle.extend({
    // 重写markup，保留原矩形结构并添加文本元素
    markup: [
        '<rect class="body"/>',
        '<text class="label"/>',
        '<g class="rotatable"/>',
        '<g class="scalable"/>'
    ].join(''),

    // 合并默认属性，添加文本的默认配置
    defaults: joint.util.deepSupplement({
        attrs: {
            label: {
                text: '默认文本',
                fill: '#333',
                fontSize: 14,
                textAnchor: 'middle',
                dominantBaseline: 'middle',
                // 绑定到矩形中心，缩放时自动跟随
                x: 'calc(w/2)',
                y: 'calc(h/2)'
            }
        }
    }, joint.shapes.standard.Rectangle.prototype.defaults)
});

// 使用扩展后的形状
const labeledRect = new joint.shapes.standard.LabeledRect({
    position: { x: 100, y: 100 },
    size: { width: 150, height: 80 },
    attrs: {
        body: { fill: '#eef', stroke: '#88a' },
        label: { text: '自定义文本内容' }
    }
});

labeledRect.addTo(graph); // 假设graph是你的JointJS画布实例

关键说明 #

• 通过calc(w/2)和calc(h/2)实现文本在矩形内的居中对齐，矩形缩放时文本位置会自动调整
• 可以直接修改attrs.label的属性来定制文本的字体、颜色、内容等
• 这种扩展方式保留了Standard Rectangle的所有原生功能（如旋转、缩放、端口支持等）

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