FabricJS 在活动 object/selection 周围渲染阴影？

Question

快速简单：有没有一种方法可以在单击活动的 FabricJS 元素或活动选择后实现以下效果？基本上，除了边框，我还想在活动元素周围呈现 shadow/border 效果。单击离开后，阴影将被移除。

示例代码： （来源于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

解决方案

在 body 元素上使用 eventListener。

当通过 tagName 检查图像时，将应用 css 样式。
单击正文后，应用的样式将使用属性值 none

在代码段中您可以看到行为

let pic = document.getElementById("demo-pic");

document.body.addEventListener("click", function (e) {
  if (e.target.tagName === "IMG") {
    pic.setAttribute(
      "style",
      "-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);"
    );
    document.body.style.backgroundColor = "lightcoral";
  } else if (e.target.tagName === "BODY") {
    pic.setAttribute("style", "-webkit-filter: none;");
    document.body.style.backgroundColor = "white";
  }
});

<!DOCTYPE html>
<html>
<head>
    <script src="fabric.js"></script>
    <link rel="stylesheet" href="mydemo.css">
</head>

<body>
    <canvas id="c"></canvas>
    <img id="demo-pic" src="http://i.imgur.com/GZoXRjS.png" width="250">
    <script src="mydemoFile.js"></script>

</body>
</html>

Answer 2

可能将像这样的 focus 伪元素与 a 标签结合使用可以实现您的需求。

看这里：

a:focus 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;
}

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

Answer 3

感谢this answer。

如果你给你的 img 标签一个 tabindex 那么你可以使用 focus 伪 class 来模拟点击。

但是我不得不删除 outline:

img:focus {
  outline:0;
  -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" tabindex="0">

Answer 4

基本上您需要使用 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>

FabricJS 在活动 object/selection 周围渲染阴影？

FabricJS Rendering a shadow around active object/selection?

javascript

html

css

canvas

fabricjs

解决方案