th/RUWIO
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
869b67458a270dc5eb802d22550df9302c8be19a
RUWIO/server/render.html
T
thandClaude Opus 4.7 869b67458a 0.4.0: clipart drawer, animation paths, bezier keyframes 
- Clipart library: new left-edge drawer (5px idle, expands on hover,
  400px when open). User picks a local folder via the File System Access
  API in settings; directory handle is persisted in IndexedDB so the
  library survives reloads. Dragging a thumbnail onto the stage creates
  an image asset + layer at the drop point.
- Animation paths on the stage: selecting a keyframe draws the tween
  path from the previous keyframe to the selected one as a solid
  polyline with per-frame draggable dots. All other segments on the
  same position-track render as dashed ghost lines so the full curve
  progression is visible.
- Path dots grow on hover (2.5 → 6 px), show a grab cursor, and have a
  wider hit area so they're easier to grab.
- Bezier-curved position interpolation: keyframes gain optional
  ctrlX/ctrlY fields. When set, x/y tween along a quadratic bezier
  through the control point instead of a straight line. Dragging a
  path dot solves for the control so the curve passes through the
  drag point at its frame progress. Mirrored across all four render
  pipelines.
- Tests: new suites for polygon actions, freeform drawing lifecycle,
  polygon + stroke rendering (15 new tests). Fixed the mask-render
  tests that relied on a default-transparent canvas background.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-20 10:35:43 +02:00

