Javascript 复印及；粘贴自定义FabricJS对象

我正在尝试复制和粘贴FabricJS项目中的对象

它是FabricJS版本2.3.3

对于本机FabricJS对象，它可以正常工作。与演示中的完全相同（）

但是在我创建了自定义类（比如这里）之后，我无法基于自定义类粘贴对象。复制是正常的，只是粘贴函数抛出一个错误

我得到的只是控制台日志中的一个错误：这个。\u render不是指向FabricJS库中某个行号的函数

有人知道为什么吗？谢谢

这是我的自定义类：

const C_Cross = fabric.util.createClass(fabric.Object, {

    initialize: function(options) {
        this.callSuper('initialize', options);

        this.width = 100;
        this.height = 100;

        this.w1 = this.h2 = 100;
        this.h1 = this.w2 = 30;
    },

    _render: function (ctx) {
        ctx.fillRect(-this.w1 / 2, -this.h1 / 2, this.w1, this.h1);
        ctx.fillRect(-this.w2 / 2, -this.h2 / 2, this.w2, this.h2);
    }

});

这是HTML文件：（仅限正文标记）

下面是FabricJS库中崩溃的代码片段： 在该函数的最后一行

drawObject: function(ctx) {
      this._renderBackground(ctx);
      this._setStrokeStyles(ctx, this);
      this._setFillStyles(ctx, this);
      this._render(ctx); // <--- crashes here
},

drawObject:函数（ctx）{
这是一个背景（ctx）；
这个。_设置行程（ctx，这个）；
这个。_setFillStyles（ctx，这个）；
这._render（ctx）；//您需要为自定义类添加
fromObject
。并且需要定义
type
与类名相同，在查找特定类时需要读取这些类名

演示


fabric.Cross=fabric.util.createClass（fabric.Object{
类型：'交叉'，
初始化：函数（选项）{
this.callSuper（'initialize'，options）；
这个宽度=100；
这个高度=100；
this.w1=this.h2=100；
this.h1=this.w2=30；
},
_渲染：函数（ctx）{
ctx.fillRect（-this.w1/2，-this.h1/2，this.w1，this.h1）；
ctx.fillRect（-this.w2/2，-this.h2/2，this.w2，this.h2）；
}
});
fabric.Cross.fromObject=函数（对象，回调）{
var cross=新结构。交叉（对象）；
回调&回调（交叉）；
回程交叉；
};
var TheCanvas=newfabric.Canvas（'c'）；
var myCross=new fabric.Cross({
前100名，
左：100
});
添加（我的十字架）；
函数testCopy（）{
canvas.getActiveObject（）克隆（函数（克隆）{
TheClipboard=克隆；
控制台日志（面板）
});
}
函数testPaste（）{
clone（函数（clonedObj）{
canvas.discardActiveObject（）；
克隆对象集({
左：克隆对象，左+10，
top:clonedObj.top+10，
事件：是的，
});
if（clonedObj.type=='activeSelection'）{
//活动选择需要对画布的引用
clonedObj.canvas=canvas；
clonedObj.forEachObject（函数（obj）{
增加（obj）；
});
//这将解决不可选择性问题
clonedObj.setCoords（）；
}否则{
canvas.add（clonedObj）；
}
TheClipboard.top+=10；
夹板左+=10；
canvas.setActiveObject（clonedObj）；
canvas.requestRenderAll（）；
});
}



复制
粘贴
您需要为自定义类添加
fromObject
。并且需要定义
类型
与类名相同，在查找特定类时需要读取这些名称

演示


fabric.Cross=fabric.util.createClass（fabric.Object{
类型：'交叉'，
初始化：函数（选项）{
this.callSuper（'initialize'，options）；
这个宽度=100；
这个高度=100；
this.w1=this.h2=100；
this.h1=this.w2=30；
},
_渲染：函数（ctx）{
ctx.fillRect（-this.w1/2，-this.h1/2，this.w1，this.h1）；
ctx.fillRect（-this.w2/2，-this.h2/2，this.w2，this.h2）；
}
});
fabric.Cross.fromObject=函数（对象，回调）{
var cross=新结构。交叉（对象）；
回调&回调（交叉）；
回程交叉；
};
var TheCanvas=newfabric.Canvas（'c'）；
var myCross=new fabric.Cross({
前100名，
左：100
});
添加（我的十字架）；
函数testCopy（）{
canvas.getActiveObject（）克隆（函数（克隆）{
TheClipboard=克隆；
控制台日志（面板）
});
}
函数testPaste（）{
clone（函数（clonedObj）{
canvas.discardActiveObject（）；
克隆对象集({
左：克隆对象，左+10，
top:clonedObj.top+10，
事件：是的，
});
if（clonedObj.type=='activeSelection'）{
//活动选择需要对画布的引用
clonedObj.canvas=canvas；
clonedObj.forEachObject（函数（obj）{
增加（obj）；
});
//这将解决不可选择性问题
clonedObj.setCoords（）；
}否则{
canvas.add（clonedObj）；
}
TheClipboard.top+=10；
夹板左+=10；
canvas.setActiveObject（clonedObj）；
canvas.requestRenderAll（）；
});
}



复制
粘贴
谢谢！它可以工作，但现在我又被卡住了-在我复制了一些副本并选择了多个副本之后-我无法再次复制和粘贴。复制函数抛出fabric.util.getKlass（…）.fromObject不是一个function@Enriqe检查更新，多对象复制和粘贴也有效谢谢！所以解决方案是：属性类型必须包含类的名称！超级！谢谢！它可以工作，但现在我又卡住了-在我复制了一些副本并选择了多个副本后-我无法再次复制和粘贴。复制函数抛出fabric.util.getKlass（…）.fromObject不是function@Enriqe检查更新，多对象复制和粘贴也工作在谢谢！所以解决方案是：属性类型，它必须包含类的名称！Super！
function testCopy(){
    TheCanvas.getActiveObject().clone(function(cloned) {
        TheClipboard = cloned;
    });
}

function testPaste(){
    TheClipboard.clone(function(clonedObj) {
        TheCanvas.discardActiveObject();
        clonedObj.set({
            left: clonedObj.left + 10,
            top: clonedObj.top + 10,
            evented: true,
        });
        if (clonedObj.type === 'activeSelection') {
            // active selection needs a reference to the canvas
            clonedObj.canvas = canvas;
            clonedObj.forEachObject(function(obj) {
                TheCanvas.add(obj);
            });
            // this should solve the unselectability
            clonedObj.setCoords();
        } else {
            TheCanvas.add(clonedObj);
        }
        TheClipboard.top += 10;
        TheClipboard.left += 10;
        TheCanvas.setActiveObject(clonedObj);
        TheCanvas.requestRenderAll();
    });
}

drawObject: function(ctx) {
      this._renderBackground(ctx);
      this._setStrokeStyles(ctx, this);
      this._setFillStyles(ctx, this);
      this._render(ctx); // <--- crashes here
},