在Fabric.js中有没有办法让透明对象带有阴影？

Question

我的最终目标是拥有一个模糊的多边形对象。由于没有针对对象的滤镜，只有图像，我想我可以使对象透明并使用模糊的阴影：

const poly = new fabric.Polygon({
  // ...
  fill: 'rgba(0, 0, 0, 0)',
  shadow: new fabric.Shadow({
    color: 'red',
    blur: 10,
    offsetX: 0,
    offsetY: 0,
  }),
})

小提琴：https://jsfiddle.net/jhurqgbe/

但是阴影的不透明度受到物体不透明度的影响，不起作用。有解决方法或其他解决方案吗？

Answer 1

你应该这样看

const canvas = new fabric.Canvas('cnv');

const rect = new fabric.Rect({
  left: 50,
  top: 50,
  fill: 'transparent', // Set to "transparent"
  width: 50,
  height: 50,
});

const drawBlurRect = () => {

  const ctx = canvas.getContext()
  ctx.save()
  ctx.filter = "blur(20px)";
  ctx.rect(rect.left, rect.top, rect.width, rect.height)
  ctx.fill()
  ctx.restore()
  
}

canvas.on("after:render", drawBlurRect)

canvas.add(rect);
canvas.renderAll();