Fabric.js stage.getActiveObject().clone() 与 fabric.util.object.clone(stage.getActiveObject())

Posted

技术标签:

【中文标题】Fabric.js stage.getActiveObject().clone() 与 fabric.util.object.clone(stage.getActiveObject())【英文标题】:Fabric.js stage.getActiveObject().clone() vs. fabric.util.object.clone(stage.getActiveObject()) 【发布时间】:2014-03-10 16:13:02 【问题描述】:

我正在使用 Fabric.js,我正在尝试为图像和文本元素实现复制功能。我找到了两个关于如何复制对象的解决方案:

方法一

stage.getActiveObject().clone();

方法二

fabric.util.object.clone(stage.getActiveObject());

使用第一种方法时,不会发生克隆,使用第二种方法时,会发生克隆。更具体地说,对于第一种方法,我使用了以下代码:

var obj = stage.getActiveObject();
if (!obj) return;

var clone = obj.clone();
clone.set(
    top: clone.get('top') + 30
);
stage.add(clone);
stage.renderAll(); 

在活动对象上运行此代码时,它一直告诉克隆未定义。虽然这两种方法都会做同样的事情,但使用方法 1 或 2 必须有充分的理由。

谁能解释这两者之间的区别?

我注意到的另一件事是,当使用第二种方法时,fabric.util.object.clone(stage.getActiveObject()); 克隆对象获得与原始对象相同的 ID。尽管克隆是对原始版本的克隆,但我认为它们共享相同的 ID 对我来说没有意义。换句话说,我如何克隆一个对象并给它一个唯一的 ID?

【问题讨论】:

您可以在文档中看到 fabric.Object#clone() (#1) 是异步的 — fabricjs.com/docs/fabric.Object.html#clone 这就是您的 clone 未定义的原因。任何时候你克隆 Fabric 对象,你都应该使用.clone() (#1)。 util.clone 只是一个简单的克隆实用程序,可以与其他非结构对象一起使用。 嗨 kangax,感谢您的回复。我仍然有点不清楚为什么克隆是未定义的。我在我的代码示例中使用 obj.clone()。我可能只是缺少一个简单的步骤,你能更具体吗?非常感谢。 克隆被传入回调函数,因为它是异步的 这对我来说听起来像是一个概念上的缺陷。 clone() 方法在内存表示中调用,无需触发异步重构来通过网络获取 SVG 或图像等资源。因此,fabric.js 不应该在克隆时调用fromObject() 方法,而是一个专用(阻塞)方法。 【参考方案1】:

好的,所以我想出了一个解决我的问题的方法。它对我有用,所以也许它可以帮助其他人。这是完成我所追求的最终代码。:

var object = fabric.util.object.clone(stage.getActiveObject());
stage.discardActiveObject();

object.title = object.title + '_copy';
object.id = (object.id * 2);
object.set("top", object.top+20);
object.set("left", object.left+20);

stage.add(object);
stage.renderAll();

我的应用程序的每个对象都需要一个唯一 ID,因此我将原始 ID 乘以 2。不过,如果有人有更好的解决方案,或者可以给我更多信息,说明为什么我上面的帖子中的方法 1 不起作用,请随意留个便条。

【讨论】:

以上是关于Fabric.js stage.getActiveObject().clone() 与 fabric.util.object.clone(stage.getActiveObject())的主要内容,如果未能解决你的问题,请参考以下文章

fabric.js和高级画板

旋转fabric.js时的组控制偏移

Fabric.js - 自定义 Fabric.Image 类在“loadFromJSON”>“fromObject”中不起作用

Fabric.js - 分组 iText 不可编辑

Fabric.js如何按图像剪辑

Fabric.js 3个api设置画布宽高