panda7
7 months ago
committed by
GitHub
GitHub
10 changed files with 396 additions and 4 deletions
@ -0,0 +1,311 @@ |
|||
<script setup lang="ts"> |
|||
import type { |
|||
CaptchaVerifyPassingData, |
|||
SliderCaptchaActionType, |
|||
SliderRotateVerifyPassingData, |
|||
SliderTranslateCaptchaProps, |
|||
} from '../types'; |
|||
|
|||
import { |
|||
computed, |
|||
onMounted, |
|||
reactive, |
|||
ref, |
|||
unref, |
|||
useTemplateRef, |
|||
watch, |
|||
} from 'vue'; |
|||
|
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import SliderCaptcha from '../slider-captcha/index.vue'; |
|||
|
|||
const props = withDefaults(defineProps<SliderTranslateCaptchaProps>(), { |
|||
defaultTip: '', |
|||
canvasWidth: 420, |
|||
canvasHeight: 280, |
|||
squareLength: 42, |
|||
circleRadius: 10, |
|||
src: '', |
|||
diffDistance: 3, |
|||
}); |
|||
|
|||
const emit = defineEmits<{ |
|||
success: [CaptchaVerifyPassingData]; |
|||
}>(); |
|||
|
|||
const PI: number = Math.PI; |
|||
enum CanvasOpr { |
|||
// eslint-disable-next-line no-unused-vars |
|||
Clip = 'clip', |
|||
// eslint-disable-next-line no-unused-vars |
|||
Fill = 'fill', |
|||
} |
|||
|
|||
const modalValue = defineModel<boolean>({ default: false }); |
|||
|
|||
const slideBarRef = useTemplateRef<SliderCaptchaActionType>('slideBarRef'); |
|||
const puzzleCanvasRef = useTemplateRef<HTMLCanvasElement>('puzzleCanvasRef'); |
|||
const pieceCanvasRef = useTemplateRef<HTMLCanvasElement>('pieceCanvasRef'); |
|||
|
|||
const state = reactive({ |
|||
dragging: false, |
|||
startTime: 0, |
|||
endTime: 0, |
|||
pieceX: 0, |
|||
pieceY: 0, |
|||
moveDistance: 0, |
|||
isPassing: false, |
|||
showTip: false, |
|||
}); |
|||
|
|||
const left = ref('0'); |
|||
|
|||
const pieceStyle = computed(() => { |
|||
return { |
|||
left: left.value, |
|||
}; |
|||
}); |
|||
|
|||
function setLeft(val: string) { |
|||
left.value = val; |
|||
} |
|||
|
|||
const verifyTip = computed(() => { |
|||
return state.isPassing |
|||
? $t('ui.captcha.sliderTranslateSuccessTip', [ |
|||
((state.endTime - state.startTime) / 1000).toFixed(1), |
|||
]) |
|||
: $t('ui.captcha.sliderTranslateFailTip'); |
|||
}); |
|||
function handleStart() { |
|||
state.startTime = Date.now(); |
|||
} |
|||
|
|||
function handleDragBarMove(data: SliderRotateVerifyPassingData) { |
|||
state.dragging = true; |
|||
const { moveX } = data; |
|||
state.moveDistance = moveX; |
|||
setLeft(`${moveX}px`); |
|||
} |
|||
|
|||
function handleDragEnd() { |
|||
const { pieceX } = state; |
|||
const { diffDistance } = props; |
|||
|
|||
if (Math.abs(pieceX - state.moveDistance) >= (diffDistance || 3)) { |
|||
setLeft('0'); |
|||
state.moveDistance = 0; |
|||
} else { |
|||
checkPass(); |
|||
} |
|||
state.showTip = true; |
|||
state.dragging = false; |
|||
} |
|||
|
|||
function checkPass() { |
|||
state.isPassing = true; |
|||
state.endTime = Date.now(); |
|||
} |
|||
|
|||
watch( |
|||
() => state.isPassing, |
|||
(isPassing) => { |
|||
if (isPassing) { |
|||
const { endTime, startTime } = state; |
|||
const time = (endTime - startTime) / 1000; |
|||
emit('success', { isPassing, time: time.toFixed(1) }); |
|||
} |
|||
modalValue.value = isPassing; |
|||
}, |
|||
); |
|||
|
|||
function resetCanvas() { |
|||
const { canvasWidth, canvasHeight } = props; |
|||
const puzzleCanvas = unref(puzzleCanvasRef); |
|||
const pieceCanvas = unref(pieceCanvasRef); |
|||
if (!puzzleCanvas || !pieceCanvas) return; |
|||
pieceCanvas.width = canvasWidth; |
|||
const puzzleCanvasCtx = puzzleCanvas.getContext('2d'); |
|||
// Canvas2D: Multiple readback operations using getImageData |
|||
// are faster with the willReadFrequently attribute set to true. |
|||
// See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous) |
|||
const pieceCanvasCtx = pieceCanvas.getContext('2d', { |
|||
willReadFrequently: true, |
|||
}); |
|||
if (!puzzleCanvasCtx || !pieceCanvasCtx) return; |
|||
puzzleCanvasCtx.clearRect(0, 0, canvasWidth, canvasHeight); |
|||
pieceCanvasCtx.clearRect(0, 0, canvasWidth, canvasHeight); |
|||
} |
|||
|
|||
function initCanvas() { |
|||
const { canvasWidth, canvasHeight, squareLength, circleRadius, src } = props; |
|||
const puzzleCanvas = unref(puzzleCanvasRef); |
|||
const pieceCanvas = unref(pieceCanvasRef); |
|||
if (!puzzleCanvas || !pieceCanvas) return; |
|||
const puzzleCanvasCtx = puzzleCanvas.getContext('2d'); |
|||
// Canvas2D: Multiple readback operations using getImageData |
|||
// are faster with the willReadFrequently attribute set to true. |
|||
// See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous) |
|||
const pieceCanvasCtx = pieceCanvas.getContext('2d', { |
|||
willReadFrequently: true, |
|||
}); |
|||
if (!puzzleCanvasCtx || !pieceCanvasCtx) return; |
|||
const img = new Image(); |
|||
// 解决跨域 |
|||
img.crossOrigin = 'Anonymous'; |
|||
img.src = src; |
|||
img.addEventListener('load', () => { |
|||
draw(puzzleCanvasCtx, pieceCanvasCtx); |
|||
puzzleCanvasCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight); |
|||
pieceCanvasCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight); |
|||
const pieceLength = squareLength + 2 * circleRadius + 3; |
|||
const sx = state.pieceX; |
|||
const sy = state.pieceY - 2 * circleRadius - 1; |
|||
const imageData = pieceCanvasCtx.getImageData( |
|||
sx, |
|||
sy, |
|||
pieceLength, |
|||
pieceLength, |
|||
); |
|||
pieceCanvas.width = pieceLength; |
|||
pieceCanvasCtx.putImageData(imageData, 0, sy); |
|||
setLeft('0'); |
|||
}); |
|||
} |
|||
|
|||
function getRandomNumberByRange(start: number, end: number) { |
|||
return Math.round(Math.random() * (end - start) + start); |
|||
} |
|||
|
|||
// 绘制拼图 |
|||
function draw(ctx1: CanvasRenderingContext2D, ctx2: CanvasRenderingContext2D) { |
|||
const { canvasWidth, canvasHeight, squareLength, circleRadius } = props; |
|||
state.pieceX = getRandomNumberByRange( |
|||
squareLength + 2 * circleRadius, |
|||
canvasWidth - (squareLength + 2 * circleRadius), |
|||
); |
|||
state.pieceY = getRandomNumberByRange( |
|||
3 * circleRadius, |
|||
canvasHeight - (squareLength + 2 * circleRadius), |
|||
); |
|||
drawPiece(ctx1, state.pieceX, state.pieceY, CanvasOpr.Fill); |
|||
drawPiece(ctx2, state.pieceX, state.pieceY, CanvasOpr.Clip); |
|||
} |
|||
|
|||
// 绘制拼图切块 |
|||
function drawPiece( |
|||
ctx: CanvasRenderingContext2D, |
|||
x: number, |
|||
y: number, |
|||
opr: CanvasOpr, |
|||
) { |
|||
const { squareLength, circleRadius } = props; |
|||
ctx.beginPath(); |
|||
ctx.moveTo(x, y); |
|||
ctx.arc( |
|||
x + squareLength / 2, |
|||
y - circleRadius + 2, |
|||
circleRadius, |
|||
0.72 * PI, |
|||
2.26 * PI, |
|||
); |
|||
ctx.lineTo(x + squareLength, y); |
|||
ctx.arc( |
|||
x + squareLength + circleRadius - 2, |
|||
y + squareLength / 2, |
|||
circleRadius, |
|||
1.21 * PI, |
|||
2.78 * PI, |
|||
); |
|||
ctx.lineTo(x + squareLength, y + squareLength); |
|||
ctx.lineTo(x, y + squareLength); |
|||
ctx.arc( |
|||
x + circleRadius - 2, |
|||
y + squareLength / 2, |
|||
circleRadius + 0.4, |
|||
2.76 * PI, |
|||
1.24 * PI, |
|||
true, |
|||
); |
|||
ctx.lineTo(x, y); |
|||
ctx.lineWidth = 2; |
|||
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; |
|||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; |
|||
ctx.stroke(); |
|||
opr === CanvasOpr.Clip ? ctx.clip() : ctx.fill(); |
|||
ctx.globalCompositeOperation = 'destination-over'; |
|||
} |
|||
|
|||
function resume() { |
|||
state.showTip = false; |
|||
const basicEl = unref(slideBarRef); |
|||
if (!basicEl) { |
|||
return; |
|||
} |
|||
state.dragging = false; |
|||
state.isPassing = false; |
|||
state.pieceX = 0; |
|||
state.pieceY = 0; |
|||
|
|||
basicEl.resume(); |
|||
resetCanvas(); |
|||
initCanvas(); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
initCanvas(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="relative flex flex-col items-center"> |
|||
<div |
|||
class="border-border relative flex cursor-pointer overflow-hidden border shadow-md" |
|||
> |
|||
<canvas |
|||
ref="puzzleCanvasRef" |
|||
:width="canvasWidth" |
|||
:height="canvasHeight" |
|||
@click="resume" |
|||
></canvas> |
|||
<canvas |
|||
ref="pieceCanvasRef" |
|||
:width="canvasWidth" |
|||
:height="canvasHeight" |
|||
:style="pieceStyle" |
|||
class="absolute" |
|||
@click="resume" |
|||
></canvas> |
|||
<div |
|||
class="h-15 absolute bottom-3 left-0 z-10 block w-full text-center text-xs leading-[30px] text-white" |
|||
> |
|||
<div |
|||
v-if="state.showTip" |
|||
:class="{ |
|||
'bg-success/80': state.isPassing, |
|||
'bg-destructive/80': !state.isPassing, |
|||
}" |
|||
> |
|||
{{ verifyTip }} |
|||
</div> |
|||
<div v-if="!state.dragging" class="bg-black/30"> |
|||
{{ defaultTip || $t('ui.captcha.sliderTranslateDefaultTip') }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<SliderCaptcha |
|||
ref="slideBarRef" |
|||
v-model="modalValue" |
|||
class="mt-5" |
|||
is-slot |
|||
@end="handleDragEnd" |
|||
@move="handleDragBarMove" |
|||
@start="handleStart" |
|||
> |
|||
<template v-for="(_, key) in $slots" :key="key" #[key]="slotProps"> |
|||
<slot :name="key" v-bind="slotProps"></slot> |
|||
</template> |
|||
</SliderCaptcha> |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,27 @@ |
|||
<script setup lang="ts"> |
|||
import { Page, SliderTranslateCaptcha } from '@vben/common-ui'; |
|||
|
|||
import { Card, message } from 'ant-design-vue'; |
|||
|
|||
function handleSuccess() { |
|||
message.success('success!'); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<Page |
|||
description="用于前端简单的拼图滑块水平拖动校验场景" |
|||
title="拼图滑块校验" |
|||
> |
|||
<Card class="mb-5" title="基本示例"> |
|||
<div class="flex items-center justify-center p-4"> |
|||
<SliderTranslateCaptcha |
|||
src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/pro-avatar.webp" |
|||
:canvas-width="420" |
|||
:canvas-height="420" |
|||
@success="handleSuccess" |
|||
/> |
|||
</div> |
|||
</Card> |
|||
</Page> |
|||
</template> |
|||
Loading…
Reference in new issue