CODEWITHSUNDEEP
fabricjs
dkirchhof
dkirchhof

Reputation: 385

fabricjs: Manipulate selected objects

i try to change the color of all selected objects on my canvas. I figured out that i can change properties of the group itself (this.canvas.getActiveGroup().setFill(...)).
Since i want to change different properties depending on the type of the selected object, i can't use this function. Instead i try to iterate over all selected objects and manipulate them.

this.canvas.getActiveGroup().getObjects().forEach(obj =>
{
    if(obj instanceof fabric.Path)
    {
        obj.setStroke(color);
    }
    else
    {
        obj.setFill(color);
    }
}); 

this.canvas.renderAll();

The color will be changed, but unfortunately after deselecting the objects all styles will be changed back.
I think the styles will be applied to the group, because when selecting again all elements will appear in the right color...

When i remove the activeGroup (this.canvas.discardActiveGroup()) before, it will work but will bring some other problems.

Btw.: the inspector (dev tools) displays the right color. After resizing a specific element it will also update its color.

Has anyone similar problems and knows a solution?

Best regards
Daniel

Upvotes: 0

Views: 2268

Answers (1)

Durga
Durga

Reputation: 15614

DEMO

var color = 'black';

function changeColor() {
    var r = getRandomArbitrary(0, 225);
    var g = getRandomArbitrary(0, 225);
    var b = getRandomArbitrary(0, 225);
    color = 'rgb(' + r + ',' + g + ',' + b + ')';
    fillColorOb();
}

function getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var c = new fabric.Canvas('canvas');

c.add(new fabric.Circle({
    left: 50,
    top: 50,
    radius: 50,
    originX: 'center',
    originY: 'center',
}))
c.add(new fabric.Circle({
    left: 50,
    top: 150,
    radius: 50,
    originX: 'center',
    originY: 'center',
}))
c.add(new fabric.Circle({
    left: 150,
    top: 100,
    radius: 50,
    originX: 'center',
    originY: 'center',
}))
c.renderAll();

function fillColorOb() {
    var objs = c.getActiveGroup();
    if(!objs) return;
    
    objs.forEachObject(function(obj) {
        if (obj instanceof fabric.Path) {
            obj.setStroke(color);
         } else {
           obj.setFill(color);
         }
        c.renderAll();
    });
}

fabric.Group.prototype._restoreObjectState = function(object) {
  this.realizeTransform(object);
  object.setCoords();
  object.hasControls = object.__origHasControls;
  delete object.__origHasControls;
  object.set('active', false);
  delete object.group;

  object.dirty = true; // it will render on next renderAll() call

  return this;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>

<button type="button" name="button" onclick="changeColor();">color</button><br>
<canvas id="canvas" width="400" height="400"></canvas>

If I am , then this gonna work, check demo, add this function

fabric.Group.prototype._restoreObjectState = function(object) {
 this.realizeTransform(object);
 object.setCoords();
 object.hasControls = object.__origHasControls;
 delete object.__origHasControls;
 object.set('active', false);
 delete object.group;

 object.dirty = true; // it will render on next renderAll() call

 return this;
}

Upvotes: 1

Related Questions