jmgraph 3.2.20 → 3.2.21

package/src/lib/webgl/path.js

@@ -9,6 +9,40 @@ class WebglPath extends WebglBase {
         this.needCut = option.needCut || false;
         this.control = option.control;
         this.points = [];
+        // 缓存 buffer 和纹理，避免每帧创建/销毁
+        this.__cachedBuffers = [];
+        this.__cachedTexture = null;
+        this.__cachedTextureKey = null;
+    }
+
+    // 释放缓存的 WebGL 资源
+    dispose() {
+        for(const buf of this.__cachedBuffers) {
+            this.deleteBuffer(buf);
+        }
+        this.__cachedBuffers = [];
+        if(this.__cachedTexture) {
+            this.deleteTexture(this.__cachedTexture);
+            this.__cachedTexture = null;
+            this.__cachedTextureKey = null;
+        }
+    }
+
+    // 获取或创建 buffer，优先复用缓存
+    getOrCreateBuffer(data, attr) {
+        let buffer = this.__cachedBuffers.find(b => b.attr === attr);
+        if(buffer) {
+            const gl = this.context;
+            const float32 = new Float32Array(data);
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, float32, gl.DYNAMIC_DRAW);
+            buffer.data = data;
+            return buffer;
+        }
+        buffer = this.createFloat32Buffer(data);
+        buffer.attr = attr;
+        this.__cachedBuffers.push(buffer);
+        return buffer;
     }
 
     // 应用变换到点
@@ -63,6 +97,7 @@ class WebglPath extends WebglBase {
     endDraw() {
         if(this.points) delete this.points;
         if(this.pathPoints) delete this.pathPoints;
+        // 缓存的纹理保留到下次绘制（渐变可能不变）
     }
 
     // 图形封闭
@@ -74,21 +109,47 @@ class WebglPath extends WebglBase {
         }
     }
 
-    // 绘制点数组
+    // 绘制点数组（使用 DYNAMIC_DRAW 复用 buffer，避免每帧 create/delete）
     writePoints(points, attr = this.program.attrs.a_position) {
-       
         const fixedPoints = [];
-        for(const p of points) {
-            // 应用变换矩阵
-            const transformedPoint = this.applyTransform(p);
-            fixedPoints.push(
-                transformedPoint.x + this.parentAbsoluteBounds.left,
-                transformedPoint.y + this.parentAbsoluteBounds.top
-            );
-        }
-        const vertexBuffer = this.createFloat32Buffer(fixedPoints); 
+        const [a, b, c, d, tx, ty] = this.transformMatrix;
+        const isIdentity = (a === 1 && b === 0 && c === 0 && d === 1 && tx === 0 && ty === 0);
+        const offsetLeft = this.parentAbsoluteBounds.left;
+        const offsetTop = this.parentAbsoluteBounds.top;
+
+        if(isIdentity) {
+            // 单位矩阵时直接加偏移，避免逐点调用 applyTransform
+            for(let i = 0; i < points.length; i++) {
+                fixedPoints.push(points[i].x + offsetLeft, points[i].y + offsetTop);
+            }
+        } else {
+            for(const p of points) {
+                const transformedPoint = this.applyTransform(p);
+                fixedPoints.push(
+                    transformedPoint.x + offsetLeft,
+                    transformedPoint.y + offsetTop
+                );
+            }
+        }
+        const float32 = new Float32Array(fixedPoints);
+        const gl = this.context;
+
+        // 复用已有 buffer 或创建新的
+        if(this.__cachedBuffers.length > 0) {
+            // 找一个同 attr 的 buffer 复用
+            let buffer = this.__cachedBuffers.find(b => b.attr === attr);
+            if(buffer) {
+                gl.bindBuffer(gl.ARRAY_BUFFER, buffer.buffer);
+                gl.bufferData(gl.ARRAY_BUFFER, float32, gl.DYNAMIC_DRAW);
+                buffer.data = fixedPoints;
+                this.writeVertexAttrib(buffer, attr, 2, 0, 0);
+                return buffer;
+            }
+        }
+        const vertexBuffer = this.createFloat32Buffer(float32, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW); 
         this.writeVertexAttrib(vertexBuffer, attr, 2, 0, 0);
         vertexBuffer.attr = attr;
+        this.__cachedBuffers.push(vertexBuffer);
         return vertexBuffer;
     }
 
