3 lines
7.9 KiB
JavaScript
3 lines
7.9 KiB
JavaScript
"use strict";const s=require("../../../common/vendor.js"),H=s.defineComponent({__name:"crush-canvas",props:{crushSignal:{}},setup(R){const _={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}},u={AIR_RESISTANCE:.985,SPARK_RESISTANCE:.92,DEBRIS_DECAY:.018,SPARK_DECAY:.035,SPARKLE_DECAY:.045,FLASH_DECAY:.11,SHOCKWAVE_DECAY:.045},M=s.ref(null),E=s.ref(null),g=s.ref(240),y=s.ref(240),P=s.ref(1),m=s.ref(null),x=s.ref(!1),f=s.ref([]),F=s.ref([]),p=s.ref([]),C=s.ref([]),h=s.ref([]),k=s.getCurrentInstance(),D=R;s.watch(()=>D.crushSignal,t=>{t&&B(t.type)}),s.onMounted(()=>{w()}),s.onBeforeUnmount(()=>{z()});function w(){setTimeout(()=>{if(!k)return;s.index.createSelectorQuery().in(k).select("#crush").fields({node:!0,size:!0}).exec(o=>{if(!o||!o[0]||!o[0].node){s.index.__f__("warn","at training/pages/components/crush-canvas.vue:239","[crush-canvas] canvas 2d not supported on this platform");return}const n=o[0].node,e=o[0].width,a=o[0].height,l=s.index.getSystemInfoSync().pixelRatio||1;n.width=e*l,n.height=a*l;const i=n.getContext("2d");i.scale(l,l),M.value=n,E.value=i,g.value=e,y.value=a,P.value=l})},200)}function B(t){if(!E.value||!M.value)return;const o=_[t];if(!o)return;const n=g.value/2,e=y.value/2,a=Math.min(g.value,y.value);C.value.push({x:n,y:e,radius:a*.12,maxRadius:a*.62,color:o.flashColor,life:1,decay:u.FLASH_DECAY}),h.value.push({x:n,y:e,radius:12,maxRadius:a*.62,color:o.shockwaveColor,width:5,life:1,decay:u.SHOCKWAVE_DECAY}),h.value.push({x:n,y:e,radius:4,maxRadius:a*.42,color:o.shockwaveColor,width:3,life:1,decay:u.SHOCKWAVE_DECAY*1.3});for(let r=0;r<o.debrisCount;r++){const l=Math.PI*2*r/o.debrisCount+(Math.random()-.5)*.7,i=o.speedMin+Math.random()*(o.speedMax-o.speedMin),c=o.sizeMin+Math.random()*(o.sizeMax-o.sizeMin),S=o.colors[Math.floor(Math.random()*o.colors.length)],A=o.shapes[Math.floor(Math.random()*o.shapes.length)],d=!!o.confetti,b=d?Math.sin(l)*i-2.5:Math.sin(l)*i;f.value.push({x:n,y:e,vx:Math.cos(l)*i,vy:b,size:c,color:S,shape:A,rotation:Math.random()*Math.PI*2,rotationSpeed:(Math.random()-.5)*(d?.5:.3),life:1,decay:u.DEBRIS_DECAY*(d?.7:1),gravity:o.gravity,glow:!d,swing:d?.6+Math.random()*1.2:0,age:Math.random()*Math.PI*2})}for(let r=0;r<o.sparkCount;r++){const l=Math.random()*Math.PI*2,i=o.speedMax*(.9+Math.random()*.8),c=o.sparkColors[Math.floor(Math.random()*o.sparkColors.length)];F.value.push({x:n,y:e,px:n,py:e,vx:Math.cos(l)*i,vy:Math.sin(l)*i,size:1.5+Math.random()*2,color:c,life:1,decay:u.SPARK_DECAY*(.8+Math.random()*.6),gravity:o.gravity*.3})}for(let r=0;r<o.sparkleCount;r++){const l=a*(.08+Math.random()*.32),i=Math.random()*Math.PI*2,c=o.sparkColors[Math.floor(Math.random()*o.sparkColors.length)];p.value.push({x:n+Math.cos(i)*l,y:e+Math.sin(i)*l,size:10+Math.random()*16,rotation:Math.random()*Math.PI,spin:(Math.random()-.5)*.16,color:c,life:1+Math.random()*.4,decay:u.SPARKLE_DECAY*(.8+Math.random()*.5)})}T()}function T(){x.value||(x.value=!0,I())}function I(){if(!M.value||!E.value){x.value=!1;return}const t=g.value,o=y.value;for(let e=f.value.length-1;e>=0;e--){const a=f.value[e];a.vy+=a.gravity,a.vx*=u.AIR_RESISTANCE,a.vy*=u.AIR_RESISTANCE,a.x+=a.vx,a.y+=a.vy,a.age+=.2,a.swing>0&&(a.x+=Math.sin(a.age)*a.swing),a.rotation+=a.rotationSpeed,a.life-=a.decay,(a.life<=0||a.x<-60||a.x>t+60||a.y>o+60)&&f.value.splice(e,1)}for(let e=F.value.length-1;e>=0;e--){const a=F.value[e];a.px=a.x,a.py=a.y,a.vy+=a.gravity,a.vx*=u.SPARK_RESISTANCE,a.vy*=u.SPARK_RESISTANCE,a.x+=a.vx,a.y+=a.vy,a.life-=a.decay,a.life<=0&&F.value.splice(e,1)}for(let e=p.value.length-1;e>=0;e--){const a=p.value[e];a.rotation+=a.spin,a.life-=a.decay,a.life<=0&&p.value.splice(e,1)}for(let e=C.value.length-1;e>=0;e--){const a=C.value[e];a.radius+=(a.maxRadius-a.radius)*.35,a.life-=a.decay,a.life<=0&&C.value.splice(e,1)}for(let e=h.value.length-1;e>=0;e--){const a=h.value[e];a.radius+=(a.maxRadius-a.radius)*.16,a.life-=a.decay,a.life<=0&&h.value.splice(e,1)}Y(),f.value.length>0||F.value.length>0||p.value.length>0||C.value.length>0||h.value.length>0?m.value=M.value.requestAnimationFrame(I):(m.value=null,x.value=!1)}function Y(){const t=E.value,o=g.value,n=y.value;t.clearRect(0,0,o,n),t.globalCompositeOperation="source-over",h.value.forEach(e=>{t.beginPath(),t.arc(e.x,e.y,e.radius,0,Math.PI*2),t.strokeStyle=q(e.color,Math.min(1,e.life)),t.lineWidth=e.width*e.life,t.stroke()}),t.globalCompositeOperation="lighter",C.value.forEach(e=>{const a=t.createRadialGradient(e.x,e.y,0,e.x,e.y,e.radius),r=Math.min(1,e.life);a.addColorStop(0,v(e.color,.95*r)),a.addColorStop(.4,v(e.color,.5*r)),a.addColorStop(1,v(e.color,0)),t.fillStyle=a,t.beginPath(),t.arc(e.x,e.y,e.radius,0,Math.PI*2),t.fill()}),t.globalCompositeOperation="source-over",f.value.forEach(e=>{const a=Math.min(1,e.life),r=e.size*(.65+e.life*.35);e.glow&&(t.fillStyle=v(e.color,a*.22),t.beginPath(),t.arc(e.x,e.y,r*1.9,0,Math.PI*2),t.fill()),t.fillStyle=v(e.color,a),K(t,e,r)}),t.globalCompositeOperation="lighter",F.value.forEach(e=>{const a=Math.min(1,e.life);t.strokeStyle=v(e.color,a*.8),t.lineWidth=e.size*a,t.lineCap="round",t.beginPath(),t.moveTo(e.px,e.py),t.lineTo(e.x,e.y),t.stroke(),t.fillStyle=v(e.color,a),t.beginPath(),t.arc(e.x,e.y,e.size*a,0,Math.PI*2),t.fill()}),p.value.forEach(e=>{const a=Math.max(0,Math.min(1,e.life)),r=Math.sin(Math.min(1,e.life)*Math.PI);if(r<=.02)return;const l=a;L(t,e.x,e.y,e.size*r,e.size*r*.32,e.rotation,v(e.color,l))}),t.globalCompositeOperation="source-over"}function K(t,o,n){switch(o.shape){case"circle":t.beginPath(),t.arc(o.x,o.y,n,0,Math.PI*2),t.fill();break;case"square":t.save(),t.translate(o.x,o.y),t.rotate(o.rotation),t.fillRect(-n,-n,n*2,n*2),t.restore();break;case"rect":t.save(),t.translate(o.x,o.y),t.rotate(o.rotation),t.fillRect(-n*1.6,-n*.5,n*3.2,n),t.restore();break;case"triangle":t.save(),t.translate(o.x,o.y),t.rotate(o.rotation),t.beginPath(),t.moveTo(0,-n),t.lineTo(n,n),t.lineTo(-n,n),t.closePath(),t.fill(),t.restore();break}}function L(t,o,n,e,a,r,l){t.save(),t.translate(o,n),t.rotate(r),t.beginPath();for(let c=0;c<4*2;c++){const S=c%2===0?e:a,A=Math.PI*c/4,d=Math.cos(A)*S,b=Math.sin(A)*S;c===0?t.moveTo(d,b):t.lineTo(d,b)}t.closePath(),t.fillStyle=l,t.fill(),t.restore()}function v(t,o){const n=parseInt(t.slice(1,3),16),e=parseInt(t.slice(3,5),16),a=parseInt(t.slice(5,7),16);return`rgba(${n}, ${e}, ${a}, ${o})`}function q(t,o){const n=t.match(/rgba?\(([^)]+)\)/);if(!n)return t;const e=n[1].split(",").map(c=>c.trim()),a=e[0],r=e[1],l=e[2],i=e[3]?parseFloat(e[3]):1;return`rgba(${a}, ${r}, ${l}, ${i*o})`}function z(){if(m.value!==null&&M.value){try{M.value.cancelAnimationFrame(m.value)}catch{}m.value=null}x.value=!1,f.value=[],F.value=[],p.value=[],C.value=[],h.value=[]}return(t,o)=>({})}}),O=s._export_sfc(H,[["__scopeId","data-v-e11c993f"]]);wx.createComponent(O);
|
|
//# sourceMappingURL=../../../../.sourcemap/mp-weixin/training/pages/components/crush-canvas.js.map
|