test-web/src/components/SlidingBlockVerifyTwo/SlidingBlockVerifyTwo.vue

<template>
    <div class="as-gravity-center as-radius-5px" @mouseup="onmouseup" style="background-color:#FFFFFF;
    padding: 15px 10px 15px 10px;width:340px;box-shadow: 0px 0px 5px #999999;">
        <div :style="`width: ${totalWidth}px;`">
            <!-- 文字提示 -->
            <div class="as-gravity-center-start" style="display:flex;margin-bottom: 10px;">
                <div class="as-weight" style="display:flex;align-items: flex-end;">
                    <span style="color: #666666;font: size 24px;margin-right: 5px; ">请完成拼图验证</span>
                    <!-- 刷新按钮 -->
                    <div @click="refresh">
                        <el-icon color="#36B7FB">
                            <refresh />
                        </el-icon>
                    </div>
                </div>
                <!-- 关闭按钮 -->
                <div @click="close">
                    <el-icon :size="24" color="#CDCDCD">
                        <close />
                    </el-icon>
                </div>
            </div>
            <!-- 图片层 -->
            <div style="max-height: 200px;margin-bottom: 10px;">
                <!-- 图片 -->
                <img :src="SlideImgThreePng" class="as-radius-5px" style="height: 200px;width: 300px;">
                <!-- 裁剪部分 background-color: #3FC0FC; -->
                <canvas class="as-radius-5px" id="canvas-cut" :width="canWidth * 2" :height="canHeight * 2"
                    style="position: relative;z-index: 10;top: 0px;box-shadow: 1px 1px 2.5px #333;"
                    :style="`left:${canLeft}px;top:${initTop}px;width: ${canWidth}px;height: ${canHeight}px;`">
                </canvas>
                <!-- 阴影部分 -->
                <canvas class="as-radius-5px" id="canvas-shadow" :width="canWidth * 2" :height="canHeight * 2" style=" 
                position: relative;background-color: #333;" :style="`left:${initLeft}px;top:${initTop}px;
                width: ${canWidth}px;height: ${canHeight}px;`">
                </canvas>

            </div>
            <!-- 滑动层 -->
            <div>
                <!-- 背景层 -->
                <div v-show="!succeed" ref="slidingBg" class="as-radius-30px slide-bg">
                    <!-- 拖动圆圈 -->
                    <div @mousemove="onmousemove" @mousedown="onmousedown" class="circle-bg"
                        :style="`left:${slidingX}px;width:${dragWidth}px`" style="z-index: 20;">
                        <span class="as-gravity-center as-bold circle-bg-text">→</span>
                    </div>
                    <!-- 拖动层 -->
                    <div class="slide-bg-tier" :style="`width:${dragBgWidth}px;background-color: ${bgColor};`">
                    </div>
                    <span class="as-gravity-center slide-reight">向右滑动完成拼图</span>
                </div>
                <!-- 成功层 -->
                <div v-show="succeed" class="as-gravity-center as-radius-30px" style="height: 45px;
                background-color:#36B7FB;color: #ffffff">
                    拼接成功
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import SlideImgThreePng from '@/assets/image/slide_img_three.png';
    //md开撸第二版
    export default {
        props: {
            marginTop: { //高度
                default: 40,
                type: Number
            },
            marginLeft: { //宽度
                default: 80,
                type: Number
            },
            figure: { //灵敏度
                default: 10,
                type: Number
            }
        },
        data() {
            return {
                totalWidth: 300, //设置总宽
                dragWidth: 45, //拖动圆大小
                dragBgWidth: 0, //拖动背景
                slidingX: 0, //圆位置
                slidingBg: undefined,
                clickStart: false, //点击状态
                bgColor: '#3FC0FC', //#FF5B57
                succeed: false, //展示状态
                canWidth: 60, //60
                canHeight: 40, //40
                initTop: -205,
                initLeft: -60,
                canLeft: 0,
                SlideImgThreePng
            }
        },
        mounted() {
            const {
                marginTop,
                marginLeft,
                canWidth,
                canHeight
            } = this
            //设置阴影位置
            this.initTop = this.initTop + this.marginTop
            this.initLeft = this.initLeft + this.marginLeft
            // 获取滑块背景位置
            this.slidingBg = this.$refs['slidingBg'].getBoundingClientRect()
            //裁剪视图
            let canvas = document.getElementById('canvas-cut');
            let cut = canvas.getContext('2d');
            let img = new Image();
            img.src = this.SlideImgThreePng;
            //处理toDataURL遇跨域资源导致的报错
            img.crossOrigin = 'Anonymous';
            img.onload = function () {
                /* 
                drawImage方法说明 https://www.runoob.com/jsref/met-canvas-drawimage.html
                sx	可选。开始剪切的 x 坐标位置。
                sy	可选。开始剪切的 y 坐标位置。
                swidth	可选。被剪切图像的宽度。
                sheight	可选。被剪切图像的高度。
                x	在画布上放置图像的 x 坐标位置。
                y	在画布上放置图像的 y 坐标位置。
                width	可选。要使用的图像的宽度（伸展或缩小图像）。
                height	可选。要使用的图像的高度（伸展或缩小图像）。
                //在画布上定位图像：
                drawImage(image, dx, dy) 
                //在画布上定位图像，并规定图像的宽度和高度：
                drawImage(image, dx, dy, dw, dh) 
                //剪切图像，并在画布上定位被剪切的部分：
                context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
                */
                console.log(canWidth * 4, canHeight * 4);
                cut.drawImage(img, marginLeft * 5.4, marginTop * 5.4, 600, 400, 0, 0, canWidth * 4, canHeight *
                    4); //通过缩放增加截取图片的清晰度
            };
        },
        width: {},
        methods: {
            close() { //关闭监听
                this.$emit('close');
            },
            onmousedown(event) { //鼠标按下事件
                this.init(0)
                this.clickStart = true
            },
            onmouseup(event) { //鼠标抬起
                this.clickStart = false
                if (this.marginLeft + this.figure > this.canLeft && this.canLeft > this.marginLeft - 5) {
                    this.succeed = true
                    setTimeout(() => {
                        this.init(0)
                        this.succeed = false
                        this.$emit('succeed');
                    }, 2000)
                } else {
                    this.bgColor = '#FF5B57'
                    setTimeout(() => {
                        this.init(0)
                        this.bgColor = '#3FC0FC'
                        this.$emit('fail')
                    }, 1000)
                }
            },
            onmousemove(event) { //鼠标移动事件
                if (this.clickStart) {
                    const {
                        slidingBg,
                        dragWidth,
                        totalWidth
                    } = this
                    const value = event.x - (slidingBg.x + dragWidth / 2) //移动的值
                    //限制移动范围
                    if (value > 0 && value < totalWidth - dragWidth) {
                        this.init(value)
                    }
                }
            },
            init(value) {
                this.slidingX = value
                this.dragBgWidth = value + this.dragWidth / 2
                //处理滑块超出问题
                if (value > (this.totalWidth - this.dragWidth) / 2) {
                    this.canLeft = value - 15
                } else {
                    this.canLeft = value
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .slide-bg {
        color: #3FC0FC;
        height: 45px;
        background-color: #DBF1FF;
    }

    .slide-bg-tier {
        height: 45px;
        position: relative;
        z-index: 10;
        border-radius: 30px 0 0 30px;
        top: -45px
    }

    .slide-reight {
        position: relative;
        height: 45px;
        width: 100%;
        top: -90px;
    }

    .circle-bg {
        height: 45px;
        background-color: #fff;
        position: relative;
        border-radius: 100px;
        z-index: 10;
    }

    .circle-bg-text {
        height: 100%;
        font-size: 24px;
        color: #3FC0FC;
        user-select: none
    }
</style>