waterbubble.min.js

/**
 * 水球图 wataerbubble
 * @author fiona23 (fiona_fanmy@163.com)
 * @version 1.1
 * Because of the bug of chrome V 46.0.2490.86, I have to render the text after animation, so guilty.
 * I have reported this issue to google, hoping it would be sovled in the new version.
 */
!function(t){function i(t,i){this.refresh(t,i)}t.fn.waterbubble=function(e){var a=t.extend({radius:100,lineWidth:void 0,data:.5,waterColor:"rgba(25, 139, 201, 1)",textColor:"rgba(06, 85, 128, 0.8)",font:"",wave:!0,txt:void 0,animation:!0},e),n=this[0];a.lineWidth=a.lineWidth?a.lineWidth:a.radius/24;new i(n,a);return this},i.prototype={refresh:function(t,i){t.getContext("2d").clearRect(0,0,t.width,t.height),this._init(t,i)},_init:function(t,i){var e=i.radius,a=i.lineWidth;t.width=2*e+a,t.height=2*e+a,this._buildShape(t,i)},_buildShape:function(t,i){var e=t.getContext("2d"),a=2*i.lineWidth,n=i.radius-a,r=i.data,o=i.lineWidth,l=i.waterColor,u=i.textColor,d=i.font,h=i.wave,s=i.radius+o/2,f=i.radius+o/2;e.beginPath(),e.arc(s,f,i.radius,0,2*Math.PI),e.lineWidth=o,e.strokeStyle=l,e.stroke(),"string"==typeof i.txt&&this._drawText(e,u,d,i.radius,r,s,f,i.txt),i.animation?this._animate(e,n,r,o,l,s,f,h,i.txt,u,d):this._fillWater(e,n,r,o,l,s,f,h)},_fillWater:function(t,i,e,a,n,r,o,l){t.beginPath(),t.globalCompositeOperation="destination-over";var u,d=2*i*(1-e)+(o-i),h=r-Math.sqrt(i*i-(o-d)*(o-d)),s=r,f=d,v=2*s-h,c=d;u=e>.9||.1>e||!l?d:d-(s-h)/4,t.beginPath(),t.moveTo(h,d),t.quadraticCurveTo((h+s)/2,u,s,f),t.quadraticCurveTo((s+v)/2,2*d-u,v,c);var w=-Math.asin((r-d)/i),m=Math.PI-w;t.arc(r,o,i,w,m,!1),t.fillStyle=n,t.fill()},_drawText:function(t,i,e,a,n,r,o,l){t.globalCompositeOperation="source-over";var u=e?e.replace(/\D+/g,""):.4*a;t.font=e?e:"bold "+u+"px Microsoft Yahei",l=l.length?l:100*n+"%";var d=o+u/2,h=r-t.measureText(l).width/2;t.fillStyle=i,t.fillText(l,h,d)},_animate:function(t,i,e,a,n,r,o,l,u,d,h){var s={value:0},f=window.requestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(t){setTimeout(t,16)},v=this,c=function(){s.value<e?(s.value+=(e+.05-s.value)/15,v._runing=!0):v._runing=!1},w=function(){v._fillWater(t,i,s.value,a,n,r,o,l),c(),v._runing&&f(w)};w(t,i,s,a,n,r,o,l,u)}}}(jQuery);