|
|
import{p as t,m as i,c as e,t as s,s as a,u as o,w as n,o as c,B as r,x as l,v as h,K as d,T as u,y as g,z as m,L as f,r as v}from"./vendor.269b2875.js";import{s as p}from"./selectLbrary.c5d119e6.js";import{_ as y}from"./denglu-fanhui@2x.42b0d81d.js";import{_ as w}from"./denglu-yiyuedu@2x.40d0a4e2.js";const C=Math.PI;function k(t,i){return t+i}function b(t){return t*t}const S={name:"SlideVerify",props:{l:{type:Number,default:42},r:{type:Number,default:10},w:{type:Number,default:310},h:{type:Number,default:155},sliderText:{type:String,default:"向右滑动滑块填充拼图"},accuracy:{type:Number,default:5},show:{type:Boolean,default:!0},imgs:{type:Array,default:()=>[]}},data(){return{containerActive:!1,containerSuccess:!1,containerFail:!1,canvasCtx:null,blockCtx:null,block:null,block_x:void 0,block_y:void 0,L:this.l+2*this.r+3,img:void 0,originX:void 0,originY:void 0,isMouseDown:!1,trail:[],sliderLeft:0,sliderMaskWidth:0,success:!1,loadBlock:!0,timestamp:null}},mounted(){this.init()},methods:{init(){this.initDom(),this.initImg(),this.bindEvents()},initDom(){this.block=this.$refs.block,this.canvasCtx=this.$refs.canvas.getContext("2d"),this.blockCtx=this.block.getContext("2d")},initImg(){const t=this.createImg((()=>{this.loadBlock=!1,this.drawBlock(),this.canvasCtx.drawImage(t,0,0,this.w,this.h),this.blockCtx.drawImage(t,0,0,this.w,this.h);let{block_x:i,block_y:e,r:s,L:a}=this,o=e-2*s-1,n=this.blockCtx.getImageData(i,o,a,a);this.block.width=a,this.blockCtx.putImageData(n,0,o)}));this.img=t},drawBlock(){this.block_x=this.getRandomNumberByRange(this.L+10,this.w-(this.L+10)),this.block_y=this.getRandomNumberByRange(10+2*this.r,this.h-(this.L+10)),this.draw(this.canvasCtx,this.block_x,this.block_y,"fill"),this.draw(this.blockCtx,this.block_x,this.block_y,"clip")},draw(t,i,e,s){let{l:a,r:o}=this;t.beginPath(),t.moveTo(i,e),t.arc(i+a/2,e-o+2,o,.72*C,2.26*C),t.lineTo(i+a,e),t.arc(i+a+o-2,e+a/2,o,1.21*C,2.78*C),t.lineTo(i+a,e+a),t.lineTo(i,e+a),t.arc(i+o-2,e+a/2,o+.4,2.76*C,1.24*C,!0),t.lineTo(i,e),t.lineWidth=2,t.fillStyle="rgba(255, 255, 255, 0.7)",t.strokeStyle="rgba(255, 255, 255, 0.7)",t.stroke(),t[s](),t.globalCompositeOperation="destination-over"},createImg(t){const i=document.createElement("img");return i.crossOrigin="Anonymous",i.onload=t,i.onerror=()=>{i.src=this.getRandomImg()},i.src=this.getRandomImg(),i},getRandomImg(){const t=this.imgs.length;return t>0?this.imgs[this.getRandomNumberByRange(0,t)]:"https://picsum.photos/300/150/?image="+this.getRandomNumberByRange(0,1084)},getRandomNumberByRange:(t,i)=>Math.round(Math.random()*(i-t)+t),refresh(){this.reset(),this.$emit("refresh")},sliderDown(t){this.success||(this.originX=t.clientX,this.originY=t.clientY,this.isMouseDown=!0,this.timestamp=+new Date)},touchStartEvent(t){this.success||(this.originX=t.changedTouches[0].pageX,this.originY=t.changedTouches[0].pageY,this.isMouseDown=!0,this.timestamp=+new Date)},bindEvents(){document.addEventListener("mousemove",(t=>{if(!this.isMouseDown)return!1;const i=t.clientX-this.originX,e=t.clientY-this.originY;if(i<0||i+38>=this.w)return!1;this.sliderLeft=i+"px";let s=(this.w-40-20)/(this.w-40)*i;this.block.style.left=s+"px",this.containerActive=!0,this.sliderMaskWidth=i+"px",this.trail.push(e)})),document.addEventListener("mouseup",(t=>{if(!this.isMouseDown)return!1;if(this.isMouseDown=!1,t.clientX===this.originX)return!1;this.containerActive=!1,this.timestamp=+new Date-this.timestamp;const{spliced:i,TuringTest:e}=this.verify();if(i){if(-1===this.accuracy)return this.containerSuccess=!0,this.success=!0,void this.$emit("success",this.timestamp);e?(this.containerSuccess=!0,this.success=!0,this.$emit("success",this.timestamp)):(this.containerFail=!0,this.$emit("again"))}else this.containerFail=!0,this.$emit("fail"),setTimeout((()=>{this.reset()}),1e3)}))},touchMoveEvent(t){if(!this.isMouseDown)return!1;const i=t.changedTouches[0].pageX-this.originX,e=t.changedTouches[0].pageY-this.originY;if(i<0||i+38>=this.w)return!1;this.sliderLeft=i+"px";let s=(this.w-40-20)/(this.w-40)*i;this.block.style.left=s+"px",this.containerActive=!0,this.
|
