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
38 KiB
1 line
38 KiB
6 days ago
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[7,3],{623:function(t,e,o){var content=o(630);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,o(23).default)("07fbb799",content,!0,{sourceMap:!1})},627:function(t,e,o){var n=o(8),r=o(628),c=o(189);n({target:"Array",proto:!0},{fill:r}),c("fill")},628:function(t,e,o){"use strict";var n=o(39),r=o(100),c=o(53);t.exports=function(t){for(var e=n(this),o=c(e),l=arguments.length,d=r(l>1?arguments[1]:void 0,o),h=l>2?arguments[2]:void 0,m=void 0===h?o:r(h,o);m>d;)e[d++]=t;return e}},629:function(t,e,o){"use strict";o(623)},630:function(t,e,o){var n=o(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},641:function(t,e,o){var content=o(676);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,o(23).default)("38ee8f50",content,!0,{sourceMap:!1})},647:function(t,e,o){"use strict";o.r(e);o(99),o(10),o(83),o(421),o(85),o(627);var n,r,c={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(r),r=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.o
|