Question

我尝试更改画布上所有选定对象的颜色。我发现我可以改变组本身的属性（this.canvas.getActiveGroup().setFill(...)）由于我想根据所选对象的类型更改不同的属性，因此我无法使用此功能。相反，我尝试迭代所有选定的对象并操纵它们。

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

this.canvas.renderAll();

颜色会发生变化，但不幸的是，取消选择对象后，所有样式都会被更改回来我认为样式将应用于组，因为再次选择时，所有元素都将以正确的颜色显示...

当我删除activeGroup（this.canvas.discardActiveGroup()）之前，它会起作用，但会带来一些其他问题。

顺便说一句：检查员（开发工具）显示正确的颜色。调整特定元素的大小后，它也会更新其颜色。

有没有类似的问题并且知道解决方案？

最好的问候丹尼尔

Answer 1

<强>样本

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>

如果我，那么这将工作，检查演示，添加此功能

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;
}

fabricjs：操纵选定的对象

1 个答案: