jmgraph 3.2.7 → 3.2.8

package/example/ball.html

@@ -32,7 +32,8 @@
 <script type="module">
 		import jmGraph from "../index.js";
 			var graph = new jmGraph('mycanvas', {
-				mode: '2d'
+				mode: 'webgl',
+				autoRefresh: true
 			});
 			//初始化jmgraph
 			/*jmGraph('mycanvas').then((g)=>{
@@ -45,12 +46,6 @@
 
 			refreshBall(graph);
 
-			//实时更新画布
-			function update() {
-				if(graph && graph.needUpdate) graph.redraw();
-				graph.utils.requestAnimationFrame(update);
-			}
-			update();
 
 			
 			function refreshBall(g) {
@@ -82,10 +77,10 @@
 					return {x:x,y:y};
 				}
 
-				for(var i=0;i<10;i++) {
+				for(var i=0;i<100;i++) {
 					var radius = Math.random() * 10 + 8;
 					var styletmp = graph.util.clone(style);
-					styletmp.fill = graph.createRadialGradient(radius,radius,0,radius,radius,radius);
+					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);
@@ -111,8 +106,8 @@
 				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 = 6;
-				b.vy = 4;
+				b.vx = 106;
+				b.vy = 104;
 				balls.push(b);
 
 				function animate() {
@@ -186,10 +181,9 @@
 						y = Math.min(maxY,y);
 						b1.y(y);						
 					}
-					graph.needUpdate = true;
-					g.utils.requestAnimationFrame(animate);				
+					graph.needUpdate = true;			
 				};
-				animate();		
+				g.on('update', animate);
 			}
 			function resize() {
 				if(graph) {

package/example/cell.html

@@ -35,7 +35,7 @@
 	var balls = [];
 	//初始化jmgraph
 	var graph = new jmGraph('mycanvas', {
-		mode: '2d'
+		mode: 'webgl'
 	});
 	graph.util.bindEvent(window,'resize',resize);	
 

package/example/controls/arc.html

@@ -28,6 +28,7 @@
 			width: 800,
 			height: 600,
 			mode: '2d',
+			autoRefresh: true,
 			style: {
 				fill: '#000'
 			}
@@ -42,6 +43,9 @@
                 stroke: '#ccc',
                 fill: 'yellow',
                 lineWidth: 4, //边线宽
+				rotation: {
+					angle: 0
+				}
 			};
 			//style.opacity = 0.2;		
 
@@ -113,14 +117,13 @@
 				end: Math.PI / 4,
 				anticlockwise: true //false  顺时针，true 逆时针
             });	
-            g.children.add(harc);   
+            g.children.add(harc);  
+			harc.canMove(true); 
             
-			function update() {
-				g.needUpdate && g.redraw();
-				requestAnimationFrame(update);
-			}
-
-			update();
+			g.on('update', (time) => {
+				style.rotation.angle += 0.01;
+				g.needUpdate = true;
+			});
 		}
 	</script>
 </html>

package/example/controls/arrowline.html

@@ -24,6 +24,7 @@
 		var g = jmGraph.create('mycanvas_container', {
 			width: 800,
 			height: 600,
+			mode: 'webgl',
 			style: {
 				fill: '#000'
 			}

package/example/controls/img.html

@@ -7,10 +7,10 @@
 		html,body{
 			margin:0;
 			padding: 0;
-			background-color: #000;;
 		}
 		#mycanvas_container{
-			overflow: hidden;		
+			overflow: hidden;	
+			background-color: #000;	
 		}
 	</style>
 	</head>
@@ -29,7 +29,8 @@
 			style: {
 				//fill: '#000'
 			},
-			mode: '2d'
+			mode: '2d',
+			autoRefresh: true
 		});
 			
 		init(g);
@@ -39,52 +40,58 @@
 			//g.style.fill = '#000'; //画布背景
 			var style = {
 				//src: '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png'
-				//stroke: 'red'
+				//stroke: 'red',
+				rotation: {
+					angle: 0
+				},
 			};
-			style.shadow = '0,0,10,#fff';
+			style.shadow = '0,0,20,#fff';
 			//style.opacity = 0.2;		
 
 			//创建一个image
 			var img = g.createShape('image',{
 				style:style,
+				//伸展或缩小图像
+                width: 200,
 				position: {x:100,y:100},
 				image: '../qrcode.jpg'
 			});	
 			//img.image = '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png';
             g.children.add(img);		
 			img.canMove(true);
+
+			//创建一个image
+			var img3 = g.createShape('image',{
+				style: g.utils.clone(style),
+				//伸展或缩小图像
+                width: 200,
+				position: {x:100,y:100},
+				image: '../qrcode.jpg'
+			});	
+			//img.image = '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png';
+            g.children.add(img3);		
             
             //截取logo
             var img2 = g.createShape('image',{
-				style:style,
-                position: {x:500,y:200},
+				style: style,
+                position: {x:100,y:100},
 
                 //伸展或缩小图像
                 width: 100,
                 height: 60,
 				image: '../x.png',          
                 sourcePosition: {x:0, y:0}, //截取起点
-                sourceWidth: 60,          //截取宽度，如果不填则用原图宽
-                sourceHeight: 60            //截取高度，如果不填则用原图高
+                sourceWidth: 192,          //截取宽度，如果不填则用原图宽
+                sourceHeight: 192            //截取高度，如果不填则用原图高
 			});			
 			g.children.add(img2);	
 			img2.canMove(true);
-
-			var style = {
-                stroke: 'red',
-                fill: 'yellow',
-                lineWidth: 2 //边线宽
-			};
-			//style.opacity = 0.2;		
-
 			
 
-			function update() {
-				g.needUpdate && g.redraw();
-				requestAnimationFrame(update);
-			}
-
-			update();
+			g.on('update', (time) => {
+				style.rotation.angle += 0.01;
+				g.needUpdate = true;
+			});
 		}
 	</script>
 </html>

package/example/controls/label.html

@@ -17,18 +17,20 @@
 	</head>
 	<body>
 		<div id="mycanvas_container"></div>
+		<canvas id="textureCanvas"></canvas>
 	</body>
 	<script type="module">	
 		import { jmGraph } from "../../index.js";
 		import jmLabel from '../../src/shapes/jmLabel.js';
 
         var container = document.getElementById('mycanvas_container');
-        
+        const textureCanvas = document.getElementById('textureCanvas');
+
         //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
 		var g = jmGraph.create('mycanvas_container', {
 			width: 800,
 			height: 600,
-			mode: '2d',
+			mode: 'webgl',
 			style: {
 				fill: '#000'
 			}
@@ -38,8 +40,8 @@
 		function init(g){
 			//g.style.fill = '#000'; //画布背景
 			var style = {
-                stroke: '#effaaa',
-                fill: '#fff',
+                stroke: 'green',
+                fill: 'yellow',
 				textAlign: 'right',
                 textBaseline: 'middle',
                 fontFamily: "Arial",

package/example/controls/line.html

@@ -5,8 +5,8 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		
 	</head>
-	<body style="width:800px;margin:10px;border:1px solid blue; background-color: #fff;">
-		<div id="mycanvas" style="border:1px solid red;margin:10px;width:100%;height:600px;"></div>
+	<body style="margin:10px;border:1px solid blue; background-color: #fff;">
+		<div id="mycanvas" style="border:1px solid red;margin:10px;"></div>
 		<canvas id="textureCanvas"></canvas>
 		<div id="eventposition"></div>
 
@@ -17,9 +17,9 @@
 
 		const textureCanvas = document.getElementById('textureCanvas');
 		var g = jmGraph.create('mycanvas', {
-			width: 800,
-			height: 600,
-			mode: '2d',
+			width: window.innerWidth * 0.8,
+			height: window.innerHeight * 0.8,
+			mode: 'webgl',
 			textureCanvas
 		});
 
@@ -96,9 +96,10 @@
 
 
 			style = graph.utils.clone(style);	
-			style.opacity = .8;
-			var bg = graph.createLinearGradient(0,0,80,80);
-			bg.addStop(0,'rgba(0,0,0,0.3)');
+			//style.opacity = .8;
+			var bg = graph.createRadialGradient('50%','50%', 0,'50%','50%', 40);
+			bg.addStop(0,'rgba(0,0,0, 0.1)');
+			bg.addStop(0.5,'rgba(0,255,0,5)');
 			bg.addStop(1,'rgba(150,200,180,0.8)');
 			style.fill = bg;//'linear-gradient(0 0 0 100,#000 0,#73998A 1)';
 			style.close = true;
@@ -114,55 +115,57 @@
 			style = graph.utils.clone(style);
 			var img = new Image();
 			img.onload = ()=>{
-				style.fillImage = img;
-				style.fill = 'rgba(220,100,80, 0.8)';
+				//style.fillImage = img;
+				//style.fill = 'rgba(220,100,80, 0.5)';
+				style.lineWidth = 1.2;
 				//delete style.fill;
 				//style.close = true;
-				var path = graph.createPath(null,style);
-				path.points.push({x:200,y:60});
-				path.points.push({x:400,y:60});
 
-				path.points.push({x:220,y:120});
-				path.points.push({x:260,y:300});		
-
-				path.points.push({x:420,y:100});
-
-				path.points.push({x:260,y:20});	
-				path.points.push({x:250,y:80});
-				path.points.push({x:200,y:10});
-
-				/*path.points.push({x:300,y:60});
-				path.points.push({x:400,y:60});
-
-				path.points.push({x:360,y:130});
-				//path.points.push({x:320,y:120});
-
-				path.points.push({x:420,y:100});
-
-				path.points.push({x:260,y:60});*/
-				
-				
-				//rect.children.add(path);
-
-				graph.children.add(path);
+				for(let i=0; i< 1000; i++) {
+					var path = graph.createPath(null,style, {
+						isRegular: true,
+						needCut: false
+					});
+					const startx = Math.random() * window.innerWidth;
+					const starty = Math.random() * window.innerHeight;
+					if(i === 0) {
+						path.points = [{x:600, y:370}, {x:700,  y:600}, {x:780,  y:420}, {x:730,  y:570}, {x:590,  y:520}];
+					}
+					else {
+						path.points.push({x:startx+200,y:60+starty});
+						path.points.push({x:startx+400,y:60+starty});
+
+						path.points.push({x:startx+220,y:120+starty});
+						path.points.push({x:startx+260,y:300+starty});		
+
+						path.points.push({x:startx+420,y:100+starty});
+
+						path.points.push({x:startx+260,y:20+starty});	
+						path.points.push({x:startx+250,y:80+starty});
+						path.points.push({x:startx+200,y:10+starty});
+					}
+					/*path.points.push({x:300,y:60});
+					path.points.push({x:400,y:60});
+
+					path.points.push({x:360,y:130});
+					//path.points.push({x:320,y:120});
+
+					path.points.push({x:420,y:100});
+
+					path.points.push({x:260,y:60});*/
+					
+					
+					//rect.children.add(path);
 
-				path.bind('mouseover',function(evt) {
-					this.style.stroke = 'rgba(39,72,188,0.5)';
-					this.needUpdate = true;
-					//graph.canvas.style.cursor = 'pointer';
+					graph.children.add(path);
 					
-				});
-				path.bind('mouseleave',function(evt) {					
-					this.style.stroke = 'rgb(120,20,80)';
-					this.needUpdate = true;
-					//graph.canvas.style.cursor = 'default';
-				});
-				
-				rect.canMove(true);
-				//line.canMove(true);
-				path.canMove(true);	
+					//line.canMove(true);
+					path.canMove(true);	
+				}
 			}
