Jer*_*ohg 5 javascript html5 clone canvas fabricjs
我正在使用Fabric.js,我正在尝试为图像和文本元素实现复制功能.我找到了两个关于如何复制对象的解决方案:
方法1
stage.getActiveObject().clone();
Run Code Online (Sandbox Code Playgroud)
方法2
fabric.util.object.clone(stage.getActiveObject());
Run Code Online (Sandbox Code Playgroud)
使用第一种方法时,不会发生克隆,使用第二种方法时,克隆确实会发生.更具体地说,对于第一种方法,我使用了以下代码:
var obj = stage.getActiveObject();
if (!obj) return;
var clone = obj.clone();
clone.set({
top: clone.get('top') + 30
});
stage.add(clone);
stage.renderAll();
Run Code Online (Sandbox Code Playgroud)
在活动对象上运行此代码时,它会一直告诉克隆是未定义的.虽然两种方法都可以做同样的事情,但必须有充分的理由使用方法1或2.
有谁可以解释那两个之间的区别?
我注意到的另一件事是当使用第二种方法时,fabric.util.object.clone(stage.getActiveObject()); 克隆的对象获取与原始对象相同的ID.虽然克隆是原始的克隆,但我对他们共享相同的ID没有意义.换句话说,我如何克隆一个对象并给它一个唯一的ID?
好的,所以我为我的问题找到了解决方案.它对我有用,也许它可以帮助别人.这是我的最终代码,它完成了我所追求的:
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();
Run Code Online (Sandbox Code Playgroud)
我的应用程序每个对象需要一个唯一的ID,所以我将原始ID乘以2.不过,如果有人有更好的解决方案,或者可以给我更多信息,为什么上面的帖子中的方法1没有工作,请随意离开注意.