335 lines
13 KiB
HTML
Raw Blame History

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body { margin:0; padding:0; overflow:hidden; background:transparent; }
canvas { display:block; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
(function(){
function easing(name,t){
if(name==='easeIn') return t*t;
if(name==='easeOut') return 1-(1-t)*(1-t);
if(name==='easeInOut') return t<0.5 ? 2*t*t : 1-Math.pow(-2*t+2,2)/2;
return t;
}
function merge(b,p){ var o={}; for(var k in b) o[k]=b[k]; if(p) for(var k2 in p) o[k2]=p[k2]; return o; }
function lerp(a,b,t){ return a+(b-a)*t; }
function parseHex(h){
if(!h) return null;
var s=String(h).trim().replace('#','');
if(s.length===3) s=s[0]+s[0]+s[1]+s[1]+s[2]+s[2];
if(s.length<6) return null;
var n=parseInt(s.slice(0,6),16);
if(isNaN(n)) return null;
return [(n>>16)&255,(n>>8)&255,n&255];
}
function formatHex(r,g,b){
function c(v){ v=Math.round(v); if(v<0)v=0; if(v>255)v=255; var s=v.toString(16); return s.length<2?'0'+s:s; }
return '#'+c(r)+c(g)+c(b);
}
function lerpColor(a,b,t){
var pa=parseHex(a), pb=parseHex(b);
if(!pa||!pb) return t<0.5?a:b;
return formatHex(lerp(pa[0],pb[0],t), lerp(pa[1],pb[1],t), lerp(pa[2],pb[2],t));
}
function lerpProps(a,b,t){
var o={
x:lerp(a.x,b.x,t),
y:lerp(a.y,b.y,t),
scaleX:lerp(a.scaleX,b.scaleX,t),
scaleY:lerp(a.scaleY,b.scaleY,t),
rotation:lerp(a.rotation,b.rotation,t),
opacity:lerp(a.opacity,b.opacity,t)
};
if(a.fill && b.fill) o.fill=lerpColor(a.fill,b.fill,t);
else if(b.fill) o.fill=b.fill;
else if(a.fill) o.fill=a.fill;
if(a.points && b.points && a.points.length===b.points.length){
var lp=[];
for(var pi=0;pi<a.points.length;pi++){
lp.push({x:lerp(a.points[pi].x,b.points[pi].x,t),y:lerp(a.points[pi].y,b.points[pi].y,t)});
}
o.points=lp;
} else if(b.points) o.points=b.points;
else if(a.points) o.points=a.points;
if(a.stroke && b.stroke) o.stroke=lerpColor(a.stroke,b.stroke,t);
else if(b.stroke) o.stroke=b.stroke;
else if(a.stroke) o.stroke=a.stroke;
if(a.strokeWidth!=null && b.strokeWidth!=null) o.strokeWidth=lerp(a.strokeWidth,b.strokeWidth,t);
else if(b.strokeWidth!=null) o.strokeWidth=b.strokeWidth;
else if(a.strokeWidth!=null) o.strokeWidth=a.strokeWidth;
return o;
}
function sample(layer,time){
var kfs=layer.keyframes.slice().sort(function(a,b){return a.time-b.time;});
if(!kfs.length) return merge(layer.base);
if(time<=kfs[0].time) return merge(layer.base,kfs[0].props);
var last=kfs[kfs.length-1];
if(time>=last.time) return merge(layer.base,last.props);
for(var i=0;i<kfs.length-1;i++){
var a=kfs[i], b=kfs[i+1];
if(time>=a.time && time<=b.time){
if(a.hold){
if(time>=b.time) return merge(layer.base,b.props);
return merge(layer.base,a.props);
}
var raw=(time-a.time)/(b.time-a.time);
var t=easing(b.easing,raw);
var pa=merge(layer.base,a.props);
var pb=merge(layer.base,b.props);
var outS=lerpProps(pa,pb,t);
if(b.ctrlX!=null && b.ctrlY!=null){
var om=1-t;
outS.x=om*om*pa.x+2*om*t*b.ctrlX+t*t*pb.x;
outS.y=om*om*pa.y+2*om*t*b.ctrlY+t*t*pb.y;
}
return outS;
}
}
return merge(layer.base);
}
function loadImages(assets){
var imgs={};
var list=assets.filter(function(a){return a.kind==='image';});
return Promise.all(list.map(function(a){
return new Promise(function(res){
var img=new Image();
img.onload=function(){ imgs[a.id]=img; res(); };
img.onerror=function(){ res(); };
img.src=a.src;
});
})).then(function(){ return imgs; });
}
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' && asset.kind!=='polygon') 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 if(asset.kind==='text'){
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);
} else {
var mpX=layer.offsetX!=null?layer.offsetX:0;
var mpY=layer.offsetY!=null?layer.offsetY:0;
var mpPts=p.points||asset.points||[];
var mpClosed=asset.closed!==false;
if(mpClosed && mpPts.length>=3){
ctxm.beginPath();
ctxm.moveTo(mpPts[0].x-mpX,mpPts[0].y-mpY);
for(var mpi=1;mpi<mpPts.length;mpi++) ctxm.lineTo(mpPts[mpi].x-mpX,mpPts[mpi].y-mpY);
ctxm.closePath();
ctxm.fill();
}
}
ctxm.restore();
}
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 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;
var lRawStroke = p.stroke || asset.stroke;
var lSW = (p.strokeWidth!=null ? p.strokeWidth : (asset.strokeWidth||0));
var lStroke = lSW>0 ? (lRawStroke||'#000000') : null;
var lHasStroke = !!lStroke && lStroke!=='transparent' && lSW>0;
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));
if(rBlur>0) ctx.filter='blur('+rBlur+'px)';
if(fill && fill!=='transparent'){ ctx.fillStyle=fill; ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height); }
if(lHasStroke){ ctx.strokeStyle=lStroke; ctx.lineWidth=lSW; ctx.strokeRect(-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));
if(cBlur>0) ctx.filter='blur('+cBlur+'px)';
ctx.beginPath(); ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2);
if(fill && fill!=='transparent'){ ctx.fillStyle=fill; ctx.fill(); }
if(lHasStroke){ ctx.strokeStyle=lStroke; ctx.lineWidth=lSW; ctx.stroke(); }
ctx.filter='none';
} else if(asset.kind==='text'){
var tOffX=layer.offsetX!=null?layer.offsetX:0;
var tOffY=layer.offsetY!=null?layer.offsetY:0;
ctx.font=asset.fontSize+'px sans-serif';
ctx.textBaseline='top';
if(fill && fill!=='transparent'){ ctx.fillStyle=fill; ctx.fillText(asset.text,-tOffX,-tOffY); }
if(lHasStroke){ ctx.strokeStyle=lStroke; ctx.lineWidth=lSW; ctx.strokeText(asset.text,-tOffX,-tOffY); }
} else if(asset.kind==='polygon'){
var pOffX=layer.offsetX!=null?layer.offsetX:0;
var pOffY=layer.offsetY!=null?layer.offsetY:0;
var pBlur=(p.blur!=null?p.blur:(asset.blur||0));
var pPts=p.points||asset.points||[];
var pClosed=asset.closed!==false;
var pNeeded=pClosed?3:2;
if(pPts.length>=pNeeded){
if(pBlur>0) ctx.filter='blur('+pBlur+'px)';
ctx.beginPath();
ctx.moveTo(pPts[0].x-pOffX,pPts[0].y-pOffY);
for(var pI=1;pI<pPts.length;pI++) ctx.lineTo(pPts[pI].x-pOffX,pPts[pI].y-pOffY);
if(pClosed) ctx.closePath();
if(pClosed && fill && fill!=='transparent'){
ctx.fillStyle=fill;
ctx.fill();
}
if(lHasStroke){
ctx.strokeStyle=lStroke;
ctx.lineWidth=lSW;
ctx.lineJoin='round';
ctx.lineCap='round';
ctx.stroke();
}
ctx.filter='none';
}
} 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.shadowColor='transparent';
ctx.shadowBlur=0;
ctx.shadowOffsetX=0;
ctx.shadowOffsetY=0;
ctx.restore();
}
function drawFrame(time){
if(!scene) return;
var lw=scene.canvas.width, lh=scene.canvas.height;
ctx.save();
ctx.beginPath(); ctx.rect(0,0,lw,lh); ctx.clip();
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];
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 rawOrder=scene.trackOrder||[];
var groupById2={}; var groups2=scene.groups||[];
for(var gi2=0;gi2<groups2.length;gi2++) groupById2[groups2[gi2].id]=groups2[gi2];
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]||[];
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();
}
}
}
ctx.restore();
}
window.__animatrInit=function(s){
scene=s;
canvas.width=s.canvas.width;
canvas.height=s.canvas.height;
document.body.style.width=s.canvas.width+'px';
document.body.style.height=s.canvas.height+'px';
return loadImages(s.assets).then(function(imgs){
images=imgs;
drawFrame(0);
return true;
});
};
window.__animatrSeek=function(time){ drawFrame(time); };
})();
</script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink