Fabric.js: Object Clone - are they linked to original Objects

[byeshkumar]

In the sample the if cloned object's property changes, even the original object's properties changes

var Aobj = canLayer.getActiveObject(); //canLayer.item(0);
var vobj = fabric.util.object.clone(Aobj); //Aobj.clone();
vobj.set('fill', '#fff'); // This changes the color of both the objects

http://jsfiddle.net/YpUgc/7/

YESH

[kangax]

Yes, fabric.util.object.clone does shallow cloning. Fabric objects should be cloned using clone instance methods.

[byeshkumar]

It's same with object.clone() also. The fiddle has it

[kangax]

Does this happen with latest version too? 1.1.4

On Mon, Mar 25, 2013 at 1:08 PM, byeshkumar [email protected]:

It's same with object.clone() also. The fiddle has it

—
Reply to this email directly or view it on GitHubhttps://github.com/kangax/fabric.js/issues/497#issuecomment-15389499
.

[Kienz]

@byeshkumar I have updated your jsfiddle. Now it should work.
http://jsfiddle.net/YpUgc/10/
The problem was that clone() method of fabric.Group is async - so you have to define callback function on cloning object.
You can see this on line 29 in the jsfiddle demo.

[byeshkumar]

Just Perfect!!!!!
I really don't know how I forgot callback function feature. It had troubled me many times, even then i forgot it.

It's working.

Thanks Kienz
Thanks Kangax

[deepdoon]

Hi Kangax/Kienz,

First of all fabricjs is very nice library thanks a lot for your efforts. I am stuck in a problem, Can i delink the cloned object so that if i change anything in cloned it won't affect original? Actually i am changing values in objects placed on canvas by cloning and adding them on temp canvas(actual changes takes place in temp canvas, original canvas just have 0 as a text/value) after changing values on clone when i render the original the value are reflected there. It is only happening in case i clone a group. Working fine for individual items. Please help.

Thanks

[asturur]

Can you make a fiddle please?

[abhi06991]

I have list of image filters' check boxes through which users can apply different filters for an image. When a user clicks on a particular image in the canvas, I check whether there are any filters applied to that image and update the checkboxes accordingly. Here the problem is when an image is cloned, the image filters applied or removed is shared between the images,so I am not able to correctly update the checkboxes. Anything that can be done to resolve this problem?

[ehdwns980416]

@Kienz It has bug in the latest version(1.7.20). 😭
JSFiddle
Like This:

[asturur]

thanks for the fiddle so we can look at it.

[asturur]

your fiddle works good on 1.7.20

[ehdwns980416]

Really? It has bug when I run it.

[asturur]

ok maybe describing the bug with words would be helpful.
Also please unlock the adblocker on both jsfiddle and fabricjs.com, looks unfair.

[ehdwns980416]

I am using chrome browser. And I was also expecting that problem.
So I tried incognito mode, but it was the same. 😭

[asturur]

There is no adblocker in incognito mode.
Can i understand what is the problem? if you are not able to explain, i m not willing to help.