刮刮卡功能实现封装

Posted zdf-xue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了刮刮卡功能实现封装相关的知识,希望对你有一定的参考价值。

  lz项目里会经常用到刮刮卡这个小功能,其实就是利用canvas清除图层去实现;之前在网上看过一些封装,感觉有些封装的还是相对比较复杂,所以就把他封装成了一个相对简单点可复用的组件;

  思路很简单,就不再一一赘述;lz直接粘贴个人的代码;

/**
 * @param {object} config
 * @param {string} canvasId 要进行操作的图层
 * @param { nunber } wd,ht  绘图的宽高
 * @param { string } imgurl 刮卡图层
 * @param { number } clearRange 刮多少下停止
 * @param { number } radius 刮开圆的半径
 * @param { function } Start touchStart 事件回调
 * @param { function } Move touchMove 事件回调
 * @param { function } End touchEnd 事件回调
 * @param { boolean } ifend 判断是否要结束监听事件
 * 
 */
export class Scratch {
    constructor(config) {
        this.config = config;
        let { clearRange, canvasId, radius } = config;
        this.moveNum = 0;
        this.clearRange = clearRange || 2;
        this.canvasId = canvasId;
        this.radius = radius || 25;
        this.canvas = $(this.canvasId);
        this.ifend = false;
        this.init();
    }
    init() {
        this.renderAct();
        this.bindEvent();
    }
    bindEvent() {
        this.touchStart();
        this.touchMove();
        this.touchEnd();
    }
    //初始化绘画图层
    renderAct() {
        let image = new Image();
        let { wd, ht, imgurl } = this.config;
        image.onload = () => {
            [this.width, this.height] = [wd / 2, ht / 2];
            let canvas = $(this.canvasId)[0];
            canvas.width = this.width;
            canvas.height = this.height;
            if (canvas.getContext) {
                this.ctx = canvas.getContext(‘2d‘);
                this.ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, this.width, this.height);
            }
        };
        image.src = imgurl;
    }
    /**
     * 取消事件,以及回调
     */
    offFn() {
        this.ifend = true;
        $(this.canvasId).off(‘touchstart‘);
        $(this.canvasId).off(‘touchmove‘);
        $(this.canvasId).off(‘touchend‘);
    }
    /**
     * touchStart事件
     */
    touchStart() {
        $(document).on(‘touchstart‘, this.canvasId, () => {
            if (this.ifend) return;
            this.offset = this.canvas.offset();
            if (typeof this.config.Start === ‘function‘) {
                this.config.Start();
            }
        });
    }
    /**
     * touchMove事件
     */
    touchMove() {
        $(document).on(‘touchmove‘, this.canvasId, event => {
            if (this.ifend) return;
            this.rx = event.touches[0].pageX - this.offset.left;
            this.ry = event.touches[0].pageY - this.offset.top;
            this.ctx.beginPath();
            this.ctx.globalCompositeOperation = ‘destination-out‘;
            this.ctx.arc(this.rx, this.ry, this.radius, 0, 2 * Math.PI);
            this.ctx.fill();
            this.moveNum++;
            if (typeof this.config.Move === ‘function‘) {
                this.config.Move();
            }
        });
    }
    /**
     * touchEnd事件
     */
    touchEnd() {
        $(document).on(‘touchend‘, this.canvasId, () => {
            if (this.ifend) return;
            if (this.moveNum > this.clearRange) {
                // this.ctx.clearRect(0, 0, this.width, this.height);
                if (typeof this.config.End === ‘function‘) {
                    this.config.End();
                    this.moveNum = 0;
                }
            }
            $(this.canvasId).off(‘touchstart‘);
            $(this.canvasId).off(‘touchmove‘);
            $(this.canvasId).off(‘touchend‘);
        });
    }
}

  使用如下:

<canvas id="ActCover"></canvas>
<script>
    new Scratch({
        canvasId: #ActCover,
        wd: 640,
        ht: 360,
        imgurl: `${Gdata.assetPath}/private/T/T042/img/T042_area_gray.png`,
        Move(){

        },        
        Start() {
                
        },
        End() {
               
        }
    });
</script>                        

  在日常项目中,我们一定有一个态度就是能提炼出来的东西一定思考怎样提炼出来,只有多思考才能把代码越写越好;lz也在努力中。。。

  如有不妥,请大佬指正;

  

以上是关于刮刮卡功能实现封装的主要内容,如果未能解决你的问题,请参考以下文章

vue 刮刮乐功能实现

js实现刮刮卡抽奖

VsCode 代码片段-提升研发效率

canvas实现刮刮卡效果

canvas刮刮效果实现

Android项目刮刮奖详解