bak

server/render.html

@@ -95,17 +95,34 @@
     ctx.translate(p.x,p.y);
     ctx.rotate(p.rotation*Math.PI/180);
     ctx.scale(p.scaleX,p.scaleY);
+    var sOp=p.shadowOpacity||0, sBl=p.shadowBlur||0, sDi=p.shadowDistance||0;
+    if(sOp>0 && (sBl>0 || sDi>0)){
+      var sAn=(p.shadowAngle==null?90:p.shadowAngle)*Math.PI/180;
+      var sHex=(p.shadowColor||'#000000').replace('#','');
+      if(sHex.length===3){sHex=sHex[0]+sHex[0]+sHex[1]+sHex[1]+sHex[2]+sHex[2];}
+      var sNum=parseInt(sHex.slice(0,6),16); if(isNaN(sNum))sNum=0;
+      ctx.shadowColor='rgba('+((sNum>>16)&255)+','+((sNum>>8)&255)+','+(sNum&255)+','+sOp+')';
+      ctx.shadowBlur=sBl;
+      ctx.shadowOffsetX=Math.cos(sAn)*sDi;
+      ctx.shadowOffsetY=Math.sin(sAn)*sDi;
+    }
     var fill = p.fill || asset.fill;
     if(asset.kind==='rect'){
       var rOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
       var rOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
+      var rBlur=(p.blur!=null?p.blur:(asset.blur||0));
       ctx.fillStyle=fill;
+      if(rBlur>0) ctx.filter='blur('+rBlur+'px)';
       ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height);
+      ctx.filter='none';
     } else if(asset.kind==='circle'){
       var cOffX=layer.offsetX!=null?layer.offsetX:0;
       var cOffY=layer.offsetY!=null?layer.offsetY:0;
+      var cBlur=(p.blur!=null?p.blur:(asset.blur||0));
       ctx.fillStyle=fill;
+      if(cBlur>0) ctx.filter='blur('+cBlur+'px)';
       ctx.beginPath(); ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2); ctx.fill();
+      ctx.filter='none';
     } else if(asset.kind==='text'){
       var tOffX=layer.offsetX!=null?layer.offsetX:0;
       var tOffY=layer.offsetY!=null?layer.offsetY:0;
@@ -121,6 +138,10 @@
         ctx.drawImage(img,-iOffX,-iOffY,asset.width,asset.height);
       }
     }
+    ctx.shadowColor='transparent';
+    ctx.shadowBlur=0;
+    ctx.shadowOffsetX=0;
+    ctx.shadowOffsetY=0;
     ctx.restore();
   }
   function drawFrame(time){