bak

server/render.html

@@ -86,6 +86,33 @@
   var canvas=document.getElementById('c');
   var ctx=canvas.getContext('2d');
   var scene=null, images={};
+  function drawMaskShape(ctxm, layer, am, time){
+    var asset=am[layer.assetId];
+    if(!asset) return;
+    if(asset.kind!=='rect' && asset.kind!=='circle' && asset.kind!=='text') return;
+    var p=sample(layer,time);
+    ctxm.save();
+    ctxm.translate(p.x,p.y);
+    ctxm.rotate(p.rotation*Math.PI/180);
+    ctxm.scale(p.scaleX,p.scaleY);
+    ctxm.fillStyle='#000000';
+    if(asset.kind==='rect'){
+      var mrX=layer.offsetX!=null?layer.offsetX:asset.width/2;
+      var mrY=layer.offsetY!=null?layer.offsetY:asset.height/2;
+      ctxm.fillRect(-mrX,-mrY,asset.width,asset.height);
+    } else if(asset.kind==='circle'){
+      var mcX=layer.offsetX!=null?layer.offsetX:0;
+      var mcY=layer.offsetY!=null?layer.offsetY:0;
+      ctxm.beginPath(); ctxm.arc(-mcX,-mcY,asset.radius,0,Math.PI*2); ctxm.fill();
+    } else {
+      var mtX=layer.offsetX!=null?layer.offsetX:0;
+      var mtY=layer.offsetY!=null?layer.offsetY:0;
+      ctxm.font=asset.fontSize+'px sans-serif';
+      ctxm.textBaseline='top';
+      ctxm.fillText(asset.text,-mtX,-mtY);
+    }
+    ctxm.restore();
+  }
   function drawLayerNode(layer, am, time){
     var asset=am[layer.assetId];
     if(!asset || !layer.visible) return;
@@ -164,31 +191,60 @@
     var rawOrder=scene.trackOrder||[];
     var groupById2={}; var groups2=scene.groups||[];
     for(var gi2=0;gi2<groups2.length;gi2++) groupById2[groups2[gi2].id]=groups2[gi2];
-    var order=[];
-    for(var roi=0;roi<rawOrder.length;roi++){
-      var rid=rawOrder[roi];
-      var grp=groupById2[rid];
-      if(grp){ for(var gc=0;gc<grp.childIds.length;gc++) order.push(grp.childIds[gc]); }
-      else order.push(rid);
-    }
-    if(!order.length){ for(var oj=0;oj<scene.layers.length;oj++) order.push(scene.layers[oj].id); }
-    for(var oi=order.length-1;oi>=0;oi--){
-      var id=order[oi];
+    if(!rawOrder.length){ rawOrder=[]; for(var oj=0;oj<scene.layers.length;oj++) rawOrder.push(scene.layers[oj].id); }
+    for(var oi=rawOrder.length-1;oi>=0;oi--){
+      var id=rawOrder[oi];
       var lyr=layerById[id];
       if(lyr){ drawLayerNode(lyr, am, time); continue; }
       var tInsts=instByTrack[id]||[];
-      for(var ti=0;ti<tInsts.length;ti++){
-        var inst=tInsts[ti];
-        var clip=clipById[inst.clipId];
-        if(!clip) continue;
-        var tS=inst.trimStart||0;
-        var tE=inst.trimEnd||0;
-        var visible=Math.max(0, clip.duration - tS - tE);
-        var offset=time - inst.startTime;
-        if(offset<0 || offset>visible) continue;
-        var localT = tS + offset;
-        for(var cl=clip.layers.length-1; cl>=0; cl--){
-          drawLayerNode(clip.layers[cl], am, localT);
+      if(tInsts.length){
+        for(var ti=0;ti<tInsts.length;ti++){
+          var inst=tInsts[ti];
+          var clipRef=clipById[inst.clipId];
+          if(!clipRef) continue;
+          var tS=inst.trimStart||0;
+          var tE=inst.trimEnd||0;
+          var visibleClip=Math.max(0, clipRef.duration - tS - tE);
+          var offsetIntoBlock=time - inst.startTime;
+          if(offsetIntoBlock<0 || offsetIntoBlock>visibleClip) continue;
+          var localT = tS + offsetIntoBlock;
+          for(var cll=clipRef.layers.length-1; cll>=0; cll--){
+            drawLayerNode(clipRef.layers[cll], am, localT);
+          }
+        }
+        continue;
+      }
+      var grp=groupById2[id];
+      if(grp){
+        var gContent=[], gMasks=[];
+        for(var ch=grp.childIds.length-1;ch>=0;ch--){
+          var cl0=layerById[grp.childIds[ch]];
+          if(!cl0) continue;
+          if(cl0.isMask) gMasks.push(cl0); else gContent.push(cl0);
+        }
+        if(!gMasks.length){
+          for(var gi3=0;gi3<gContent.length;gi3++) drawLayerNode(gContent[gi3], am, time);
+        } else {
+          var mcanvas=document.createElement('canvas');
+          mcanvas.width=canvas.width; mcanvas.height=canvas.height;
+          var mctx=mcanvas.getContext('2d');
+          var tm=ctx.getTransform();
+          mctx.setTransform(tm.a,tm.b,tm.c,tm.d,tm.e,tm.f);
+          var savedCtx=ctx;
+          ctx=mctx;
+          for(var gi4=0;gi4<gContent.length;gi4++) drawLayerNode(gContent[gi4], am, time);
+          for(var gm=0;gm<gMasks.length;gm++){
+            var mL=gMasks[gm];
+            mctx.save();
+            mctx.globalCompositeOperation=(mL.maskMode==='negative'?'destination-out':'destination-in');
+            drawMaskShape(mctx, mL, am, time);
+            mctx.restore();
+          }
+          ctx=savedCtx;
+          ctx.save();
+          ctx.setTransform(1,0,0,1,0,0);
+          ctx.drawImage(mcanvas,0,0);
+          ctx.restore();
         }
       }
     }