@@ -370,9 +431,10 @@ class WebglPath extends WebglBase {
 
     // 分割成一个个规则的三角形，不规则的多边形不全割的话纹理就会没法正确覆盖
     getTriangles(points) {
-        
         this.trianglesCache = this.trianglesCache||(this.trianglesCache={});
-        const key = JSON.stringify(points);
+        // 快速缓存 key：用长度和首尾点坐标（比 JSON.stringify 快几个数量级）
+        const len = points.length;
+        const key = len + '_' + points[0].x + '_' + points[0].y + '_' + points[len-1].x + '_' + points[len-1].y;
         if(this.trianglesCache[key]) return this.trianglesCache[key];
 
         const res = [];
@@ -411,10 +473,9 @@ class WebglPath extends WebglBase {
             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);
-            this.deleteBuffer(buffer);
+            // buffer 由 endDraw 统一清理
         }
-        colorBuffer && this.deleteBuffer(colorBuffer);
-        colorBuffer && this.disableVertexAttribArray(colorBuffer.attr);
+        colorBuffer && this.disableVertexAttribArray(colorBuffer && colorBuffer.attr);
     }
 
     // 填充图形
@@ -445,8 +506,7 @@ class WebglPath extends WebglBase {
 
         this.fillPolygons(points);                
 
-        colorBuffer && this.deleteBuffer(colorBuffer);
-        colorBuffer && this.disableVertexAttribArray(colorBuffer.attr);
+        colorBuffer && this.disableVertexAttribArray(colorBuffer && colorBuffer.attr);
 
     }
 