-			img.src = '../x.png';			
+			img.src = '../x.png';	
+			
+			rect.canMove(true);
 		}
 			
 		

package/example/controls/resize.html

@@ -9,12 +9,17 @@
 			padding: 0;
 		}
 		#mycanvas_container{
-			overflow: hidden;		
+			overflow: hidden;
+			text-align: center;
 		}
+		
 	</style>
 	</head>
 	<body>
 		<div id="mycanvas_container"></div>
+		<button onclick="zoomIn()">放大</button>
+		<button onclick="zoomOut()">缩小</button>
+		<button onclick="zoomActual()">复原</button>
 	</body>
 	<script type="module">	
 		import { jmGraph } from "../../index.js";
@@ -23,12 +28,13 @@
         var container = document.getElementById('mycanvas_container');
         
         //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
-		var g = jmGraph.create('mycanvas_container', {
+		var g = window.graph = jmGraph.create('mycanvas_container', {
 			width: 800,
 			height: 600,
 			mode: '2d',
+			autoRefresh: true,
 			style: {
-				fill: '#000'
+				fill: '#000',
 			}
 		});
 		init(g);
@@ -40,6 +46,9 @@
                 stroke: 'red',
                 fill: 'yellow',
                 lineWidth: 2, //边线宽
+				rotation: {
+					angle: 0
+				},
                 //小方块样式
                 rectStyle: {
                     stroke: 'green', //小方块边颜色
@@ -64,12 +73,40 @@
 			resize.canMove(true);
             g.children.add(resize);           
             
-			function update() {
-				g.redraw();
-				requestAnimationFrame(update);
-			}
+			g.on('update', (time) => {
+				//style.rotation.angle += 0.001;
+				//g.needUpdate = true;
+			});
+		}
+
+		
+	</script>
+	<script>
+		var curentScale = {x: 1, y: 1};
+		function zoomIn() {
+			window.graph && window.graph.scale(1.1, 1.1);
+			//window.graph && window.graph.resize(window.graph.width * 1.1, window.graph.height * 1.1);
+			//curentScale.x += 0.1;
+			//curentScale.y += 0.1;
+			//window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);
+		}
+
+		function zoomOut() {
+			window.graph && window.graph.scale(0.9, 0.9);
+			//window.graph && window.graph.resize(window.graph.width * 0.9, window.graph.height * 0.9);
+			//curentScale.x -= 0.1;
+			//curentScale.y -= 0.1;
+			//window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);
+
+		}
+
+		function zoomActual() {
+			window.graph && window.graph.zoomActual();
+			//window.graph && window.graph.resize(800, 600);
+			//curentScale.x = 1;
+			//curentScale.y = 1;
+			//window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);
 
-			update();
 		}
 	</script>
 </html>

package/example/index.html

@@ -32,11 +32,12 @@
 <li>
 <a href="controls/bezier.html" target="webbrowers">贝塞尔曲线</a></li>
 
-<li><a href="controls/Arrowline.html" target="webbrowers">箭头</a></li>
+<li><a href="controls/arrowline.html" target="webbrowers">箭头</a></li>
 <li><a href="controls/img.html" target="webbrowers">图片</a></li>
 <li><a href="controls/label.html" target="webbrowers">文字</a></li>
 <li><a href="controls/prismatic.html" target="webbrowers">棱形</a></li>
 <li><a href="controls/resize.html" target="webbrowers">可缩放方块</a></li>
+<li><a href="music.html" target="webbrowers">音乐图谱</a></li>
 <li><a href="pso.html" target="webbrowers">PSO</a></li>
 <li><a href="heartarc.html" target="webbrowers">心图</a></li>
 </ul>