2 lines
7.5 KiB
JavaScript
2 lines
7.5 KiB
JavaScript
"use strict";const e=require("../../../common/vendor.js"),a=e.defineComponent({__name:"crush-canvas",props:{crushSignal:{}},setup(a){const o={egg:{colors:["#FFEB3B","#FFF59D","#FFFFFF","#FFD54F","#FFC107"],sparkColors:["#FFFFFF","#FFF9C4","#FFEE58"],shapes:["circle","circle","circle"],debrisCount:20,sparkCount:16,sparkleCount:5,speedMin:3,speedMax:6,sizeMin:4,sizeMax:10,gravity:.34,flashColor:"#FFFDE7",shockwaveColor:"rgba(255, 224, 130, 0.85)"},walnut:{colors:["#5D4037","#795548","#8D6E63","#A1887F","#3E2723"],sparkColors:["#FFCC80","#FFB74D","#FFE0B2"],shapes:["square","triangle","rect"],debrisCount:22,sparkCount:18,sparkleCount:5,speedMin:2.8,speedMax:5,sizeMin:4,sizeMax:9,gravity:.42,flashColor:"#FFE0B2",shockwaveColor:"rgba(255, 167, 38, 0.8)"},can:{colors:["#90A4AE","#CFD8DC","#B0BEC5","#78909C","#ECEFF1","#607D8B"],sparkColors:["#FFFFFF","#E1F5FE","#B3E5FC"],shapes:["rect","rect","triangle","square"],debrisCount:24,sparkCount:20,sparkleCount:6,speedMin:4,speedMax:7,sizeMin:3,sizeMax:11,gravity:.36,flashColor:"#FFFFFF",shockwaveColor:"rgba(207, 216, 220, 0.9)"},balloon:{colors:["#FF5252","#FF4081","#E040FB","#7C4DFF","#536DFE","#448AFF","#FFEB3B","#69F0AE","#FF6E40"],sparkColors:["#FFFFFF","#FF80AB","#82B1FF","#FFFF8D"],shapes:["rect","rect","square"],debrisCount:28,sparkCount:18,sparkleCount:8,speedMin:4,speedMax:7.5,sizeMin:4,sizeMax:8,gravity:.14,flashColor:"#FCE4EC",shockwaveColor:"rgba(255, 64, 129, 0.85)",confetti:!0}},t=.985,l=.92,r=.018,s=.035,n=.045,i=.11,c=.045,u=e.ref(null),h=e.ref(null),v=e.ref(240),d=e.ref(240),f=e.ref(1),p=e.ref(null),F=e.ref(!1),M=e.ref([]),g=e.ref([]),y=e.ref([]),C=e.ref([]),m=e.ref([]),x=e.getCurrentInstance(),b=a;function k(){if(!u.value||!h.value)return void(F.value=!1);const e=v.value,a=d.value;for(let o=M.value.length-1;o>=0;o--){const l=M.value[o];l.vy+=l.gravity,l.vx*=t,l.vy*=t,l.x+=l.vx,l.y+=l.vy,l.age+=.2,l.swing>0&&(l.x+=Math.sin(l.age)*l.swing),l.rotation+=l.rotationSpeed,l.life-=l.decay,(l.life<=0||l.x<-60||l.x>e+60||l.y>a+60)&&M.value.splice(o,1)}for(let o=g.value.length-1;o>=0;o--){const e=g.value[o];e.px=e.x,e.py=e.y,e.vy+=e.gravity,e.vx*=l,e.vy*=l,e.x+=e.vx,e.y+=e.vy,e.life-=e.decay,e.life<=0&&g.value.splice(o,1)}for(let o=y.value.length-1;o>=0;o--){const e=y.value[o];e.rotation+=e.spin,e.life-=e.decay,e.life<=0&&y.value.splice(o,1)}for(let o=C.value.length-1;o>=0;o--){const e=C.value[o];e.radius+=.35*(e.maxRadius-e.radius),e.life-=e.decay,e.life<=0&&C.value.splice(o,1)}for(let o=m.value.length-1;o>=0;o--){const e=m.value[o];e.radius+=.16*(e.maxRadius-e.radius),e.life-=e.decay,e.life<=0&&m.value.splice(o,1)}!function(){const e=h.value,a=v.value,o=d.value;e.clearRect(0,0,a,o),e.globalCompositeOperation="source-over",m.value.forEach(a=>{e.beginPath(),e.arc(a.x,a.y,a.radius,0,2*Math.PI),e.strokeStyle=function(e,a){const o=e.match(/rgba?\(([^)]+)\)/);if(!o)return e;const t=o[1].split(",").map(e=>e.trim()),l=t[0],r=t[1],s=t[2],n=t[3]?parseFloat(t[3]):1;return`rgba(${l}, ${r}, ${s}, ${n*a})`}(a.color,Math.min(1,a.life)),e.lineWidth=a.width*a.life,e.stroke()}),e.globalCompositeOperation="lighter",C.value.forEach(a=>{const o=e.createRadialGradient(a.x,a.y,0,a.x,a.y,a.radius),t=Math.min(1,a.life);o.addColorStop(0,E(a.color,.95*t)),o.addColorStop(.4,E(a.color,.5*t)),o.addColorStop(1,E(a.color,0)),e.fillStyle=o,e.beginPath(),e.arc(a.x,a.y,a.radius,0,2*Math.PI),e.fill()}),e.globalCompositeOperation="source-over",M.value.forEach(a=>{const o=Math.min(1,a.life),t=a.size*(.65+.35*a.life);a.glow&&(e.fillStyle=E(a.color,.22*o),e.beginPath(),e.arc(a.x,a.y,1.9*t,0,2*Math.PI),e.fill()),e.fillStyle=E(a.color,o),function(e,a,o){switch(a.shape){case"circle":e.beginPath(),e.arc(a.x,a.y,o,0,2*Math.PI),e.fill();break;case"square":e.save(),e.translate(a.x,a.y),e.rotate(a.rotation),e.fillRect(-o,-o,2*o,2*o),e.restore();break;case"rect":e.save(),e.translate(a.x,a.y),e.rotate(a.rotation),e.fillRect(1.6*-o,.5*-o,3.2*o,o),e.restore();break;case"triangle":e.save(),e.translate(a.x,a.y),e.rotate(a.rotation),e.beginPath(),e.moveTo(0,-o),e.lineTo(o,o),e.lineTo(-o,o),e.closePath(),e.fill(),e.restore()}}(e,a,t)}),e.globalCompositeOperation="lighter",g.value.forEach(a=>{const o=Math.min(1,a.life);e.strokeStyle=E(a.color,.8*o),e.lineWidth=a.size*o,e.lineCap="round",e.beginPath(),e.moveTo(a.px,a.py),e.lineTo(a.x,a.y),e.stroke(),e.fillStyle=E(a.color,o),e.beginPath(),e.arc(a.x,a.y,a.size*o,0,2*Math.PI),e.fill()}),y.value.forEach(a=>{const o=Math.max(0,Math.min(1,a.life)),t=Math.sin(Math.min(1,a.life)*Math.PI);if(t<=.02)return;const l=o;!function(e,a,o,t,l,r,s){const n=4;e.save(),e.translate(a,o),e.rotate(r),e.beginPath();for(let i=0;i<2*n;i++){const a=i%2==0?t:l,o=Math.PI*i/n,r=Math.cos(o)*a,s=Math.sin(o)*a;0===i?e.moveTo(r,s):e.lineTo(r,s)}e.closePath(),e.fillStyle=s,e.fill(),e.restore()}(e,a.x,a.y,a.size*t,a.size*t*.32,a.rotation,E(a.color,l))}),e.globalCompositeOperation="source-over"}();M.value.length>0||g.value.length>0||y.value.length>0||C.value.length>0||m.value.length>0?p.value=u.value.requestAnimationFrame(k):(p.value=null,F.value=!1)}function E(e,a){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${a})`}return e.watch(()=>b.crushSignal,e=>{e&&function(e){if(!h.value||!u.value)return;const a=o[e];if(!a)return;const t=v.value/2,l=d.value/2,f=Math.min(v.value,d.value);C.value.push({x:t,y:l,radius:.12*f,maxRadius:.62*f,color:a.flashColor,life:1,decay:i}),m.value.push({x:t,y:l,radius:12,maxRadius:.62*f,color:a.shockwaveColor,width:5,life:1,decay:c}),m.value.push({x:t,y:l,radius:4,maxRadius:.42*f,color:a.shockwaveColor,width:3,life:1,decay:1.3*c});for(let o=0;o<a.debrisCount;o++){const e=2*Math.PI*o/a.debrisCount+.7*(Math.random()-.5),s=a.speedMin+Math.random()*(a.speedMax-a.speedMin),n=a.sizeMin+Math.random()*(a.sizeMax-a.sizeMin),i=a.colors[Math.floor(Math.random()*a.colors.length)],c=a.shapes[Math.floor(Math.random()*a.shapes.length)],u=!!a.confetti,h=u?Math.sin(e)*s-2.5:Math.sin(e)*s;M.value.push({x:t,y:l,vx:Math.cos(e)*s,vy:h,size:n,color:i,shape:c,rotation:Math.random()*Math.PI*2,rotationSpeed:(Math.random()-.5)*(u?.5:.3),life:1,decay:r*(u?.7:1),gravity:a.gravity,glow:!u,swing:u?.6+1.2*Math.random():0,age:Math.random()*Math.PI*2})}for(let o=0;o<a.sparkCount;o++){const e=Math.random()*Math.PI*2,o=a.speedMax*(.9+.8*Math.random()),r=a.sparkColors[Math.floor(Math.random()*a.sparkColors.length)];g.value.push({x:t,y:l,px:t,py:l,vx:Math.cos(e)*o,vy:Math.sin(e)*o,size:1.5+2*Math.random(),color:r,life:1,decay:s*(.8+.6*Math.random()),gravity:.3*a.gravity})}for(let o=0;o<a.sparkleCount;o++){const e=f*(.08+.32*Math.random()),o=Math.random()*Math.PI*2,r=a.sparkColors[Math.floor(Math.random()*a.sparkColors.length)];y.value.push({x:t+Math.cos(o)*e,y:l+Math.sin(o)*e,size:10+16*Math.random(),rotation:Math.random()*Math.PI,spin:.16*(Math.random()-.5),color:r,life:1+.4*Math.random(),decay:n*(.8+.5*Math.random())})}!function(){if(F.value)return;F.value=!0,k()}()}(e.type)}),e.onMounted(()=>{setTimeout(()=>{x&&e.index.createSelectorQuery().in(x).select("#crush").fields({node:!0,size:!0}).exec(a=>{if(!a||!a[0]||!a[0].node)return void console.warn("[crush-canvas] canvas 2d not supported on this platform");const o=a[0].node,t=a[0].width,l=a[0].height,r=e.index.getSystemInfoSync().pixelRatio||1;o.width=t*r,o.height=l*r;const s=o.getContext("2d");s.scale(r,r),u.value=o,h.value=s,v.value=t,d.value=l,f.value=r})},200)}),e.onBeforeUnmount(()=>{!function(){if(null!==p.value&&u.value){try{u.value.cancelAnimationFrame(p.value)}catch(e){}p.value=null}F.value=!1,M.value=[],g.value=[],y.value=[],C.value=[],m.value=[]}()}),(e,a)=>({})}}),o=e._export_sfc(a,[["__scopeId","data-v-ecab95cd"]]);wx.createComponent(o);
|