影付きの透明なオブジェクト

Question

FabricJSの透明なオブジェクトに影を追加する方法はありますか？私はset fillを透明にし、そのsetshadowの後に使いました。しかし、オブジェクトは透過的であるため、通常は影を見ることはできません。

Answer 1

FabricJS APIにshadow-without-shapeオプションはありません。

しかし、ネイティブ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 });