带阴影的透明物体
答
我不认为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 });