2019獨角獸企業(yè)重金招聘Python工程師標準>>>

寫在前面

h5頁面要求做出有客戶端的切換效果

有和知乎差不多的貝塞爾側拉，想著之后可以偷懶套用，于是就寫了個貝塞爾的原型對象。

上代碼

// 生成貝塞爾下拉 // 使用原型對象 function Bezier(options) {//默認參數(shù)this.default = $.extend({direction:'',box:'body',fillStyle:'#A0B7FF',// 默認控制點point:{x:0,y:0,opacity:0,}},options);// 實際參數(shù)this.args = this.default;// canvas dom對象this.canvas = '';//執(zhí)行消失標志(保存消失句柄)this.hideFlag = '';this.delayFlag = ''; }Bezier.prototype = {//創(chuàng)建貝塞爾createBezier:function(options){// 清除繼續(xù)隱藏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()},//填充HTMLfillHtml: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();} }

?

轉載于:https://my.oschina.net/u/2367690/blog/1832859

總結

以上是生活随笔為你收集整理的贝塞尔的原型对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。