將box-shadow添加到fabric.js加載的圖像樣式中

Thanks to @ℊααnd I was able to add stroke styling to images added to the canvas。我想在添加的任何圖像上留下陰影，以使它們更「堆疊」一下。我嘗試添加boxShadow：「5px 5px 20px 0px＃888888」和taking queues from the documentation，但我沒有任何運氣。我將如何實現這一目標？ JS中的樣式對我來說還是全新的。任何幫助將不勝感激。提前致謝。將box-shadow添加到fabric.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); 
});

我試圖將所有的代碼插入片段插入器，但由於某種原因，它不想在那裏運行。我認爲以上是適用的。

來源

2017-05-17 code forever

你可以簡單地創建一個陰影對象，像這樣...

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>

來源

2017-05-17 18:28:50

將box-shadow添加到fabric.js加載的圖像樣式中

回答

相關問題