cocos creator 模拟H5 生成图片验证码

之前写了一个滑块验证的控件，不成想需求方又改了，改成图片验证码验证了，无奈又写了一个图片验证的，主要用到cocos creator 的绘图接口(cc.Graphics)，主要包括三大内容：1、绘制干扰线；2，绘制干扰点，3，检测是否验证成功。具体代码如下，有需要的同学自行拷贝。

/**

 * 图片验证码控件

 */

//曲线样式 style1 二阶  style2 三阶 style3  直线

export enum CurveStyle{

    STYLE1 = "style1",//样式一 

    STYLE2 = "style2",//样式二

    STYLE3 = "style3",//样式三

}

const {ccclass, property} = cc._decorator;

@ccclass

export default class VerifyCode extends cc.Component {

    @property

    WIDTH:number = 0;

    @property

    HEIGHT:number = 0;

    private labelW:number = 0;

    private labelH:number = 0;

    private deltaW:number = 6;

    private code:string = "";//生成的验证码

    private ctx:cc.Graphics = null;

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        this.node.width = this.WIDTH;

        this.node.height = this.HEIGHT;

        // this.draw();

    }

    onEnable(){

        this.node.on(cc.Node.EventType.TOUCH_START,this.draw,this);

    }

    onDisable(){

        this.node.off(cc.Node.EventType.TOUCH_START,this.draw,this);

    }

    start () {

    }

    // 随机颜色函数

    private getColor():cc.Color {

        let r:number = Math.floor(Math.random() * 256);

        let g:number = Math.floor(Math.random() * 256);

        let b:number = Math.floor(Math.random() * 256);

        let a:number = Math.floor(Math.random() * 256);

        return cc.color(r,g,b,a);

    }

    // 随机颜色函数

    private getLineColor():cc.Color {

        let r:number = Math.floor(Math.random() * 40+20);

        let g:number = Math.floor(Math.random() * 40+20);

        let b:number = Math.floor(Math.random() * 40+20);

        let a:number = Math.floor(Math.random() * 20 + 60);

        return cc.color(r,g,b,a);

    }

    private draw() {

        this.clear();

        this.ctx = this.getComponent(cc.Graphics);

        this.ctx.clear();

        this.ctx.rect(-this.WIDTH/2,-this.HEIGHT/2,this.WIDTH,this.HEIGHT);

        this.ctx.fillColor = cc.color(242,242,242,255);

        this.ctx.fill();

        let aCode:Array<string> = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

        //验证码一般由4个字符组成

        for(let i:number = 0;i<4;i++){

            let node:cc.Node = new cc.Node();

            node.addComponent(cc.Label);

            this.node.addChild(node);

            let index:number = Math.floor(Math.random() * aCode.length);//随机索引值

            let txt:string = aCode[index];

            node.color = this.getColor();

            node.getComponent(cc.Label).useSystemFont = true;

            node.getComponent(cc.Label).fontSize = 22;

            node.getComponent(cc.Label).lineHeight = 22;

            node.getComponent(cc.Label).fontFamily = "微软雅黑";

            node.getComponent(cc.Label).enableBold = true;

            node.getComponent(cc.Label).string = txt;

            (<any>node.getComponent(cc.Label))._forceUpdateRenderData();

            let deg = 45 * Math.random();//0-45度随机旋转

            node.angle = -deg;

            this.code = this.code+txt;

            this.labelW = node.getComponent(cc.Label).node.width;

            this.labelH = node.getComponent(cc.Label).node.height;

            node.setContentSize(cc.size(this.labelW,this.labelH));

            let startX:number = (this.node.width - 3 * this.deltaW - this.labelW * 4)/2 - this.node.width/2;

            node.x = startX + i * (this.labelW + this.deltaW) + this.labelW/2;

            let posYrandom:number = Math.random();

            let posOffsetY:number = (posYrandom > 0.5) ? 4 * Math.random() : -4 * Math.random();

            node.y = (this.node.height - this.labelH)/2 - 2 + posOffsetY;

        }

        //随机绘制曲线

        this.drawCurveByStyle(CurveStyle.STYLE1);

        this.drawNoisePoint();        

    }

    private clear():void{

        this.code = "";

        this.node.removeAllChildren();

    }

    //获取生成的验证码

    public getCode():string{

        return this.code;

    }

    //检测是否验证通过

    public checkCode(inCode:string,callback:Function):void{

        if(inCode == ""){

            if(callback){

                callback({flag:false,tips:"请输入验证码"});

            }

            return;

        }

 

        if(inCode != this.code){

            if(callback){

                callback({flag:false,tips:"验证码不正确"});

            }

            return;

        }

        if(callback){

            callback({flag:true,tips:"验证码成功"});

        }

        return;

    }

    //通过样式style绘制干扰线

    private drawCurveByStyle(style:string):void{

        if(style == CurveStyle.STYLE1){

            this.ctx.strokeColor = this.getLineColor();

            this.ctx.moveTo(-this.WIDTH/2,Math.random() * this.HEIGHT-this.HEIGHT/2);

            this.ctx.quadraticCurveTo(Math.random() * this.WIDTH/2-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2,this.WIDTH/2,this.HEIGHT*Math.random()-this.HEIGHT/2);

            this.ctx.stroke();

            this.ctx.moveTo(-this.WIDTH/2,Math.random() * this.HEIGHT-this.HEIGHT/2);

            this.ctx.quadraticCurveTo(Math.random() * this.WIDTH/2-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2,this.WIDTH/2,this.HEIGHT*Math.random()-this.HEIGHT/2);

            this.ctx.stroke();

            this.ctx.moveTo(-this.WIDTH/2,Math.random() * this.HEIGHT-this.HEIGHT/2);

            this.ctx.quadraticCurveTo(Math.random() * this.WIDTH/2-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2,this.WIDTH/2,this.HEIGHT*Math.random()-this.HEIGHT/2);

            this.ctx.stroke();

            this.ctx.moveTo(-this.WIDTH/2,Math.random() * this.HEIGHT-this.HEIGHT/2);

            this.ctx.quadraticCurveTo(Math.random() * this.WIDTH/2-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2,this.WIDTH/2,this.HEIGHT*Math.random()-this.HEIGHT/2);

            this.ctx.stroke();

        }else if(style == CurveStyle.STYLE2){

            this.ctx.strokeColor= this.getColor();//随机线条颜色

            this.ctx.moveTo(-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2);

            this.ctx.bezierCurveTo(Math.random() * this.WIDTH/2-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2,Math.random() * this.WIDTH/2,Math.random() * this.HEIGHT/2,this.WIDTH/2,this.HEIGHT * Math.random()-this.HEIGHT/2);

            this.ctx.stroke();

 

            this.ctx.moveTo(-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2);

            this.ctx.bezierCurveTo(Math.random() * this.WIDTH/2-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2,Math.random() * this.WIDTH/2,Math.random() * this.HEIGHT/2,this.WIDTH/2,this.HEIGHT * Math.random()-this.HEIGHT/2);

            this.ctx.stroke();

 

            this.ctx.moveTo(-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2);

            this.ctx.bezierCurveTo(Math.random() * this.WIDTH/2-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2,Math.random() * this.WIDTH/2,Math.random() * this.HEIGHT/2,this.WIDTH/2,this.HEIGHT * Math.random()-this.HEIGHT/2);

            this.ctx.stroke();

 

            this.ctx.moveTo(-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2);

            this.ctx.bezierCurveTo(Math.random() * this.WIDTH/2-this.WIDTH/2,Math.random() * this.HEIGHT/2-this.HEIGHT/2,Math.random() * this.WIDTH/2,Math.random() * this.HEIGHT/2,this.WIDTH/2,this.HEIGHT * Math.random()-this.HEIGHT/2);

            this.ctx.stroke();

        }else{

            for (var i = 0; i < 8; i++) {

                this.ctx.strokeColor= this.getColor();

                this.ctx.moveTo(0, Math.random() * this.HEIGHT);

                this.ctx.lineTo(Math.random() * this.WIDTH, Math.random() * this.HEIGHT);

                this.ctx.strokeColor= this.getColor();

                this.ctx.stroke();

            }

        }

    }

    //绘制干扰点

    private drawNoisePoint():void{

        let points:number = 30;

         for (let i:number = 0; i < points; i++) {

            let x:number = Math.random() * this.WIDTH - this.WIDTH/2;

            let y:number = Math.random() * this.HEIGHT - this.HEIGHT/2;

            this.ctx.strokeColor = this.getColor();

            this.ctx.moveTo(x, y);

            this.ctx.lineTo(x + 1, y + 1);

            this.ctx.stroke();

        }

    }

    //刷新验证码

    public refreshCode():void{

        this.draw();

    }

    // update (dt) {}

}

截图如下：