jmgraph 3.2.19 → 3.2.21

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 };

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 {

package/src/shapes/jmStar.js

@@ -0,0 +1,160 @@
+import {jmPath} from "../core/jmPath.js";
+
+/**
+ * 画星形
+ * 支持自定义顶点数和内外半径，创建各种星形图案
+ * 星形由交替的外半径和内半径顶点组成
+ *
+ * @class jmStar
+ * @extends jmPath
+ * @param {object} params 星形的参数
+ * @param {array} [params.points] 自定义顶点数组，如果提供则忽略其他参数
+ * @param {number} [params.points=5] 星形顶点数（角数，3-50）
+ * @param {number} [params.radius=50] 星形外半径（从中心到尖角的距离）
+ * @param {number} [params.innerRadius=25] 星形内半径（从中心到凹陷处的距离）
+ * @param {object} [params.center={x:0,y:0}] 星形中心点坐标
+ */
+export default class jmStar extends jmPath {
+	
+	constructor(params, t='jmStar') {
+		params = params || {};
+		params.isRegular = true; // 标记为规则图形
+		super(params, t);
+
+		// 参数验证和初始化
+		this.pointsCount = params.points || 5;
+		this.radius = params.radius || 50;
+		this.innerRadius = params.innerRadius || 25;
+		this.center = params.center || {x: 0, y: 0};
+	}
+
+	/**
+	 * 设定或获取星形顶点数（角数）
+	 * 顶点数决定了星形的角数，例如5表示五角星
+	 * 
+	 * @property pointsCount
+	 * @for jmStar
+	 * @type {number}
+	 */
+	get pointsCount() {
+		return this.property('pointsCount');
+	}
+	set pointsCount(v) {
+		// 参数验证：顶点数必须在3-50之间
+		if(typeof v !== 'number' || isNaN(v) || v < 3) {
+			console.warn('jmStar: pointsCount must be a number >= 3');
+			v = 3;
+		}
+		if(v > 50) {
+			console.warn('jmStar: pointsCount should not exceed 50 for performance reasons');
+			v = 50;
+		}
+		this.needUpdate = true;
+		return this.property('pointsCount', Math.floor(v)); // 确保是整数
+	}
+
+	/**
+	 * 设定或获取星形外半径
+	 * 外半径是从中心到尖角的距离
+	 * 
+	 * @property radius
+	 * @for jmStar
+	 * @type {number}
+	 */
+	get radius() {
+		return this.property('radius');
+	}
+	set radius(v) {
+		// 参数验证：半径必须为正数
+		if(typeof v !== 'number' || isNaN(v) || v <= 0) {
+			console.warn('jmStar: radius must be a positive number');
+			v = 1;
+		}
+		this.needUpdate = true;
+		return this.property('radius', v);
+	}
+
+	/**
+	 * 设定或获取星形内半径
+	 * 内半径是从中心到凹陷处的距离
+	 * 内半径应该小于外半径，否则会产生奇怪的形状
+	 * 
+	 * @property innerRadius
+	 * @for jmStar
+	 * @type {number}
+	 */
+	get innerRadius() {
+		return this.property('innerRadius');
+	}
+	set innerRadius(v) {
+		// 参数验证：内半径必须为正数
+		if(typeof v !== 'number' || isNaN(v) || v <= 0) {
+			console.warn('jmStar: innerRadius must be a positive number');
+			v = 1;
+		}
+		// 警告：内半径不应大于外半径
+		if(v >= this.radius) {
+			console.warn('jmStar: innerRadius should be less than radius for proper star shape');
+		}
+		this.needUpdate = true;
+		return this.property('innerRadius', v);
+	}
+
+	/**
+	 * 设定或获取星形中心
+	 * 中心点是星形的几何中心
+	 * 
+	 * @property center
+	 * @for jmStar
+	 * @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('jmStar: 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 jmStar
+	 */
+	initPoints() {
+		// 如果提供了自定义顶点，直接使用
+		if (this.points && this.points.length > 0) {
+			return;
+		}
+
+		// 计算星形顶点
+		const points = [];
+		const pointsCount = this.pointsCount;
+		const radius = this.radius;
+		const innerRadius = this.innerRadius;
+		const center = this.center;
+
+		// 星形有2倍顶点数的点（外半径和内半径交替）
+		// 从顶部开始绘制（-90度），顺时针方向
+		for (let i = 0; i < pointsCount * 2; i++) {
+			const angle = (i / pointsCount) * Math.PI - Math.PI / 2;
+			// 偶数索引使用外半径，奇数索引使用内半径
+			const r = i % 2 === 0 ? radius : innerRadius;
+			const x = center.x + Math.cos(angle) * r;
+			const y = center.y + Math.sin(angle) * r;
+			points.push({x, y});
+		}
+
+		this.points = points;
+	}
+}
+
+export { jmStar };

package/example/ball.html

@@ -1,217 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
-<meta name="viewport" content="width=device-width,initial-scale=1">
-		<!--<script type="text/javascript" src="../index.js"></script>
-		<script type="text/javascript" src="../dist/jmGraph.min.js"></script>	-->
-		<style>
-		html,body {
-			margin:0;
-			padding:0;
-			width:100%;
-			height:100%;
-			overflow: hidden;
-		}
-		#mycanvas {
-			background-color:#000;
-			position: absolute;	
-			width:100%;
-			height:100%;		
-		}
-		</style>
-
-	</head>
-	<body>
-		<div id="mycanvas">
-			</div>	
-		
-	</body>
-</html>
-
-<script type="module">
-		import jmGraph from "../index.js";
-			var graph = new jmGraph('mycanvas', {
-				mode: 'webgl',
-				autoRefresh: true
-			});
-			//初始化jmgraph
-			/*jmGraph('mycanvas').then((g)=>{
-				graph = g;
-				jmUtils.bindEvent(window,'resize',resize);			
-				refreshBall(g);
-
-				
-			});	*/
-
-			refreshBall(graph);
-
-
-			
-			function refreshBall(g) {
-				resize();
-				
-				var style = {				
-					lineWidth: 1.2,
-					close:true,
-					stroke:'#fff',
-					fill:'#05a2e2'
-				};			
-				
-
-				var balls = [];
-				function createPosition(radius,i) {
-					var x = Math.random() * graph.width + radius;
-					var y = Math.random() * graph.height + radius;
-
-					for(var j=i+1;j<balls.length;j++) {
-						var b2= balls[j];
-						var lx = Math.abs(x - b2.x());
-						var ly = Math.abs(y - b2.y());
-						var l = Math.sqrt(lx * lx + ly * ly);
-						//如果二个球重叠则放 弃当前球
-						if(l < radius + b2.radius) {
-							return createPosition(radius);
-						}
-					}
-					return {x:x,y:y};
-				}
-
-				for(var i=0;i<100;i++) {
-					var radius = Math.random() * 10 + 8;
-					var styletmp = graph.util.clone(style);
-					styletmp.fill = graph.createRadialGradient('50%','50%',0,'50%','50%',radius);
-					var rr1 = Math.floor(Math.random() * 255);
-					var gg1 = Math.floor(Math.random() * 255);
-					var bb1 = Math.floor(Math.random() * 255);
-					var rr2 = Math.floor(Math.random() * 255);
-					var gg2 = Math.floor(Math.random() * 255);
-					var bb2 = Math.floor(Math.random() * 255);
-					styletmp.fill.addStop(0,graph.util.toColor(rr1,gg1,bb1));
-					styletmp.fill.addStop(1,graph.util.toColor(rr2,gg2,bb2));
-					//styletmp.fill = 'r(0.5,0.1)#ccc-#ccc';
-					var p = createPosition(radius);
-					var b = new ball(graph,p.x,p.y,radius,styletmp);
-					b.vx = 0;//Math.random() * 20 - 10;
-					b.vy = 0;//Math.random() * 20 - 10;
-					//b.ax = 0;
-					//b.ay = 0.4;
-					balls.push(b);
-				}
-	
-				var radius = Math.random() * 10 + 6;
-				var styletmp = graph.util.clone(style);
-				styletmp.fill = graph.createRadialGradient(radius,radius,0,radius,radius,radius);
-				styletmp.fill.addStop(0,'#fff');
-				styletmp.fill.addStop(1, graph.util.toColor(255,149,255));	
-				var p = createPosition(radius,0);
-				var b = new ball(graph,p.x,p.y,radius,styletmp);
-				b.vx = 106;
-				b.vy = 104;
-				balls.push(b);
-
-				function animate() {
-					var bs = balls;
-					var len = bs.length;
-					//var mvx = 0;
-					//var mvy = 0;
-					for(var i=0;i<len;i++) {
-						var b1 = bs[i];
-						b1.vx += b1.ax;
-						b1.vy += b1.ay;
-						for(var j=i+1;j<len;j++) {
-							var b2= bs[j];
-							var lx = b1.x() - b2.x();
-							var ly = b1.y() - b2.y();
-							var l = Math.sqrt(lx * lx + ly * ly);
-							if(l <= b1.radius + b2.radius) {
-								var vx = b1.vx;
-								var vy = b1.vy;
-								var vxb = b2.vx;
-								var vyb = b2.vy;
-
-								var angle = Math.atan2(ly,lx);
-								var sine = Math.sin(angle);
-								var cosine = Math.cos(angle);
-
-								var x = 0;
-								var y = 0;
-
-								var xb = lx * cosine + ly * sine;
-								var yb = ly * cosine - lx * sine;
-
-								var vx = b1.vx * cosine  + b1.vy * sine;
-								var vy = b1.vy * cosine - b1.vx * sine;
-								var vxb = b2.vx * cosine + b2.vy * sine;
-								var vyb = b2.vy * cosine - b2.vx * sine;
-
-								var vtotal = vx - vxb;
-
-								vx = ((b1.radius - b2.radius) * vx + 2 * b2.radius * vxb) / (b1.radius + b2.radius);
-								vxb = vtotal + vx;
-
-								var vx1 = vx * cosine - vy * sine;
-								var vy1 = vy * cosine + vx * sine;
-
-								var vx2 = vxb * cosine - vyb * sine;
-								var vy2 = vyb * cosine + vxb * sine;
-
-								b1.vx = vx1;
-								b1.vy = vy1;
-								b2.vx = vx2;
-								b2.vy = vy2;					
-							}
-						}
-						var x = b1.x() + b1.vx;
-						var maxX = b1.graph.width - b1.radius ;
-						if(x <= b1.radius || x >= maxX) {							
-							//b1.vy -= 0.4;
-							b1.vx *= -1;							
-						}
-						x = Math.max(x,b1.radius);
-						x = Math.min(maxX,x);
-						b1.x(x);
-						var y = b1.y() + b1.vy;
-						var maxY = b1.graph.height - b1.radius;
-						if(y <= b1.radius || y >= maxY) {
-							//if(y >= maxY && b1.vy > 0) {b1.vy -= 1;b1.vx -= 0.4;}
-							b1.vy *= -1;
-						}
-						y = Math.max(y,b1.radius);
-						y = Math.min(maxY,y);
-						b1.y(y);						
-					}
-					graph.needUpdate = true;			
-				};
-				g.on('update', animate);
-			}
-			function resize() {
-				if(graph) {
-					graph.width = window.innerWidth - 10;
-					graph.height = window.innerHeight - 10;
-				}	
-			}
-
-			function ball(graph,x,y,radius,style) {
-				this.graph = graph;	
-				this.radius = radius;	
-				this.center = {x:x,y:y};		
-				this.shape = graph.createShape('arc',{style:style,center:this.center,radius:this.radius,anticlockwise:true});
-				graph.children.add(this.shape);
-				this.shape.canMove(true);
-				this.vx = 0;
-				this.vy = 0;
-				this.ax = 0;
-				this.ay = 0;				
-
-				this.x = function(x) {
-					if(typeof x !== 'undefined') this.center.x = x;	
-					return 	this.center.x;		
-				}
-				this.y = function(y) {
-					if(typeof y !== 'undefined') this.center.y = y;
-					return this.center.y;
-				}
-			}
-		
-		</script>