jmgraph 3.2.18 → 3.2.20

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/lib/webgl/base.js

@@ -377,6 +377,10 @@ class WeblBase {
     // 多边切割, 得到三角形顶点
     // polygonIndices 顶点索引，
     earCutPointsToTriangles(points) {
+        this.earCutCache = this.earCutCache || (this.earCutCache = {});
+        const key = JSON.stringify(points);
+        if (this.earCutCache[key]) return this.earCutCache[key];
+
         const ps = this.earCutPoints(points);// 切割得到3角色顶点索引，
         const triangles = [];
         // 用顶点索引再组合成坐标数组
@@ -387,6 +391,8 @@ class WeblBase {
 
             triangles.push([p1, p2, p3]);// 每三个顶点构成一个三角
         }
+        
+        this.earCutCache[key] = triangles;
         return triangles;
     }
 

package/src/lib/webgl/path.js

@@ -371,9 +371,9 @@ class WebglPath extends WebglBase {
     // 分割成一个个规则的三角形，不规则的多边形不全割的话纹理就会没法正确覆盖
     getTriangles(points) {
         
-        //this.trianglesCache = this.trianglesCache||(this.trianglesCache={});
-        //const key = JSON.stringify(points);
-        //if(this.trianglesCache[key]) return this.trianglesCache[key];
+        this.trianglesCache = this.trianglesCache||(this.trianglesCache={});
+        const key = JSON.stringify(points);
+        if(this.trianglesCache[key]) return this.trianglesCache[key];
 
         const res = [];
         const polygons = this.getPolygon(points);                
@@ -384,7 +384,7 @@ class WebglPath extends WebglBase {
                 res.push(...triangles);
             }   
         }
-        //this.trianglesCache[key] = res;
+        this.trianglesCache[key] = res;
         return res;
     }
 
@@ -486,18 +486,15 @@ class WebglPath extends WebglBase {
 
     // 进行多边形填充
     fillPolygons(points, isTexture = false) {   
-        //const indexBuffer = this.createUint16Buffer(triangles, this.context.ELEMENT_ARRAY_BUFFER);
-        //this.context.drawElements(this.context.TRIANGLES, triangles.length, this.context.UNSIGMED_SHORT, 0);
-        //this.deleteBuffer(indexBuffer);
-        /*if(points.length > 3 && (!regular || this.needCut)) {
-            const triangles = regular && this.needCut? this.earCutPointsToTriangles(points): this.getTriangles(points);                
+        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 {*/
+        else {
             const buffer = this.writePoints(points);
             // 纹理坐标
             const coordBuffer = isTexture? this.writePoints(points, this.program.attrs.a_text_coord): null;
@@ -505,7 +502,7 @@ class WebglPath extends WebglBase {
             this.context.drawArrays(this.context.TRIANGLE_FAN, 0, points.length);
             this.deleteBuffer(buffer);
             coordBuffer && this.deleteBuffer(coordBuffer);    
-        //}
+        }
     }
 
     // 填充图形

package/src/shapes/jmEllipse.js

@@ -0,0 +1,91 @@
+import {jmArc} from "./jmArc.js";
+
+/**
+ * 画椭圆
+ * 椭圆是通过缩放圆形来实现的，支持完整的椭圆和椭圆弧
+ * 可以指定起始角度和结束角度来绘制椭圆弧
+ *
+ * @class jmEllipse
+ * @extends jmArc
+ * @param {object} params 椭圆的参数
+ * @param {object} [params.center={x:0,y:0}] 椭圆中心点坐标
+ * @param {number} [params.width=100] 椭圆宽度（长轴直径）
+ * @param {number} [params.height=60] 椭圆高度（短轴直径）
+ * @param {number} [params.startAngle=0] 起始角度（弧度）
+ * @param {number} [params.endAngle=Math.PI*2] 结束角度（弧度）
+ * @param {boolean} [params.anticlockwise=false] 是否逆时针绘制
+ */
+export default class jmEllipse extends jmArc {
+	
+	constructor(params, t='jmEllipse') {
+		params = params || {};
+		params.isRegular = true; // 标记为规则图形
+		super(params, t);
+	}
+
+	/**
+	 * 初始化图形点
+	 * 为WebGL模式生成控制点，2D模式使用draw方法直接绘制
+	 * 
+	 * @method initPoints
+	 * @private
+	 * @for jmEllipse
+	 */
+	initPoints() {
+		// WebGL模式使用父类的点生成方法
+		if(this.graph.mode === 'webgl') {
+			return super.initPoints();
+		}
+		
+		// 2D模式：生成4个控制点用于边界计算
+		// 这些点不是实际的绘制点，而是用于碰撞检测和边界计算
+		let location = this.getLocation();
+
+		this.points = [];
+		this.points.push({x:location.center.x - location.width/2, y:location.center.y}); // 左
+		this.points.push({x:location.center.x, y:location.center.y - location.height/2}); // 上
+		this.points.push({x:location.center.x + location.width/2, y:location.center.y}); // 右
+		this.points.push({x:location.center.x, y:location.center.y + location.height/2}); // 下
+	}
+
+	/**
+	 * 重写基类画图，此处为画一个椭圆
+	 * 使用Canvas的变换功能（平移和缩放）来绘制椭圆
+	 * 
+	 * @method draw
+	 */
+	draw() {
+		// WebGL模式使用父类的绘制方法
+		if(this.graph.mode === 'webgl') {
+			return super.draw();
+		}
+		
+		// 获取边界和位置信息
+		let bounds = this.parent && this.parent.absoluteBounds ? this.parent.absoluteBounds : this.absoluteBounds;
+		let location = this.getLocation();
+
+		// 获取椭圆弧参数
+		let start = this.startAngle || 0;
+		let end = this.endAngle || Math.PI * 2;
+		let anticlockwise = this.anticlockwise || false;
+
+		// 椭圆绘制：通过变换圆形来实现
+		// 1. 保存当前绘图状态
+		this.context.save();
+		
+		// 2. 平移到椭圆中心
+		this.context.translate(location.center.x + bounds.left, location.center.y + bounds.top);
+		
+		// 3. 缩放坐标系，使圆形变为椭圆
+		// 将X轴缩放width/2，Y轴缩放height/2，这样单位圆就变成了椭圆
+		this.context.scale(location.width/2, location.height/2);
+		
+		// 4. 绘制单位圆（会被缩放成椭圆）
+		this.context.arc(0, 0, 1, start, end, anticlockwise);
+		
+		// 5. 恢复绘图状态
+		this.context.restore();
+	}
+}
+
+export { jmEllipse };

package/src/shapes/jmLabel.js

@@ -108,43 +108,137 @@ export default class jmLabel extends jmControl {
 
 	/**
 	 * 测试获取文本所占大小
-	 *
+	 * 计算文本渲染所需的宽度和高度，支持自动换行
+	 * 
 	 * @method testSize
-	 * @return {object} 含文本大小的对象
+	 * @return {object} 含文本大小的对象 {width, height}
 	 */
 	testSize() {
+		// 使用缓存提高性能，避免重复计算
 		if(this.__size) return this.__size;
 
-		if(this.webglControl) this.__size = this.webglControl.testSize(this.text, this.style);
+		if(this.webglControl) {
+			this.__size = this.webglControl.testSize(this.text, this.style);
+		}
 		else {
 			this.context.save && this.context.save();
-			// 修改字体，用来计算
+			
+			// 设置字体样式用于测量
 			this.setStyle({
 				font: this.style.font || (this.style.fontSize + 'px ' + this.style.fontFamily)
 			});
-			//计算宽度
-			this.__size = this.context.measureText?
-								this.context.measureText(this.text):
-								{width:15};
+			
+			// 计算文本尺寸
+			if(this.style.maxWidth && this.text) {
+				// 文本换行处理
+				const lines = this.wrapText(this.text, this.style.maxWidth);
+				let maxWidth = 0;
+				
+				// 找出最宽的一行
+				for(let line of lines) {
+					const width = this.context.measureText(line).width;
+					if(width > maxWidth) maxWidth = width;
+				}
+				
+				// 计算总高度（行数 × 行高）
+				const lineHeight = this.style.lineHeight || this.style.fontSize * 1.2;
+				this.__size = {
+					width: maxWidth,
+					height: lineHeight * lines.length
+				};
+			}
+			else {
+				// 单行文本
+				this.__size = this.context.measureText ?
+								this.context.measureText(this.text) :
+								{width: 15};
+				this.__size.height = this.style.fontSize ? this.style.fontSize : 15;
+			}
+			
 			this.context.restore && this.context.restore();
-			this.__size.height = this.style.fontSize?this.style.fontSize:15;
 		}
 
+		// 设置默认宽高
 		if(!this.width) this.width = this.__size.width;
 		if(!this.height) this.height = this.__size.height;
 		
 		return this.__size;
 	}
 
+	/**
+	 * 文本换行处理
+	 * 根据最大宽度将文本分割成多行
+	 * 支持中英文混合文本，优先在空格处换行
+	 * 
+	 * @method wrapText
+	 * @param {string} text 文本内容
+	 * @param {number} maxWidth 最大宽度（像素）
+	 * @return {array} 换行后的文本数组
+	 */
+	wrapText(text, maxWidth) {
+		// 参数验证
+		if(!text || !maxWidth) return [text || ''];
+		
+		// 检查缓存，避免重复计算
+		const cacheKey = `${text}_${maxWidth}`;
+		if(this.__wrapTextCache && this.__wrapTextCache.key === cacheKey) {
+			return this.__wrapTextCache.lines;
+		}
+		
+		const lines = [];
+		
+		// 先按换行符分割
+		const paragraphs = text.split('\n');
+		
+		for(let paragraph of paragraphs) {
+			// 如果段落为空，添加空行
+			if(!paragraph) {
+				lines.push('');
+				continue;
+			}
+			
+			// 按空格分割单词
+			const words = paragraph.split(' ');
+			let currentLine = words[0];
+			
+			for(let i = 1; i < words.length; i++) {
+				const word = words[i];
+				const testLine = currentLine + ' ' + word;
+				const metrics = this.context.measureText(testLine);
+				const testWidth = metrics.width;
+				
+				if(testWidth <= maxWidth) {
+					// 当前行还能容纳这个单词
+					currentLine = testLine;
+				} else {
+					// 当前行已满，保存当前行并开始新行
+					if(currentLine) lines.push(currentLine);
+					currentLine = word;
+				}
+			}
+			
+			// 添加最后一行
+			if(currentLine) lines.push(currentLine);
+		}
+		
+		// 缓存结果
+		this.__wrapTextCache = {
+			key: cacheKey,
+			lines: lines
+		};
+		
+		return lines;
+	}
+
 	/**
 	 * 根据位置偏移画字符串
 	 * 
 	 * @method draw
 	 */
-	draw() {	
+	draw() {
 		
 		//获取当前控件的绝对位置
-		let bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;		
+		let bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;
 		const size = this.testSize();
 		let location = this.location;
 		let x = location.left + bounds.left;
@@ -184,7 +278,16 @@ export default class jmLabel extends jmControl {
 			}
 			else if(this.style.fill && this.context.fillText) {
 				if(this.style.maxWidth) {
-					this.context.fillText(txt,x,y, this.style.maxWidth);
+					// 绘制换行文本
+					const lines = this.wrapText(txt, this.style.maxWidth);
+					const lineHeight = this.style.fontSize;
+					// 调整起始Y位置以支持垂直对齐
+					const startY = y - (lines.length - 1) * lineHeight / 2;
+					
+					for(let i = 0; i < lines.length; i++) {
+						const lineY = startY + i * lineHeight;
+						this.context.fillText(lines[i], x, lineY);
+					}
 				}
 				else {
 					this.context.fillText(txt,x,y);
@@ -192,7 +295,16 @@ export default class jmLabel extends jmControl {
 			}
 			else if(this.context.strokeText) {
 				if(this.style.maxWidth) {
-					this.context.strokeText(txt,x,y, this.style.maxWidth);
+					// 绘制换行文本
+					const lines = this.wrapText(txt, this.style.maxWidth);
+					const lineHeight = this.style.fontSize;
+					// 调整起始Y位置以支持垂直对齐
+					const startY = y - (lines.length - 1) * lineHeight / 2;
+					
+					for(let i = 0; i < lines.length; i++) {
+						const lineY = startY + i * lineHeight;
+						this.context.strokeText(lines[i], x, lineY);
+					}
 				}
 				else {
 					this.context.strokeText(txt,x,y);
@@ -223,7 +335,7 @@ export default class jmLabel extends jmControl {
 				}
 				
 				if(this.style.border.left) {
-					this.context.moveTo(this.points[3].x + bounds.left,this.points[3].y + bounds.top);	
+					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);
 				}
 			}
@@ -259,7 +371,7 @@ export default class jmLabel extends jmControl {
 				}
 				points.length && this.webglControl && this.webglControl.stroke(points);
 			}
-		}	
+		}
 	}
 
 	endDraw() {

package/src/shapes/jmPolygon.js

@@ -0,0 +1,129 @@
+import {jmPath} from "../core/jmPath.js";
+
+/**
+ * 画多边形
+ * 支持规则多边形（正多边形）和自定义多边形
+ * 规则多边形通过边数和半径自动计算顶点，自定义多边形通过顶点数组定义
+ *
+ * @class jmPolygon
+ * @extends jmPath
+ * @param {object} params 多边形的参数
+ * @param {array} [params.points] 自定义顶点数组，如果提供则忽略sides和radius
+ * @param {number} [params.sides=3] 多边形边数（3-100）
+ * @param {number} [params.radius=50] 多边形半径（像素）
+ * @param {object} [params.center={x:0,y:0}] 多边形中心点坐标
+ */
+export default class jmPolygon extends jmPath {
+	
+	constructor(params, t='jmPolygon') {
+		params = params || {};
+		params.isRegular = true; // 标记为规则图形，便于优化渲染
+		super(params, t);
+
+		// 参数验证和初始化
+		this.sides = params.sides || params.points?.length || 3;
+		this.radius = params.radius || 50;
+		this.center = params.center || {x: 0, y: 0};
+	}
+
+	/**
+	 * 设定或获取多边形边数
+	 * 边数决定了多边形的形状，最小为3（三角形）
+	 * 
+	 * @property sides
+	 * @for jmPolygon
+	 * @type {number}
+	 */
+	get sides() {
+		return this.property('sides');
+	}
+	set sides(v) {
+		// 参数验证：边数必须在3-100之间
+		if(typeof v !== 'number' || isNaN(v) || v < 3) {
+			console.warn('jmPolygon: sides must be a number >= 3');
+			v = 3;
+		}
+		if(v > 100) {
+			console.warn('jmPolygon: sides should not exceed 100 for performance reasons');
+			v = 100;
+		}
+		this.needUpdate = true;
+		return this.property('sides', Math.floor(v)); // 确保是整数
+	}
+
+	/**
+	 * 设定或获取多边形半径
+	 * 半径是从中心点到顶点的距离
+	 * 
+	 * @property radius
+	 * @for jmPolygon
+	 * @type {number}
+	 */
+	get radius() {
+		return this.property('radius');
+	}
+	set radius(v) {
+		// 参数验证：半径必须为正数
+		if(typeof v !== 'number' || isNaN(v) || v <= 0) {
+			console.warn('jmPolygon: radius must be a positive number');
+			v = 1;
+		}
+		this.needUpdate = true;
+		return this.property('radius', v);
+	}
+
+	/**
+	 * 设定或获取多边形中心
+	 * 中心点是多边形的几何中心
+	 * 
+	 * @property center
+	 * @for jmPolygon
+	 * @type {object}
+	 */
+	get center() {
+		return this.property('center');
+	}
+	set center(v) {
+		// 参数验证：中心点必须包含x和y属性
+		if(!v || typeof v.x !== 'number' || typeof v.y !== 'number') {
+			console.warn('jmPolygon: center must be an object with x and y properties');
+			v = {x: 0, y: 0};
+		}
+		this.needUpdate = true;
+		return this.property('center', v);
+	}
+
+	/**
+	 * 初始化图形点
+	 * 如果提供了自定义顶点，则使用自定义顶点
+	 * 否则根据边数和半径自动计算规则多边形的顶点
+	 * 
+	 * @method initPoints
+	 * @private
+	 * @for jmPolygon
+	 */
+	initPoints() {
+		// 如果提供了自定义顶点，直接使用
+		if (this.points && this.points.length > 0) {
+			return;
+		}
+
+		// 计算规则多边形的顶点
+		const points = [];
+		const sides = this.sides;
+		const radius = this.radius;
+		const center = this.center;
+
+		// 从顶部开始绘制（-90度），顺时针方向
+		for (let i = 0; i < sides; i++) {
+			const angle = (i / sides) * Math.PI * 2 - Math.PI / 2;
+			const x = center.x + Math.cos(angle) * radius;
+			const y = center.y + Math.sin(angle) * radius;
+			points.push({x, y});
+		}
+
+		this.points = points;
+	}
+}
+
+export { jmPolygon };