그림자가있는 투명한 객체

Question

FabricJS의 투명한 객체에 그림자를 추가 할 수 있습니까? 나는 set fill을 투명하게 사용하고 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 }); 

을