import{M as w}from"./index-D88CvPWT.js";import{ag as S,aF as m,aA as n}from"./vendor-ui-CGT0cG1n.js";import{v as g,aF as y,a7 as M,a9 as b,ab as T,l as D,i as _,af as R}from"./vendor-core-BKehvho7.js";const A={class:"w-full h-full"},P={ref:"canvas",class:"w-full h-full bg-[#333436]"},B=g({__name:"CanvasAnimation",setup(C){const d=y("canvas"),o=R(!1);let h=null;class x{rangeR;r;rSpeed;cvs;ctx;x;y;xSpeed;ySpeed;lastMoveTime;fillStyle;maxTimeDiff=100;constructor({cvs:t,ctx:i}){this.rangeR=[3,7],this.r=n(this.rangeR[0],this.rangeR[1]),this.rSpeed=n(-1,1),this.cvs=t,this.ctx=i,this.x=n(0+this.r,this.cvs.width-this.r),this.y=n(0+this.r,this.cvs.height-this.r),this.xSpeed=n(-10,10),this.ySpeed=n(-10,10),this.lastMoveTime=null,this.fillStyle=w.randomColor()}setLastMoveTime(t){this.lastMoveTime=t}draw(){if(this.lastMoveTime){const s=Date.now()-this.lastMoveTime,e=Math.min(s,this.maxTimeDiff)/1e3;let a=this.x+e*this.xSpeed,c=this.y+e*this.ySpeed,l=this.r+e*this.rSpeed;l<=this.rangeR[0]?(l=this.rangeR[0],this.rSpeed=Math.abs(this.rSpeed)):l>=this.rangeR[1]&&(l=this.rangeR[1],this.rSpeed=-Math.abs(this.rSpeed)),a-this.r<0?(a=this.r,this.xSpeed=Math.abs(this.xSpeed)):a+this.r>this.cvs.width&&(a=this.cvs.width-this.r,this.xSpeed=-Math.abs(this.xSpeed)),c-this.r<0?(c=this.r,this.ySpeed=Math.abs(this.ySpeed)):c+this.r>this.cvs.height&&(c=this.cvs.height-this.r,this.ySpeed=-Math.abs(this.ySpeed)),this.x=a,this.y=c,this.r=l}const t=Math.max(0,this.r);this.ctx.beginPath(),this.ctx.arc(this.x,this.y,t,0,2*Math.PI),this.ctx.fillStyle=this.fillStyle,this.ctx.fill(),this.lastMoveTime=Date.now()}}class u{points;maxDis;cvs;ctx;constructor({pointNumber:t=30,maxDis:i=100,cvs:s,ctx:e}){this.points=Array(t).fill(0).map(()=>new x({cvs:s,ctx:e})),this.maxDis=i,this.cvs=s,this.ctx=e}resetPointsTime(){const t=Date.now();this.points.forEach(i=>{i.setLastMoveTime(t)})}draw(){if(o.value){if(document.hidden){setTimeout(()=>this.draw(),100);return}requestAnimationFrame(()=>this.draw()),this.ctx.clearRect(0,0,this.cvs.width,this.cvs.height);for(const[t,i]of this.points.entries()){i.draw();for(const s of this.points.slice(t+1)){const e=Math.sqrt((i.x-s.x)**2+(i.y-s.y)**2);isNaN(e)||e>this.maxDis||(this.ctx.beginPath(),this.ctx.moveTo(i.x,i.y),this.ctx.lineTo(s.x,s.y),this.ctx.strokeStyle=`rgba(200,200,200,${Math.max(0,Math.min(1,1-e/this.maxDis))})`,this.ctx.stroke(),this.ctx.closePath())}}}}}function p(){if(!d.value)return;console.log("渲染动画"),o.value=!0;const r=window.innerWidth,t=110*window.innerWidth/r,i=80*window.innerWidth/r,s=d.value,e=s.getContext("2d");if(!e)return;const a=window.devicePixelRatio||1;s.width=window.innerWidth*a,s.height=window.innerHeight*a,h&&(h=null),h=new u({pointNumber:Math.floor(t),maxDis:Math.floor(i),cvs:s,ctx:e}),h.draw()}const f=S(p,200);function v(){document.hidden?o.value=!1:d.value&&h&&(o.value=!0,h.resetPointsTime(),h.draw())}return m(window,"resize",f),m(document,"visibilitychange",v),M(()=>{f()}),b(()=>{o.value=!1,h=null}),(r,t)=>(T(),D("div",A,[_("canvas",P,null,512)]))}});export{B as _};
