Quick and simple: Is there a way that I can achieve the following effect after clicking on an active FabricJS element or active selection? Basically, as well as the border, I'd like to render a shadow/border effect around the active elements. Once you click away, the shadow will be removed.
Example code: (sourced from 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="" width="250">4 Answers
Basically you need to use fabricjs events and set or unset the shadow on the image object.
var canvas = new fabric.Canvas("c"); fabric.Image.fromURL(' 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=""></script> <canvas width=800 height=800 ></canvas>Possibly using the focus pseudo element like this in conjunction with an a tag could achieve what you are looking for.
Take a look here:
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="" width="250">Solution
Using eventListener on the body element.
- When the Image was clicked checking by the tagName then the css styles will be applied.
- When the body was clicked then the applied styling will be reset using the attribute value none
In the snippet you can see the behavior
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></canvas> <img src="" width="250"> <script src="mydemoFile.js"></script> </body> </html>Thanks to this answer.
if you give your img tag a tabindex then you can use the focus psuedo class to simulate a click.
however i had to remove the 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="" width="250" tabindex="0">
