jmgraph 3.2.20 → 3.2.21

package/index.js

@@ -16,16 +16,16 @@ import {jmEllipse} from "./src/shapes/jmEllipse.js";
 import {jmPolygon} from "./src/shapes/jmPolygon.js";
 import {jmStar} from "./src/shapes/jmStar.js";
 
-import { jmGraph as jmGraphCore, 
+import { jmGraph as jmGraphCore,
     jmUtils,
 	jmList,
 	jmProperty,
 	jmShadow,
 	jmGradient,
+	jmFilter,
 	jmEvents,
 	jmControl,
-	jmPath,
-	jmLayer } from "./src/core/jmGraph.js";
+	jmPath } from "./src/core/jmGraph.js";
 
 const shapes = {
     "arc": jmArc,
@@ -46,22 +46,11 @@ const shapes = {
     "star": jmStar
 }
 
-export default class jmGraph extends jmGraphCore {
+class jmGraphImpl extends jmGraphCore {
     constructor(canvas, option, callback) {
-        
-        const targetType = new.target;
-
         // 合并shapes
         option = Object.assign({}, option);
         option.shapes = Object.assign(shapes, option.shapes||{});
-        
-        //不是用new实例化的话，返回一个promise
-		if(!targetType || !(targetType.prototype instanceof jmGraphCore)) {
-			return new Promise(function(resolve, reject){				
-				var g = new jmGraph(canvas, option, callback);
-				if(resolve) resolve(g);				
-			});
-        }
 
         if(typeof option == 'function') {
 			callback = option;
@@ -70,24 +59,23 @@ export default class jmGraph extends jmGraphCore {
         
         super(canvas, option, callback);
     }
-
-    static create(...args) {
-        return createJmGraph(...args);
-    }
 }
 
-//创建实例
+//创建实例，支持不加 new 直接调用
 const createJmGraph = (...args) => {
-	return new jmGraph(...args);
+	return new jmGraphImpl(...args);
 }
 
-export {   
-    jmUtils, 
-    jmList,    
+export default jmGraphImpl;
+
+export {
+    jmUtils,
+    jmList,
     jmControl,
     jmPath,
     jmShadow,
     jmGradient,
+    jmFilter,
 	jmArc,
 	jmArrow,
 	jmBezier,
@@ -103,8 +91,7 @@ export {
     jmEllipse,
     jmPolygon,
     jmStar,
-    jmLayer,
-    jmGraph,
+    jmGraphImpl as jmGraph,
     createJmGraph as create
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "family": "jmgraph",
   "name": "jmgraph",
-  "version": "3.2.20",
+  "version": "3.2.21",
   "description": "一个简单的canvas画图库",
   "homepage": "https://surl.fit/tools/tools/jmgraph",
   "keywords": [

package/src/core/jmControl.js

@@ -3,6 +3,7 @@ import {jmUtils} from "./jmUtils.js";
 import {jmList} from "./jmList.js";
 import {jmGradient} from "./jmGradient.js";
 import {jmShadow} from "./jmShadow.js";
+import {jmFilter} from "./jmFilter.js";
 import {jmProperty} from "./jmProperty.js";
 import WebglPath from "../lib/webgl/path.js";
 
@@ -27,7 +28,9 @@ const jmStyleMap = {
 	'shadowOffsetY' : 'shadowOffsetY',
 	'shadowColor' : 'shadowColor',
 	'lineJoin': 'lineJoin',
-	'lineCap':'lineCap'
+	'lineCap':'lineCap',
+	'lineDashOffset': 'lineDashOffset',
+	'globalCompositeOperation': 'globalCompositeOperation'
 };
 
 export default class jmControl extends jmProperty {
@@ -238,7 +241,9 @@ export default class jmControl extends jmProperty {
 	} 
 
 	setStyle(style) {
-		style = style || jmUtils.clone(this.style, true);
+		if(!style) {
+			style = this.style;
+		}
 		if(!style) return;
 
 		const __setStyle = (style, name, mpkey) => {
@@ -322,6 +327,120 @@ export default class jmControl extends jmProperty {
 							this.cursor = styleValue;
 							break;
 						}
+						// ===== 新增样式特性 =====
+
+						// 虚线样式：支持自定义lineDash模式 (如 [5, 3, 2] 或 "5,3,2")
+						case 'lineDash' : {
+							if(!this.context.setLineDash) break;
+							let dash;
+							if(typeof styleValue === 'string') {
+								dash = styleValue.split(',').map(v => parseFloat(v.trim())).filter(v => !isNaN(v));
+							}
+							else if(Array.isArray(styleValue)) {
+								dash = styleValue.map(v => parseFloat(v)).filter(v => !isNaN(v));
+							}
+							if(dash && dash.length) {
+								this.context.setLineDash(dash);
+							}
+							else {
+								this.context.setLineDash([]);
+							}
+							break;
+						}
+						// 虚线偏移量
+						case 'lineDashOffset' : {
+							if(!this.context.setLineDash) break;
+							this.context.lineDashOffset = Number(styleValue) || 0;
+							break;
+						}
+						// CSS滤镜效果 (blur, grayscale, sepia, brightness, contrast, saturate, hue-rotate, invert, opacity)
+						case 'filter' : {
+							if(this.context.filter === undefined) break;
+							if(styleValue instanceof jmFilter) {
+								this.context.filter = styleValue.toCanvasFilter();
+							}
+							else if(typeof styleValue === 'string') {
+								this.context.filter = styleValue || 'none';
+							}
+							else if(typeof styleValue === 'object') {
+								this.context.filter = (new jmFilter(styleValue)).toCanvasFilter();
+							}
+							break;
+						}
+						// 混合模式 (source-over, multiply, screen, overlay, darken, lighten, etc.)
+						case 'globalCompositeOperation' : {
+							if(!this.context.globalCompositeOperation) break;
+							this.context.globalCompositeOperation = styleValue;
+							break;
+						}
+						// 裁剪路径：通过canvas clip实现
+						case 'clipPath' : {
+							if(!this.context.clip) break;
+							// clipPath可以是一个图形控件实例
+							if(styleValue && styleValue.points && styleValue.points.length > 0) {
+								const bounds = this.parent && this.parent.absoluteBounds ? this.parent.absoluteBounds : this.absoluteBounds;
+								this.context.beginPath();
+								this.context.moveTo(styleValue.points[0].x + (bounds ? bounds.left : 0), styleValue.points[0].y + (bounds ? bounds.top : 0));
+								for(let i = 1; i < styleValue.points.length; i++) {
+									if(styleValue.points[i].m) {
+										this.context.moveTo(styleValue.points[i].x + (bounds ? bounds.left : 0), styleValue.points[i].y + (bounds ? bounds.top : 0));
+									}
+									else {
+										this.context.lineTo(styleValue.points[i].x + (bounds ? bounds.left : 0), styleValue.points[i].y + (bounds ? bounds.top : 0));
+									}
+								}
+								if(styleValue.style && styleValue.style.close) {
+									this.context.closePath();
+								}
+								this.context.clip();
+							}
+							break;
+						}
+						// 遮罩效果：通过globalCompositeOperation + destination-in实现
+						case 'mask' : {
+							if(!this.context.globalCompositeOperation) break;
+							// mask是一个图形控件实例，在绘制前需要先应用mask
+							// 这里只是标记，实际绘制在paint流程中处理
+							this.__mask = styleValue;
+							break;
+						}
+						// 图片阴影描边阴影（WebGL纹理canvas用）
+						case 'shadowColor' : {
+							if(this.webglControl) {
+								this.webglControl.setStyle('shadowColor', styleValue);
+							}
+							else {
+								this.context.shadowColor = jmUtils.toColor(styleValue);
+							}
+							break;
+						}
+						case 'shadowBlur' : {
+							if(this.webglControl) {
+								this.webglControl.setStyle('shadowBlur', styleValue);
+							}
+							else {
+								this.context.shadowBlur = Number(styleValue) || 0;
+							}
+							break;
+						}
+						case 'shadowOffsetX' : {
+							if(this.webglControl) {
+								this.webglControl.setStyle('shadowOffsetX', styleValue);
+							}
+							else {
+								this.context.shadowOffsetX = Number(styleValue) || 0;
+							}
+							break;
+						}
+						case 'shadowOffsetY' : {
+							if(this.webglControl) {
+								this.webglControl.setStyle('shadowOffsetY', styleValue);
+							}
+							else {
+								this.context.shadowOffsetY = Number(styleValue) || 0;
+							}
+							break;
+						}
 					}
 				}
 			}
@@ -342,6 +461,9 @@ export default class jmControl extends jmProperty {
 			else if(t == 'string' && k == 'shadow') {
 				style[k] = new jmShadow(style[k]);
 			}
+			else if(t == 'string' && k == 'filter') {
+				style[k] = new jmFilter(style[k]);
+			}
 			__setStyle(style[k], k);
 		}
 	}
@@ -486,25 +608,30 @@ export default class jmControl extends jmProperty {
 	 * @method getLocation
 	 * @return {object} 当前控件位置参数，包括中心点坐标，右上角坐标，宽高
 	 */
-	getLocation(clone=true) {
+	getLocation() {
 		//如果已经计算过则直接返回
 		//在开画之前会清空此对象
 		//if(reset !== true && this.location) return this.location;
 
 		let local = this.location = {left: 0,top: 0,width: 0,height: 0};
-		local.position = typeof this.position == 'function'? this.position(): jmUtils.clone(this.position);	
-		local.center = this.center && typeof this.center === 'function'?this.center(): jmUtils.clone(this.center);//中心
-		local.start = this.start && typeof this.start === 'function'?this.start(): jmUtils.clone(this.start);//起点
-		local.end = this.end && typeof this.end === 'function'?this.end(): jmUtils.clone(this.end);//起点
+
+		// 检查是否有百分比参数需要解析，没有则直接引用避免克隆开销
+		const needResolve = this.parent && (jmUtils.checkPercent(this.width) || jmUtils.checkPercent(this.height) ||
+			(this.position && jmUtils.checkPercent(this.position.x)) || (this.position && jmUtils.checkPercent(this.position.y)));
+		local.position = typeof this.position == 'function'? this.position(): (needResolve? jmUtils.clone(this.position) : this.position);	
+		local.center = this.center && typeof this.center === 'function'?this.center(): (needResolve? jmUtils.clone(this.center) : this.center);//中心
+		local.start = this.start && typeof this.start === 'function'?this.start(): (needResolve? jmUtils.clone(this.start) : this.start);//起点
+		local.end = this.end && typeof this.end === 'function'?this.end(): (needResolve? jmUtils.clone(this.end) : this.end);//起点
 		local.radius = this.radius;//半径
 		local.width = this.width;
 		local.height = this.height;
 
-		const margin = jmUtils.clone(this.style.margin, {});
-		margin.left = (margin.left || 0);
-		margin.top = (margin.top || 0);
-		margin.right = (margin.right || 0);
-		margin.bottom = (margin.bottom || 0);
+		const margin = this.style.margin;
+		const marginObj = needResolve && margin ? jmUtils.clone(margin, {}) : (margin || {});
+		marginObj.left = (marginObj.left || 0);
+		marginObj.top = (marginObj.top || 0);
+		marginObj.right = (marginObj.right || 0);
+		marginObj.bottom = (marginObj.bottom || 0);
 		
 		//如果没有指定位置，但指定了margin。则位置取margin偏移量
 		if(local.position) {
@@ -512,8 +639,8 @@ export default class jmControl extends jmProperty {
 			local.top = local.position.y;
 		}
 		else {
-			local.left = margin.left;
-			local.top = margin.top;
+			local.left = marginObj.left;
+			local.top = marginObj.top;
 		}
 
 		if(this.parent) {
@@ -775,22 +902,31 @@ export default class jmControl extends jmProperty {
 			if(this.webglControl) this.webglControl.closePath();
 			this.context.closePath && this.context.closePath();
 		}
-		
-		const fill = this.style['fill'] || this.style['fillStyle'];
-		if(fill) {
-			if(this.webglControl) {
+
+		// 根据渲染模式选择不同的绘制路径
+		if(this.webglControl) {
+			// WebGL 模式：使用 WebGL 绘制
+			const fill = this.style['fill'] || this.style['fillStyle'];
+			if(fill) {
 				const bounds = this.getBounds();
 				this.webglControl.fill(bounds);
 			}
-			this.context.fill && this.context.fill();
+			if(this.style['stroke'] || (!fill && !this.is('jmGraph'))) {
+				this.webglControl.stroke();
+			}
+			if(this.webglControl.endDraw) this.webglControl.endDraw();
 		}
-		if(this.style['stroke'] || (!fill && !this.is('jmGraph'))) {
-			if(this.webglControl) this.webglControl.stroke();
-			this.context.stroke && this.context.stroke();
+		else {
+			// 2D 模式：使用 Canvas 2D API 绘制
+			const fill = this.style['fill'] || this.style['fillStyle'];
+			if(fill) {
+				this.context.fill && this.context.fill();
+			}
+			if(this.style['stroke'] || (!fill && !this.is('jmGraph'))) {
+				this.context.stroke && this.context.stroke();
+			}
 		}
 
-		if(this.webglControl && this.webglControl.endDraw) this.webglControl.endDraw();
-
 		this.needUpdate = false;
 	}
 
@@ -806,9 +942,7 @@ export default class jmControl extends jmProperty {
 			const bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;
 			if(this.webglControl) {
 				this.webglControl.setParentBounds(bounds);
-				this.webglControl.draw([
-					...this.points
-				]);
+				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);
@@ -853,9 +987,44 @@ export default class jmControl extends jmProperty {
 			
 			this.setStyle();//设定样式
 
-			if(needDraw && this.beginDraw) this.beginDraw();
-			if(needDraw && this.draw) this.draw();	
-			if(needDraw && this.endDraw) this.endDraw();
+			// 应用mask遮罩效果：在mask区域内绘制当前控件
+			// 使用 destination-in 合成模式，只保留mask区域内的内容
+			const maskStyle = this.style.mask || this.__mask;
+			if(maskStyle && maskStyle.points && this.context.globalCompositeOperation) {
+				// 先绘制当前控件
+				if(needDraw && this.beginDraw) this.beginDraw();
+				if(needDraw && this.draw) this.draw();	
+				if(needDraw && this.endDraw) this.endDraw();
+
+				// 再应用mask裁剪
+				this.context.globalCompositeOperation = 'destination-in';
+				if(maskStyle.initPoints) maskStyle.initPoints();
+				const mBounds = maskStyle.parent && maskStyle.parent.absoluteBounds ? maskStyle.parent.absoluteBounds : this.absoluteBounds;
+				this.context.beginPath();
+				if(maskStyle.points && maskStyle.points.length > 0) {
+					this.context.moveTo(maskStyle.points[0].x + (mBounds ? mBounds.left : 0), maskStyle.points[0].y + (mBounds ? mBounds.top : 0));
+					for(let i = 1; i < maskStyle.points.length; i++) {
+						if(maskStyle.points[i].m) {
+							this.context.moveTo(maskStyle.points[i].x + (mBounds ? mBounds.left : 0), maskStyle.points[i].y + (mBounds ? mBounds.top : 0));
+						}
+						else {
+							this.context.lineTo(maskStyle.points[i].x + (mBounds ? mBounds.left : 0), maskStyle.points[i].y + (mBounds ? mBounds.top : 0));
+						}
+					}
+					if(maskStyle.style && maskStyle.style.close) {
+						this.context.closePath();
+					}
+				}
+				this.context.fillStyle = '#ffffff';
+				this.context.fill();
+				// 恢复合成模式
+				this.context.globalCompositeOperation = 'source-over';
+			}
+			else {
+				if(needDraw && this.beginDraw) this.beginDraw();
+				if(needDraw && this.draw) this.draw();	
+				if(needDraw && this.endDraw) this.endDraw();
+			}
 
 			if(this.children) {
 				this.children.each(function(i,item) {

package/src/core/jmFilter.js

@@ -0,0 +1,150 @@
+import {jmUtils} from "./jmUtils.js";
+
+/**
+ * CSS滤镜效果类
+ * 支持的滤镜: blur, grayscale, sepia, brightness, contrast, saturate, hue-rotate, invert, opacity
+ *
+ * @class jmFilter
+ * @param {string|object} opt 滤镜参数
+ *   字符串格式: "blur(2px) grayscale(50%) brightness(1.2)"
+ *   对象格式: { blur: 2, grayscale: 0.5, brightness: 1.2 }
+ */
+export default class jmFilter {
+	constructor(opt) {
+		this.filters = [];
+
+		if(typeof opt === 'string') {
+			this.fromString(opt);
+		}
+		else if(opt && typeof opt === 'object') {
+			for(let k in opt) {
+				if(k === 'constructor' || k === 'filters') continue;
+				this.addFilter(k, opt[k]);
+			}
+		}
+	}
+
+	/**
+	 * 添加单个滤镜
+	 * @param {string} name 滤镜名称 (blur, grayscale, sepia, brightness, contrast, saturate, hue-rotate, invert, opacity)
+	 * @param {number|string} value 滤镜值
+	 */
+	addFilter(name, value) {
+		name = name.toLowerCase().trim();
+		if(typeof value === 'string') {
+			value = parseFloat(value);
+		}
+		if(isNaN(value)) return;
+
+		// 规范化滤镜名称
+		const normalized = {
+			'blur': 'blur',
+			'grayscale': 'grayscale',
+			'greyscale': 'grayscale',
+			'sepia': 'sepia',
+			'brightness': 'brightness',
+			'contrast': 'contrast',
+			'saturate': 'saturate',
+			'hue-rotate': 'hueRotate',
+			'hueRotate': 'hueRotate',
+			'invert': 'invert',
+			'opacity': 'opacity'
+		}[name];
+
+		if(!normalized) return;
+
+		// 检查是否已有同名滤镜，有则更新
+		const existing = this.filters.find(f => f.name === normalized);
+		if(existing) {
+			existing.value = value;
+		}
+		else {
+			this.filters.push({ name: normalized, value: value });
+		}
+	}
+
+	/**
+	 * 从字符串格式解析滤镜
+	 * 格式: "blur(2px) grayscale(50%) brightness(1.2)"
+	 * @param {string} s 滤镜字符串
+	 */
+	fromString(s) {
+		if(!s || typeof s !== 'string') return;
+		// 匹配 filterName(value) 模式
+		const regex = /([a-zA-Z-]+)\s*\(\s*([^)]+)\s*\)/g;
+		let match;
+		while((match = regex.exec(s)) !== null) {
+			const name = match[1];
+			const valueStr = match[2].replace(/[a-z%]+$/i, '').trim();
+			const value = parseFloat(valueStr);
+			if(!isNaN(value)) {
+				this.addFilter(name, value);
+			}
+		}
+	}
+
+	/**
+	 * 转换为CSS filter字符串格式
+	 * @returns {string}
+	 */
+	toString() {
+		return this.filters.map(f => {
+			switch(f.name) {
+				case 'blur':
+					return `blur(${f.value}px)`;
+				case 'hueRotate':
+					return `hue-rotate(${f.value}deg)`;
+				default:
+					return `${f.name}(${f.value})`;
+			}
+		}).join(' ');
+	}
+
+	/**
+	 * 转换为Canvas context.filter可用的字符串
+	 * @returns {string}
+	 */
+	toCanvasFilter() {
+		if(this.filters.length === 0) return 'none';
+		return this.toString();
+	}
+
+	/**
+	 * 检查是否有指定名称的滤镜
+	 * @param {string} name 滤镜名称
+	 * @returns {boolean}
+	 */
+	has(name) {
+		return this.filters.some(f => f.name === name);
+	}
+
+	/**
+	 * 获取指定滤镜的值
+	 * @param {string} name 滤镜名称
+	 * @returns {number|undefined}
+	 */
+	get(name) {
+		const f = this.filters.find(f => f.name === name);
+		return f ? f.value : undefined;
+	}
+
+	/**
+	 * 移除指定滤镜
+	 * @param {string} name 滤镜名称
+	 */
+	remove(name) {
+		const index = this.filters.findIndex(f => f.name === name);
+		if(index > -1) {
+			this.filters.splice(index, 1);
+		}
+	}
+
+	/**
+	 * 清空所有滤镜
+	 */
+	clear() {
+		this.filters = [];
+	}
+}
+
+export { jmFilter };