th/RUWIO
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bak

Browse Source
This commit is contained in:
th committed 2026-04-19 21:13:53 +02:00
1 parent cc6b11e61d
commit b977ee35a8
11 files changed
+1641 -310
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

server/render.html
+65 -34
View File
@@ -86,6 +86,43 @@
var canvas=document.getElementById('c');
var ctx=canvas.getContext('2d');
var scene=null, images={};
function drawLayerNode(layer, am, time){
var asset=am[layer.assetId];
if(!asset || !layer.visible) return;
var p=sample(layer,time);
ctx.save();
ctx.globalAlpha = ctx.globalAlpha * p.opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.rotation*Math.PI/180);
ctx.scale(p.scaleX,p.scaleY);
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;
ctx.fillStyle=fill;
ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height);
} else if(asset.kind==='circle'){
var cOffX=layer.offsetX!=null?layer.offsetX:0;
var cOffY=layer.offsetY!=null?layer.offsetY:0;
ctx.fillStyle=fill;
ctx.beginPath(); ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2); ctx.fill();
} else if(asset.kind==='text'){
var tOffX=layer.offsetX!=null?layer.offsetX:0;
var tOffY=layer.offsetY!=null?layer.offsetY:0;
ctx.fillStyle=fill;
ctx.font=asset.fontSize+'px sans-serif';
ctx.textBaseline='top';
ctx.fillText(asset.text,-tOffX,-tOffY);
} else if(asset.kind==='image'){
var img=images[asset.id];
if(img){
var iOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
var iOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
ctx.drawImage(img,-iOffX,-iOffY,asset.width,asset.height);
}
}
ctx.restore();
}
function drawFrame(time){
if(!scene) return;
var lw=scene.canvas.width, lh=scene.canvas.height;
@@ -94,42 +131,36 @@
ctx.fillStyle=scene.canvas.background;
ctx.fillRect(0,0,lw,lh);
var am={}; for(var i=0;i<scene.assets.length;i++) am[scene.assets[i].id]=scene.assets[i];
for(var j=scene.layers.length-1;j>=0;j--){
var layer=scene.layers[j]; if(!layer.visible) continue;
var asset=am[layer.assetId]; if(!asset) continue;
var p=sample(layer,time);
ctx.save();
ctx.globalAlpha = ctx.globalAlpha * p.opacity;
ctx.translate(p.x,p.y);
ctx.rotate(p.rotation*Math.PI/180);
ctx.scale(p.scaleX,p.scaleY);
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;
ctx.fillStyle=fill;
ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height);
} else if(asset.kind==='circle'){
var cOffX=layer.offsetX!=null?layer.offsetX:0;
var cOffY=layer.offsetY!=null?layer.offsetY:0;
ctx.fillStyle=fill;
ctx.beginPath(); ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2); ctx.fill();
} else if(asset.kind==='text'){
var tOffX=layer.offsetX!=null?layer.offsetX:0;
var tOffY=layer.offsetY!=null?layer.offsetY:0;
ctx.fillStyle=fill;
ctx.font=asset.fontSize+'px sans-serif';
ctx.textBaseline='top';
ctx.fillText(asset.text,-tOffX,-tOffY);
} else if(asset.kind==='image'){
var img=images[asset.id];
if(img){
var iOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
var iOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
ctx.drawImage(img,-iOffX,-iOffY,asset.width,asset.height);
var layerById={};
for(var li=0;li<scene.layers.length;li++) layerById[scene.layers[li].id]=scene.layers[li];
var clipById={}; var clips=scene.clips||[];
for(var ci=0;ci<clips.length;ci++) clipById[clips[ci].id]=clips[ci];
var instByTrack={}; var instances=scene.clipInstances||[];
for(var ii=0;ii<instances.length;ii++){
var iE=instances[ii];
(instByTrack[iE.clipTrackId]=instByTrack[iE.clipTrackId]||[]).push(iE);
}
var order=scene.trackOrder||[];
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];
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);
}
}
ctx.restore();
}
ctx.restore();
}