jmgraph 3.2.21 → 3.2.24

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);
     }
 
     // 绘制图像

package/src/lib/webgl/path.js

@@ -1,4 +1,5 @@
-import WebglBase from './base.js';
+import WebglBase, { MAX_STOPS } from './base.js';
+import earcut from '../earcut.js';
 
 // path 绘制类
 class WebglPath extends WebglBase {
@@ -55,8 +56,14 @@ class WebglPath extends WebglBase {
         //this.useProgram();
 
         if(parentBounds) this.parentAbsoluteBounds = parentBounds;
-        // 写入当前canvas大小
-        this.context.uniform2f(this.program.uniforms.a_center_point.location, this.graph.width / 2, this.graph.height / 2);
+        // 缓存中心点值，只在变化时才更新 uniform
+        const cx = this.graph.width / 2;
+        const cy = this.graph.height / 2;
+        if(this.__lastCenterX !== cx || this.__lastCenterY !== cy) {
+            this.context.uniform2f(this.program.uniforms.a_center_point.location, cx, cy);
+            this.__lastCenterX = cx;
+            this.__lastCenterY = cy;
+        }
     }
 
     setFragColor(color) {
@@ -198,6 +205,112 @@ class WebglPath extends WebglBase {
     equalPoint(p1, p2) {
         return p1.x === p2.x && p1.y === p2.y;
     }
+
+    // 将带 moveTo 标记的点集拆分为外轮廓和多个洞
+    splitSubPaths(points) {
+        const subPaths = [];
+        let current = [];
+        for(let i = 0; i < points.length; i++) {
+            const p = points[i];
+            if(p.m && current.length > 0) {
+                subPaths.push(current);
+                current = [];
+            }
+            current.push(p);
+        }
+        if(current.length > 0) subPaths.push(current);
+
+        // 面积最大的作为外轮廓，其余作为洞
+        let maxArea = -1;
+        let outerIdx = 0;
+        for(let i = 0; i < subPaths.length; i++) {
+            const area = Math.abs(this.polygonArea(subPaths[i]));
+            if(area > maxArea) {
+                maxArea = area;
+                outerIdx = i;
+            }
+        }
+
+        const outerPoints = subPaths[outerIdx];
+        const holes = [];
+        for(let i = 0; i < subPaths.length; i++) {
+            if(i !== outerIdx) holes.push(subPaths[i]);
+        }
+        return { outerPoints, holes };
+    }
+
+    // 计算多边形面积（Shoelace 公式）
+    polygonArea(points) {
+        let area = 0;
+        const n = points.length;
+        for(let i = 0; i < n; i++) {
+            const j = (i + 1) % n;
+            area += points[i].x * points[j].y;
+            area -= points[j].x * points[i].y;
+        }
+        return area / 2;
+    }
+
+    // 使用 earcut 带 holes 填充多边形
+    fillWithHoles(outerPoints, holes, isTexture = false) {
+        // 将所有点合并：外轮廓 + 各个洞，并记录洞的起始索引
+        const allPoints = [...outerPoints];
+        const holeIndices = [];
+        for(const hole of holes) {
+            holeIndices.push(allPoints.length);
+            allPoints.push(...hole);
+        }
+
+        const dim = 2;
+        const vertexData = [];
+        for(const p of allPoints) {
+            vertexData.push(p.x, p.y);
+        }
+
+        // 用 earcut 进行带洞三角化
+        const indices = earcut(vertexData, holeIndices, dim);
+
+        if(!indices || indices.length < 3) return;
+
+        // 构建 GPU 顶点数据
+        const allVertices = [];
+        const allTexCoords = [];
+        for(let i = 0; i < indices.length; i++) {
+            const p = allPoints[indices[i]];
+            allVertices.push(p.x, p.y);
+            if(isTexture) allTexCoords.push(p.x, p.y);
+        }
+
+        const gl = this.context;
+        const vertexArr = new Float32Array(allVertices);
+
+        let posBuffer = this.__cachedBuffers.find(b => b.attr === this.program.attrs.a_position);
+        if(!posBuffer) {
+            posBuffer = this.createFloat32Buffer(vertexArr, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW);
+            posBuffer.attr = this.program.attrs.a_position;
+            this.__cachedBuffers.push(posBuffer);
+        } else {
+            gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertexArr, gl.DYNAMIC_DRAW);
+        }
+        this.writeVertexAttrib(posBuffer, this.program.attrs.a_position, 2, 0, 0);
+
+        if(isTexture && allTexCoords.length) {
+            const texData = new Float32Array(allTexCoords);
+            let texBuffer = this.__cachedBuffers.find(b => b.attr === this.program.attrs.a_text_coord);
+            if(!texBuffer) {
+                texBuffer = this.createFloat32Buffer(texData, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW);
+                texBuffer.attr = this.program.attrs.a_text_coord;
+                this.__cachedBuffers.push(texBuffer);
+            } else {
+                gl.bindBuffer(gl.ARRAY_BUFFER, texBuffer.buffer);
+                gl.bufferData(gl.ARRAY_BUFFER, texData, gl.DYNAMIC_DRAW);
+            }
+            this.writeVertexAttrib(texBuffer, this.program.attrs.a_text_coord, 2, 0, 0);
+        }
+
+        gl.drawArrays(gl.TRIANGLES, 0, allVertices.length / 2);
+    }
     // 把path坐标集合转为线段集
     pathToLines(points) {
         let start = null;
@@ -470,9 +583,46 @@ class WebglPath extends WebglBase {
         }
         if(points && points.length) {
             const regular = lineWidth <= 1.2;
-            points = regular? points : this.pathToPoints(points);
-            const buffer = this.writePoints(points);
-            this.context.drawArrays(regular? this.context.LINE_LOOP: this.context.POINTS, 0, points.length);
+            const hasMoveTo = points.some && points.some(p => p.m);
+            const isRing = !hasMoveTo && this.needCut; // 空心形状（jmHArc close=true 时无 m 标记）
+            if(regular && (hasMoveTo || isRing)) {
+                // 有 moveTo 标记或空心形状时，分段绘制每个子路径的 LINE_LOOP
+                // 避免 LINE_LOOP 把不同子路径的点连起来产生拉扯线
+                if(hasMoveTo) {
+                    let subPath = [];
+                    for(let i = 0; i < points.length; i++) {
+                        if(points[i].m && subPath.length > 0) {
+                            const buffer = this.writePoints(subPath);
+                            this.context.drawArrays(this.context.LINE_LOOP, 0, subPath.length);
+                            subPath = [];
+                        }
+                        subPath.push(points[i]);
+                    }
+                    if(subPath.length > 1) {
+                        const buffer = this.writePoints(subPath);
+                        this.context.drawArrays(this.context.LINE_LOOP, 0, subPath.length);
+                    }
+                }
+                else if(isRing) {
+                    // 空心形状：前半段为内弧，后半段为外弧（反向），各自 LINE_LOOP
+                    const mid = Math.floor(points.length / 2);
+                    const inner = points.slice(0, mid);
+                    const outer = points.slice(mid);
+                    if(inner.length > 1) {
+                        this.writePoints(inner);
+                        this.context.drawArrays(this.context.LINE_LOOP, 0, inner.length);
+                    }
+                    if(outer.length > 1) {
+                        this.writePoints(outer);
+                        this.context.drawArrays(this.context.LINE_LOOP, 0, outer.length);
+                    }
+                }
+            }
+            else {
+                points = regular? points : this.pathToPoints(points);
+                const buffer = this.writePoints(points);
+                this.context.drawArrays(regular? this.context.LINE_LOOP: this.context.POINTS, 0, points.length);
+            }
             // buffer 由 endDraw 统一清理
         }
         colorBuffer && this.disableVertexAttribArray(colorBuffer && colorBuffer.attr);
@@ -494,10 +644,9 @@ class WebglPath extends WebglBase {
 
     fillColor(color, points, bounds, type=1) {
         
-        // 如果是渐变色，则需要计算偏移量的颜色
+        // 如果是渐变色，使用 GLSL 着色器直接计算
         if(this.isGradient(color)) {
-            const imgData = color.toImageData(this, bounds, points);
-            return this.fillImage(imgData.data, imgData.points, bounds);
+            return this.fillGradient(color, points, bounds);
         }
         
         // 标注为fill
@@ -510,6 +659,83 @@ class WebglPath extends WebglBase {
 
     }
 
+    /**
+     * 使用 GLSL 着色器渲染渐变填充
+     * 无需 textureCanvas，直接通过 uniform 传递渐变参数给 GPU
+     */
+    fillGradient(gradient, points, bounds) {
+        const params = gradient.toUniformParams();
+        if(!params) return;
+
+        // 标注为 GLSL 渐变 (type=5)
+        this.context.uniform1i(this.program.uniforms.a_type.location, 5);
+
+        // 设置 globalAlpha（通过 v_single_color.a 传递给着色器）
+        this.context.uniform4f(this.program.uniforms.v_single_color.location, 1.0, 1.0, 1.0, this.style.globalAlpha);
+
+        // 设置渐变类型
+        if(this.program.uniforms.u_gradient_type) {
+            this.context.uniform1i(this.program.uniforms.u_gradient_type.location, params.gradientType);
+        }
+
+        // 设置渐变起点/终点
+        if(this.program.uniforms.u_gradient_start) {
+            this.context.uniform4fv(this.program.uniforms.u_gradient_start.location, params.gradientStart);
+        }
+        if(this.program.uniforms.u_gradient_end) {
+            this.context.uniform4fv(this.program.uniforms.u_gradient_end.location, params.gradientEnd);
+        }
+
+        // 设置颜色断点数量
+        if(this.program.uniforms.u_gradient_stop_count) {
+            this.context.uniform1i(this.program.uniforms.u_gradient_stop_count.location, params.stopCount);
+        }
+
+        // 设置每个 stop 的 offset
+        // 关键：必须填充完整的 MAX_STOPS 长度数组，否则未初始化元素默认为 0
+        // 会导致着色器循环中 t >= 0 始终为 true，返回黑色
+        if(this.program.uniforms.u_gradient_offsets) {
+            const offsets = new Float32Array(MAX_STOPS);
+            for(let i = 0; i < params.stopCount; i++) {
+                offsets[i] = params.stops[i * 5];
+            }
+            // 用 2.0 填充剩余项，使 t(0~1) >= 2.0 为 false，不会被匹配
+            for(let i = params.stopCount; i < MAX_STOPS; i++) {
+                offsets[i] = 2.0;
+            }
+            this.context.uniform1fv(this.program.uniforms.u_gradient_offsets.location, offsets);
+        }
+
+        // 设置每个 stop 的颜色 (rgba)
+        if(this.program.uniforms.u_gradient_colors) {
+            const colors = new Float32Array(MAX_STOPS * 4);
+            for(let i = 0; i < params.stopCount; i++) {
+                colors[i * 4 + 0] = params.stops[i * 5 + 1]; // r
+                colors[i * 4 + 1] = params.stops[i * 5 + 2]; // g
+                colors[i * 4 + 2] = params.stops[i * 5 + 3]; // b
+                colors[i * 4 + 3] = params.stops[i * 5 + 4]; // a
+            }
+            // 用最后一个 stop 的颜色填充剩余项，确保不会返回黑色
+            if(params.stopCount > 0) {
+                const lastR = params.stops[(params.stopCount - 1) * 5 + 1];
+                const lastG = params.stops[(params.stopCount - 1) * 5 + 2];
+                const lastB = params.stops[(params.stopCount - 1) * 5 + 3];
+                const lastA = params.stops[(params.stopCount - 1) * 5 + 4];
+                for(let i = params.stopCount; i < MAX_STOPS; i++) {
+                    colors[i * 4 + 0] = lastR;
+                    colors[i * 4 + 1] = lastG;
+                    colors[i * 4 + 2] = lastB;
+                    colors[i * 4 + 3] = lastA;
+                }
+            }
+            this.context.uniform4fv(this.program.uniforms.u_gradient_colors.location, colors);
+        }
+
+        // 填充多边形（需要纹理坐标来计算渐变位置）
+        this.fillPolygons(points, true);
+        this.disableVertexAttribArray(this.program.attrs.a_text_coord);
+    }
+
     // 区域填充图片
     // points绘制的图形顶点
     // 图片整体绘制区域
@@ -575,6 +801,29 @@ class WebglPath extends WebglBase {
 
         // 规则图形（凸多边形，如圆）：直接用 TRIANGLE_FAN 一次性绘制，无需 earcut
         if(this.isRegular) {
+            // 检查是否有 moveTo 标记，如果有说明路径包含多个子路径（如空心圆弧 jmHArc）
+            const hasMoveTo = points.some && points.some(p => p.m);
+            if(hasMoveTo) {
+                // 有 m 标记：按 m 标记拆分子路径
+                const { outerPoints, holes } = this.splitSubPaths(points);
+                this.fillWithHoles(outerPoints, holes, isTexture);
+                return;
+            }
+            // 无 m 标记但 needCut=true 表示空心形状（如 jmHArc close=true）
+            // 前半段为内弧，后半段为外弧（反向），按中点拆分
+            if(this.needCut && points.length >= 6) {
+                const mid = Math.floor(points.length / 2);
+                const inner = points.slice(0, mid);
+                const outer = points.slice(mid);
+                const innerArea = Math.abs(this.polygonArea(inner));
+                const outerArea = Math.abs(this.polygonArea(outer));
+                if(outerArea >= innerArea) {
+                    this.fillWithHoles(outer, [inner], isTexture);
+                } else {
+                    this.fillWithHoles(inner, [outer], isTexture);
+                }
+                return;
+            }
             const buffer = this.writePoints(points);
             const coordBuffer = isTexture? this.writePoints(points, this.program.attrs.a_text_coord): null;
             this.context.drawArrays(this.context.TRIANGLE_FAN, 0, points.length);
@@ -642,46 +891,73 @@ class WebglPath extends WebglBase {
     }
 
     drawText(text, x, y, bounds) {
-        let canvas = this.textureCanvas;
+        // 文本渲染仍需要 2D canvas 绘制字形，然后作为纹理上传
+        // 使用临时 canvas，不依赖共享的 textureCanvas
+        if(!bounds.width || !bounds.height) return null;
+        if(typeof document === 'undefined') return null;
+
+        let canvas = this.__textCanvas;
         if(!canvas) {
-            return null;
+            canvas = document.createElement('canvas');
+            this.__textCanvas = canvas;
         }
         canvas.width = bounds.width;
         canvas.height = bounds.height;
 
-        if(!canvas.width || !canvas.height) {
-            return null;
-        }
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-        this.textureContext.clearRect(0, 0, canvas.width, canvas.height);
         // 修改字体
-		this.textureContext.font = this.style.font || (this.style.fontSize + 'px ' + this.style.fontFamily);
+        ctx.font = this.style.font || (this.style.fontSize + 'px ' + this.style.fontFamily);
 
         x -= bounds.left;
         y -= bounds.top;
 
-        this.setTextureStyle(this.style);
-
-        if(this.style.fillStyle && this.textureContext.fillText) {
+        // 设置文本样式
+        if(this.style.fillStyle) {
+            ctx.fillStyle = this.graph.utils.toColor(this.style.fillStyle);
+        }
+        if(this.style.strokeStyle) {
+            ctx.strokeStyle = this.graph.utils.toColor(this.style.strokeStyle);
+        }
+        if(this.style.shadowColor) {
+            ctx.shadowColor = this.graph.utils.toColor(this.style.shadowColor);
+        }
+        if(this.style.shadowBlur) {
+            ctx.shadowBlur = this.style.shadowBlur;
+        }
+        if(this.style.shadowOffsetX !== undefined) {
+            ctx.shadowOffsetX = this.style.shadowOffsetX;
+        }
+        if(this.style.shadowOffsetY !== undefined) {
+            ctx.shadowOffsetY = this.style.shadowOffsetY;
+        }
+        if(this.style.textAlign) {
+            ctx.textAlign = this.style.textAlign;
+        }
+        if(this.style.textBaseline) {
+            ctx.textBaseline = this.style.textBaseline;
+        }
 
+        if(this.style.fillStyle && ctx.fillText) {
             if(this.style.maxWidth) {
-                this.textureContext.fillText(text, x, y, this.style.maxWidth);
+                ctx.fillText(text, x, y, this.style.maxWidth);
             }
             else {
-                this.textureContext.fillText(text, x, y);
+                ctx.fillText(text, x, y);
             }
         }
-        if(this.textureContext.strokeText) {
-
+        if(this.style.strokeStyle && ctx.strokeText) {
             if(this.style.maxWidth) {
-                this.textureContext.strokeText(text, x, y, this.style.maxWidth);
+                ctx.strokeText(text, x, y, this.style.maxWidth);
             }
             else {
-                this.textureContext.strokeText(text, x, y);
+                ctx.strokeText(text, x, y);
             }
         }
+
         // 用纹理图片代替文字
-        const data = this.textureContext.getImageData(0, 0, canvas.width, canvas.height);
+        const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
         this.fillImage(data, this.points, bounds);
     }
 }

package/src/shapes/jmArc.js

@@ -123,7 +123,6 @@ export default class jmArc extends jmPath {
 		if((mw == 0 && mh == 0) || start == end) return;
 
 		let anticlockwise = this.anticlockwise;
-		this.points = [];
 		let step = 1 / Math.max(mw, mh);
 
 		//如果是逆时针绘制，则角度为负数，并且结束角为2Math.PI-end
@@ -134,18 +133,33 @@ export default class jmArc extends jmPath {
 		}
 		if(start > end) step = -step;
 
-		if(this.isFan) this.points.push(location.center);// 如果是扇形，则从中心开始画
+		// 预计算需要的点数量
+		let pointCount = Math.ceil(Math.abs(end - start) / Math.abs(step)) + 1;
+		if(this.isFan) pointCount++;
+
+		// 复用已有数组，避免每帧分配；大小变化时才重建
+		if(!this.points || this.points.length !== pointCount) {
+			this.points = new Array(pointCount);
+			for(let i = 0; i < pointCount; i++) {
+				this.points[i] = { x: 0, y: 0 };
+			}
+		}
+
+		let idx = 0;
+		if(this.isFan) {
+			this.points[idx].x = location.center.x;
+			this.points[idx].y = location.center.y;
+			idx++;
+		}
 		
 		//椭圆方程x=a*cos(r) ,y=b*sin(r)	
 		for(let r=start;;r += step) {	
 			if(step > 0 && r > end) r = end;
 			else if(step < 0 && r < end) r = end;
 
-			const p = {
-				x : Math.cos(r) * mw + cx,
-				y : Math.sin(r) * mh + cy
-			};
-			this.points.push(p);
+			this.points[idx].x = Math.cos(r) * mw + cx;
+			this.points[idx].y = Math.sin(r) * mh + cy;
+			idx++;
 
 			if(r == end) break;
 		}

package/src/shapes/jmHArc.js

@@ -103,8 +103,8 @@ export default class jmHArc extends jmArc {
 		
 		maxps.reverse();//大圆逆序
 		if(!this.style || !this.style.close) {
-			maxps[0].m = true;//开始画大圆时表示为移动
-		}		
+			maxps[0].m = true;//非闭合时标记 moveTo，分隔内外两个子路径
+		}
 		this.points = minps.concat(maxps);
 	}
 }