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 lines
7.5 KiB
1 lines
7.5 KiB
(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&&this.checkBarrageStatus(r)&&(this.barrageQueue=[],this.barrageQueue=JSON.parse(JSON.stringify(this.newBarrageArray)),this.initData())}if(e.x<=Math.floor(this.containerWidth-e.width-40)&&e.x>=Math.floor(this.containerWidth-e.width-40-this.speed)&&t===this.channelsArray[i].length-1&&0!==this.barrageArray.length){var n=this.barrageArray.shift();this.channelsArray[i].push(n)}}catch(t){console.log(t)}},add:function(t){var content=this.dealStr(t.content),img=null,e=null;t.icon&&((img=new Image).src=t.icon),t.tagImage&&((e=new Image).src=t.tagImage);var r={id:t.id,content:content,x:this.containerWidth+this.barrageHeight,icon:t.icon?img:"",tagImage:t.tagImage?e:"",width:3*this.ctx1.measureText(content).width+(t.icon?this.barrageHeight:0),color:t.color||"#FFFFFF",bgColor:t.bgColor||"rgba(0,0,0,0.4)"},n={id:t.id,content:t.content,icon:t.icon,tagImage:t.tagImage,color:t.color||"#FFFFFF",bgColor:t.bgColor||"rgba(0,0,0,0.4)"};if(0===this.barrageArray.length)this.newBarrageArray.unshift(n);else{this.barrageArray.unshift(r);var h=this.barrageList.length-this.barrageArray.length;this.newBarrageArray.splice(h,0,n)}},barrageClickEvent:function(){var t=this;document.getElementById("canvas").addEventListener("click",(function(e){for(var p=t.getEventPosition(e),r=Math.floor(p.y/(t.barrageHeight+36)),n=JSON.parse(JSON.stringify(t.channelsArray[r])),i=0;i<n.length;i++){var h=n[i];p.x>h.x&&p.x<h.x+h.width&&h.id&&t.$emit("doLike",h.id)}}),!1)},getEventPosition:function(t){var e,r;return t.layerX||0===t.layerX?(e=t.layerX,r=t.layerY):(t.offsetX||0===t.offsetX)&&(e=t.offsetX,r=t.offsetY),{x:2*e,y:2*r}},checkBarrageStatus:function(t){for(var i=0;i<t.length;i++)if(t[i].x>-t[i].width)return!1;return!0},dealStr:function(t){return t.length>50?"".concat(t.substring(0,50),"..."):t},getColor:function(){return"#".concat(Math.floor(16777215*Math.random()).toString(16))},circleImg:function(t,img,e,r,n){t.save();var h=2*n,o=e+n,c=r+n;t.beginPath(),t.arc(o,c,n,0,2*Math.PI),t.clip(),t.drawImage(img,e,r,h,h),t.restore(),t.closePath()},originImg:function(t,img,e,r,n,h){try{t.beginPath(),t.drawImage(img,e,r,n,h),t.closePath()}catch(t){console.log(t)}},drawRoundRect:function(t,e,r,n,h,o,c){if(this.linearGradient.startColor&&this.linearGradient.endColor){var l=t.createLinearGradient(r,n,r,n+o);l.addColorStop(0,this.linearGradient.startColor),l.addColorStop(1,this.linearGradient.endColor),t.fillStyle=l||e}else t.fillStyle=this.background||e;t.beginPath(),t.arc(r+c,n+c,c,Math.PI,3*Math.PI/2),t.lineTo(h-c+r,n),t.arc(h-c+r,c+n,c,3*Math.PI/2,2*Math.PI),t.lineTo(h+r,o+n-c),t.arc(h-c+r,o-c+n,c,0,Math.PI/2),t.lineTo(c+r,o+n),t.arc(c+r,o-c+n,c,Math.PI/2,Math.PI),t.fill(),t.closePath()},drawRoundRectBorder:function(t,e,r,n,h,o){t.beginPath(),t.lineWidth=2,t.strokeStyle=this.borderColor,t.arc(e+o,r+o,o,Math.PI,3*Math.PI/2),t.lineTo(n-o+e,r),t.arc(n-o+e,o+r,o,3*Math.PI/2,2*Math.PI),t.lineTo(n+e,h+r-o),t.arc(n-o+e,h-o+r,o,0,Math.PI/2),t.lineTo(o+e,h+r),t.arc(o+e,h-o+r,o,Math.PI/2,Math.PI),t.stroke(),t.closePath()}}},c=(r(629),r(11)),component=Object(c.a)(o,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"z_barrage-container"},[r("canvas",{ref:"canvasContainer",staticStyle:{display:"none"},attrs:{width:t.containerWidth,height:t.containerHeight}}),t._v(" "),r("div",{staticClass:"z_container",style:{height:t.containerHeight/2+"px"}},[r("canvas",{ref:"canvas",staticClass:"z_barrage",style:{width:t.containerWidth/2+"px",height:t.containerHeight/2+"px"},attrs:{id:"canvas",width:t.containerWidth,height:t.containerHeight}})])])}),[],!1,null,"c3f32de4",null);e.default=component.exports}}]); |