Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

waterball

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

waterball - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

@@ -57,8 +57,8 @@ ;(function(root, factory) {

waveStyle: ['#5bf6a1', '#2bdb72'],
waveWidth: 0.02, //波浪宽度,数越小越宽
waveHeight: 8, //波浪高度,数越大越高
speed: .1, //波浪速度,数越大速度越快
waveWidth: 0.02,
waveHeight: 8,
speed: .1,
borderColor: '#2bdc76',
borderWidth: 2,
value: 10, // 0~100
value: 10,
color: '#fff',

@@ -68,13 +68,7 @@ fontSize: '25px microsoft yahei',

ext: '%'
};
this.timer = null;
this.oc = null;
this.xOffset = 0; //波浪x偏移量
this.eAngle = 0; // 水珠摇摆角度
// this.render();
this.xOffset = 0;
this.eAngle = 0;
}

@@ -92,2 +86,3 @@

},
setOptions: function (key, value) {

@@ -106,5 +101,7 @@ if (typeof key === 'object') {

},
getCanvas: function () {
return this.oc;
},
destroy: function () {

@@ -114,3 +111,3 @@ cancelAnimationFrame(this.timer);

},
// 颜色取反
_inverse: function (rgb) {

@@ -126,3 +123,3 @@ var rgbstr = rgb.replace(/(?:rgb\()/, '');

},
// hex 转 rgb
_HexToRGB: function (hex) {

@@ -143,11 +140,15 @@ hex = hex.match(/(?:#([a-f0-9]{3,8}))/i);

},
_ceil: function (value) {
return Math.ceil(value);
},
_reverse: function () {
return this.opts.d - this.opts.d * this.opts.value / 100;
},
_getElement: function (id) {
return document.getElementById(id);
},
_update: function () {

@@ -170,2 +171,3 @@ this.eAngle = 0;

},
_createGradient: function (ctx, color) {

@@ -186,2 +188,3 @@ var gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);

},
_drawArc: function (oc, value) {

@@ -191,4 +194,3 @@ this.eAngle++;

ctx.clearRect(0, 0, this.opts.d, this.opts.d);
// 外层的球
// ball
ctx.lineWidth = this.opts.borderWidth;

@@ -206,9 +208,7 @@ ctx.save();

// 绘制波浪
// wave
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*振幅宽 + 振幅偏移量)”
var y = -Math.sin((0 + x) * this.opts.waveWidth + this.xOffset);

@@ -218,3 +218,2 @@ points.push([x, value + y * this.opts.waveHeight]);

}
//封闭路径
ctx.lineTo(this.opts.d, this.opts.d);

@@ -226,3 +225,2 @@ ctx.lineTo(0, this.opts.d);

// 绘制小水珠
ctx.beginPath();

@@ -238,5 +236,2 @@ ctx.strokeStyle = this.opts.fill;

// 绘制文本
var fColor = this._HexToRGB(this.opts.color);

@@ -250,6 +245,10 @@ if (this.opts.value > 55) {

ctx.textAlign = this.opts.textAlign;
ctx.fillText(this._ceil(this.opts.value) + this.opts.ext, this.opts.r, this.opts.r);
if (this.opts.format && typeof this.opts.format === 'function') {
var text = this.opts.format(this._ceil(this.opts.value));
ctx.fillText(text, this.opts.r, this.opts.r);
} else {
ctx.fillText(this._ceil(this.opts.value) + this.opts.ext, this.opts.r, this.opts.r);
}
ctx.restore();
var self = this;

@@ -256,0 +255,0 @@ this.timer = window.requestAnimationFrame(function () {

@@ -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",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{if(e>100)return;this.opts[t]=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(){this.eAngle=0,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.save(),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.closePath(),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),i.restore();var h=this;this.timer=window.requestAnimationFrame(function(){h._drawArc(h.oc,h.reverse)})}});
!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.WaterBall=e()}(this,function(){"use strict";function t(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}return 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(t.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{if(e>100)return;this.opts[t]=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(){this.eAngle=0,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.save(),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.closePath(),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);if(this.opts.value>55&&(a=this._inverse(a)),i.globalAlpha=1,i.font=this.opts.fontSize,i.fillStyle=a,i.textAlign=this.opts.textAlign,this.opts.format&&"function"==typeof this.opts.format){var h=this.opts.format(this._ceil(this.opts.value));i.fillText(h,this.opts.r,this.opts.r)}else i.fillText(this._ceil(this.opts.value)+this.opts.ext,this.opts.r,this.opts.r);i.restore();var l=this;this.timer=window.requestAnimationFrame(function(){l._drawArc(l.oc,l.reverse)})}}),t});

@@ -44,3 +44,3 @@ /**

"use strict";
return gulp.src('./src/water-ball.js')
return gulp.src('./dist/*.js')
.pipe($.uglify())

@@ -53,8 +53,6 @@ .pipe($.rename('water-ball.min.js'))

gulp.task('build', ['lint','script','uglify'], () => {
gulp.task('min', ['uglify'], () => {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
})
gulp.task('default', ['clean'], () => {
gulp.start('build');
});
gulp.task('default', ['clean', 'lint', 'script']);
{
"name": "waterball",
"description": "A Canvas Graph library",
"version": "1.0.3",
"version": "1.0.4",
"scripts": {
"test": "mocha",
"package": "gulp build"
"min": "gulp min",
"package": "gulp"
},

@@ -9,0 +10,0 @@ "keywords": [

@@ -1,13 +0,15 @@

# WaterBall
Light cross-platform Graph,Custom Configuration and animation supported
Light cross-platform Graph,Custom Configuration and animation supported
[![NPM](https://nodei.co/npm/waterball.png?compact=true)](https://nodei.co/npm/waterball/)
### Demo
[https://zedwang.github.io/waterball/demo/index.html](https://zedwang.github.io/waterball/demo/index.html)
![](/jdfw.gif)
* The component supported AMD、CMD and standalone model
![](https://github.com/zedwang/waterball/blob/master/jdfw.gif?raw=true)
- The component supported AMD、CMD and standalone model
#### Install with standalone

@@ -17,63 +19,107 @@

<script src='/path/water-ball.min.js'></script>
```
// html
```html
<div id='container'></div>
// js
var wb = new WaterBall('container',{
value:30,
r:100,
color:'#787878',
});
// update
wb.setOptions({value:50})
```
```js
var options = {
value: 30,
r: 100,
color: '#787878'
}
var container = document.getElementById('container')
var wb = new WaterBall(container, options);
// update
wb.setOptions({value:50})
```
#### Install with NPM
```sh
$ npm install waterball
```
This will install waterBall NPM packages.
## Methods
### setOptions(key,value)/setOptions(Object)
* value 0~100
- value 0~100
### destroy()
* destroy instance
- destroy instance
## Options
| Field | Type | Default |
| ------------- |:-------------:| -----:|
| fill | String/Array | `#fff` |
| waveStyle | String/Array | `['#5bf6a1','#2bdb72']`|
| waveWidth | Float | 0.02 |
| waveHeight | Int | 8 |
| speed | Float | .1 |
| borderColor | String | `#2bdc76` |
| borderWidth | Int | 2 |
| value | Float | 0 |
| color | String | `#fff` |
| fontSize | String | `25px microsoft yahei` |
| textAlign | String | center |
| Field | Type | Default | description |
| ----------- | ------------ | ----------------------- | ------------------------------------------------ |
| fill | String/Array | `#fff` | |
| waveStyle | String/Array | `['#5bf6a1','#2bdb72']` | |
| waveWidth | Float | 0.02 | |
| waveHeight | Int | 8 | |
| speed | Float | .1 | |
| borderColor | String | `#2bdc76` | |
| borderWidth | Int | 2 | |
| value | Float | 0 | |
| color | String | `#fff` | |
| fontSize | String | `25px microsoft yahei` | |
| textAlign | String | center | |
| ext | String | `%` | |
| format | Function | null | `format: function(value) { return value + 'kg'}` |
# Support
## FAQ
https://github.com/zedwang/waterball/issues
## Supported browsers
Directives from this repository are automatically tested with the following browsers:
* Chrome (stable and canary channel)
* Firefox
* IE 9 and 10
* Opera
* Safari
- Chrome (stable and canary channel)
- Firefox
- IE 9 and 10
- Opera
- Safari
Modern mobile browsers should work without problems.

@@ -48,8 +48,8 @@ /**

waveStyle: ['#5bf6a1', '#2bdb72'],
waveWidth: 0.02, //波浪宽度,数越小越宽
waveHeight: 8, //波浪高度,数越大越高
speed: .1, //波浪速度,数越大速度越快
waveWidth: 0.02,
waveHeight: 8,
speed: .1,
borderColor: '#2bdc76',
borderWidth: 2,
value: 10, // 0~100
value: 10,
color: '#fff',

@@ -59,13 +59,7 @@ fontSize: '25px microsoft yahei',

ext: '%'
};
this.timer = null;
this.oc = null;
this.xOffset = 0; //波浪x偏移量
this.eAngle = 0; // 水珠摇摆角度
// this.render();
this.xOffset = 0;
this.eAngle = 0;
}

@@ -83,2 +77,3 @@

},
setOptions: function (key, value) {

@@ -97,6 +92,7 @@ if (typeof key === 'object') {

},
getCanvas: function () {
return this.oc;
},
// 君要臣死,臣不得不死
destroy: function () {

@@ -106,3 +102,3 @@ cancelAnimationFrame(this.timer);

},
// 颜色取反
_inverse: function (rgb) {

@@ -118,3 +114,3 @@ var rgbstr = rgb.replace(/(?:rgb\()/, '');

},
// hex 转 rgb
_HexToRGB: function (hex) {

@@ -135,11 +131,15 @@ hex = hex.match(/(?:#([a-f0-9]{3,8}))/i);

},
_ceil: function (value) {
return Math.ceil(value);
},
_reverse: function () {
return this.opts.d - this.opts.d * this.opts.value / 100;
},
_getElement: function (id) {
return document.getElementById(id);
},
_update: function () {

@@ -162,2 +162,3 @@ this.eAngle = 0;

},
_createGradient: function (ctx, color) {

@@ -178,2 +179,3 @@ var gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);

},
_drawArc: function (oc, value) {

@@ -183,4 +185,3 @@ this.eAngle++;

ctx.clearRect(0, 0, this.opts.d, this.opts.d);
// 外层的球
// ball
ctx.lineWidth = this.opts.borderWidth;

@@ -198,9 +199,7 @@ ctx.save();

// 绘制波浪
// wave
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*振幅宽 + 振幅偏移量)”
var y = -Math.sin((0 + x) * this.opts.waveWidth + this.xOffset);

@@ -210,3 +209,2 @@ points.push([x, value + y * this.opts.waveHeight]);

}
//封闭路径
ctx.lineTo(this.opts.d, this.opts.d);

@@ -218,3 +216,2 @@ ctx.lineTo(0, this.opts.d);

// 绘制小水珠
ctx.beginPath();

@@ -230,5 +227,2 @@ ctx.strokeStyle = this.opts.fill;

// 绘制文本
var fColor = this._HexToRGB(this.opts.color);

@@ -242,6 +236,10 @@ if (this.opts.value > 55) {

ctx.textAlign = this.opts.textAlign;
ctx.fillText(this._ceil(this.opts.value) + this.opts.ext, this.opts.r, this.opts.r);
if (this.opts.format && typeof this.opts.format === 'function') {
var text = this.opts.format(this._ceil(this.opts.value));
ctx.fillText(text, this.opts.r, this.opts.r);
} else {
ctx.fillText(this._ceil(this.opts.value) + this.opts.ext, this.opts.r, this.opts.r);
}
ctx.restore();
var self = this;

@@ -248,0 +246,0 @@ this.timer = window.requestAnimationFrame(function () {