waterball - npm Package Compare versions

Comparing version 0.0.2 to 1.0.2

dist/water-ball.js

@@ -33,6 +33,6 @@ ;(function(root, factory) {
     window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame']
-        || window[vp + 'CancelRequestAnimationFrame'];
+      || window[vp + 'CancelRequestAnimationFrame'];
   }
   if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
-        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+    || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
     var lastTime = 0;
@@ -66,3 +66,4 @@ window.requestAnimationFrame = function (callback) {
     fontSize: '25px microsoft yahei',
-    textAlign: 'center'
+    textAlign: 'center',
+    ext: '%'
 
@@ -108,2 +109,29 @@ };
   },
+  // 颜色取反
+  _inverse: function (rgb) {
+    var rgbstr = rgb.replace(/(?:rgb\()/, '');
+    rgbstr = rgbstr.replace(/\)/, '');
+    var arr = rgbstr.split(',');
+    for (var i = 0; i < arr.length; i++) {
+      var val = arr[i];
+      arr.splice(i, 1, 255 - val);
+    }
+    return 'rgb(' + arr.toString() + ')';
+  },
+  // hex 转 rgb
+  _HexToRGB: function (hex) {
+    hex = hex.match(/(?:#([a-f0-9]{3,8}))/i);
+    if (hex) {
+      hex = hex[1];
+      if (hex.length === 3) {
+        hex += 'fff';
+      }
+      var rgb = [];
+      for (var i = 0, l = hex.length; i < l; i += 2) {
+        rgb.push(parseInt(hex.substr(i, 2), 16) / (i === 6 ? 255 : 1));
+      }
+      return 'rgb(' + rgb.toString() + ')';
+    }
+    return hex;
+  },
   _ceil: function (value) {
@@ -134,3 +162,3 @@ return Math.ceil(value);
   },
-  _createGradient: function (ctx, color){
+  _createGradient: function (ctx, color) {
     var gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
@@ -151,3 +179,3 @@ if (typeof color === 'string') {
   _drawArc: function (oc, value) {
-    this.eAngle ++;
+    this.eAngle++;
     var ctx = oc.getContext('2d');
@@ -157,3 +185,3 @@ ctx.clearRect(0, 0, this.opts.d, this.opts.d);
 
-        // 外层的球
+    // 外层的球
     ctx.lineWidth = this.opts.borderWidth;
@@ -171,9 +199,9 @@
 
-        // 绘制波浪
+    // 绘制波浪
     var points = [];
     ctx.beginPath();
-        //在整个轴长上取点
+    //在整个轴长上取点
     this.xOffset += this.opts.speed;
-    for(var x = 0; x < 0 + this.opts.d; x += 20 / this.opts.d){
-            //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
+    for (var x = 0; x < 0 + this.opts.d; x += 20 / this.opts.d) {
+      //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
       var y = -Math.sin((0 + x) * this.opts.waveWidth + this.xOffset);
@@ -183,3 +211,3 @@ points.push([x, value + y * this.opts.waveHeight]);
     }
-        //封闭路径
+    //封闭路径
     ctx.lineTo(this.opts.d, this.opts.d);
@@ -191,3 +219,3 @@ ctx.lineTo(0, this.opts.d);
 
-        // 绘制小水珠
+    // 绘制小水珠
     ctx.beginPath();
@@ -204,16 +232,18 @@ ctx.strokeStyle = this.opts.fill;
 
-        // 绘制文本
+    // 绘制文本
+    var fColor = this._HexToRGB(this.opts.color);
+    if (this.opts.value > 55) {
+      fColor = this._inverse(fColor);
+    }
     ctx.globalAlpha = 1;
     ctx.font = this.opts.fontSize;
-    ctx.fillStyle = this.opts.color;
+    ctx.fillStyle = fColor;
     ctx.textAlign = this.opts.textAlign;
-    ctx.fillText(this._ceil(this.opts.value) + '%', this.opts.r, this.opts.r);
+    ctx.fillText(this._ceil(this.opts.value) + this.opts.ext, this.opts.r, this.opts.r);
 
 
     var self = this;
-    this.timer = window.requestAnimationFrame(function (){
+    this.timer = window.requestAnimationFrame(function () {
       self._drawArc(self.oc, self.reverse);
     });
-
-
   }
@@ -220,0 +250,0 @@ });

dist/water-ball.min.js

@@ -1,1 +0,1 @@
-"use strict";function WaterBall(t,e){this.elem="object"==typeof t?t:this._getElement(t),this.opts=e,this["default"]={r:100,fill:"#fff",waveStyle:["#5bf6a1","#2bdb72"],waveWidth:.02,waveHeight:8,speed:.1,borderColor:"#2bdc76",borderWidth:2,value:10,color:"#fff",fontSize:"25px microsoft yahei",textAlign:"center"},this.timer=null,this.oc=null,this.xOffset=0,this.eAngle=0}Date.now||(Date.now=function(){return(new Date).getTime()}),function(){for(var t=["webkit","moz"],e=0;e<t.length&&!window.requestAnimationFrame;++e){var i=t[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var s=0;window.requestAnimationFrame=function(t){var e=Date.now(),i=Math.max(s+16,e);return setTimeout(function(){t(s=i)},i-e)},window.cancelAnimationFrame=clearTimeout}}(),Object.assign(WaterBall.prototype,{render:function(){return this.opts=Object.assign({},this["default"],this.opts),this.opts.d=2*this.opts.r,this.maxY=this.opts.d,this.yOffset=this.opts.r,this.oc=this._createCanvas(),this._update(this._ceil(this.opts.value)),this},setOptions:function(t,e){if("object"==typeof t)for(var i in t)this.opts[i]=t[i];else this.opts[t]=e>100?100:e;this._update()},getCanvas:function(){return this.oc},destroy:function(){cancelAnimationFrame(this.timer),document.querySelector("body").removeChild(this.elem)},_ceil:function(t){return Math.ceil(t)},_reverse:function(){return this.opts.d-this.opts.d*this.opts.value/100},_getElement:function(t){return document.getElementById(t)},_update:function(){cancelAnimationFrame(this.timer),this.reverse=this._reverse(),this._drawArc(this.oc,this.reverse)},_createCanvas:function(){var t=document.createElement("canvas");t.setAttribute("width",this.opts.d),t.setAttribute("height",this.opts.d);var e=this.elem.parentNode;return e.removeChild(this.elem),e.appendChild(t),this.elem=t,t},_createGradient:function(t,e){var i=t.createRadialGradient(75,50,5,90,60,100);if("string"==typeof e&&i.addColorStop(0,e),"object"==typeof e&&e instanceof Array)for(var s=e.length,o=0;o<s;o++){var n=o*(1/(s-1));i.addColorStop(n,e[o])}return i},_drawArc:function(t,e){this.eAngle++;var i=t.getContext("2d");i.clearRect(0,0,this.opts.d,this.opts.d),i.lineWidth=this.opts.borderWidth,i.beginPath(),i.strokeStyle=this.opts.borderColor,i.fillStyle=this._createGradient(i,this.opts.fill),i.arc(this.opts.r,this.opts.r,this.opts.r-this.opts.borderWidth,0,2*Math.PI),i.stroke(),i.beginPath(),i.arc(this.opts.r,this.opts.r,this.opts.r-this.opts.borderWidth-5,0,2*Math.PI),i.fill(),i.clip();var s=[];i.beginPath(),this.xOffset+=this.opts.speed;for(var o=0;o<0+this.opts.d;o+=20/this.opts.d){var n=-Math.sin((0+o)*this.opts.waveWidth+this.xOffset);s.push([o,e+n*this.opts.waveHeight]),i.lineTo(o,e+0+n*this.opts.waveHeight)}i.lineTo(this.opts.d,this.opts.d),i.lineTo(0,this.opts.d),i.lineTo(s[0][0],s[0][1]),i.fillStyle=this._createGradient(i,this.opts.waveStyle),i.fill(),i.beginPath(),i.strokeStyle=this.opts.fill,i.globalAlpha=.3;var r=-Math.sin(.1*this.eAngle);this.maxY<-50&&(this.maxY=this.opts.d),i.arc(this.yOffset+5*r,this.maxY--,8,0,2*Math.PI),i.stroke(),i.globalAlpha=1,i.font=this.opts.fontSize,i.fillStyle=this.opts.color,i.textAlign=this.opts.textAlign,i.fillText(this._ceil(this.opts.value)+"%",this.opts.r,this.opts.r);var a=this;this.timer=window.requestAnimationFrame(function(){a._drawArc(a.oc,a.reverse)})}});
+"use strict";function WaterBall(t,e){this.elem="object"==typeof t?t:this._getElement(t),this.opts=e,this["default"]={r:100,fill:"#fff",waveStyle:["#5bf6a1","#2bdb72"],waveWidth:.02,waveHeight:8,speed:.1,borderColor:"#2bdc76",borderWidth:2,value:10,color:"#fff",fontSize:"25px microsoft yahei",textAlign:"center",ext:"%"},this.timer=null,this.oc=null,this.xOffset=0,this.eAngle=0}Date.now||(Date.now=function(){return(new Date).getTime()}),function(){for(var t=["webkit","moz"],e=0;e<t.length&&!window.requestAnimationFrame;++e){var i=t[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var s=0;window.requestAnimationFrame=function(t){var e=Date.now(),i=Math.max(s+16,e);return setTimeout(function(){t(s=i)},i-e)},window.cancelAnimationFrame=clearTimeout}}(),Object.assign(WaterBall.prototype,{render:function(){return this.opts=Object.assign({},this["default"],this.opts),this.opts.d=2*this.opts.r,this.maxY=this.opts.d,this.yOffset=this.opts.r,this.oc=this._createCanvas(),this._update(this._ceil(this.opts.value)),this},setOptions:function(t,e){if("object"==typeof t)for(var i in t)this.opts[i]=t[i];else this.opts[t]=e>100?100:e;this._update()},getCanvas:function(){return this.oc},destroy:function(){cancelAnimationFrame(this.timer),document.querySelector("body").removeChild(this.elem)},_inverse:function(t){var e=t.replace(/(?:rgb\()/,"");e=e.replace(/\)/,"");for(var i=e.split(","),s=0;s<i.length;s++){var o=i[s];i.splice(s,1,255-o)}return"rgb("+i.toString()+")"},_HexToRGB:function(t){if(t=t.match(/(?:#([a-f0-9]{3,8}))/i)){t=t[1],3===t.length&&(t+="fff");for(var e=[],i=0,s=t.length;i<s;i+=2)e.push(parseInt(t.substr(i,2),16)/(6===i?255:1));return"rgb("+e.toString()+")"}return t},_ceil:function(t){return Math.ceil(t)},_reverse:function(){return this.opts.d-this.opts.d*this.opts.value/100},_getElement:function(t){return document.getElementById(t)},_update:function(){cancelAnimationFrame(this.timer),this.reverse=this._reverse(),this._drawArc(this.oc,this.reverse)},_createCanvas:function(){var t=document.createElement("canvas");t.setAttribute("width",this.opts.d),t.setAttribute("height",this.opts.d);var e=this.elem.parentNode;return e.removeChild(this.elem),e.appendChild(t),this.elem=t,t},_createGradient:function(t,e){var i=t.createRadialGradient(75,50,5,90,60,100);if("string"==typeof e&&i.addColorStop(0,e),"object"==typeof e&&e instanceof Array)for(var s=e.length,o=0;o<s;o++){var r=o*(1/(s-1));i.addColorStop(r,e[o])}return i},_drawArc:function(t,e){this.eAngle++;var i=t.getContext("2d");i.clearRect(0,0,this.opts.d,this.opts.d),i.lineWidth=this.opts.borderWidth,i.beginPath(),i.strokeStyle=this.opts.borderColor,i.fillStyle=this._createGradient(i,this.opts.fill),i.arc(this.opts.r,this.opts.r,this.opts.r-this.opts.borderWidth,0,2*Math.PI),i.stroke(),i.beginPath(),i.arc(this.opts.r,this.opts.r,this.opts.r-this.opts.borderWidth-5,0,2*Math.PI),i.fill(),i.clip();var s=[];i.beginPath(),this.xOffset+=this.opts.speed;for(var o=0;o<0+this.opts.d;o+=20/this.opts.d){var r=-Math.sin((0+o)*this.opts.waveWidth+this.xOffset);s.push([o,e+r*this.opts.waveHeight]),i.lineTo(o,e+0+r*this.opts.waveHeight)}i.lineTo(this.opts.d,this.opts.d),i.lineTo(0,this.opts.d),i.lineTo(s[0][0],s[0][1]),i.fillStyle=this._createGradient(i,this.opts.waveStyle),i.fill(),i.beginPath(),i.strokeStyle=this.opts.fill,i.globalAlpha=.3;var n=-Math.sin(.1*this.eAngle);this.maxY<-50&&(this.maxY=this.opts.d),i.arc(this.yOffset+5*n,this.maxY--,8,0,2*Math.PI),i.stroke();var a=this._HexToRGB(this.opts.color);this.opts.value>55&&(a=this._inverse(a)),i.globalAlpha=1,i.font=this.opts.fontSize,i.fillStyle=a,i.textAlign=this.opts.textAlign,i.fillText(this._ceil(this.opts.value)+this.opts.ext,this.opts.r,this.opts.r);var h=this;this.timer=window.requestAnimationFrame(function(){h._drawArc(h.oc,h.reverse)})}});

gulpfile.js

@@ -20,3 +20,2 @@ /**
     })
-        .pipe(gulp.dest('src'));
 });
@@ -23,0 +22,0 @@ gulp.task('lint:test', () => {

package.json

 {
     "name": "waterball",
     "description": "A Canvas Graph library",
-    "version": "0.0.2",
+    "version": "1.0.2",
     "scripts": {
@@ -6,0 +6,0 @@ "test": "mocha",

src/water-ball.js

@@ -24,6 +24,6 @@ /**
     window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame']
-        || window[vp + 'CancelRequestAnimationFrame'];
+      || window[vp + 'CancelRequestAnimationFrame'];
   }
   if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
-        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+    || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
     var lastTime = 0;
@@ -57,3 +57,4 @@ window.requestAnimationFrame = function (callback) {
     fontSize: '25px microsoft yahei',
-    textAlign: 'center'
+    textAlign: 'center',
+    ext: '%'
 
@@ -99,2 +100,29 @@ };
   },
+  // 颜色取反
+  _inverse: function (rgb) {
+    var rgbstr = rgb.replace(/(?:rgb\()/, '');
+    rgbstr = rgbstr.replace(/\)/, '');
+    var arr = rgbstr.split(',');
+    for (var i = 0; i < arr.length; i++) {
+      var val = arr[i];
+      arr.splice(i, 1, 255 - val);
+    }
+    return 'rgb(' + arr.toString() + ')';
+  },
+  // hex 转 rgb
+  _HexToRGB: function (hex) {
+    hex = hex.match(/(?:#([a-f0-9]{3,8}))/i);
+    if (hex) {
+      hex = hex[1];
+      if (hex.length === 3) {
+        hex += 'fff';
+      }
+      var rgb = [];
+      for (var i = 0, l = hex.length; i < l; i += 2) {
+        rgb.push(parseInt(hex.substr(i, 2), 16) / (i === 6 ? 255 : 1));
+      }
+      return 'rgb(' + rgb.toString() + ')';
+    }
+    return hex;
+  },
   _ceil: function (value) {
@@ -125,3 +153,3 @@ return Math.ceil(value);
   },
-  _createGradient: function (ctx, color){
+  _createGradient: function (ctx, color) {
     var gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
@@ -142,3 +170,3 @@ if (typeof color === 'string') {
   _drawArc: function (oc, value) {
-    this.eAngle ++;
+    this.eAngle++;
     var ctx = oc.getContext('2d');
@@ -148,3 +176,3 @@ ctx.clearRect(0, 0, this.opts.d, this.opts.d);
 
-        // 外层的球
+    // 外层的球
     ctx.lineWidth = this.opts.borderWidth;
@@ -162,9 +190,9 @@
 
-        // 绘制波浪
+    // 绘制波浪
     var points = [];
     ctx.beginPath();
-        //在整个轴长上取点
+    //在整个轴长上取点
     this.xOffset += this.opts.speed;
-    for(var x = 0; x < 0 + this.opts.d; x += 20 / this.opts.d){
-            //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
+    for (var x = 0; x < 0 + this.opts.d; x += 20 / this.opts.d) {
+      //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
       var y = -Math.sin((0 + x) * this.opts.waveWidth + this.xOffset);
@@ -174,3 +202,3 @@ points.push([x, value + y * this.opts.waveHeight]);
     }
-        //封闭路径
+    //封闭路径
     ctx.lineTo(this.opts.d, this.opts.d);
@@ -182,3 +210,3 @@ ctx.lineTo(0, this.opts.d);
 
-        // 绘制小水珠
+    // 绘制小水珠
     ctx.beginPath();
@@ -195,17 +223,19 @@ ctx.strokeStyle = this.opts.fill;
 
-        // 绘制文本
+    // 绘制文本
+    var fColor = this._HexToRGB(this.opts.color);
+    if (this.opts.value > 55) {
+      fColor = this._inverse(fColor);
+    }
     ctx.globalAlpha = 1;
     ctx.font = this.opts.fontSize;
-    ctx.fillStyle = this.opts.color;
+    ctx.fillStyle = fColor;
     ctx.textAlign = this.opts.textAlign;
-    ctx.fillText(this._ceil(this.opts.value) + '%', this.opts.r, this.opts.r);
+    ctx.fillText(this._ceil(this.opts.value) + this.opts.ext, this.opts.r, this.opts.r);
 
 
     var self = this;
-    this.timer = window.requestAnimationFrame(function (){
+    this.timer = window.requestAnimationFrame(function () {
       self._drawArc(self.oc, self.reverse);
     });
-
-
   }
 });

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

377189

0.56%

Lines of code

486

14.89%

Number of low quality alerts

1

-50%

No dependency changes