使用fabric.js将box-shadow添加到图像样式中

Question

感谢@ℊααnd，我能够为添加到画布上的图像添加笔触样式 。 我还想在添加的任何图像上添加阴影，以使它们具有更多的“堆叠”外观。 我尝试添加boxShadow：“ 5px 5px 20px 0px＃888888”，并从文档中获取队列，但是我没有任何运气。 我将如何实现？ 对我而言，使用JS样式仍然是全新的。 任何帮助将不胜感激。 提前致谢。

document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function (img) {
        var oImg = img.set({
            left: 0,
            top: 0,
            angle: 0,
            border: '#000',
            stroke: '#F0F0F0',
            strokeWidth: 40
        }).scale(0.2);
        canvas.add(oImg).renderAll();
        //var a = canvas.setActiveObject(oImg);
        var dataURL = canvas.toDataURL({
            format: 'png',
            quality: 1
        });
    });
};
reader.readAsDataURL(file);
});

我尝试将所有代码插入代码段插入器，但由于某种原因，它不想在那里运行。 我认为以上是适用的。

Answer 1

您可以像这样简单地创建一个阴影对象...

var shadow = {
    color: '#888888',
    blur: 70,
    offsetX: 45,
    offsetY: 45,
    opacity: 0.8
}

然后，为图像对象设置它，就像这样...

oImg.setShadow(shadow);

ᴅᴇᴍᴏ

 var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { //create shadow var shadow = { color: '#888888', blur: 70, offsetX: 45, offsetY: 45, opacity: 0.8 } var oImg = img.set({ left: 0, top: 0, angle: 0, stroke: '#222', strokeWidth: 40 }).scale(0.2); oImg.setShadow(shadow); //set shadow canvas.add(oImg).renderAll(); var dataURL = canvas.toDataURL({ format: 'png', quality: 1 }); }); }; reader.readAsDataURL(file); }); 

 canvas {border: 1px solid black;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"><br /> <canvas id="canvas" width="180" height="180"></canvas>