jmgraph 3.2.2 → 3.2.3

package/index.js

@@ -63,6 +63,10 @@ export default class jmGraph extends jmGraphCore {
         
         super(canvas, option, callback);
     }
+
+    static create(...args) {
+        return createJmGraph(...args);
+    }
 }
 
 //创建实例

package/package.json

@@ -1,17 +1,17 @@
 {
   "family": "jmgraph",
   "name": "jmgraph",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "一个简单的canvas画图库",
   "homepage": "http://graph.jm47.com/",
   "keywords": [
     "canvas",
-    "html5"
+    "html5",
+    "webgl"
   ],
   "author": "jiamao<haofefe@163.com>",
   "engines": {},
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
     "@commitlint/cli": "^7.6.1",
     "@commitlint/config-conventional": "^7.6.0",

package/src/core/jmControl.js

@@ -4,10 +4,12 @@ import {jmList} from "./jmList.js";
 import {jmGradient} from "./jmGradient.js";
 import {jmShadow} from "./jmShadow.js";
 import {jmProperty} from "./jmProperty.js";
+import WebglPath from "../lib/webgl/path.js";
 
 //样式名称，也当做白名单使用		
 const jmStyleMap = {
 	'fill':'fillStyle',
+	'fillImage':'fillImage',
 	'stroke':'strokeStyle',
 	'shadow.blur':'shadowBlur',
 	'shadow.x':'shadowOffsetX',
@@ -40,8 +42,8 @@ export default class jmControl extends jmProperty {
 
 	constructor(params, t) {
 		params = params||{};
-		super();
-		this.__pro('type', t || new.target.name);
+		super(params);
+		this.property('type', t || new.target.name);
 		this.style = params && params.style ? params.style : {};
 		//this.position = params.position || {x:0,y:0};
 		this.width = params.width || 0;
@@ -55,6 +57,15 @@ export default class jmControl extends jmProperty {
 		this.zIndex = params.zIndex || 0;
 		this.interactive = typeof params.interactive == 'undefined'? true : params.interactive;
 
+		// webgl模式
+		if(this.mode === 'webgl') {
+			this.webglControl = new WebglPath(this.graph, {
+				style: this.style,
+				isRegular: params.isRegular,
+				needCut: params.needCut
+			});
+		}
+
 		this.initializing();	
 		
 		this.on = this.bind;
@@ -70,7 +81,7 @@ export default class jmControl extends jmProperty {
 	 * @type string
 	 */
 	get type() {
-		return this.__pro('type');
+		return this.property('type');
 	}
 
 	/**
@@ -79,17 +90,17 @@ export default class jmControl extends jmProperty {
 	 * @type {object}
 	 */
 	get context() {
-		let s = this.__pro('context');
+		let s = this.property('context');
 		if(s) return s;
 		else if(this.is('jmGraph') && this.canvas && this.canvas.getContext) {
-			return this.context = this.canvas.getContext('2d');
+			return this.context = this.canvas.getContext(this.mode || '2d');
 		}
-		let g = this.graph;
+		const g = this.graph;
 		if(g) return g.context;
-		return g.canvas.getContext('2d');
+		return g.canvas.getContext(this.mode || '2d');
 	}
 	set context(v) {
-		return this.__pro('context', v);
+		return this.property('context', v);
 	}
 
 	/**
@@ -98,13 +109,13 @@ export default class jmControl extends jmProperty {
 	 * @type {object}
 	 */
 	get style() {
-		let s = this.__pro('style');
-		if(!s) s = this.__pro('style', {});
+		let s = this.property('style');
+		if(!s) s = this.property('style', {});
 		return s;
 	}
 	set style(v) {
 		this.needUpdate = true;
-		return this.__pro('style', v);
+		return this.property('style', v);
 	}
 
 	/**
@@ -114,13 +125,13 @@ export default class jmControl extends jmProperty {
 	 * @type {boolean}
 	 */
 	get visible() {
-		let s = this.__pro('visible');
-		if(typeof s == 'undefined') s = this.__pro('visible', true);
+		let s = this.property('visible');
+		if(typeof s == 'undefined') s = this.property('visible', true);
 		return s;
 	}
 	set visible(v) {
 		this.needUpdate = true;
-		return this.__pro('visible', v);
+		return this.property('visible', v);
 	}	
 
 	/**
@@ -131,11 +142,11 @@ export default class jmControl extends jmProperty {
 	 * @type {boolean}
 	 */
 	get interactive() {
-		let s = this.__pro('interactive');
+		let s = this.property('interactive');
 		return s;
 	}
 	set interactive(v) {
-		return this.__pro('interactive', v);
+		return this.property('interactive', v);
 	}
 		
 	/**
@@ -144,13 +155,13 @@ export default class jmControl extends jmProperty {
 	 * @type {list}
 	 */
 	get children() {
-		let s = this.__pro('children');
-		if(!s) s = this.__pro('children', new jmList());
+		let s = this.property('children');
+		if(!s) s = this.property('children', new jmList());
 		return s;
 	}
 	set children(v) {
 		this.needUpdate = true;
-		return this.__pro('children', v);
+		return this.property('children', v);
 	}
 
 	/**
@@ -159,13 +170,13 @@ export default class jmControl extends jmProperty {
 	 * @type {number}
 	 */
 	get width() {
-		let s = this.__pro('width');
-		if(typeof s == 'undefined') s = this.__pro('width', 0);
+		let s = this.property('width');
+		if(typeof s == 'undefined') s = this.property('width', 0);
 		return s;
 	}
 	set width(v) {
 		this.needUpdate = true;
-		return this.__pro('width', v);
+		return this.property('width', v);
 	}
 
 	/**
@@ -174,13 +185,13 @@ export default class jmControl extends jmProperty {
 	 * @type {number}
 	 */
 	get height() {
-		let s = this.__pro('height');
-		if(typeof s == 'undefined') s = this.__pro('height', 0);
+		let s = this.property('height');
+		if(typeof s == 'undefined') s = this.property('height', 0);
 		return s;
 	}
 	set height(v) {
 		this.needUpdate = true;
-		return this.__pro('height', v);
+		return this.property('height', v);
 	}
 
 	/**
@@ -189,13 +200,13 @@ export default class jmControl extends jmProperty {
 	 * @type {number}
 	 */
 	get zIndex() {
-		let s = this.__pro('zIndex');
-		if(!s) s = this.__pro('zIndex', 0);
+		let s = this.property('zIndex');
+		if(!s) s = this.property('zIndex', 0);
 		return s;
 	}
 	set zIndex(v) {
 		this.needUpdate = true;
-		this.__pro('zIndex', v);
+		this.property('zIndex', v);
 		this.children.sort();//层级发生改变，需要重新排序
 		this.needUpdate = true;
 		return v;
@@ -376,12 +387,25 @@ export default class jmControl extends jmProperty {
 					__setStyle(styleValue.toGradient(this), mpname||name);	
 				}
 				else if(mpname) {
-					//只有存在白名单中才处理
-					//颜色转换
-					if(t == 'string' && ['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(mpname) > -1) {
-						styleValue = jmUtils.toColor(styleValue);
+					
+					if(this.webglControl) {
+						//只有存在白名单中才处理
+						//颜色转换
+						if(t == 'string' && ['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(mpname) > -1) {
+							styleValue = jmUtils.hexToRGBA(styleValue);
+						}
+
+						this.webglControl.setStyle(mpname, styleValue);
+					}
+					else {
+						//只有存在白名单中才处理
+						//颜色转换
+						if(t == 'string' && ['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(mpname) > -1) {
+							styleValue = jmUtils.toColor(styleValue);
+						}
+
+						this.context[mpname] = styleValue;
 					}
-					this.context[mpname] = styleValue;
 				}	
 				else {
 					switch(name) {
@@ -398,7 +422,7 @@ export default class jmControl extends jmProperty {
 						}
 						//平移
 						case 'translate' : {
-							this.context.translate(styleValue.x, styleValue.y);
+							this.context.translate && this.context.translate(styleValue.x, styleValue.y);
 							break;
 						}
 						//旋转
@@ -417,9 +441,9 @@ export default class jmControl extends jmProperty {
 								tranY = styleValue.rotateY + bounds.top;	
 							}
 												
-							if(tranX!=0 || tranY != 0) this.context.translate(tranX,tranY);
+							if(tranX!=0 || tranY != 0) this.context.translate && this.context.translate(tranX,tranY);
 							this.context.rotate(styleValue.angle);
-							if(tranX!=0 || tranY != 0) this.context.translate(-tranX,-tranY);
+							if(tranX!=0 || tranY != 0) this.context.translate && this.context.translate(-tranX,-tranY);
 							break;
 						}
 						case 'transform' : {
@@ -778,7 +802,8 @@ export default class jmControl extends jmProperty {
 	 */
 	beginDraw() {	
 		this.getLocation(true);//重置位置信息
-		this.context.beginPath();			
+		this.context.beginPath && this.context.beginPath();		
+		if(this.webglControl && this.webglControl.beginDraw) this.webglControl.beginDraw();
 	}
 
 	/**
@@ -789,16 +814,24 @@ export default class jmControl extends jmProperty {
 	endDraw() {
 		//如果当前为封闭路径
 		if(this.style.close) {
-			this.context.closePath();
+			if(this.webglControl) this.webglControl.closePath();
+			else this.context.closePath && this.context.closePath();
 		}
 		
 		if(this.style['fill']) {
-			this.context.fill();
+			if(this.webglControl) {
+				const bounds = this.getBounds();
+				this.webglControl.fill(bounds);
+			}
+			else this.context.fill && this.context.fill();
 		}
-		if(this.style['stroke'] || !this.style['fill']) {
-			this.context.stroke();
+		if(this.style['stroke'] || (!this.style['fill'] && !this.is('jmGraph'))) {
+			if(this.webglControl) this.webglControl.stroke();
+			else this.context.stroke && this.context.stroke();
 		}
 
+		if(this.webglControl && this.webglControl.endDraw) this.webglControl.endDraw();
+
 		this.needUpdate = false;
 	}
 
@@ -811,20 +844,27 @@ export default class jmControl extends jmProperty {
 	draw() {	
 		if(this.points && this.points.length > 0) {
 			//获取当前控件的绝对位置
-			let bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;
-			
-			this.context.moveTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
-			let len = this.points.length;			
-			for(let i=1; i < len;i++) {
-				let p = this.points[i];
-				//移至当前坐标
-				if(p.m) {
-					this.context.moveTo(p.x + bounds.left,p.y + bounds.top);
-				}
-				else {
-					this.context.lineTo(p.x+ bounds.left,p.y + bounds.top);
-				}			
-			}		
+			const bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;
+			if(this.webglControl) {
+				this.webglControl.setParentBounds(bounds);
+				this.webglControl.draw([
+					...this.points
+				]);
+			}
+			else if(this.context && this.context.moveTo) {
+				this.context.moveTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
+				let len = this.points.length;			
+				for(let i=1; i < len;i++) {
+					let p = this.points[i];
+					//移至当前坐标
+					if(p.m) {
+						this.context.moveTo(p.x + bounds.left,p.y + bounds.top);
+					}
+					else {
+						this.context.lineTo(p.x+ bounds.left,p.y + bounds.top);
+					}			
+				}	
+			}	
 		}	
 	}
 
@@ -848,7 +888,7 @@ export default class jmControl extends jmProperty {
 				else if(this.absoluteBounds.bottom <= 0) needDraw = false;
 			}
 			
-			this.context.save();
+			this.context.save && this.context.save();
 
 			this.emit('beginDraw', this);
 			
@@ -865,7 +905,7 @@ export default class jmControl extends jmProperty {
 			}
 
 			this.emit('endDraw',this);	
-			this.context.restore();
+			this.context.restore && this.context.restore();
 			
 			this.needUpdate = false;
 		}

package/src/core/jmGradient.js

@@ -84,8 +84,13 @@ export default class jmGradient {
 		let sy1 = Number(y1) + bounds.top;
 		let sx2 = Number(x2) + bounds.left;
 		let sy2 = Number(y2) + bounds.top;
-		if(this.type === 'linear') {		
-			gradient = context.createLinearGradient(sx1, sy1, sx2, sy2);
+		if(this.type === 'linear') {
+			if(control.mode === 'webgl' && control.webglControl) {
+				gradient = control.webglControl.createLinearGradient(x1, y1, x2, y2, bounds);
+			}	
+			else {		
+				context.createLinearGradient && (gradient = context.createLinearGradient(sx1, sy1, sx2, sy2));
+			}
 		}
 		else if(this.type === 'radial') {
 			let r1 = this.r1||0;
@@ -97,22 +102,32 @@ export default class jmGradient {
 			if(jmUtils.checkPercent(r2)) {
 				r2 = jmUtils.percentToNumber(r2);
 				r2 = d * r2;
+			}
+			if(control.mode === 'webgl' && control.webglControl) {
+				gradient = control.webglControl.createRadialGradient(x1, y1, r1, x2, y2, r2, bounds);
 			}	
 			//offsetLine = Math.abs(r2 - r1);//二圆半径差
+			else if(context.createRadialGradient) {
+				gradient = context.createRadialGradient(sx1, sy1, r1, sx2, sy2, r2);	
+			}
 			//小程序的接口特殊
-			if(context.createCircularGradient) { 
+			else if(context.createCircularGradient) { 
 				gradient = context.createCircularGradient(sx1, sy1, r2);
 			}
-			else {
-				gradient = context.createRadialGradient(sx1, sy1, r1, sx2, sy2, r2);	
-			}	
 		}
+		
 		//颜色渐变
-		this.stops.each(function(i,s) {	
-			let c = jmUtils.toColor(s.color);
-			//s.offset 0.0 ~ 1.0
-			gradient.addColorStop(s.offset, c);		
-		});
+		if(gradient) {
+			this.stops.each(function(i,s) {	
+				let c = jmUtils.toColor(s.color);
+				//s.offset 0.0 ~ 1.0
+				gradient && gradient.addColorStop(s.offset, c);		
+			});
+		}
+		else {
+			const s = this.stops.get(0);
+			return (s && s.color) || '#000';
+		}
 		
 		return gradient;
 	}
@@ -191,14 +206,14 @@ export default class jmGradient {
 	toString() {
 		let str = this.type + '-gradient(';
 		if(this.type == 'linear') {
-			str += this.x1 + ' ' + this.y1 + ' ' + this.x2 + ' ' + this.y2;
+			str += this.x1.toFixed(2) + ' ' + this.y1.toFixed(2) + ' ' + this.x2.toFixed(2) + ' ' + this.y2.toFixed(2);
 		}
 		else {
-			str += this.x1 + ' ' + this.y1 + ' ' + this.r1 + ' ' + this.x2 + ' ' + this.y2 + ' ' + this.r2;
+			str += this.x1.toFixed(2) + ' ' + this.y1.toFixed(2) + ' ' + this.r1.toFixed(2) + ' ' + this.x2.toFixed(2) + ' ' + this.y2.toFixed(2) + ' ' + this.r2.toFixed(2);
 		}
 		//颜色渐变
 		this.stops.each(function(i,s) {	
-			str += ',' + s.color + ' ' + s.offset;
+			str += ',' + s.color + ' ' + s.offset.toFixed(2);
 		});
 		return str + ')';
 	}

package/src/core/jmGraph.js

@@ -29,7 +29,8 @@ export default class jmGraph extends jmControl {
 		option = option || {};
 		option.mode = option.mode || '2d'; // webgl | 2d
 		option.interactive = true;
-		
+		option.isRegular = true;// 规则的
+
 		super(option, 'jmGraph');
 
 		this.option = option || {};
@@ -41,7 +42,9 @@ export default class jmGraph extends jmControl {
 		 * @property utils/util
 		 * @type {jmUtils}
 		 */
-		this.util = this.utils = jmUtils;		
+		this.util = this.utils = jmUtils;	
+		// 模式 webgl | 2d
+		this.mode = option.mode;
 
 		//如果是小程序
 		if(typeof wx != 'undefined' && wx.canIUse && wx.canIUse('canvas')) {			
@@ -70,7 +73,25 @@ export default class jmGraph extends jmControl {
 			}
 		}	
 		this.canvas = canvas;	
-		this.context = canvas.getContext('2d');
+		this.context = canvas.getContext(this.mode);
+
+		this.textureCanvas = option.textureCanvas || null;
+		
+		// webgl模式
+		if(this.mode === 'webgl') {
+
+			this.context.enable(this.context.BLEND);// 开启混合功能：（注意，它不可和gl.DEPTH_TEST一起使用）
+			this.context.blendFunc(this.context.SRC_ALPHA, this.context.ONE_MINUS_SRC_ALPHA); // 指定混合函数：
+			// webglcontextlost webglcontextrestored
+			jmUtils.bindEvent(canvas, 'webglcontextlost', (e)=> {
+				console.log('canvas webglcontextlost', e);
+				this.emit('webglcontextlost', e);
+			});
+			jmUtils.bindEvent(canvas, 'webglcontextrestored', (e)=> {
+				console.log('canvas webglcontextrestored', e);
+				this.emit('webglcontextrestored', e);
+			});
+		} 
 		this.__init(callback);
 	}
 
@@ -93,13 +114,13 @@ export default class jmGraph extends jmControl {
 		 * 为了解决一像素线条问题
 		 */
 		this.on('beginDraw', function() {	
-			this.context.translate(0.5, 0.5);
+			this.context.translate && this.context.translate(0.5, 0.5);
 		});
 		/**
 		 * 结束控件绘制 为了解决一像素线条问题
 		 */
 		this.on('endDraw', function() {	
-			this.context.translate(-0.5, -0.5);		
+			this.context.translate && this.context.translate(-0.5, -0.5);		
 		});
 
 		// devicePixelRatio初始化
@@ -110,7 +131,7 @@ export default class jmGraph extends jmControl {
 		this.devicePixelRatio = dpr;
 		// 为了解决锯齿问题，先放大canvas再缩放
 		this.dprScaleSize = this.devicePixelRatio > 1? this.devicePixelRatio : 2;
-
+		
 		if(this.option.width > 0) this.width = this.option.width;
 		if(this.option.height > 0) this.height = this.option.height;	
 		this.resize();		
@@ -138,9 +159,17 @@ export default class jmGraph extends jmControl {
 	
 		this.css('width', w + "px");
 		this.css('height', h + "px");
-		this.canvas.height = h * this.dprScaleSize;
-		this.canvas.width = w * this.dprScaleSize;
-		this.context.scale(this.dprScaleSize, this.dprScaleSize);	
+		if(this.mode === '2d') {
+			this.canvas.height = h * this.dprScaleSize;
+			this.canvas.width = w * this.dprScaleSize;
+			if(this.dprScaleSize !== 1) this.context.scale && this.context.scale(this.dprScaleSize, this.dprScaleSize);	
+		}
+		else {
+			this.canvas.width = w;
+			this.canvas.height = h;
+		}
+
+		this.context.viewport && this.context.viewport(0, 0, w, h);
 	}
 
 	/**
@@ -210,7 +239,7 @@ export default class jmGraph extends jmControl {
 	 * @return {postion} 返回定位坐标
 	 */
 	getPosition() {
-		let p = jmUtils.getElementPosition(this.canvas.canvas || this.canvas);
+		const p = jmUtils.getElementPosition(this.canvas.canvas || this.canvas);
 		p.width = this.width;
 		p.height = this.height;
 		p.right = p.left + p.width;
@@ -261,7 +290,7 @@ export default class jmGraph extends jmControl {
 	 * @return {jmShadow} 阴影对象
 	 */
 	createShadow(x, y, blur, color) {
-		let sh = new jmShadow(x, y, blur, color);
+		const sh = new jmShadow(x, y, blur, color);
 		return sh;
 	}
 
@@ -276,7 +305,7 @@ export default class jmGraph extends jmControl {
 	 * @return {jmGradient} 线性渐变对象
 	 */
 	createLinearGradient(x1, y1, x2, y2) {
-		let gradient = new jmGradient({
+		const gradient = new jmGradient({
 			type:'linear',
 			x1: x1,
 			y1: y1,
@@ -299,7 +328,7 @@ export default class jmGraph extends jmControl {
 	 * @return {jmGradient} 放射渐变对象
 	 */
 	createRadialGradient(x1, y1, r1, x2, y2, r2) {	
-		let gradient = new jmGradient({
+		const gradient = new jmGradient({
 			type:'radial',
 			x1: x1,
 			y1: y1,
@@ -354,16 +383,30 @@ export default class jmGraph extends jmControl {
 				h = h / this.scaleSize.y;
 			}*/
 		}
-		//如果有指定背景，则等到draw再全屏绘制一次，也同样达到清除画布的功能
-		if(this.style && this.style.fill) {
-			this.points = [
-				{x:0,y:0},
-				{x:w,y:0},
-				{x:w,y:h},
-				{x:0,y:h}
-			];
+		
+		if(this.context.clearRect) {
+			if(this.style && this.style.fill) {
+				this.points = [
+					{x:0, y:0},
+					{x:w, y:0},
+					{x:w, y:h},
+					{x:0, y:h}
+				];
+				this.style.close = true;// 封闭填充
+			}
+
+			this.context.clearRect(0, 0, w, h);
+		}
+		else if(this.mode === 'webgl' && this.context.clear) {
+			const color = this.style && this.style.fill? this.utils.hexToRGBA(this.style.fill): {
+				r: 0,
+				g: 0,
+				b: 0,
+				a: 0
+			};
+			this.context.clearColor(color.r, color.g, color.b, color.a); // 设置清空颜色缓冲时的颜色值
+        	this.context.clear(this.context.COLOR_BUFFER_BIT); // 清空颜色缓冲区，也就是清空画布
 		}
-		else if(this.context.clearRect) this.context.clearRect(0,0,w,h);
 	}
 
 	/**
@@ -388,10 +431,11 @@ export default class jmGraph extends jmControl {
 	 * @param {style} style 当前路径的样式
 	 * @return {jmPath} 路径对象jmPath
 	 */
-	createPath(points, style) {
-		let path = this.createShape('path',{
+	createPath(points, style, option={}) {
+		const path = this.createShape('path',{
 			points: points,
-			style: style
+			style: style,
+			...option
 		});
 		return path;
 	}
@@ -406,7 +450,7 @@ export default class jmGraph extends jmControl {
 	 * @return {jmLine} 直线对象
 	 */
 	createLine(start, end, style) {
-		let line = this.createShape('line', {
+		const line = this.createShape('line', {
 			start: start,
 			end: end,
 			style: style

package/src/core/jmObject.js

@@ -1,8 +1,7 @@
 
 import {jmList} from "./jmList.js";
 
-const ANICOUNTER = Symbol('jmchart#animate#counter');
-
+var control_id_counter = 0;
 /**
  *  所有jm对象的基础对象
  * 
@@ -15,7 +14,7 @@ export default class jmObject {
 		if(g && g.type == 'jmGraph') {
 			this.graph = g;
 		}
-		//this.id = Symbol("id"); //生成一个唯一id
+		this.id = ++control_id_counter; //生成一个唯一id
 	}
 	
 	/**