我正在尝试在我的FabricJS项目中复制和粘贴对象。
这是FabricJS版本2.3.3
使用本机FabricJS对象，它可以正常工作。就像演示中（http://fabricjs.com/copypaste）一样。
但是，在创建自定义类之后（例如，此处为http://fabricjs.com/cross），我无法基于自定义类粘贴对象。复制就可以了，只是粘贴功能会引发错误。
我得到的只是控制台日志中的一个错误：this._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文件：（仅BODY标签）
<body>
<canvas id="c" width="1000" height="800" style="border:1px solid #ccc"></canvas>
<br>
<button onclick="testCopy()">COPY</button>
<button onclick="testPaste()">PASTE</button>
<script type="text/javascript">
var TheCanvas = new fabric.Canvas('c');
var myCross = new C_Cross({ top: 100, left: 100 });
TheCanvas.add(myCross);
</script>
</body>
以下是用于复制和粘贴的功能：
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();
});
}
这是FabricJS库中崩溃的代码：
在此功能的最后一行。
drawObject: function(ctx) {
this._renderBackground(ctx);
this._setStrokeStyles(ctx, this);
this._setFillStyles(ctx, this);
this._render(ctx); // <--- crashes here
},
最佳答案
您需要为自定义类添加fromObject。并且需要定义与类名称相同的type，在查找特定类时需要读取。
演示
fabric.Cross = fabric.util.createClass(fabric.Object, {
type: 'cross',
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);
}
});
fabric.Cross.fromObject = function(object, callback) {
var cross = new fabric.Cross(object);
callback && callback(cross);
return cross;
};
var TheCanvas = new fabric.Canvas('c');
var myCross = new fabric.Cross({
top: 100,
left: 100
});
TheCanvas.add(myCross);
function testCopy() {
TheCanvas.getActiveObject().clone(function(cloned) {
TheClipboard = cloned;
console.log(TheClipboard)
});
}
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 = TheCanvas;
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();
});
}<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>
<br>
<button onclick="testCopy()">COPY</button>
<button onclick="testPaste()">PASTE</button>关于javascript - 复制并粘贴自定义FabricJS对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51014263/