Add shadow to a group of objects

StackOverflow https://stackoverflow.com/questions/23209812

  •  07-07-2023
  •  | 
  •  

Frage

How do I add a shadow to a group of objects, this is not work

        var canvas = new fabric.Canvas('container');
    var text = new fabric.Text('hello world', {
      fontSize: 30
    });

//create circle

    var circle = new fabric.Circle({
        radius: 100,
        fill: '#eef',
        scaleY: 0.5,
    });


    var circle2 = new fabric.Circle({

        radius: 50,
        left: 100,
        fill: '#345666',
        scaleY: 0.5,

    });

//create group var group = new fabric.Group([circle,circle2], {

        angle: -10,
        shadow:{ color:"rgb(0,0,0)",blur:20,offsetX:10,offsetY:10 }
    });

    canvas.add(group);
War es hilfreich?

Lösung

I know this was a while ago, but it seems shadows on fabric.Group objects is not possible, only on individual objects. Instead why not apply the shadow on the object that forms the background. So in this case it would be:

var newCanvas = new fabric.Canvas('c', {
  isDrawingMode: false
});

newCanvas.setWidth(460);
newCanvas.setHeight(365);

var circle = new fabric.Circle({
  radius: 100,
  fill: '#990000',
  originX: 'center',
  originY: 'center',
  shadow: 'rgba(0,0,0,0.4) 5px 5px 7px'
});

var circle2 = new fabric.Circle({
  radius: 50,
  fill: '#000000',
  originX: 'center',
  originY: 'center',
});

var group = new fabric.Group([circle, circle2], {
  originX: 'center',
  originY: 'center',
  left: 225,
  top: 185
});

newCanvas.add(group);
newCanvas.renderAll();
* {
  box-sizing: border-box;
}
canvas {
  border: 1px solid #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>

<body>
  <div>
    <canvas id="c"></canvas>
  </div>
</body>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top