You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
7.5 KiB
1 line
7.5 KiB
1 month ago
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{623:function(t,e,r){var content=r(630);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,r(23).default)("07fbb799",content,!0,{sourceMap:!1})},627:function(t,e,r){var n=r(8),h=r(628),o=r(189);n({target:"Array",proto:!0},{fill:h}),o("fill")},628:function(t,e,r){"use strict";var n=r(39),h=r(100),o=r(53);t.exports=function(t){for(var e=n(this),r=o(e),c=arguments.length,l=h(c>1?arguments[1]:void 0,r),d=c>2?arguments[2]:void 0,f=void 0===d?r:h(d,r);f>l;)e[l++]=t;return e}},629:function(t,e,r){"use strict";r(623)},630:function(t,e,r){var n=r(22)(!1);n.push([t.i,".z_barrage-container[data-v-c3f32de4]{pointer-events:none}.z_container[data-v-c3f32de4]{width:100%;overflow:hidden}.z_barrage[data-v-c3f32de4]{position:absolute;top:0;left:0}",""]),t.exports=n},647:function(t,e,r){"use strict";r.r(e);r(99),r(10),r(83),r(421),r(85),r(627);var n,h,o={name:"Barrage",props:{barrageList:{type:Array,default:function(){return[]}},speed:{type:Number,default:4},loop:{type:Boolean,default:!0},channels:{type:Number,default:2},barrageHeight:{type:Number,default:60},screenPercent:{type:Number,default:.3},borderColor:{type:String,default:""},background:{type:String,default:""},deviceType:{type:String,default:"pc"},linearGradient:{type:Object,default:function(){return{startColor:"",endColor:""}}}},data:function(){return{newBarrageArray:[],barrageArray:[],barrageQueue:[],containerWidth:0,containerHeight:0,channelsArray:[],barrageChannels:1}},watch:{barrageList:function(t){0!==t.length&&(this.barrageQueue=JSON.parse(JSON.stringify(t)),this.newBarrageArray=JSON.parse(JSON.stringify(t)),this.initData(),window.cancelAnimationFrame(n),n=window.requestAnimationFrame(this.render))}},mounted:function(){this.containerWidth="pc"===this.deviceType?1446:2*document.body.clientWidth,this.containerHeight=730,this.barrageChannels=this.channels,this.ctx=this.$refs.canvas.getContext("2d"),this.ctx1=this.$refs.canvasContainer.getContext("2d"),this.barrageClickEvent()},methods:{initData:function(){for(var i=0;i<this.barrageQueue.length;i++){var t=null,img=null;this.barrageQueue[i].icon&&((img=new Image).src=this.barrageQueue[i].icon),this.barrageQueue[i].tagImage&&((t=new Image).src=this.barrageQueue[i].tagImage);var content=this.dealStr(this.barrageQueue[i].content);this.barrageArray.push({id:this.barrageQueue[i].id,content:content,x:this.containerWidth+this.barrageHeight,icon:img,tagImage:t,width:3.6*this.ctx1.measureText(content).width+(this.barrageQueue[i].icon?60:0),color:this.barrageQueue[i].color||"#FFFFFF",bgColor:this.barrageQueue[i].bgColor||"rgba(0,0,0,0.4)"})}this.initChannel()},initChannel:function(){for(var i=0;i<this.barrageChannels;i++){var t=this.barrageArray.shift();this.channelsArray[i]=t?[t]:[]}},render:function(){this.ctx.clearRect(0,0,this.containerWidth,this.containerHeight),this.ctx.font="36px Microsoft YaHei",this.draw(),window.cancelAnimationFrame(h),h=window.requestAnimationFrame(this.render)},draw:function(){for(var i=0;i<this.channelsArray.length;i++)for(var t=0;t<this.channelsArray[i].length;t++)try{var e=this.channelsArray[i][t];if(e.x-=this.speed,e.x<=this.containerWidth&&(this.borderColor&&this.drawRoundRectBorder(this.ctx,e.x-this.barrageHeight/2,i*(this.barrageHeight+60)+20,e.width+this.barrageHeight,this.barrageHeight,this.barrageHeight/2),this.drawRoundRect(this.ctx,e.bgColor,e.x-this.barrageHeight/2,i*(this.barrageHeight+60)+21,e.width+this.barrageHeight,this.barrageHeight-2,this.barrageHeight/2),this.ctx.fillStyle="".concat(e.color),this.ctx.fillText(e.content,e.x+(e.icon?this.barrageHeight/2+10:-5),i*(this.barrageHeight+60)+this.barrageHeight-25),e.icon&&this.circleImg(this.ctx,e.icon,e.x-40,i*(this.barrageHeight+60)+40,40),e.tagImage&&this.originImg(this.ctx,e.tagImage,e.x-this.barrageHeight-10,i*(this.barrageHeight+60)+20,this.barrageHeight,this.barrageHeight)),e.x<-(e.width+this.barrageHeight)){var r=this.channelsArray.reduce((function(a,b){return a.concat(b)}));this.loop&&thi
|