Fabric.js：克隆子类化对象后克隆体不可见的问题排查

核心问题 #

自定义类克隆后无法显示，主要源于三个问题：

1. 自定义类未注册：Fabric.js无法识别自定义类的构造函数，克隆时无法正确生成实例。
2. type属性冲突：自定义类的type设为'rect'，和原生fabric.Rect的type重复，导致克隆逻辑混淆。
3. 异步克隆时机错误：clone方法的回调是异步执行的，你在回调外调用canvas.add时，克隆对象还未被赋值，属于无效操作（原生Rect能显示是偶然的同步执行情况，不具备可靠性）。

修复步骤 #

1. 给自定义类设置唯一type #

将自定义类的type改为唯一值（比如'customRect'），避免和原生类冲突：

var CustomRect = fabric.util.createClass(fabric.Rect, {
    type: 'customRect', // 唯一标识
    initialize: function (options) {
        this.callSuper('initialize', options)
    },
})

2. 注册自定义类到Fabric全局 #

让Fabric能识别自定义类的构造函数，添加以下代码：

fabric.CustomRect = CustomRect

3. 在clone回调内完成修改与添加 #

因为clone回调是异步的，必须在回调内部修改克隆对象并添加到画布，确保操作时机正确：

customRect.clone((obj) => {
    obj.set({left: obj.left + 10, top: obj.top + 10})
    canvas.add(obj)
})

完整修复代码 #

var canvas = new fabric.Canvas('canvas')

// 原生Rect克隆（推荐回调内添加）
var rect = new fabric.Rect({
    top: 100,
    left: 100,
    width: 60,
    height: 70,
    fill: 'red',
})
canvas.add(rect)
rect.clone((obj) => {
    obj.set({left: obj.left + 10, top: obj.top + 10})
    canvas.add(obj)
})

// 自定义Rect类定义与注册
var CustomRect = fabric.util.createClass(fabric.Rect, {
    type: 'customRect',
    initialize: function (options) {
        this.callSuper('initialize', options)
    },
})
fabric.CustomRect = CustomRect

var customRect = new CustomRect({
    top: 200,
    left: 200,
    width: 50,
    height: 50,
    fill: '#ffff00',
})
canvas.add(customRect)

// 自定义类克隆
customRect.clone((obj) => {
    obj.set({left: obj.left + 10, top: obj.top + 10})
    canvas.add(obj)
})

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