javascript - FabricJS 在事件对象/选择周围渲染阴影？

Question

快速简单:有没有一种方法可以在单击事件的 FabricJS 元素或事件选择后实现以下效果？基本上，除了边框之外，我还想在事件元素周围渲染阴影/边框效果。一旦您点击离开，阴影就会被移除。

示例代码: (源自 this answer )

img {
  -webkit-filter: drop-shadow(1px 1px 0 black)
                  drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(1px 1px 0 black) 
          drop-shadow(-1px -1px 0 black);
}

body {
  background-color: lightcoral;
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

Answer 1

基本上，您需要使用fabricjs事件并设置或取消设置图像对象上的阴影。

var canvas = new fabric.Canvas("c");
fabric.Image.fromURL('https://i.imgur.com/GZoXRjS.png', function(img) {
img.scaleToWidth(500)

canvas.add(img)

img.on('deselected',function(e){
    this.set('shadow', null);
})
});


canvas.on('object:selected',function(e){
debugger;
  if(e && e.target){
    e.target.set('shadow', { blur: 15, offsetX: 0, offsetY: 0});
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.15/fabric.min.js"></script>
<canvas width=800 height=800 id="c" ></canvas>