@@ -456,8 +516,24 @@ class WebglPath extends WebglBase {
     fillImage(img, points, bounds) {
         if(!img) return;
 
-        // 设置纹理
-        const texture = img instanceof ImageData? this.createDataTexture(img) : this.createImgTexture(img);
+        // 对于 ImageData，生成缓存 key（基于渐变参数或 bounds），复用纹理
+        let texture = null;
+        if(img instanceof ImageData) {
+            const key = `${img.width}_${img.height}_${bounds.width}_${bounds.height}_${bounds.left}_${bounds.top}`;
+            if(this.__cachedTexture && this.__cachedTextureKey === key) {
+                texture = this.__cachedTexture;
+            } else {
+                texture = this.createDataTexture(img);
+                // 释放旧纹理
+                if(this.__cachedTexture) {
+                    this.deleteTexture(this.__cachedTexture);
+                }
+                this.__cachedTexture = texture;
+                this.__cachedTextureKey = key;
+            }
+        } else {
+            texture = this.createImgTexture(img);
+        }
         this.context.uniform1i(this.program.uniforms.u_sample.location, 0); // 纹理单元传递给着色器
 
         // 指定纹理区域尺寸
@@ -470,7 +546,10 @@ class WebglPath extends WebglBase {
 
         this.fillTexture(points);
         
-        this.deleteTexture(texture);
+        // 仅对非缓存纹理（非 ImageData）立即删除
+        if(!(img instanceof ImageData)) {
+            this.deleteTexture(texture);
+        }
     }
 
     fillTexture(points) {        
@@ -486,23 +565,67 @@ class WebglPath extends WebglBase {
 
     // 进行多边形填充
     fillPolygons(points, isTexture = false) {   
-        if(points.length > 3) {
-            const triangles = this.needCut? this.earCutPointsToTriangles(points): this.getTriangles(points);                
-            if(triangles.length) {   
-                for(const triangle of triangles) {
-                    this.fillPolygons(triangle, isTexture);// 这里就变成了规则的图形了
-                }
-            }
-        }
-        else {
+        if(points.length <= 3) {
+            // 3个点以下的三角形直接画
             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);
+            return;
+        }
 
+        // 规则图形（凸多边形，如圆）：直接用 TRIANGLE_FAN 一次性绘制，无需 earcut
+        if(this.isRegular) {
+            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);
-            this.deleteBuffer(buffer);
-            coordBuffer && this.deleteBuffer(coordBuffer);    
+            return;
         }
+
+        // 不规则图形：需要 earcut 三角化后，合并为一个大的顶点缓冲区，单次 drawArrays
+        const triangles = this.needCut? this.earCutPointsToTriangles(points): this.getTriangles(points);
+        if(!triangles.length) return;
+
+        // 合并所有三角形的顶点到一个数组
+        const allVertices = [];
+        const allTexCoords = [];
+        for(const triangle of triangles) {
+            for(const p of triangle) {
+                allVertices.push(p.x, p.y);
+                if(isTexture) allTexCoords.push(p.x, p.y);
+            }
+        }
+
+        // 一次性上传所有数据并绘制
+        const vertexData = new Float32Array(allVertices);
+        const gl = this.context;
+
+        // 复用或创建 position buffer
+        let posBuffer = this.__cachedBuffers.find(b => b.attr === this.program.attrs.a_position);
+        if(!posBuffer) {
+            posBuffer = this.createFloat32Buffer(vertexData, 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, vertexData, 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);
     }
 
     // 填充图形

package/src/shapes/jmLabel.js

@@ -22,7 +22,7 @@ export default class jmLabel extends jmControl {
 		this.style.textAlign = this.style.textAlign || 'left';
 		//文字垂直对齐
 		this.style.textBaseline = this.style.textBaseline || 'middle';
-		this.text = params.text || '';
+		this.text = params.text || params.value || '';
 
 		this.center = params.center || null;
 	}
@@ -311,67 +311,6 @@ export default class jmLabel extends jmControl {
 				}
 			}
 		}
-		//如果有指定边框，则画出边框
-		if(this.style.border) {
-			//如果指定了边框样式
-			if(this.style.border.style) {
-				this.context.save && this.context.save();
-				this.setStyle(this.style.border.style);
-			}
-			if(this.mode === '2d') {
-				this.context.moveTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
-				if(this.style.border.top) {
-					this.context.lineTo(this.points[1].x + bounds.left,this.points[1].y + bounds.top);
-				}
-				
-				if(this.style.border.right) {
-					this.context.moveTo(this.points[1].x + bounds.left,this.points[1].y + bounds.top);
-					this.context.lineTo(this.points[2].x + bounds.left,this.points[2].y + bounds.top);
-				}
-				
-				if(this.style.border.bottom) {
-					this.context.moveTo(this.points[2].x + bounds.left,this.points[2].y + bounds.top);
-					this.context.lineTo(this.points[3].x + bounds.left,this.points[3].y + bounds.top);
-				}
-				
-				if(this.style.border.left) {
-					this.context.moveTo(this.points[3].x + bounds.left,this.points[3].y + bounds.top);
-					this.context.lineTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
-				}
-			}
-			else {
-				const points = [];
-				if(this.style.border.top) {
-					points.push(this.points[0]);
-					points.push(this.points[1]);
-				}
-				
-				if(this.style.border.right) {
-					points.push({
-						...this.points[1],
-						m: true
-					});
-					points.push(this.points[2]);
-				}
-				
-				if(this.style.border.bottom) {
-					points.push({
-						...this.points[2],
-						m: true
-					});
-					points.push(this.points[3]);
-				}
-				
-				if(this.style.border.left) {
-					points.push({
-						...this.points[3],
-						m: true
-					});
-					points.push(this.points[0]);
-				}
-				points.length && this.webglControl && this.webglControl.stroke(points);
-			}
-		}
 	}
 
 	endDraw() {

package/src/shapes/jmRect.js

@@ -8,6 +8,7 @@ import {jmLine} from './jmLine.js';
  * @class jmRect
  * @extends jmPath
  * @param {object} params 参数 position=矩形左上角顶点坐标,width=宽，height=高,radius=边角弧度
+ *   radius支持数字(四角相同)或对象 { topLeft, topRight, bottomRight, bottomLeft }
  */ 
 export default class jmRect extends jmPath {		
 
@@ -17,12 +18,24 @@ export default class jmRect extends jmPath {
 		super(params, t);
 
 		this.style.close = true;
-		this.radius = params.radius || this.style.radius || 0;
+		const r = params.radius || this.style.radius || this.style.borderRadius || 0;
+		if(typeof r === 'object' && r !== null) {
+			// 四角独立圆角
+			this.radius = {
+				topLeft: Number(r.topLeft) || 0,
+				topRight: Number(r.topRight) || 0,
+				bottomRight: Number(r.bottomRight) || 0,
+				bottomLeft: Number(r.bottomLeft) || 0
+			};
+		}
+		else {
+			this.radius = r;
+		}
 	}
 	/**
-	 * 圆角半径
+	 * 圆角半径，支持数字或四角独立对象
 	 * @property radius
-	 * @type {number}
+	 * @type {number|object}
 	 */
 	get radius() {
 		return this.property('radius');
@@ -30,6 +43,36 @@ export default class jmRect extends jmPath {
 	set radius(v) {
 		this.needUpdate = true;
 		return this.property('radius', v);
+	}
+
+	/**
+	 * 获取规范化的圆角值（四角独立）
+	 * @returns {object} { topLeft, topRight, bottomRight, bottomLeft }
+	 */
+	getNormalizedRadius() {
+		const r = this.radius;
+		if(typeof r === 'number') {
+			const v = Math.max(0, r);
+			return { topLeft: v, topRight: v, bottomRight: v, bottomLeft: v };
+		}
+		if(typeof r === 'object' && r !== null) {
+			return {
+				topLeft: Math.max(0, Number(r.topLeft) || 0),
+				topRight: Math.max(0, Number(r.topRight) || 0),
+				bottomRight: Math.max(0, Number(r.bottomRight) || 0),
+				bottomLeft: Math.max(0, Number(r.bottomLeft) || 0)
+			};
+		}
+		return { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 };
+	}
+
+	/**
+	 * 检查是否有圆角
+	 * @returns {boolean}
+	 */
+	hasRadius() {
+		const nr = this.getNormalizedRadius();
+		return nr.topLeft > 0 || nr.topRight > 0 || nr.bottomRight > 0 || nr.bottomLeft > 0;
 	}	
 
 	/**
@@ -92,7 +135,7 @@ export default class jmRect extends jmPath {
 
 	/**
 	 * 初始化图形点
-	 * 如果有边角弧度则类型圆绝计算其描点
+	 * 支持四角独立圆角，借助圆弧对象计算描点
 	 * 
 	 * @method initPoints
 	 * @private
@@ -109,32 +152,67 @@ export default class jmRect extends jmPath {
 			this.dottedLine = this.graph.createShape(jmLine, {style: this.style});
 		}
 		
-		//如果有边界弧度则借助圆弧对象计算描点
-		if(location.radius && location.radius < location.width/2 && location.radius < location.height/2) {
+		const nr = this.getNormalizedRadius();
+		const hasRadius = this.hasRadius();
+
+		// 如果有圆角（支持四角独立），借助圆弧对象计算描点
+		if(hasRadius) {
 			let q = Math.PI / 2;
-			let arc = this.graph.createShape(jmArc,{radius:location.radius,anticlockwise:false});
-			arc.center = {x:location.left + location.radius,y:location.top+location.radius};
-			arc.startAngle = Math.PI;
-			arc.endAngle = Math.PI + q;
-			let ps1 = arc.initPoints();
-			
-			arc = this.graph.createShape(jmArc,{radius:location.radius,anticlockwise:false});
-			arc.center = {x:p2.x - location.radius,y:p2.y + location.radius};
-			arc.startAngle = Math.PI + q;
-			arc.endAngle = Math.PI * 2;
-			let ps2 = arc.initPoints();
-			
-			arc = this.graph.createShape(jmArc,{radius:location.radius,anticlockwise:false});
-			arc.center = {x:p3.x - location.radius,y:p3.y - location.radius};
-			arc.startAngle = 0;
-			arc.endAngle = q;
-			let ps3 = arc.initPoints();
-			
-			arc = this.graph.createShape(jmArc,{radius:location.radius,anticlockwise:false});
-			arc.center = {x:p4.x + location.radius,y:p4.y - location.radius};
-			arc.startAngle = q;
-			arc.endAngle = Math.PI;
-			let ps4 = arc.initPoints();
+
+			// 限制圆角不超过短边的一半
+			const maxR = Math.min(location.width / 2, location.height / 2);
+			const rtl = Math.min(nr.topLeft, maxR);
+			const rtr = Math.min(nr.topRight, maxR);
+			const rbr = Math.min(nr.bottomRight, maxR);
+			const rbl = Math.min(nr.bottomLeft, maxR);
+
+			// 左上角圆弧
+			if(rtl > 0) {
+				let arc = this.graph.createShape(jmArc,{radius:rtl,anticlockwise:false});
+				arc.center = {x:location.left + rtl, y:location.top + rtl};
+				arc.startAngle = Math.PI;
+				arc.endAngle = Math.PI + q;
+				var ps1 = arc.initPoints();
+			}
+			else {
+				var ps1 = [p1];
+			}
+
+			// 右上角圆弧
+			if(rtr > 0) {
+				let arc = this.graph.createShape(jmArc,{radius:rtr,anticlockwise:false});
+				arc.center = {x:p2.x - rtr, y:p2.y + rtr};
+				arc.startAngle = Math.PI + q;
+				arc.endAngle = Math.PI * 2;
+				var ps2 = arc.initPoints();
+			}
+			else {
+				var ps2 = [p2];
+			}
+
+			// 右下角圆弧
+			if(rbr > 0) {
+				let arc = this.graph.createShape(jmArc,{radius:rbr,anticlockwise:false});
+				arc.center = {x:p3.x - rbr, y:p3.y - rbr};
+				arc.startAngle = 0;
+				arc.endAngle = q;
+				var ps3 = arc.initPoints();
+			}
+			else {
+				var ps3 = [p3];
+			}
+
+			// 左下角圆弧
+			if(rbl > 0) {
+				let arc = this.graph.createShape(jmArc,{radius:rbl,anticlockwise:false});
+				arc.center = {x:p4.x + rbl, y:p4.y - rbl};
+				arc.startAngle = q;
+				arc.endAngle = Math.PI;
+				var ps4 = arc.initPoints();
+			}
+			else {
+				var ps4 = [p4];
+			}
 			this.points = ps1.concat(ps2,ps3,ps4);
 		}
 		else {