帶陰影的透明物體

Question

無論如何要在FabricJS中爲透明物體添加陰影嗎？我已經使用set fill透明，並在sethadow之後。但通常不能看到setshadow，因爲對象是透明的。

Answer 1

我不認爲FabricJS API有一個無影子選項。

但是，您可以使用原生html5畫布輕鬆創建陰影，然後使用該原始畫布作爲Fabric.Image對象的圖像源。

使用原生HTML5畫布，你可以創建一個影子，沒有它的源形狀是這樣的：

• 繪製陰影形狀，
• 使用合成「抹掉」的形狀 - 只留下它的影子

實施例的代碼上的本機HTML5畫布繪製陰影僅：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var shadowBlur=8; 
 
var x=shadowBlur; 
 
var y=shadowBlur; 
 
var width=100; 
 
var height=65; 
 
canvas.width=width+shadowBlur*2; 
 
canvas.height=height+shadowBlur*2; 
 

 
// draw the shadowed shape 
 
ctx.shadowColor='black'; 
 
ctx.shadowBlur=8; 
 
ctx.fillRect(x-ctx.shadowOffsetX,y,width,height); 
 
// always clean up! -- undo shadowing 
 
ctx.shadowColor='rgba(0,0,0,0'; 
 

 
// use compositing to remove the shape 
 
// (leaving just the shadow); 
 
ctx.globalCompositeOperation='destination-out'; 
 
ctx.fillRect(x,y,width,height); 
 
// always clean up! -- set compositing to default 
 
ctx.globalCompositeOperation='source-over';

body{ background-color:white; } 
 
#canvas{border:1px solid red; }

<canvas id="canvas" width=512 height=512></canvas>

實施例創建使用本地HTML5畫布作爲圖像源的Fabric.Image：

// where "canvas" is a reference to an html5 canvas element 
var myFabricImage=new fabric.Image(canvas, { left:0, top:0 });