贝塞尔的原型对象

写在前面

h5页面要求作出有客户端的切换效果

有和知乎差很少的贝塞尔侧拉，想着以后能够偷懒套用，因而就写了个贝塞尔的原型对象。

上代码

// 生成贝塞尔下拉
// 使用原型对象
function Bezier(options) {
    //默认参数
    this.default = $.extend({
        direction:'',
        box:'body',
        fillStyle:'#A0B7FF',
        // 默认控制点
        point:{
            x:0,
            y:0,
            opacity:0,
        }
    },options);
    // 实际参数
    this.args = this.default;
    // canvas dom对象
    this.canvas = '';
    //执行消失标志(保存消失句柄)
    this.hideFlag = '';
    this.delayFlag = '';
}

Bezier.prototype = {
    //建立贝塞尔
    createBezier:function(options){
        // 清除继续隐藏
        if(this.hideFlag||this.delayFlag){
            clearInterval(this.hideFlag);
            clearTimeout(this.delayFlag);
            this.hideFlag = '';
            this.delayFlag = '';
        }
        
        this.args = $.extend(this.default,options);
        this.fillHtml();
        this.drawCanvas();
        this.delayHide()
    },
    //填充HTML
    fillHtml:function(){
        var _box = $(this.args.box);
        var _bezier = _box.find('#bezier_box');
        var html = '';
        if(_bezier.length === 0){
            _box.append('<div class = "_tab_bezier_box"><canvas width="'+_box.width()+'" height="'+_box.height()+'" id = "bezier_box"></canvas></div>');
            //为了保证定位向外部添加属性
            _box.css('position','relative');
            _bezier = _box.find('#bezier_box');
        }
        this.canvas = document.getElementById('bezier_box');
    },

    //延迟自动消失
    delayHide:function(){
        var that = this;
        var hideCanvas = function(){
        	clearInterval(that.hideFlag);
            that.hideCanvas();
        }
        this.delayFlag = setTimeout(hideCanvas, 500);
    },

    //消失
    //扯平而且淡出
    hideCanvas:function(){
        var that = this;
        clearInterval(this.hideFlag);
        //清除延时
        clearTimeout(this.delayFlag);
        var drawHideCanvas = function(){
            if(that.args.point.x < that.default.point.x/2){
                clearInterval(that.hideFlag)
                return;
            }
            that.args.point.x -= 1;
            that.args.point.opacity -= 0.005;
            that.drawCanvas()
        }
        this.hideFlag = setInterval(drawHideCanvas,10);
    },

    // 画以及填充
    // point{x:0,y:0,opacity:0}
    drawCanvas:function(point){
        if(!this.canvas){
            return;
        }
        var _point = $.extend(this.args.point,point);
        var _box = $(this.args.box);
        var _direction = this.args.direction;
        var canvas = this.canvas;


        _bezier = $(this.args.box).find('#bezier_box');
        _bezier.css('opacity',_point.opacity);

        var _pointX = parseInt(_point.x);
        var _pointY = parseInt(_point.y);
        var _boxWidth = _box.width();
        var _boxHeight = _box.height();
        // 由canvas获取 绘图的上下文
        var ctx = this.canvas.getContext('2d');
       
       
        //开始绘制
        ctx.beginPath();
        //清空画布
        ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
        switch(_direction){
            case 'left':
                // 绘图的基点
                ctx.moveTo(0,0);
                //绘制从前一次到这个点的直线
                ctx.lineTo(_pointX/2,0);
                ctx.quadraticCurveTo(_pointX,_pointY,_pointX/2,_boxHeight)
                // ctx.lineTo(_pointX/2,640)
                ctx.lineTo(0,_boxHeight);
                break;
            case 'right':
                var leftPoint = _boxWidth - _pointX/2;
                // 绘图的基点
                ctx.moveTo(_boxWidth,0);
                //绘制从前一次到这个点的直线
                ctx.lineTo(leftPoint,0);
                ctx.quadraticCurveTo(leftPoint-_pointX/2,_pointY,leftPoint,_boxHeight)
                ctx.lineTo(_boxWidth,_boxHeight);
                break;
            // case 'top':
            //     // 绘图的基点
            //     ctx.moveTo(0,0);
            //     //绘制从前一次到这个点的直线
            //     ctx.lineTo(0,_pointY/2);
            //     // ctx.quadraticCurveTo(_pointX,_pointY,_boxWidth,_pointY/2)
            //     ctx.lineTo(_boxWidth,0);
            //     break;
            default:
                break;
        }
        //结束绘制
        ctx.closePath();
    
        // 进行绘图处理
        ctx.fillStyle = '#C9DAFF';
        // 填充路径
        ctx.fill();
    }
}