貝塞爾的原型對象 原

寫在前面

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();
    }
}