jmgraph 3.2.19 → 3.2.21

package/src/core/jmGraph.js

@@ -3,6 +3,7 @@ import {jmList} from "./jmList.js";
 import {jmProperty} from './jmProperty.js';
 import {jmShadow} from "./jmShadow.js";
 import {jmGradient} from "./jmGradient.js";
+import {jmFilter} from "./jmFilter.js";
 import {jmEvents} from "./jmEvents.js";
 import {jmControl} from "./jmControl.js";
 import {jmPath} from "./jmPath.js";
@@ -46,6 +47,10 @@ export default class jmGraph extends jmControl {
 		// 模式 webgl | 2d
 		this.mode = option.mode || '2d';
 
+		// 缩放和平移相关
+		this.scaleFactor = 1;
+		this.translation = {x: 0, y: 0};
+
 		//如果是小程序
 		if(typeof wx != 'undefined' && wx.canIUse && wx.canIUse('canvas')) {			
 			if(typeof canvas === 'string') canvas = wx.createSelectorQuery().select('#' + canvas);
@@ -119,14 +124,24 @@ export default class jmGraph extends jmControl {
 		 * 画控件前初始化
 		 * 为了解决一像素线条问题
 		 */
-		this.on('beginDraw', function() {	
+		this.on('beginDraw', function() {  
 			this.context.translate && this.context.translate(0.5, 0.5);
+			// 应用缩放和平移变换
+			if(this.context.translate && this.context.scale) {
+				this.context.translate(this.translation.x, this.translation.y);
+				this.context.scale(this.scaleFactor, this.scaleFactor);
+			}
 		});
 		/**
 		 * 结束控件绘制 为了解决一像素线条问题
 		 */
-		this.on('endDraw', function() {	
-			this.context.translate && this.context.translate(-0.5, -0.5);		
+		this.on('endDraw', function() {  
+			this.context.translate && this.context.translate(-0.5, -0.5);
+			// 恢复缩放和平移变换
+			if(this.context.translate && this.context.scale) {
+				this.context.scale(1/this.scaleFactor, 1/this.scaleFactor);
+				this.context.translate(-this.translation.x, -this.translation.y);
+			}
 		});
 
 		// devicePixelRatio初始化
@@ -271,7 +286,7 @@ export default class jmGraph extends jmControl {
 		if(shape) {
 			if(!args) args = {};
 			args.graph = this;
-			let obj = new shape(args);
+			const obj = new shape(args);
 			return obj;
 		}
 	}
@@ -501,7 +516,7 @@ export default class jmGraph extends jmControl {
 			this.normalSize = {
 				width: this.canvas.width,
 				height: this.canvas.height
-			};		
+			};
 		}
 		
 		//this.context.scale && this.context.scale(dx,dy);
@@ -514,6 +529,86 @@ export default class jmGraph extends jmControl {
 		this.canvas.style && (this.canvas.style.transform = `scale(${this.scaleSize.x}, ${this.scaleSize.y})`);
 	}
 
+	/**
+	 * 设置缩放因子
+	 * 支持以指定点为中心进行缩放，保持该点在屏幕上的位置不变
+	 * 
+	 * @method setZoom
+	 * @param {number} zoom 缩放因子（建议范围：0.1 - 10）
+	 * @param {number} [x] 缩放中心X坐标（画布坐标）
+	 * @param {number} [y] 缩放中心Y坐标（画布坐标）
+	 * @return {jmGraph} 返回当前实例，支持链式调用
+	 */
+	setZoom(zoom, x, y) {
+		// 参数验证
+		if(typeof zoom !== 'number' || isNaN(zoom)) {
+			console.warn('jmGraph: setZoom - 无效的缩放因子');
+			return this;
+		}
+		
+		// 限制缩放范围，防止过度缩放导致性能问题或显示异常
+		const minZoom = 0.1;  // 最小缩放到10%
+		const maxZoom = 10;   // 最大放大到10倍
+		zoom = Math.max(minZoom, Math.min(maxZoom, zoom));
+		
+		if (x !== undefined && y !== undefined) {
+			// 计算缩放前后的坐标偏移
+			// 保持缩放中心点在屏幕上的位置不变
+			const oldZoom = this.scaleFactor;
+			const newZoom = zoom;
+			
+			// 调整平移量以保持缩放中心位置不变
+			this.translation.x = x - (x - this.translation.x) * (newZoom / oldZoom);
+			this.translation.y = y - (y - this.translation.y) * (newZoom / oldZoom);
+		}
+		
+		this.scaleFactor = zoom;
+		this.needUpdate = true;
+		this.redraw();
+		
+		return this; // 支持链式调用
+	}
+
+	/**
+	 * 平移画布
+	 * 移动画布视图，改变可视区域
+	 * 
+	 * @method pan
+	 * @param {number} dx X轴平移量（像素）
+	 * @param {number} dy Y轴平移量（像素）
+	 * @return {jmGraph} 返回当前实例，支持链式调用
+	 */
+	pan(dx, dy) {
+		// 参数验证
+		if(typeof dx !== 'number' || typeof dy !== 'number' || isNaN(dx) || isNaN(dy)) {
+			console.warn('jmGraph: pan - 无效的平移参数');
+			return this;
+		}
+		
+		this.translation.x += dx;
+		this.translation.y += dy;
+		this.needUpdate = true;
+		this.redraw();
+		
+		return this; // 支持链式调用
+	}
+
+	/**
+	 * 重置缩放和平移
+	 * 恢复画布到初始状态（缩放为1，平移为0）
+	 * 
+	 * @method resetTransform
+	 * @return {jmGraph} 返回当前实例，支持链式调用
+	 */
+	resetTransform() {
+		this.scaleFactor = 1;
+		this.translation = {x: 0, y: 0};
+		this.needUpdate = true;
+		this.redraw();
+		
+		return this; // 支持链式调用
+	}
+
 	/**
 	 * 保存为base64图形数据
 	 * 
@@ -525,6 +620,110 @@ export default class jmGraph extends jmControl {
 		return data;
 	}
 
+	/**
+	 * 导出为PNG图片
+	 * 使用Canvas的toDataURL方法导出当前画布内容
+	 * 
+	 * @method exportToPNG
+	 * @param {string} [fileName='jmgraph-export'] 文件名（不含扩展名）
+	 * @param {string} [format='image/png'] 图片格式，支持image/png和image/jpeg
+	 * @param {number} [quality=0.9] 图片质量（0-1之间，仅对JPEG格式有效）
+	 */
+	exportToPNG(fileName = 'jmgraph-export', format = 'image/png', quality = 0.9) {
+		try {
+			// 确保画布已渲染
+			this.redraw();
+			
+			const dataURL = this.canvas.toDataURL(format, quality);
+			this.downloadFile(dataURL, fileName, 'png');
+		} catch(error) {
+			console.error('jmGraph: exportToPNG - 导出失败', error);
+		}
+	}
+
+	/**
+	 * 导出为JPEG图片
+	 * 
+	 * @method exportToJPEG
+	 * @param {string} [fileName='jmgraph-export'] 文件名（不含扩展名）
+	 * @param {number} [quality=0.9] 图片质量（0-1之间）
+	 */
+	exportToJPEG(fileName = 'jmgraph-export', quality = 0.9) {
+		this.exportToPNG(fileName, 'image/jpeg', quality);
+	}
+
+	/**
+	 * 导出为SVG文件
+	 * 将当前画布内容转换为SVG格式
+	 * 注意：只有实现了toSVG方法的形状才能被导出
+	 * 
+	 * @method exportToSVG
+	 * @param {string} [fileName='jmgraph-export'] 文件名（不含扩展名）
+	 */
+	exportToSVG(fileName = 'jmgraph-export') {
+		try {
+			const svg = this.toSVG();
+			const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+			const url = URL.createObjectURL(blob);
+			this.downloadFile(url, fileName, 'svg');
+			
+			// 释放URL对象，避免内存泄漏
+			setTimeout(() => URL.revokeObjectURL(url), 100);
+		} catch(error) {
+			console.error('jmGraph: exportToSVG - 导出失败', error);
+		}
+	}
+
+	/**
+	 * 遍历所有形状，生成SVG标记
+	 *
+	 * @method toSVG
+	 * @return {string} SVG字符串
+	 */
+	toSVG() {
+		// SVG头部，包含命名空间和画布尺寸
+		let svg = `<svg width="${this.width}" height="${this.height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${this.width} ${this.height}">`;
+
+		// 添加背景色（如果有）
+		if(this.style && this.style.fill) {
+			svg += `<rect width="100%" height="100%" fill="${this.style.fill}"/>`;
+		}
+
+		// 遍历所有直接添加的形状
+		this.children.each((i, shape) => {
+			if(shape.toSVG) {
+				svg += shape.toSVG();
+			}
+		});
+
+		svg += '</svg>';
+		return svg;
+	}
+
+	/**
+	 * 下载文件
+	 * 创建临时链接元素触发浏览器下载
+	 * 
+	 * @method downloadFile
+	 * @private
+	 * @param {string} url 文件URL或Data URL
+	 * @param {string} fileName 文件名（不含扩展名）
+	 * @param {string} extension 文件扩展名
+	 */
+	downloadFile(url, fileName, extension) {
+		// 创建临时链接元素
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = `${fileName}.${extension}`;
+		
+		// 添加到DOM并触发点击
+		document.body.appendChild(link);
+		link.click();
+		
+		// 清理DOM
+		document.body.removeChild(link);
+	}
+
 	/** 
 	 * 自动刷新画版
 	 * @param {function} callback 执行回调
@@ -562,13 +761,14 @@ export default class jmGraph extends jmControl {
 	}
 }
 
-export { 
-	jmGraph, 
+export {
+	jmGraph,
 	jmUtils,
 	jmList,
 	jmProperty,
 	jmShadow,
 	jmGradient,
+	jmFilter,
 	jmEvents,
 	jmControl,
 	jmPath,

package/src/core/jmLayer.js

@@ -0,0 +1,142 @@
+import {jmControl} from "./jmControl.js";
+
+/**
+ * 图层类
+ * 用于组织和管理图形对象，支持可见性和锁定控制
+ * 图层可以包含多个图形对象，并控制它们的显示和交互
+ *
+ * @class jmLayer
+ * @extends jmControl
+ * @param {object} params 图层参数
+ * @param {string} [params.name] 图层名称，默认为 'Layer_${timestamp}'
+ * @param {boolean} [params.visible=true] 图层是否可见
+ * @param {boolean} [params.locked=false] 图层是否锁定（锁定后不可交互）
+ * @param {jmGraph} [params.graph] 所属的画布对象
+ */
+export default class jmLayer extends jmControl {
+	
+	constructor(params, t='jmLayer') {
+		params = params || {};
+		params.interactive = false; // 图层本身不响应交互事件
+		super(params, t);
+
+		this.name = params.name || `Layer_${Date.now()}`;
+		this.visible = params.visible !== false;
+		this.locked = params.locked || false;
+	}
+
+	/**
+	 * 图层名称
+	 * 图层的唯一标识符，用于查找和管理图层
+	 * 
+	 * @property name
+	 * @type {string}
+	 */
+	get name() {
+		return this.property('name');
+	}
+	set name(v) {
+		if(!v || typeof v !== 'string') {
+			console.warn('jmLayer: name must be a non-empty string');
+			return;
+		}
+		return this.property('name', v);
+	}
+
+	/**
+	 * 图层是否可见
+	 * 不可见的图层不会被渲染，但仍然存在于图层列表中
+	 * 
+	 * @property visible
+	 * @type {boolean}
+	 */
+	get visible() {
+		return this.property('visible');
+	}
+	set visible(v) {
+		this.needUpdate = true;
+		return this.property('visible', v);
+	}
+
+	/**
+	 * 图层是否锁定
+	 * 锁定的图层中的图形不可被选中或移动，但仍然可见
+	 * 适用于背景图层或参考图层
+	 * 
+	 * @property locked
+	 * @type {boolean}
+	 */
+	get locked() {
+		return this.property('locked');
+	}
+	set locked(v) {
+		return this.property('locked', v);
+	}
+
+	/**
+	 * 绘制图层
+	 * 只有可见的图层才会被绘制
+	 * 
+	 * @method paint
+	 * @param {boolean} v 是否需要重绘
+	 */
+	paint(v) {
+		if(this.visible !== false) {
+			super.paint(v);
+		}
+	}
+
+	/**
+	 * 检查点是否在图层内
+	 * 锁定的图层不会响应鼠标事件
+	 * 
+	 * @method checkPoint
+	 * @param {object} p 坐标点 {x, y}
+	 * @param {number} [pad] padding，额外的检测范围
+	 * @return {boolean} 是否在图层内
+	 */
+	checkPoint(p, pad) {
+		// 锁定的图层不响应交互
+		if(this.locked) return false;
+		return super.checkPoint(p, pad);
+	}
+
+	/**
+	 * 清空图层
+	 * 移除图层中的所有图形对象
+	 * 
+	 * @method clear
+	 */
+	clear() {
+		this.children.clear();
+		this.needUpdate = true;
+	}
+
+	/**
+	 * 获取图层中的图形数量
+	 * 
+	 * @method getShapeCount
+	 * @return {number} 图形数量
+	 */
+	getShapeCount() {
+		return this.children.length;
+	}
+
+	/**
+	 * 获取图层信息
+	 * 返回图层的基本信息，用于调试和日志
+	 * 
+	 * @method getInfo
+	 * @return {object} 图层信息对象
+	 */
+	getInfo() {
+		return {
+			name: this.name,
+			visible: this.visible,
+			locked: this.locked,
+			shapeCount: this.getShapeCount()
+		};
+	}
+}
+
+export { jmLayer };

package/src/core/jmPath.js

@@ -28,6 +28,61 @@ export default class jmPath extends jmControl {
 	set points(v) {
 		this.needUpdate = true;
 		return this.property('points', v);
+	}
+
+	/**
+	 * 转换为SVG路径
+	 * 
+	 * @method toSVG
+	 * @return {string} SVG路径字符串
+	 */
+	toSVG() {
+		if(!this.points || this.points.length === 0) return '';
+		
+		let pathData = '';
+		const points = this.points;
+		
+		// 移动到起点
+		pathData += `M ${points[0].x} ${points[0].y}`;
+		
+		// 绘制路径
+		for(let i = 1; i < points.length; i++) {
+			const p = points[i];
+			if(p.m) {
+				// 移动到新位置
+				pathData += ` M ${p.x} ${p.y}`;
+			} else {
+				// 直线到
+				pathData += ` L ${p.x} ${p.y}`;
+			}
+		}
+		
+		// 如果是封闭路径
+		if(this.style && this.style.close) {
+			pathData += ' Z';
+		}
+		
+		// 构建SVG元素
+		let svg = '<path d="' + pathData + '"';
+		
+		// 添加样式
+		if(this.style) {
+			if(this.style.fill) {
+				svg += ' fill="' + this.style.fill + '"';
+			}
+			if(this.style.stroke) {
+				svg += ' stroke="' + this.style.stroke + '"';
+			}
+			if(this.style.lineWidth) {
+				svg += ' stroke-width="' + this.style.lineWidth + '"';
+			}
+			if(this.style.opacity) {
+				svg += ' opacity="' + this.style.opacity + '"';
+			}
+		}
+		
+		svg += '/>';
+		return svg;
 	}	
 	
 }

package/src/core/jmUtils.js

@@ -165,66 +165,75 @@ export default class jmUtils {
      * @param {function} copyHandler 复制对象回调，如果返回undefined，就走后面的逻辑，否则到这里中止
      * @return {object} 参数source的拷贝对象
      */
-    static clone(source, target, deep = false, copyHandler = null, deepIndex = 0) {
+    static clone(source, target, deep = false, copyHandler = null, deepIndex = 0, cloned = null) {
         // 如果有指定回调，则用回调处理，否则走后面的复制逻辑
         if(typeof copyHandler === 'function') {
             const obj = copyHandler(source, deep, deepIndex);
             if(obj) return obj;
         }
-        deepIndex++; // 每执行一次，需要判断最大拷贝深度        
+
+        // 首次调用时初始化克隆映射表（用于处理循环引用）
+        if(!cloned) cloned = new WeakMap();
 
         if(typeof target === 'boolean') {
             deep = target;
             target = undefined;
         }
 
-        // 超过100拷贝深度，直接返回
-        if(deepIndex > 100) {
-            return target;
+        // 非对象直接返回
+        if(!source || typeof source !== 'object') {
+            return typeof target !== 'undefined' ? target : source;
         }
 
-        if(source && typeof source === 'object') {
-            target = target || {};
+        // 如果source已经被克隆过，直接返回之前的克隆对象，打破循环引用
+        if(cloned.has(source)) return cloned.get(source);
 
+        // 数组处理
+        if(Array.isArray(source)) {
             //如果为当前泛型，则直接new
             if(this.isType(source, jmList)) {
                 return new jmList(source);
             }
-            else if(Array.isArray(source)) {
-                //如果是深度复，则拷贝每个对象
-                if(deep) {
-                    let dest = [];
-                    for(let i=0; i<source.length; i++) {
-                        dest.push(this.clone(source[i], target[i], deep, copyHandler, deepIndex));
-                    }
-                    return dest;
-                }
-                return source.slice(0);
-            }
-           
-            if(source.__proto__) target.__proto__ = source.__proto__;
-            
-            for(let k in source) {
-                if(k === 'constructor') continue;
-                const v = source[k];
-                // 不复制页面元素和class对象
-                if(v && (v.tagName || v.getContext)) {
-                    target[k] = v;
-                    continue;
-                }
-
-                // 如果不是对象和空，则采用target的属性
-                if(typeof target[k] === 'object' || typeof target[k] === 'undefined') {                    
-                    target[k] = this.clone(v, target[k], deep, copyHandler, deepIndex);
+            if(deep) {
+                let dest = [];
+                cloned.set(source, dest);
+                for(let i = 0; i < source.length; i++) {
+                    dest.push(this.clone(source[i], undefined, deep, copyHandler, deepIndex + 1, cloned));
                 }
+                return dest;
             }
-            return target;
+            return source.slice(0);
         }
-        else if(typeof target != 'undefined') {
-            return target;
+
+        // 不复制页面元素和class对象（如jmControl实例等复杂对象保持引用）
+        if(source.tagName || source.getContext || source.emit) {
+            return source;
         }
 
-        return source;
+        // 普通对象处理
+        target = target || {};
+        cloned.set(source, target);
+
+        // 保持原型链一致
+        if(source.__proto__) target.__proto__ = source.__proto__;
+        
+        // 遍历自身可枚举属性（字符串键 + Symbol键），避免触发原型链上宿主对象的getter
+        const keys = Object.keys(source).concat(Object.getOwnPropertySymbols(source));
+        for(const k of keys) {
+            if(k === 'constructor') continue;
+            const v = source[k];
+            // 不复制页面元素和class对象
+            if(v && (v.tagName || v.getContext || v.emit)) {
+                target[k] = v;
+                continue;
+            }
+
+            // 如果不是对象和空，则采用target的属性
+            if(typeof target[k] === 'object' || typeof target[k] === 'undefined') {                    
+                target[k] = this.clone(v, target[k], deep, copyHandler, deepIndex + 1, cloned);
+            }
+        }
+        return target;
     }
 
     /**

package/src/lib/webgl/base.js

@@ -265,7 +265,6 @@ class WeblBase {
 
     // 创建程序
     createProgram(vertexSrc, fragmentSrc) {        
-        this.context.lineWidth(1);
         return createProgram(this.context, vertexSrc, fragmentSrc);
     }
 
@@ -378,7 +377,9 @@ class WeblBase {
     // polygonIndices 顶点索引，
     earCutPointsToTriangles(points) {
         this.earCutCache = this.earCutCache || (this.earCutCache = {});
-        const key = JSON.stringify(points);
+        // 快速缓存 key：用长度和首尾点坐标
+        const len = points.length;
+        const key = len + '_' + points[0].x + '_' + points[0].y + '_' + points[len-1].x + '_' + points[len-1].y;
         if (this.earCutCache[key]) return this.earCutCache[key];
 
         const ps = this.earCutPoints(points);// 切割得到3角色顶点索引，
@@ -473,31 +474,11 @@ class WeblBase {
 
         this.textureContext.fillStyle = fillStyle;
 
-        this.textureContext.beginPath();
+        // 规则图形用 fillRect，比 beginPath/lineTo/fill 快
         if(!points || !points.length) {
-            points = [];
-            points.push({
-                x: bounds.left,
-                y: bounds.top
-            });
-            points.push({
-                x: bounds.left + bounds.width,
-                y: bounds.top
-            });
-            points.push({
-                x: bounds.left + bounds.width,
-                y: bounds.top + bounds.height
-            });
-            points.push({
-                x: bounds.left,
-                y: bounds.top + bounds.height
-            });
-            points.push({
-                x: bounds.left,
-                y: bounds.top
-            });
-        }
-        if(points && points.length) {
+            this.textureContext.fillRect(0, 0, bounds.width, bounds.height);
+        } else {
+            this.textureContext.beginPath();
             for(const p of points) {
                 //移至当前坐标
                 if(p.m) {
@@ -506,17 +487,10 @@ class WeblBase {
                 else {
                     this.textureContext.lineTo(p.x - bounds.left, p.y - bounds.top);
                 }			
-            }	
-        }
-        else {
-            this.textureContext.moveTo(0, 0);
-            this.textureContext.lineTo(bounds.width, 0);
-            this.textureContext.lineTo(bounds.width, bounds.height);
-            this.textureContext.lineTo(0, bounds.height);
-            this.textureContext.lineTo(0, 0);
+            }
+            this.textureContext.closePath();
+            this.textureContext.fill();
         }
-        this.textureContext.closePath();
-        this.textureContext.fill();
 
         const data = this.textureContext.getImageData(0, 0, canvas.width, canvas.height);
         return {