使用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>