文章/答案/技术大牛

发布

社区首页 >问答首页 >FabricJS呈现活动对象/选择周围的阴影？

问FabricJS呈现活动对象/选择周围的阴影？
EN

Stack Overflow用户

提问于 2021-01-01 23:59:15

回答 4查看 870关注 0票数 2

快速而简单:在单击active FabricJS元素或活动选择后，是否有方法可以实现以下效果？基本上，除了边框之外，我还想在活动元素周围呈现一个阴影/边框效果。一旦你点击离开，阴影将被移除。

示例代码：(来源于)

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

javascript

html

css

canvas

fabricjs

回答 4

Stack Overflow用户

回答已采纳

发布于 2021-01-06 07:09:41

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

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>

票数 2

Stack Overflow用户

发布于 2021-01-04 10:14:30

解决方案

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

票数 0

Stack Overflow用户

发布于 2021-01-04 12:10:06

可能结合使用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">

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65534845

复制

相似问题

问FabricJS呈现活动对象/选择周围的阴影？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FabricJS呈现活动对象/选择周围的阴影？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FabricJS呈现活动对象/选择周围的阴影？
EN