Remove / replace object from group in FabricJS

问题

i'm trying to replace an SVG from a group (or delete and add a new one) but it's not working. Those are the ways I already tried:

var group = new fabric.Group([svg, text], {options});

canvas.remove(svg); // not working

group.getObjects()[0] = my_new_svg; // not working

group.forEachObject(function(o) { // not working
    if (is_svg_object) {
        canvas.remove(o);
    }
});

I been using version 1.6.4 and it's working really fine. But now, i'm migrating to the latest release 1.7.17 and have this issues.

I notice also that in this release, I cannot set a property directly, I be forced to use the method.

object.setTextBackgroundColor(color); // works

object.textBackgroundColor = color; // works in 1.6, not in 1.7.17

So i'm thinking this issue can be related. Thanks!

回答1:

There are many things to take in account lately on 1.7.x onward.

1) you get object caching as default. That means that fabric will paint the object just when something change. you should read this until it makes sense, if it doesnt ask to clarify better the explanations:

http://fabricjs.com/fabric-object-caching

2) To make the changes effective you can solve in 3 ways:

use the setter method as you described ( better in the .set('textBackgroundColor', color) version )

flag the object as dirty after the changes ( object.set('dirty', true) )

disable objectCaching ( not suggested )

3) The correct way to remove an object from a Group is

var group = new fabric.Group([svg, text], {options});

group.remove(svg);

group.addWithUpdate(my_new_svg);

group.moveTo(my_new_svg, 0);

To be honest see what is not working and why would grant you a better answer.

来源：https://stackoverflow.com/questions/45738624/remove-replace-object-from-group-in-fabricjs

标签

javascript

fabricjs