Question

我正在尝试在Fabric.js中实现放大镜。我已经实现了一些here，它可以在直接使用图像时正常工作但不幸的是我有一个画布，所以我必须先调用canvas.toDataURL()创建一个图像，然后使用以下代码进行克隆：fabric.util.object.clone(img)杀死了很多记忆。

我们可以直接克隆画布，例如：fabric.util.object.clone(canvas);

以下是示例代码：

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) { lens = fabric.util.object.clone(img); lens.set({ width : scale * originalWidth, height : scale * originalHeight, clipTo : function(ctx) { ctx.arc(-this.left + x - this.width / 2, -this.top + y - this.height / 2, radius, 0, Math.PI * 2, true);}}); canvas.add(lens); });

Answer 1

您可以像这样克隆FabricJS画布：

克隆您输入FabricJS的画布元素。
使用drawImage将FabricJS画布内容绘制到克隆的画布上

示例：

// get a reference to the canvas element you gave to FabricJS
var c=document.getElementById('c');
// clone that canvas with "cloneNode"
var clonedCanvas=c.cloneNode();
// draw the contents of the Fabric canvas onto the cloned canvas
clonedCanvas.getContext('2d').drawImage(c);

但是您可以使用画布作为图像源创建fabric.Image，因此我认为您可以直接从Fabric画布本身创建图像。

未测试：

var img=fabric.Image(document.getElementById('c'));

如何在fabric.js中克隆画布以实现放大镜

1 个答案: