jmgraph 3.2.22 → 3.2.24

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 {
@@ -204,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;
@@ -476,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);
@@ -500,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
@@ -516,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绘制的图形顶点
     // 图片整体绘制区域
@@ -581,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);
@@ -648,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/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);
 	}
 }