toesbieya
6 years ago
parent
1d0fd1032b
commit
f323fc3546
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,20 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
import Main from './main.vue' |
||||||
|
import {PopupManager} from 'element-ui/src/utils/popup' |
||||||
|
|
||||||
|
let Constructor = Vue.extend(Main) |
||||||
|
|
||||||
|
const PuzzleVerify = function ({left = 0, top = 0} = {}) { |
||||||
|
const instance = new Constructor({data: {positionLeft: left}}) |
||||||
|
instance.positionTop = top - Math.round((instance.height + 130) / 2) |
||||||
|
instance.$mount() |
||||||
|
document.body.appendChild(instance.$el) |
||||||
|
instance.$el.style.zIndex = PopupManager.nextZIndex() |
||||||
|
instance.visible = true |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
instance.resolve = resolve |
||||||
|
instance.reject = reject |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export default PuzzleVerify |
||||||
@ -1,370 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="puzzle-container"> |
|
||||||
<div class="puzzle-header"> |
|
||||||
<span class="puzzle-header-title">拖动下方滑块完成拼图</span> |
|
||||||
<div class="puzzle-header-tool"> |
|
||||||
<el-button @click="refreshImg" icon="el-icon-refresh" size="small" type="text"/> |
|
||||||
<el-button @click="$emit('close')" icon="el-icon-close" size="small" type="text"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div :style="'width:' + width + 'px'" class="puzzle-view"> |
|
||||||
<img :src="imgRandom" |
|
||||||
:style="'width:' + width + 'px;height:' + height + 'px;'" |
|
||||||
id="scream" |
|
||||||
ref="scream" |
|
||||||
/> |
|
||||||
<canvas :height="height" :width="width" id="puzzle-box" ref="puzzleBox"/> |
|
||||||
<div :style="'left:' + left_Num+ 'px'" class="puzzle-lost-box"> |
|
||||||
<canvas :height="height" :width="width" id="puzzle-shadow" ref="puzzleShadow"/> |
|
||||||
<canvas :height="height" :width="width" id="puzzle-lost" ref="puzzleLost"/> |
|
||||||
</div> |
|
||||||
<span :class="{'hide':displayTips}" class="verify-result" ref="verTips"> |
|
||||||
<span class="success" v-show="verification"> |
|
||||||
<i class="el-icon-circle-check"/>验证通过 |
|
||||||
</span> |
|
||||||
<span class="error" v-show="!verification"> |
|
||||||
<i class="el-icon-circle-close"/>验证失败 |
|
||||||
</span> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="slider-container"> |
|
||||||
<div class="slider-bar"/> |
|
||||||
<el-button @mousedown.native.prevent.stop="startMove" |
|
||||||
circle |
|
||||||
class="slider-btn" |
|
||||||
icon="el-icon-rank" |
|
||||||
ref="sliderBtn" |
|
||||||
type="success"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
/* |
|
||||||
* https://github.com/Kevin-269581661/vue-puzzle-verification |
|
||||||
* 网上搬的例子，实际开发建议用极验 |
|
||||||
* */ |
|
||||||
export default { |
|
||||||
name: "PuzzleVerify", |
|
||||||
props: { |
|
||||||
// 画布图片的尺寸 |
|
||||||
width: { |
|
||||||
type: Number, |
|
||||||
default: 260 |
|
||||||
}, |
|
||||||
height: { |
|
||||||
type: Number, |
|
||||||
default: 120 |
|
||||||
}, |
|
||||||
// 图集 |
|
||||||
puzzleImgList: { |
|
||||||
type: Array, |
|
||||||
default: () => [] |
|
||||||
}, |
|
||||||
// 滑块的大小 |
|
||||||
blockSize: { |
|
||||||
type: Number, |
|
||||||
default: 40 |
|
||||||
}, |
|
||||||
// 误差 |
|
||||||
deviation: { |
|
||||||
type: Number, |
|
||||||
default: 4 |
|
||||||
}, |
|
||||||
// 滑块随机出现的范围 |
|
||||||
padding: { |
|
||||||
type: Number, |
|
||||||
default: 20 |
|
||||||
} |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
moveStart: null, |
|
||||||
displayTips: false, |
|
||||||
verification: false, |
|
||||||
randomX: null, |
|
||||||
randomY: null, |
|
||||||
imgRandom: "", |
|
||||||
left_Num: 0 |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
//刷新 |
|
||||||
refreshImg() { |
|
||||||
let imgRandomIndex = Math.round(Math.random() * (this.puzzleImgList.length - 1)) |
|
||||||
this.imgRandom = this.puzzleImgList[imgRandomIndex] |
|
||||||
this.initCanvas() |
|
||||||
}, |
|
||||||
//画布初始化 |
|
||||||
initCanvas() { |
|
||||||
this.clearCanvas() |
|
||||||
let w = this.width |
|
||||||
let h = this.height |
|
||||||
let PL_Size = this.blockSize |
|
||||||
let padding = this.padding |
|
||||||
let MinN_X = padding + PL_Size |
|
||||||
let MaxN_X = w - padding - PL_Size - PL_Size / 6 |
|
||||||
let MaxN_Y = padding |
|
||||||
let MinN_Y = h - padding - PL_Size - PL_Size / 6 |
|
||||||
this.randomX = Math.round(Math.random() * (MaxN_X - PL_Size) + MinN_X) |
|
||||||
this.randomY = Math.round(Math.random() * MaxN_Y + MinN_Y) |
|
||||||
let X = this.randomX |
|
||||||
let Y = this.randomY |
|
||||||
this.left_Num = -X + 10 |
|
||||||
let d = PL_Size / 3 |
|
||||||
|
|
||||||
let c = this.$refs.puzzleBox |
|
||||||
let c_l = this.$refs.puzzleLost |
|
||||||
let c_s = this.$refs.puzzleShadow |
|
||||||
let ctx = c.getContext("2d") |
|
||||||
let ctx_l = c_l.getContext("2d") |
|
||||||
let ctx_s = c_s.getContext("2d") |
|
||||||
ctx.globalCompositeOperation = "xor" |
|
||||||
ctx.shadowBlur = 10 |
|
||||||
ctx.shadowColor = "#fff" |
|
||||||
ctx.shadowOffsetX = 3 |
|
||||||
ctx.shadowOffsetY = 3 |
|
||||||
ctx.fillStyle = "rgba(0,0,0,0.7)" |
|
||||||
ctx.beginPath() |
|
||||||
ctx.lineWidth = 1 |
|
||||||
ctx.strokeStyle = "rgba(0,0,0,0)" |
|
||||||
|
|
||||||
ctx.moveTo(X, Y) |
|
||||||
ctx.lineTo(X + d, Y) |
|
||||||
ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
|
||||||
ctx.lineTo(X + 3 * d, Y) |
|
||||||
ctx.lineTo(X + 3 * d, Y + d) |
|
||||||
ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
|
||||||
ctx.lineTo(X + 3 * d, Y + 3 * d) |
|
||||||
ctx.lineTo(X, Y + 3 * d) |
|
||||||
|
|
||||||
ctx.closePath() |
|
||||||
ctx.stroke() |
|
||||||
ctx.fill() |
|
||||||
|
|
||||||
let img = new Image() |
|
||||||
img.src = this.imgRandom |
|
||||||
|
|
||||||
img.onload = function () { |
|
||||||
ctx_l.drawImage(img, 0, 0, w, h) |
|
||||||
} |
|
||||||
ctx_l.beginPath() |
|
||||||
ctx_l.strokeStyle = "rgba(0,0,0,0)" |
|
||||||
|
|
||||||
ctx_l.moveTo(X, Y) |
|
||||||
ctx_l.lineTo(X + d, Y) |
|
||||||
ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
|
||||||
ctx_l.lineTo(X + 3 * d, Y) |
|
||||||
ctx_l.lineTo(X + 3 * d, Y + d) |
|
||||||
ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
|
||||||
ctx_l.lineTo(X + 3 * d, Y + 3 * d) |
|
||||||
ctx_l.lineTo(X, Y + 3 * d) |
|
||||||
|
|
||||||
ctx_l.closePath() |
|
||||||
ctx_l.stroke() |
|
||||||
ctx_l.shadowBlur = 10 |
|
||||||
ctx_l.shadowColor = "black" |
|
||||||
ctx_l.clip() |
|
||||||
ctx_s.beginPath() |
|
||||||
ctx_s.lineWidth = 1 |
|
||||||
ctx_s.strokeStyle = "rgba(0,0,0,0)" |
|
||||||
|
|
||||||
ctx_s.moveTo(X, Y) |
|
||||||
ctx_s.lineTo(X + d, Y) |
|
||||||
ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
|
||||||
ctx_s.lineTo(X + 3 * d, Y) |
|
||||||
ctx_s.lineTo(X + 3 * d, Y + d) |
|
||||||
ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
|
||||||
ctx_s.lineTo(X + 3 * d, Y + 3 * d) |
|
||||||
ctx_s.lineTo(X, Y + 3 * d) |
|
||||||
|
|
||||||
ctx_s.closePath() |
|
||||||
ctx_s.stroke() |
|
||||||
ctx_s.shadowBlur = 20 |
|
||||||
ctx_s.shadowColor = "black" |
|
||||||
ctx_s.fill() |
|
||||||
}, |
|
||||||
//通过重置画布尺寸清空画布，这种方式更彻底 |
|
||||||
clearCanvas() { |
|
||||||
let c = this.$refs.puzzleBox |
|
||||||
let c_l = this.$refs.puzzleLost |
|
||||||
let c_s = this.$refs.puzzleShadow |
|
||||||
c.setAttribute("height", c.getAttribute("height")) |
|
||||||
c_l.setAttribute("height", c.getAttribute("height")) |
|
||||||
c_s.setAttribute("height", c.getAttribute("height")) |
|
||||||
}, |
|
||||||
//按住滑块后初始化移动监听，记录初始位置 |
|
||||||
startMove(e) { |
|
||||||
this.moveStart = e.pageX |
|
||||||
this.addMouseMoveListener() |
|
||||||
}, |
|
||||||
//滑块移动 |
|
||||||
moving(e) { |
|
||||||
let moveX = e.pageX |
|
||||||
let d = moveX - this.moveStart |
|
||||||
if (this.moveStart === null |
|
||||||
|| d < 0 |
|
||||||
|| d > this.width - this.padding - this.blockSize) return |
|
||||||
this.$refs.sliderBtn.$el.style.left = d + "px" |
|
||||||
this.$refs.sliderBtn.$el.style.transition = "inherit" |
|
||||||
this.$refs.puzzleLost.style.left = d + "px" |
|
||||||
this.$refs.puzzleLost.style.transition = "inherit" |
|
||||||
this.$refs.puzzleShadow.style.left = d + "px" |
|
||||||
this.$refs.puzzleShadow.style.transition = "inherit" |
|
||||||
}, |
|
||||||
//移动结束，验证并回调 |
|
||||||
moveEnd(e) { |
|
||||||
let moveEnd_X = e.pageX - this.moveStart |
|
||||||
let ver_Num = this.randomX - 10 |
|
||||||
let Min_left = ver_Num - this.deviation |
|
||||||
let Max_left = ver_Num + this.deviation |
|
||||||
if (this.moveStart !== null) { |
|
||||||
if (Max_left > moveEnd_X && moveEnd_X > Min_left) { |
|
||||||
this.displayTips = true |
|
||||||
this.verification = true |
|
||||||
setTimeout(() => { |
|
||||||
this.displayTips = false |
|
||||||
this.initCanvas() |
|
||||||
this.$emit('success') |
|
||||||
}, 500) |
|
||||||
} |
|
||||||
else { |
|
||||||
this.displayTips = true |
|
||||||
this.verification = false |
|
||||||
setTimeout(() => { |
|
||||||
this.displayTips = false |
|
||||||
this.initCanvas() |
|
||||||
this.$emit('fail') |
|
||||||
}, 800) |
|
||||||
} |
|
||||||
} |
|
||||||
setTimeout(() => { |
|
||||||
this.$refs.sliderBtn.$el.style.left = '0' |
|
||||||
this.$refs.sliderBtn.$el.style.transition = "left 0.5s" |
|
||||||
this.$refs.puzzleLost.style.left = '0' |
|
||||||
this.$refs.puzzleLost.style.transition = "left 0.5s" |
|
||||||
this.$refs.puzzleShadow.style.left = '0' |
|
||||||
this.$refs.puzzleShadow.style.transition = "left 0.5s" |
|
||||||
}, 400) |
|
||||||
this.moveStart = null |
|
||||||
this.removeMouseMoveListener() |
|
||||||
}, |
|
||||||
//全局绑定滑块移动与滑动结束，移动过程中鼠标可在页面任何位置 |
|
||||||
addMouseMoveListener() { |
|
||||||
document.addEventListener("mousemove", this.moving) |
|
||||||
document.addEventListener("mouseup", this.moveEnd) |
|
||||||
}, |
|
||||||
removeMouseMoveListener() { |
|
||||||
document.removeEventListener("mousemove", this.moving) |
|
||||||
document.removeEventListener("mouseup", this.moveEnd) |
|
||||||
} |
|
||||||
}, |
|
||||||
created() { |
|
||||||
// 随机显示一张图片 |
|
||||||
let imgRandomIndex = Math.round(Math.random() * (this.puzzleImgList.length - 1)) |
|
||||||
this.imgRandom = this.puzzleImgList[imgRandomIndex] |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.$nextTick(() => this.initCanvas()) |
|
||||||
}, |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.puzzle-container { |
|
||||||
position: relative; |
|
||||||
display: inline-block; |
|
||||||
padding: 0 15px 28px; |
|
||||||
border: 1px solid #ddd; |
|
||||||
background: #ffffff; |
|
||||||
border-radius: 10px; |
|
||||||
|
|
||||||
.puzzle-header { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: space-between; |
|
||||||
margin: 5px 0; |
|
||||||
|
|
||||||
.puzzle-header-title { |
|
||||||
font-size: 13px; |
|
||||||
color: #909399 |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.puzzle-view { |
|
||||||
position: relative; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
.puzzle-lost-box { |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
} |
|
||||||
|
|
||||||
canvas { |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
z-index: 22; |
|
||||||
} |
|
||||||
|
|
||||||
.verify-result { |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
bottom: -22px; |
|
||||||
background: rgba(255, 255, 255, 1); |
|
||||||
height: 22px; |
|
||||||
line-height: 22px; |
|
||||||
font-size: 12px; |
|
||||||
width: 100%; |
|
||||||
transition: bottom 0.4s; |
|
||||||
|
|
||||||
.success { |
|
||||||
color: #67C23A |
|
||||||
} |
|
||||||
|
|
||||||
.error { |
|
||||||
color: #F56C6C |
|
||||||
} |
|
||||||
|
|
||||||
i { |
|
||||||
margin: 0 10px; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
&.hide { |
|
||||||
bottom: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.slider-container { |
|
||||||
position: relative; |
|
||||||
margin: 10px auto 0; |
|
||||||
min-height: 15px; |
|
||||||
|
|
||||||
.slider-bar { |
|
||||||
height: 10px; |
|
||||||
border: 1px solid #c3c3c3; |
|
||||||
border-radius: 5px; |
|
||||||
background: #e4e4e4; |
|
||||||
box-shadow: 0 1px 1px rgba(12, 10, 10, 0.2) inset; |
|
||||||
position: relative; |
|
||||||
top: 7px; |
|
||||||
} |
|
||||||
|
|
||||||
.slider-btn { |
|
||||||
position: absolute; |
|
||||||
width: 44px; |
|
||||||
height: 44px; |
|
||||||
left: 0; |
|
||||||
top: -10px; |
|
||||||
z-index: 12; |
|
||||||
transition: inherit; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,519 @@ |
|||||||
|
<template> |
||||||
|
<transition :name="transition" @after-leave="handleAfterLeave"> |
||||||
|
<div |
||||||
|
v-show="visible" |
||||||
|
class="puzzle-container" |
||||||
|
:class="{'puzzle-shake':stat==='fail'}" |
||||||
|
:style="`left: ${positionLeft}px;top: ${positionTop}px;`" |
||||||
|
> |
||||||
|
<div class="puzzle-view" :style="`width:${width}px;height:${height}px;`"> |
||||||
|
<div v-show="!image.loading" style="width: 100%;height: 100%"> |
||||||
|
<img :src="image.src"/> |
||||||
|
<canvas ref="puzzleBox" :height="height" :width="width"/> |
||||||
|
<div class="puzzle-lost-box" :style="`left:${leftNum}px`"> |
||||||
|
<canvas ref="puzzleShadow" :style="sliderStyle" :height="height" :width="width"/> |
||||||
|
<canvas ref="puzzleLost" :style="sliderStyle" :height="height" :width="width"/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<transition name="fade"> |
||||||
|
<div v-show="image.loading" class="puzzle-image-loading"> |
||||||
|
<div class="puzzle-image-loading__icon"/> |
||||||
|
<div class="puzzle-image-loading__text">加载中...</div> |
||||||
|
</div> |
||||||
|
</transition> |
||||||
|
<div :class="resultTipClass"> |
||||||
|
{{stat==='success'?'验证通过':'请正确拼合图像'}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="slider-container"> |
||||||
|
<div class="slider-track"> |
||||||
|
<div class="slider-tip" :style="stat==='ready'?'opacity: 1':''">拖动滑块完成拼图</div> |
||||||
|
</div> |
||||||
|
<div class="slider-btn" :style="sliderBtnStyle" @mousedown.prevent.stop="moveStart"/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="puzzle-footer"> |
||||||
|
<div class="puzzle-small"> |
||||||
|
<a class="puzzle-text-container puzzle-close" @click="close"> |
||||||
|
<div class="puzzle-text-tip">关闭验证</div> |
||||||
|
</a> |
||||||
|
<a class="puzzle-text-container puzzle-refresh" @click="refresh"> |
||||||
|
<div class="puzzle-text-tip">刷新验证</div> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</transition> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/* |
||||||
|
* https://github.com/Kevin-269581661/vue-puzzle-verification |
||||||
|
* 网上搬的例子，实际开发建议用极验 |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
name: "PuzzleVerify", |
||||||
|
props: { |
||||||
|
//动画名称，具体请查看transition.scss |
||||||
|
transition: { |
||||||
|
type: String, |
||||||
|
default: 'scale' |
||||||
|
}, |
||||||
|
// 画布图片的尺寸 |
||||||
|
width: { |
||||||
|
type: Number, |
||||||
|
default: 260 |
||||||
|
}, |
||||||
|
height: { |
||||||
|
type: Number, |
||||||
|
default: 160 |
||||||
|
}, |
||||||
|
// 滑块的大小 |
||||||
|
blockSize: { |
||||||
|
type: Number, |
||||||
|
default: 40 |
||||||
|
}, |
||||||
|
// 误差 |
||||||
|
deviation: { |
||||||
|
type: Number, |
||||||
|
default: 4 |
||||||
|
}, |
||||||
|
// 滑块随机出现的范围 |
||||||
|
padding: { |
||||||
|
type: Number, |
||||||
|
default: 80 |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
visible: false, |
||||||
|
stat: 'ready',//ready,move,success,fail,error |
||||||
|
positionLeft: 0, |
||||||
|
positionTop: 0, |
||||||
|
resolve: () => ({}), |
||||||
|
reject: () => ({}), |
||||||
|
moveStartAtX: null, |
||||||
|
randomX: null, |
||||||
|
randomY: null, |
||||||
|
leftNum: 0, |
||||||
|
image: { |
||||||
|
src: '', |
||||||
|
loading: true |
||||||
|
}, |
||||||
|
sliderStyle: { |
||||||
|
left: '0', |
||||||
|
transition: 'inherit' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
resultTipClass() { |
||||||
|
const showResultTip = ['success', 'fail'].includes(this.stat) |
||||||
|
return ['verify-result', `verify-${this.stat}`, showResultTip ? 'show-result' : ''] |
||||||
|
}, |
||||||
|
sliderBtnStyle() { |
||||||
|
return { |
||||||
|
...this.sliderStyle, |
||||||
|
'background-position': this.stat === 'move' ? '0 31.0992%' : '0 11.79625%' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
close() { |
||||||
|
this.visible = false |
||||||
|
this.clear() |
||||||
|
this.reject() |
||||||
|
}, |
||||||
|
refresh() { |
||||||
|
this.initImage().then(() => this.initCanvas()) |
||||||
|
}, |
||||||
|
initCanvas() { |
||||||
|
this.clear() |
||||||
|
let MinX = this.padding + this.blockSize |
||||||
|
let MaxX = this.width - this.padding - 2 * this.blockSize - this.blockSize / 6 |
||||||
|
let MaxY = this.padding |
||||||
|
let MinY = this.height - this.padding - this.blockSize - this.blockSize / 6 |
||||||
|
this.randomX = Math.round(Math.random() * MaxX + MinX) |
||||||
|
this.randomY = Math.round(Math.random() * MaxY + MinY) |
||||||
|
let X = this.randomX |
||||||
|
let Y = this.randomY |
||||||
|
this.leftNum = -X + 10 |
||||||
|
let d = this.blockSize / 3 |
||||||
|
|
||||||
|
let c = this.$refs.puzzleBox |
||||||
|
let c_l = this.$refs.puzzleLost |
||||||
|
let c_s = this.$refs.puzzleShadow |
||||||
|
let ctx = c.getContext("2d") |
||||||
|
let ctx_l = c_l.getContext("2d") |
||||||
|
let ctx_s = c_s.getContext("2d") |
||||||
|
ctx.globalCompositeOperation = "xor" |
||||||
|
ctx.shadowBlur = 10 |
||||||
|
ctx.shadowColor = "#fff" |
||||||
|
ctx.shadowOffsetX = 3 |
||||||
|
ctx.shadowOffsetY = 3 |
||||||
|
ctx.fillStyle = "rgba(0,0,0,0.7)" |
||||||
|
ctx.beginPath() |
||||||
|
ctx.lineWidth = 1 |
||||||
|
ctx.strokeStyle = "rgba(0,0,0,0)" |
||||||
|
|
||||||
|
ctx.moveTo(X, Y) |
||||||
|
ctx.lineTo(X + d, Y) |
||||||
|
ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
||||||
|
ctx.lineTo(X + 3 * d, Y) |
||||||
|
ctx.lineTo(X + 3 * d, Y + d) |
||||||
|
ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
||||||
|
ctx.lineTo(X + 3 * d, Y + 3 * d) |
||||||
|
ctx.lineTo(X, Y + 3 * d) |
||||||
|
|
||||||
|
ctx.closePath() |
||||||
|
ctx.stroke() |
||||||
|
ctx.fill() |
||||||
|
|
||||||
|
this.drawImage(img => ctx_l.drawImage(img, 0, 0, this.width, this.height)) |
||||||
|
|
||||||
|
ctx_l.beginPath() |
||||||
|
ctx_l.strokeStyle = "rgba(0,0,0,0)" |
||||||
|
|
||||||
|
ctx_l.moveTo(X, Y) |
||||||
|
ctx_l.lineTo(X + d, Y) |
||||||
|
ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
||||||
|
ctx_l.lineTo(X + 3 * d, Y) |
||||||
|
ctx_l.lineTo(X + 3 * d, Y + d) |
||||||
|
ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
||||||
|
ctx_l.lineTo(X + 3 * d, Y + 3 * d) |
||||||
|
ctx_l.lineTo(X, Y + 3 * d) |
||||||
|
|
||||||
|
ctx_l.closePath() |
||||||
|
ctx_l.stroke() |
||||||
|
ctx_l.shadowBlur = 10 |
||||||
|
ctx_l.shadowColor = "black" |
||||||
|
ctx_l.clip() |
||||||
|
ctx_s.beginPath() |
||||||
|
ctx_s.lineWidth = 1 |
||||||
|
ctx_s.strokeStyle = "rgba(0,0,0,0)" |
||||||
|
|
||||||
|
ctx_s.moveTo(X, Y) |
||||||
|
ctx_s.lineTo(X + d, Y) |
||||||
|
ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
||||||
|
ctx_s.lineTo(X + 3 * d, Y) |
||||||
|
ctx_s.lineTo(X + 3 * d, Y + d) |
||||||
|
ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
||||||
|
ctx_s.lineTo(X + 3 * d, Y + 3 * d) |
||||||
|
ctx_s.lineTo(X, Y + 3 * d) |
||||||
|
|
||||||
|
ctx_s.closePath() |
||||||
|
ctx_s.stroke() |
||||||
|
ctx_s.shadowBlur = 20 |
||||||
|
ctx_s.shadowColor = "black" |
||||||
|
ctx_s.fill() |
||||||
|
}, |
||||||
|
initImage() { |
||||||
|
const imageListTemp = [ |
||||||
|
"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg", |
||||||
|
"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg", |
||||||
|
"https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" |
||||||
|
] |
||||||
|
this.image.loading = true |
||||||
|
let imgRandomIndex = Math.round(Math.random() * (imageListTemp.length - 1)) |
||||||
|
this.image.src = imageListTemp[imgRandomIndex] |
||||||
|
return new Promise(resolve => resolve()) |
||||||
|
}, |
||||||
|
drawImage(fun) { |
||||||
|
let img = new Image() |
||||||
|
img.src = this.image.src |
||||||
|
img.onload = () => { |
||||||
|
fun(img) |
||||||
|
this.image.loading = false |
||||||
|
} |
||||||
|
}, |
||||||
|
clear() { |
||||||
|
this.stat = 'ready' |
||||||
|
let c = this.$refs.puzzleBox |
||||||
|
let c_l = this.$refs.puzzleLost |
||||||
|
let c_s = this.$refs.puzzleShadow |
||||||
|
c.setAttribute("height", c.getAttribute("height")) |
||||||
|
c_l.setAttribute("height", c.getAttribute("height")) |
||||||
|
c_s.setAttribute("height", c.getAttribute("height")) |
||||||
|
}, |
||||||
|
moveStart(e) { |
||||||
|
this.moveStartAtX = e.pageX |
||||||
|
this.addListener() |
||||||
|
}, |
||||||
|
moving(e) { |
||||||
|
this.stat = 'move' |
||||||
|
const distance = e.pageX - this.moveStartAtX |
||||||
|
if (this.moveStartAtX === null |
||||||
|
|| distance < 0 |
||||||
|
|| distance > this.width - this.blockSize) { |
||||||
|
return |
||||||
|
} |
||||||
|
this.sliderStyle.left = distance + "px" |
||||||
|
this.sliderStyle.transition = "inherit" |
||||||
|
}, |
||||||
|
moveEnd(e) { |
||||||
|
const distance = e.pageX - this.moveStartAtX |
||||||
|
const ver_Num = this.randomX - 10 |
||||||
|
const minLeft = ver_Num - this.deviation |
||||||
|
const maxLeft = ver_Num + this.deviation |
||||||
|
if (this.moveStartAtX !== null) { |
||||||
|
const success = maxLeft > distance && distance > minLeft |
||||||
|
this.stat = success ? 'success' : 'fail' |
||||||
|
setTimeout(() => { |
||||||
|
this.stat = 'ready' |
||||||
|
if (!success) return this.initCanvas() |
||||||
|
this.resolve() |
||||||
|
this.close() |
||||||
|
}, success ? 500 : 1000) |
||||||
|
} |
||||||
|
setTimeout(() => { |
||||||
|
this.sliderStyle.left = '0' |
||||||
|
this.sliderStyle.transition = "left 0.5s" |
||||||
|
}, 1000) |
||||||
|
this.moveStartAtX = null |
||||||
|
this.removeListener() |
||||||
|
}, |
||||||
|
addListener() { |
||||||
|
if (this.image.loading) return |
||||||
|
document.addEventListener("mousemove", this.moving) |
||||||
|
document.addEventListener("mouseup", this.moveEnd) |
||||||
|
}, |
||||||
|
removeListener() { |
||||||
|
document.removeEventListener("mousemove", this.moving) |
||||||
|
document.removeEventListener("mouseup", this.moveEnd) |
||||||
|
}, |
||||||
|
handleAfterLeave() { |
||||||
|
this.$destroy(true) |
||||||
|
this.$el.parentNode.removeChild(this.$el) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initImage().then(() => this.initCanvas()) |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.puzzle-container { |
||||||
|
position: absolute; |
||||||
|
box-shadow: 0 0 10px #cccccc; |
||||||
|
border: 1px solid #cccccc; |
||||||
|
background: #ffffff; |
||||||
|
|
||||||
|
.puzzle-text-container { |
||||||
|
&:hover { |
||||||
|
overflow: visible !important; |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-text-tip { |
||||||
|
position: absolute; |
||||||
|
top: -32px; |
||||||
|
left: 10px; |
||||||
|
border-radius: 2px; |
||||||
|
padding: 0 4px; |
||||||
|
height: 22px; |
||||||
|
min-width: 50px; |
||||||
|
line-height: 22px; |
||||||
|
background-color: #5F5F5F; |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
|
||||||
|
&::before { |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
bottom: -6px; |
||||||
|
left: 0; |
||||||
|
content: ''; |
||||||
|
border-style: solid; |
||||||
|
border-width: 4px 6px; |
||||||
|
border-color: #5F5F5F transparent transparent #5F5F5F; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-view { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
margin: 10px 10px 0; |
||||||
|
|
||||||
|
.puzzle-image-loading { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #e5e5e5; |
||||||
|
padding-top: 10%; |
||||||
|
|
||||||
|
&__icon { |
||||||
|
background-size: 764.70588%; |
||||||
|
background-position: 0 70.70218%; |
||||||
|
margin: 11% auto 10px; |
||||||
|
width: 34px; |
||||||
|
height: 26px; |
||||||
|
overflow: hidden; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-image: url(~@/assets/images/sprite.1.2.4.png); |
||||||
|
} |
||||||
|
|
||||||
|
&__text { |
||||||
|
text-align: center; |
||||||
|
font-size: 14px; |
||||||
|
margin-bottom: 1%; |
||||||
|
color: #b2b2b2; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-lost-box { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
canvas { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
z-index: 22; |
||||||
|
} |
||||||
|
|
||||||
|
.verify-result { |
||||||
|
position: absolute; |
||||||
|
z-index: 999; |
||||||
|
color: white; |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
left: 0; |
||||||
|
bottom: -25px; |
||||||
|
font-size: 14px; |
||||||
|
width: 100%; |
||||||
|
transition: bottom 0.3s; |
||||||
|
text-indent: 16px; |
||||||
|
|
||||||
|
&.verify-success { |
||||||
|
background-color: $--color-success |
||||||
|
} |
||||||
|
|
||||||
|
&.verify-fail { |
||||||
|
background-color: $--color-danger |
||||||
|
} |
||||||
|
|
||||||
|
&.show-result { |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.slider-container { |
||||||
|
position: relative; |
||||||
|
margin: 5.39% 3.24%; |
||||||
|
width: 93.52%; |
||||||
|
padding: 0 0 13.67% 0; |
||||||
|
background-color: white; |
||||||
|
background-size: 100%; |
||||||
|
background-position: 0 0; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-image: url(~@/assets/images/sprite.1.2.4.png); |
||||||
|
|
||||||
|
.slider-track { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
margin: -19px 0 0 0; |
||||||
|
padding: 0 0 0 25%; |
||||||
|
|
||||||
|
.slider-tip { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
opacity: 0; |
||||||
|
transition: opacity .5s; |
||||||
|
line-height: 38px; |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
white-space: nowrap; |
||||||
|
color: #88949d; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.slider-btn { |
||||||
|
position: absolute; |
||||||
|
margin: -4.62% 0 0 -2.31%; |
||||||
|
width: 25.38%; |
||||||
|
padding: 0 0 25.38% 0; |
||||||
|
cursor: pointer; |
||||||
|
background-size: 393.93939%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-image: url(~@/assets/images/sprite.1.2.4.png); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-footer { |
||||||
|
position: relative; |
||||||
|
border-top: 1px solid #EEEEEE; |
||||||
|
width: 100%; |
||||||
|
margin: 0; |
||||||
|
padding: 0 0 17.27% 0; |
||||||
|
|
||||||
|
.puzzle-small { |
||||||
|
position: absolute; |
||||||
|
left: 5.1%; |
||||||
|
top: 50%; |
||||||
|
margin-top: -4.13%; |
||||||
|
padding: 0 0 8.27% 0; |
||||||
|
width: 40.45%; |
||||||
|
height: 0; |
||||||
|
|
||||||
|
.puzzle-close, .puzzle-refresh { |
||||||
|
margin-left: 8.9%; |
||||||
|
width: 17.8%; |
||||||
|
cursor: pointer; |
||||||
|
text-decoration: none; |
||||||
|
vertical-align: top; |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
height: 0; |
||||||
|
padding-bottom: 17.8%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-image: url(~@/assets/images/sprite.1.2.4.png); |
||||||
|
overflow: hidden; |
||||||
|
background-size: 1300%; |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-close { |
||||||
|
margin-left: 0; |
||||||
|
background-position: 0 44.86874%; |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-refresh { |
||||||
|
background-position: 0 81.38425%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-shake { |
||||||
|
animation: shake 0.2s linear 3 both; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes shake { |
||||||
|
25% { |
||||||
|
transform: translate3d(-6px, 0, 0) |
||||||
|
} |
||||||
|
75% { |
||||||
|
transform: translate3d(6px, 0, 0) |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: translate3d(0, 0, 0) |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,20 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<el-row class="tip-row"> |
|
||||||
<a href="https://github.com/Kevin-269581661/vue-puzzle-verification" target="_blank">网上搬的例子</a> |
|
||||||
</el-row> |
|
||||||
<puzzle-verification :puzzleImgList="puzzleImgList"/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import PuzzleVerification from '@/components/PuzzleVerify' |
|
||||||
|
|
||||||
export default { |
|
||||||
components: {PuzzleVerification}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
puzzleImgList: ['http://q4r31dqam.bkt.clouddn.com/image/56.jpg'] |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
Loading…
Reference in new issue