带阴影的透明物体

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 });