cione-comp-lib/lib/packages/co-label-text-animation/index2.js

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("vue");require("./index.vue_vue_type_style_index_0_scoped_true_lang.js");var a=require("../../_virtual/plugin-vue_export-helper.js");const t=e.defineComponent({name:"CoLabelTextAnimation",props:{width:{type:String},height:{type:String},type:{type:String,default:"radiation"},text:{type:String,default:"这是一个测试内容"},fontSize:{type:Number,default:26},titleFamily:{type:String,default:"微软雅黑"},fontWeight:{type:String,default:"normal"},rayColor1:{type:String,default:"rgba(224,247,250,1)"},rayColor2:{type:String,default:"rgba(24,255,255,1)"},lineLength:{type:Number,default:2},isLoop:{type:Boolean},loopTimer:{type:Number},speed:{type:Number,default:10},isAnimation:{type:Boolean,default:!1}},setup(a){const t=e.ref(),l=e.ref();e.ref();const u=e.ref(a.fontSize),o=e.ref(),r=e.ref(),v=e.ref(),i=e.ref(1),n=e.ref(),d=e.ref(),s=e.ref(),f=e.ref(),h=e.ref();var c,p,m,g=[];const y=()=>{i.value=1,u.value=a.fontSize,n.value=v.value.getContext("2d"),d.value=r.value.offsetWidth,s.value=r.value.offsetHeight,v.value.width=d.value,v.value.height=s.value,a.isAnimation?(S(),t.value=setInterval((()=>{x()}),a.speed)):(n.value.clearRect(0,0,d.value,s.value),n.value.fillStyle=a.rayColor1,n.value.font=`${a.fontWeight} `+u.value+"px "+a.titleFamily,n.value.textBaseline="middle",n.value.textAlign="center",n.value.fillText(a.text,d.value/2,s.value/2),a.isLoop&&(l.value=setTimeout((()=>{S(),w(),clearTimeout(l.value)}),a.loopTimer)))},x=()=>{n.value.clearRect(0,0,d.value,s.value),n.value.drawImage(f.value,0,0,i.value,u.value,c,p,i.value,u.value),n.value.save(),n.value.globalAlpha=.07,n.value.globalCompositeOperation="lighter",!function(e){var a=0;n.value.beginPath();for(var t=0;t<g.length;t++){var l=g[t];l.col<e&&(a+=l.draw())}return n.value.stroke(),a!==g.length}(i.value)?b():(i.value++,i.value=Math.min(i.value,o.value)),n.value.restore()},S=()=>{var e=d.value/2,t=s.value/2,l=Math.PI;m=.5*l;var r=document.createElement("canvas"),v=r.getContext("2d");v.font=`${a.fontWeight} `+u.value+"px "+a.titleFamily+" blod",v.textBaseline="middle",o.value=Math.floor(v.measureText(a.text).width),r.width=o.value,r.height=1*u.value;var i=n.value.createRadialGradient(e,t,0,e,t,o.value);i.addColorStop(0,a.rayColor2),i.addColorStop(1,a.rayColor1),n.value.strokeStyle=i,v.fillStyle=i,v.font=`${a.fontWeight} `+u.value+"px "+a.titleFamily,v.textBaseline="middle",v.fillText(a.text,0,.6*u.value),u.value*=1,f.value=document.createElement("canvas"),f.value.width=o.value,f.value.height=u.value,h.value=f.value.getContext("2d"),c=.5*(d.value-o.value),p=.5*(s.value-u.value),g=[];for(var y=v.getImageData(0,0,o.value,u.value),x=0;x<y.data.length;x+=4){var S=x/4;Math.floor(S/o.value),o.value;var b=y.data[x+3];if(0!==b){var w="rgba(";w+=[y.data[x],y.data[x+1],y.data[x+2],b/255],w+=")",g.push(new _(Math.floor(S/o.value),S%o.value,w))}}};function b(){clearInterval(t.value),n.value.globalAlpha*=.95,n.value.drawImage(f.value,0,0,i.value,u,c,p,i.value,u),n.value.globalAlpha>.01?window.requestAnimationFrame(b):a.isLoop&&(l.value=setTimeout((()=>{w(),clearTimeout(l.value)}),a.loopTimer))}function w(){for(var e=0;e<g.length;e++)g[e].reset();n.value.globalAlpha=1,h.value.clearRect(0,0,o.value,u.value),i.value=1,t.value=setInterval((()=>{x()}),a.speed)}function _(e,t,l){this.col=t,this.row=e;var o=c+t,r=p+e,v=l,i=u.value/1,d=m*(this.row-.5*i)/i;0===d&&(d=(Math.random()-.5)*m);var s=.02*Math.sign(d);s+=.005*(Math.random()-.5);var f=0,g=2*Math.random()+a.lineLength,y=!1;this.reset=function(){0===(d=m*(this.row-.5*i)/i)&&(d=.5*-m),f=0,y=!1},this.draw=function(){return f<0?(y||(h.value.fillStyle=v,h.value.fillRect(this.col,this.row,1,1),y=!0),1):(n.value.moveTo(o,r),n.value.lineTo(o+Math.cos(d)*f,r+Math.sin(d)*f),d+=s,f+=Math.cos(d)*g,0)}}const T=()=>{var e;clearInterval(t.value),clearTimeout(l.value),null==(e=n.value)||e.clearRect(0,0,d.value,s.value)};return e.onMounted((()=>{y()})),e.onUnmounted((()=>{"radiation"===a.type&&(clearInterval(t.value),clearTimeout(l.value))})),e.watch((()=>a.text),(()=>{T(),y()})),e.watch((()=>[a.text,a.fontSize,a.titleFamily,a.rayColor1,a.rayColor2,a.lineLength,a.speed,a.isAnimation]),(()=>{T(),y()}),{deep:!0}),{canvasRadiationBox:r,canvasRadiation:v,updataText:e=>{},RESET_VIEW:()=>{"radiation"===a.type&&(T(),y())},...e.toRefs(a)}}}),l={class:"label-text-animation__box text__radiation",ref:"canvasRadiationBox"},u={ref:"canvasRadiation"};var o=a.default(t,[["render",function(a,t,o,r,v,i){return e.openBlock(),e.createElementBlock("div",{class:"co-label-text-animation",style:e.normalizeStyle({width:a.width||"100%",height:a.height||"100%"})},[e.createElementVNode("div",l,[e.createElementVNode("canvas",u,null,512)],512)],4)}],["__scopeId","data-v-7820ec32"]]);exports.default=o;