Question

如何为一组对象添加阴影，这不起作用

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

//创建圈子

    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,

    });

//创建群组 var group = new fabric.Group（[circle，circle2]，{

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

    canvas.add(group);

Answer 1

我知道这是不久前的事，但它似乎在fabric.Group对象上是阴影，只能在单个对象上。相反，为什么不在形成背景的对象上应用阴影。所以在这种情况下它将是：

＆＃13;

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();

＆＃13;

* {
  box-sizing: border-box;
}
canvas {
  border: 1px solid #000000;
}

＆＃13;

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

＆＃13;

将阴影添加到一组对象

1 个答案: