jmgraph 3.2.22 → 3.2.24

package/index.js

@@ -55,10 +55,14 @@ class jmGraphImpl extends jmGraphCore {
         if(typeof option == 'function') {
 			callback = option;
 			option = {};
-        } 
+		} 
         
         super(canvas, option, callback);
     }
+
+    static create(...args) {
+        return new jmGraphImpl(...args);
+    }
 }
 
 //创建实例，支持不加 new 直接调用

package/package.json

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

package/src/core/jmGradient.js

@@ -90,7 +90,8 @@ export default class jmGradient {
 		let sy2 = Number(y2) + bounds.top;
 		if(this.type === 'linear') {
 			if(control.mode === 'webgl' && control.webglControl) {
-				gradient = control.webglControl.createLinearGradient(x1, y1, x2, y2, bounds);
+				// WebGL 着色器中 v_text_coord 是绝对坐标，需要传递绝对坐标
+				gradient = control.webglControl.createLinearGradient(sx1, sy1, sx2, sy2, bounds);
 				gradient.key = this.toString();
 			}	
 			else {		
@@ -109,7 +110,8 @@ export default class jmGradient {
 				r2 = d * r2;
 			}
 			if(control.mode === 'webgl' && control.webglControl) {
-				gradient = control.webglControl.createRadialGradient(x1, y1, r1, x2, y2, r2, bounds);
+				// WebGL 着色器中 v_text_coord 是绝对坐标，需要传递绝对坐标
+				gradient = control.webglControl.createRadialGradient(sx1, sy1, r1, sx2, sy2, r2, bounds);
 				gradient.key = this.toString();
 			}	
 			//offsetLine = Math.abs(r2 - r1);//二圆半径差

package/src/core/jmGraph.js

@@ -85,8 +85,6 @@ export default class jmGraph extends jmControl {
 		else {
 			this.context = canvas.getContext(this.mode);
 		}
-
-		this.textureCanvas = option.textureCanvas || null;
 		
 		// webgl模式
 		if(this.mode === 'webgl') {

package/src/lib/webgl/base.js

@@ -1,6 +1,6 @@
 
 import earcut from '../earcut.js';
-import webglGradient from './gradient.js';
+import webglGradient, { MAX_STOPS } from './gradient.js';
 import {
     createProgram,
     useProgram,
@@ -56,8 +56,8 @@ const pathVertexSource = `
         vec4 pos = translatePosition(a_position, a_center_point.x, a_center_point.y);
         gl_Position = pos;
         v_color = a_color;
-        if(a_type == 2) {
-            v_text_coord = a_text_coord;
+        if(a_type == 2 || a_type == 5) {
+            v_text_coord = a_position.xy;
         }
     }
 `;
@@ -67,21 +67,73 @@ const pathFragmentSource = `
     uniform sampler2D u_sample;
     uniform vec4 v_texture_bounds; // 纹理的左上坐标和大小 x,y,z,w
     uniform vec4 v_single_color;
+    // GLSL 渐变 uniforms
+    uniform int u_gradient_type;     // 0=无 1=线性 2=径向
+    uniform vec4 u_gradient_start;   // 线性:{x1,y1,0,0} 径向:{cx,cy,r1,0}
+    uniform vec4 u_gradient_end;     // 线性:{x2,y2,0,0} 径向:{cx,cy,r2,0}
+    uniform int u_gradient_stop_count;
+    uniform float u_gradient_offsets[${MAX_STOPS}];
+    uniform vec4 u_gradient_colors[${MAX_STOPS}]; // {r, g, b, a} 0~1 范围
     varying float v_type;
     varying vec4 v_color;
     varying vec2 v_text_coord;
 
     ${convertTexturePosition}
 
+    // 在 sorted stops 中按 t 值采样颜色
+    // 兼容 GLSL ES 1.0：循环仅与常量比较，无 break/continue
+    vec4 sampleGradient(float t) {
+        t = clamp(t, 0.0, 1.0);
+        // 正向扫描：始终遍历 MAX_STOPS-1 次，找到 t 所在段并覆盖结果
+        float localT = 0.0;
+        vec4 c0 = u_gradient_colors[0];
+        vec4 c1 = u_gradient_colors[0];
+        for(int i = 0; i < ${MAX_STOPS - 1}; i++) {
+            float s0 = u_gradient_offsets[i];
+            float s1 = u_gradient_offsets[i + 1];
+            if(t >= s0) {
+                float range = s1 - s0;
+                localT = range > 0.0001 ? clamp((t - s0) / range, 0.0, 1.0) : 0.0;
+                c0 = u_gradient_colors[i];
+                c1 = u_gradient_colors[i + 1];
+            }
+        }
+        return mix(c0, c1, localT);
+    }
+
     void main() {
         // 如果是fill，则直接填充颜色
         if(v_type == 1.0) {
             gl_FragColor = v_single_color;
         }
-        // 渐变色
+        // 渐变色 (旧方式，顶点颜色插值)
         else if(v_type == 3.0) {
             gl_FragColor = v_color;
         }
+        // GLSL 渐变填充 (type=5)
+        else if(v_type == 5.0) {
+            float t;
+            if(u_gradient_type == 2) {
+                // 径向渐变
+                vec2 d = v_text_coord - u_gradient_start.xy;
+                float dist = length(d);
+                float r1 = u_gradient_start.z;
+                float r2 = u_gradient_end.z;
+                float range = r2 - r1;
+                t = range > 0.001 ? (dist - r1) / range : 0.0;
+            } else {
+                // 线性渐变
+                vec2 dir = u_gradient_end.xy - u_gradient_start.xy;
+                float lenSq = dot(dir, dir);
+                if(lenSq > 0.001) {
+                    vec2 pos = v_text_coord - u_gradient_start.xy;
+                    t = dot(pos, dir) / lenSq;
+                } else {
+                    t = 0.0;
+                }
+            }
+            gl_FragColor = sampleGradient(t) * v_single_color.a;
+        }
         else if(v_type == 2.0) {
             vec2 pos = translateTexturePosition(v_text_coord, v_texture_bounds);
             gl_FragColor = texture2D(u_sample, pos);
@@ -152,7 +204,7 @@ class WeblBase {
     rotate(angle) {
         const cos = Math.cos(angle);
         const sin = Math.sin(angle);
-        const [a, b, c, d, tx, ty] = this.transformMatrix;
+        const [a, b, c, d] = this.transformMatrix;
         
         // 更新变换矩阵
         this.transformMatrix[0] = a * cos - b * sin;
@@ -183,21 +235,20 @@ class WeblBase {
         };
     }
 
-    // 纹理绘制canvas
-    get textureCanvas() {
-        let canvas = this.graph.textureCanvas;
-        if(!canvas) {
-            if(typeof document === 'undefined') return null;
-            canvas = this.graph.textureCanvas = document.createElement('canvas');
+    // 文本测量用的离屏 canvas context（1x1 单例缓存，不依赖 textureCanvas）
+    get _measureCtx() {
+        if(!this.__measureCtx) {
+            try {
+                if(typeof document !== 'undefined') {
+                    const c = document.createElement('canvas');
+                    c.width = c.height = 1;
+                    this.__measureCtx = c.getContext('2d');
+                }
+            } catch(e) {
+                this.__measureCtx = null;
+            }
         }
-        return canvas;
-    }
-    // 纹理绘制canvas ctx
-    get textureContext() {
-        const ctx = this.textureCanvas.ctx || (this.textureCanvas.ctx = this.textureCanvas.getContext('2d', {
-            willReadFrequently: true
-        }));
-        return ctx;
+        return this.__measureCtx;
     }
 
     // i当前程序
@@ -243,23 +294,37 @@ class WeblBase {
     // 把传统颜色转为webgl识别的
     convertColor(color) {
         if(this.isGradient(color)) return color;
-        if(typeof color === 'string') color = this.graph.utils.hexToRGBA(color);
-        return this.graph.utils.rgbToDecimal(color);
-    }
-
-    setTextureStyle(style, value='') {
-        
-        if(typeof style === 'string') {
-            if(['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(style) > -1) {
-                value = this.graph.utils.toColor(value);
+        if(typeof color === 'string') {
+            // 先尝试 hexToRGBA 解析
+            color = this.graph.utils.hexToRGBA(color);
+            // hexToRGBA 对无法识别的格式（如 hsl）会原样返回字符串
+            // 利用离屏 canvas 将任意 CSS 颜色转为 rgba
+            if(typeof color === 'string') {
+                color = this.__parseCSSColor(color);
             }
-            this.textureContext[style] = value;
         }
-        else {
-            for(const name in style) {
-                if(name === 'constructor') continue;
-                this.setTextureStyle(name, style[name]);
+        if(typeof color === 'object' && color.r !== undefined) {
+            return this.graph.utils.rgbToDecimal(color);
+        }
+        return color;
+    }
+
+    // 利用离屏 canvas 解析任意 CSS 颜色（hsl/hsla/命名颜色等）
+    __parseCSSColor(colorStr) {
+        const ctx = this._measureCtx;
+        if(!ctx) return { r: 0, g: 0, b: 0, a: 0 };
+        try {
+            ctx.clearRect(0, 0, 1, 1);
+            ctx.fillStyle = '#000000';
+            ctx.fillStyle = colorStr;
+            ctx.fillRect(0, 0, 1, 1);
+            const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+            if(ctx.fillStyle === '#000000' && colorStr !== '#000000' && colorStr !== 'black') {
+                return { r: 0, g: 0, b: 0, a: 0 };
             }
+            return { r, g, b, a: a / 255 };
+        } catch(e) {
+            return { r: 0, g: 0, b: 0, a: 0 };
         }
     }
 
@@ -434,70 +499,24 @@ class WeblBase {
         return obj && obj instanceof webglGradient;
     }
 
-    /**
+	/**
 	 * 测试获取文本所占大小
 	 *
 	 * @method testSize
 	 * @return {object} 含文本大小的对象
 	 */
 	testSize(text, style=this.style) {
-		
-		this.textureContext.save && this.textureContext.save();
-		// 修改字体，用来计算
-		if(style.font || style.fontSize) this.textureContext.font = style.font || (style.fontSize + 'px ' + style.fontFamily);
-		
-		//计算宽度
-		const size = this.textureContext.measureText?
-                        this.textureContext.measureText(text):
-							{width:15};
-        this.textureContext.restore &&this.textureContext.restore();
-		size.height = this.style.fontSize? this.style.fontSize: 15;
+		const ctx = this._measureCtx;
+		if(!ctx) return { width: 15, height: style.fontSize || 15 };
+
+		ctx.save && ctx.save();
+		if(style.font || style.fontSize) ctx.font = style.font || (style.fontSize + 'px ' + style.fontFamily);
+		const size = ctx.measureText ? ctx.measureText(text) : { width: 15 };
+        ctx.restore && ctx.restore();
+		size.height = style.fontSize ? parseInt(style.fontSize) : 15;
 		return size;
 	}
-
-    // 使用纹理canvas生成图，
-    // 填充可以是颜色或渐变对象
-    // 如果指定了points，则表明要绘制不规则的图形
-    toFillTexture(fillStyle, bounds, points=null) {
-        const canvas = this.textureCanvas;
-        if(!canvas) {
-            return fillStyle;
-        }
-        canvas.width = bounds.width;
-        canvas.height = bounds.height;
-
-        if(!canvas.width || !canvas.height) {
-            return fillStyle;
-        }
-
-        this.textureContext.clearRect(0, 0, canvas.width, canvas.height);
-
-        this.textureContext.fillStyle = fillStyle;
-
-        // 规则图形用 fillRect，比 beginPath/lineTo/fill 快
-        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) {
-                    this.textureContext.moveTo(p.x - bounds.left, p.y - bounds.top);
-                }
-                else {
-                    this.textureContext.lineTo(p.x - bounds.left, p.y - bounds.top);
-                }			
-            }
-            this.textureContext.closePath();
-            this.textureContext.fill();
-        }
-
-        const data = this.textureContext.getImageData(0, 0, canvas.width, canvas.height);
-        return {
-            data,
-            points
-        };
-    }
 }
 
-export default WeblBase;
+export default WeblBase;
+export { pathVertexSource, pathFragmentSource, MAX_STOPS };

package/src/lib/webgl/gradient.js

@@ -1,8 +1,11 @@
-const WebglGradientTextureCache = {};
-// 渐变
+const MAX_STOPS = 16;
+
+/**
+ * WebGL 渐变对象
+ * 支持 GLSL 着色器直接计算渐变色，无需 textureCanvas
+ */
 class WebglGradient {
-    // type:[linear= 线性渐变,radial=放射性渐变] 
-    constructor(type='linear', params={}) {
+    constructor(type = 'linear', params = {}) {
         this.type = type || 'linear';
 
         this.x1 = params.x1 || 0;
@@ -17,166 +20,120 @@ class WebglGradient {
             top: 0,
             width: 0,
             height: 0
-        }
+        };
 
         this.control = params.control;
 
         this.stops = [];
-        this.init();
-    }
-
-    init() {
-        const dx = this.x2 - this.x1;
-        const dy = this.y2 - this.y1;
-
-        if(this.type === 'radial') {
-            this.length = this.r2 - this.r1;
-        }
-        else if(dx === 0 && dy === 0) {
-            this.length = 0;
-        }
-        else {
-            // 渐变中心的距离
-            this.length = Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
-            this.sin = dy / this.length;
-            this.cos = dx / this.length;
-        }
+        this._sortedStops = null;
+        this._paramsHash = null;
     }
 
-    // 渐变颜色
+    /**
+     * 添加颜色断点
+     */
     addColorStop(offset, color) {
         this.stops.push({
-            offset,
+            offset: Math.max(0, Math.min(1, offset)),
             color
         });
+        this._sortedStops = null;
+        this._paramsHash = null;
     }
 
-    // 转为渐变为纹理
-    toImageData(control, bounds, points=null) {
-        // 缓存基于渐变参数（不含 bounds，因为同一个渐变只是位置不同时纹理相同）
-        const gradientKey = this.toString();
-        if(this.__cachedData && this.__cacheKey === gradientKey && 
-           this.__cachedData.data && this.__cachedData.data.width === Math.ceil(bounds.width) &&
-           this.__cachedData.data.data && this.__cachedData.data.data.height === Math.ceil(bounds.height)) {
-            return this.__cachedData;
-        }
-
-        if(!control.textureContext) {
-            return null;
-        }
-        let gradient = null;
-        if(this.type === 'linear') {
-            gradient = control.textureContext.createLinearGradient(this.x1, this.y1, this.x2, this.y2);
-        }
-        else {
-            gradient = control.textureContext.createRadialGradient(this.x1, this.y1, this.r1, this.x2, this.y2, this.r2);
-        }
-        this.stops.forEach(function(s, i) {	
-            const c = control.graph.utils.toColor(s.color);
-            gradient && gradient.addColorStop(s.offset, c);		
-        });
-        
-        const data = control.toFillTexture(gradient, bounds, points);
+    /**
+     * 获取排序后的 stops（带解析后的颜色）
+     */
+    _getSortedStops() {
+        if (this._sortedStops) return this._sortedStops;
 
-        this.__cachedData = data;
-        this.__cacheKey = gradientKey;
+        const utils = this.control && this.control.graph && this.control.graph.utils;
+        this._sortedStops = this.stops
+            .map(s => {
+                let c = s.color;
+                if (utils && typeof c === 'string') {
+                    c = utils.hexToRGBA(c);
+                }
+                if (typeof c === 'object' && c !== null) {
+                    // hexToRGBA 返回 r/g/b 为 0~255，a 为 0~1
+                    // 但如果已经是 0~1 范围（由 rgbToDecimal 处理过），需要检测
+                    const needNormalize = (c.r > 1 || c.g > 1 || c.b > 1) ? 255 : 1;
+                    return {
+                        offset: s.offset,
+                        r: (c.r !== undefined ? c.r : 0) / needNormalize,
+                        g: (c.g !== undefined ? c.g : 0) / needNormalize,
+                        b: (c.b !== undefined ? c.b : 0) / needNormalize,
+                        a: c.a !== undefined ? c.a : 1
+                    };
+                }
+                return { offset: s.offset, r: 0, g: 0, b: 0, a: 1 };
+            })
+            .sort((a, b) => a.offset - b.offset);
 
-        return data;
+        return this._sortedStops;
     }
 
-    // 当渐变参数变化时使缓存失效
-    invalidateCache() {
-        this.__cachedData = null;
-        this.__cacheKey = null;
-    }
+    /**
+     * 将渐变参数以 uniform 形式传递给着色器
+     * 返回 { type, start, end, stopCount, stops } 供着色器使用
+     */
+    toUniformParams() {
+        const stops = this._getSortedStops();
+        const count = Math.min(stops.length, MAX_STOPS);
 
-    // 根据绘制图形的坐标计算出对应点的颜色
-    /*
-    toPointColors(points) {
-        const stops = this.getStops();
-        const colors = [];
-        for(let i=0; i<points.length; i+=2) {
-            const p = {
-                x: points[i],
-                y: points[i+1]
-            }
-            if(this.type === 'radial') {
-                const dx = p.x - this.x1;
-                const dy = p.y - this.y1;
-                const len = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
-                const rang = this.getStopRange(len, stops);
-                if(!rang.start && rang.end) {
-                    colors.push(rang.end.color);
-                }
-                else if(!rang.end && rang.start) {
-                    colors.push(rang.start.color);
-                }
-                else {
-                    const rangLength = rang.end.length - rang.start.length;
-                    const offlen = len - rang.start.length;
-                    const per = offlen / rangLength;
-                    const color = {
-                        r: rang.start.color.r + (rang.end.color.r - rang.start.color.r) * per,
-                        g: rang.start.color.g + (rang.end.color.g - rang.start.color.g) * per,
-                        b: rang.start.color.b + (rang.end.color.b - rang.start.color.b) * per,
-                        a: rang.start.color.a + (rang.end.color.a - rang.start.color.a) * per,
-                    };
-                    colors.push(color);
-                }
-            }
+        // 展平为 Float32Array: [offset, r, g, b, a, ...]
+        const flatStops = new Float32Array(count * 5);
+        for (let i = 0; i < count; i++) {
+            const s = stops[i];
+            flatStops[i * 5 + 0] = s.offset;
+            flatStops[i * 5 + 1] = s.r;
+            flatStops[i * 5 + 2] = s.g;
+            flatStops[i * 5 + 3] = s.b;
+            flatStops[i * 5 + 4] = s.a;
         }
-        return colors;
+
+        return {
+            gradientType: this.type === 'radial' ? 2 : 1,
+            gradientStart: new Float32Array([
+                this.x1, this.y1,
+                this.type === 'radial' ? Math.max(0, this.r1) : 0,
+                0
+            ]),
+            gradientEnd: new Float32Array([
+                this.x2, this.y2,
+                this.type === 'radial' ? Math.max(0, this.r2) : 0,
+                0
+            ]),
+            stopCount: count,
+            stops: flatStops
+        };
     }
-*/
-    // 根据起点距离获取边界stop
-    /*
-    getStopRange(len, stops) {
-        const res = {};
-        for(const s of stops) {
-            if(s.length <= len) {
-                res.start = s;
-            }
-            else {
-                res.end = s;
-            }
-        }
-        return res;
+
+    /**
+     * 使缓存失效
+     */
+    invalidateCache() {
+        this._sortedStops = null;
+        this._paramsHash = null;
     }
 
-    // 根据stop计算offset长度
-    getStops() {
-        const stops = this.stops.sort((p1, p2) => p1.offset - p2.offset); // 渐变色排序从小于大
-        for(const s of stops) {
-            
-            const color = typeof s.color === 'string'? this.control.graph.utils.hexToRGBA(s.color) : s.color;
-            console.log(s, color);
-            s.color = this.control.graph.utils.rgbToDecimal(color);
-            s.length = s.offset * this.length;
+    /**
+     * 转换为渐变的字符串表达
+     */
+    toString() {
+        let str = this.type + '-gradient(';
+        if (this.type == 'linear') {
+            str += this.x1 + ' ' + this.y1 + ' ' + this.x2 + ' ' + this.y2;
         }
-        return stops;
+        else {
+            str += this.x1 + ' ' + this.y1 + ' ' + this.r1 + ' ' + this.x2 + ' ' + this.y2 + ' ' + this.r2;
+        }
+        this.stops.forEach(function(s) {
+            str += ',' + s.color + ' ' + s.offset;
+        });
+        return str + ')';
     }
-*/
-    /**
-	 * 转换为渐变的字符串表达
-	 *
-	 * @method toString
-	 * @for jmGradient
-	 * @return {string} linear-gradient(x1 y1 x2 y2, color1 step, color2 step, ...);	//radial-gradient(x1 y1 r1 x2 y2 r2, color1 step,color2 step, ...);
-	 */
-	toString() {
-		let str = this.type + '-gradient(';
-		if(this.type == 'linear') {
-			str += this.x1 + ' ' + this.y1 + ' ' + this.x2 + ' ' + this.y2;
-		}
-		else {
-			str += this.x1 + ' ' + this.y1 + ' ' + this.r1 + ' ' + this.x2 + ' ' + this.y2 + ' ' + this.r2;
-		}
-		//颜色渐变
-		this.stops.forEach(function(s) {	
-			str += ',' + s.color + ' ' + s.offset;
-		});
-		return str + ')';
-	}
 }
 
-export default WebglGradient;
+export default WebglGradient;
+export { MAX_STOPS };

package/src/lib/webgl/index.js

@@ -105,23 +105,22 @@ class webgl {
         // 由具体的绘制方法处理
     }
 
-    // 测量文本宽度（复用纹理 canvas 的 context）
+    // 测量文本宽度
     measureText(text) {
-        const ctx = this.base.textureContext;
-        if(ctx && ctx.measureText) return ctx.measureText(text);
-        const canvas = document.createElement('canvas');
-        const ctx2 = canvas.getContext('2d');
-        return ctx2.measureText(text);
+        if(this.base && this.base._measureCtx) {
+            return this.base._measureCtx.measureText(text);
+        }
+        return { width: 15 };
     }
 
     // 创建线性渐变
-    createLinearGradient(x1, y1, x2, y2) {
-        return this.base.createLinearGradient(x1, y1, x2, y2);
+    createLinearGradient(x1, y1, x2, y2, bounds) {
+        return this.base.createLinearGradient(x1, y1, x2, y2, bounds);
     }
 
     // 创建径向渐变
-    createRadialGradient(x1, y1, r1, x2, y2, r2) {
-        return this.base.createRadialGradient(x1, y1, r1, x2, y2, r2);
+    createRadialGradient(x1, y1, r1, x2, y2, r2, bounds) {
+        return this.base.createRadialGradient(x1, y1, r1, x2, y2, r2, bounds);
     }
 
     // 绘制图像