jmgraph 3.2.19 → 3.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/README.md +174 -2
  2. package/dist/jmgraph.core.min.js +1 -1
  3. package/dist/jmgraph.core.min.js.map +1 -1
  4. package/dist/jmgraph.js +1640 -135
  5. package/dist/jmgraph.min.js +1 -1
  6. package/index.js +13 -2
  7. package/package.json +1 -1
  8. package/src/core/jmGraph.js +453 -4
  9. package/src/core/jmLayer.js +142 -0
  10. package/src/core/jmPath.js +55 -0
  11. package/src/shapes/jmEllipse.js +91 -0
  12. package/src/shapes/jmLabel.js +127 -15
  13. package/src/shapes/jmPolygon.js +129 -0
  14. package/src/shapes/jmStar.js +160 -0
  15. package/example/ball.html +0 -217
  16. package/example/base.html +0 -112
  17. package/example/canvas.html +0 -54
  18. package/example/cell.html +0 -284
  19. package/example/controls/arc.html +0 -129
  20. package/example/controls/arrowline.html +0 -78
  21. package/example/controls/bezier.html +0 -299
  22. package/example/controls/img.html +0 -97
  23. package/example/controls/label.html +0 -87
  24. package/example/controls/line.html +0 -173
  25. package/example/controls/prismatic.html +0 -63
  26. package/example/controls/rect.html +0 -64
  27. package/example/controls/resize.html +0 -112
  28. package/example/controls/test.html +0 -360
  29. package/example/es.html +0 -70
  30. package/example/es5module.html +0 -63
  31. package/example/heartarc.html +0 -116
  32. package/example/index.html +0 -47
  33. package/example/js/require.js +0 -5
  34. package/example/love/img/bling/bling.tps +0 -265
  35. package/example/love/img/bling.json +0 -87
  36. package/example/love/img/bling.tps +0 -295
  37. package/example/love/img/doc/bling.gif +0 -0
  38. package/example/love/img/love.json +0 -95
  39. package/example/love/img/love.tps +0 -315
  40. package/example/love/img/qq/qq.tps +0 -399
  41. package/example/love/img/qq.json +0 -242
  42. package/example/love/index.html +0 -40
  43. package/example/love/js/game.js +0 -558
  44. package/example/music.html +0 -211
  45. package/example/node/test.js +0 -138
  46. package/example/pdf.html +0 -187
  47. package/example/progress.html +0 -173
  48. package/example/pso.html +0 -148
  49. package/example/sort.html +0 -805
  50. package/example/tweenjs.html +0 -84
  51. package/example/webgl.html +0 -278
  52. package/example/xfj/img/dr_die.gif +0 -0
  53. package/example/xfj/index.html +0 -332
  54. package/example/xfj/shake.js +0 -49
  55. package/example/xfj/testori.html +0 -76
package/example/controls/line.html DELETED
@@ -1,173 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
-
7
- </head>
8
- <body style="margin:10px;border:1px solid blue; background-color: #fff;">
9
- <div id="mycanvas" style="border:1px solid red;margin:10px;"></div>
10
- <canvas id="textureCanvas"></canvas>
11
- <div id="eventposition"></div>
12
-
13
- <img id="dataimg" />
14
- </body>
15
- <script type="module">
16
- import jmGraph from "../../index.js";
17
-
18
- const textureCanvas = document.getElementById('textureCanvas');
19
- var g = jmGraph.create('mycanvas', {
20
- width: window.innerWidth * 0.8,
21
- height: window.innerHeight * 0.8,
22
- mode: 'webgl',
23
- textureCanvas
24
- });
25
-
26
- init(g);
27
-
28
- function update() {
29
- if(g.needUpdate) g.redraw();
30
- requestAnimationFrame(update);
31
- }
32
-
33
- update();
34
-
35
-
36
- function init(graph){
37
- graph.style.fill = '#fff';
38
- var style = {
39
- stroke:'#D07814FF',
40
- lineWidth: 3,
41
- close:true
42
- };
43
- style.shadow = '0,0,5,#fff';
44
- style.opacity = 1;
45
- //graph.createShadow('shadow(0,0,10,#000)');//new jmShadow('shadow(10,10,20,#000)');
46
- //style.shadow = graph.createShadow(4,4,6,'#000000');
47
- //style.lineCap = 'round';
48
-
49
- var line = graph.createLine({x:10,y:200},{x:80,y:120},style);
50
-
51
- line.bind('mouseover',function(evt) {
52
- this.style.stroke = 'rgba(39,72,188,1)';
53
- this.cursor = 'pointer';
54
- this.needUpdate = true;
55
- });
56
- line.bind('mouseleave',function(evt) {
57
- this.style.stroke = 'rgb(120,20,80)';
58
- this.cursor = 'default';
59
- this.needUpdate = true;
60
- });
61
- line.bind('touchstart',function(evt) {
62
- console.log('touchstart',evt);
63
- });
64
- line.bind('touchmove',function(evt) {
65
- console.log('touchmove',evt);
66
- });
67
- line.bind('touchend',function(evt) {
68
- console.log('touchend',evt);
69
- });
70
-
71
- graph.children.add(line);
72
- line.canMove(true);
73
-
74
-
75
- style = graph.utils.clone(style);
76
- delete style['rotation'];
77
-
78
- style.lineType = "dotted";
79
- style.dashLength = 10;
80
- style.lineWidth = 2;
81
- var line = graph.createLine({x:50,y:50},{x:200,y:400}, style);
82
- style.zIndex = 20;
83
- graph.children.add(line);
84
- line.bind('mouseover',function(evt) {
85
- this.style.stroke = 'rgba(39,72,188,1)';
86
- //graph.canvas.style.cursor = 'pointer';
87
- this.needUpdate = true;
88
- });
89
- line.bind('mouseleave',function(evt) {
90
- this.style.stroke = 'rgb(120,20,80)';
91
- //graph.canvas.style.cursor = 'default';
92
- this.needUpdate = true;
93
- });
94
- line.canMove(true);
95
-
96
-
97
-
98
- style = graph.utils.clone(style);
99
- //style.opacity = .8;
100
- var bg = graph.createRadialGradient('50%','50%', 0,'50%','50%', 40);
101
- bg.addStop(0,'rgba(0,0,0, 0.1)');
102
- bg.addStop(0.5,'rgba(0,255,0,5)');
103
- bg.addStop(1,'rgba(150,200,180,0.8)');
104
- style.fill = bg;//'linear-gradient(0 0 0 100,#000 0,#73998A 1)';
105
- style.close = true;
106
- var rect = graph.createPath(null,style, {
107
- isRegular: true
108
- });
109
- rect.points.push({x:20,y:20});
110
- rect.points.push({x:20,y:100});
111
- rect.points.push({x:100,y:100});
112
- rect.points.push({x:100,y:20});
113
- graph.children.add(rect);
114
-
115
- style = graph.utils.clone(style);
116
- var img = new Image();
117
- img.onload = ()=>{
118
- //style.fillImage = img;
119
- //style.fill = 'rgba(220,100,80, 0.5)';
120
- style.lineWidth = 1.2;
121
- //delete style.fill;
122
- //style.close = true;
123
-
124
- for(let i=0; i< 1000; i++) {
125
- var path = graph.createPath(null,style, {
126
- isRegular: true,
127
- needCut: false
128
- });
129
- const startx = Math.random() * window.innerWidth;
130
- const starty = Math.random() * window.innerHeight;
131
- if(i === 0) {
132
- path.points = [{x:600, y:370}, {x:700, y:600}, {x:780, y:420}, {x:730, y:570}, {x:590, y:520}];
133
- }
134
- else {
135
- path.points.push({x:startx+200,y:60+starty});
136
- path.points.push({x:startx+400,y:60+starty});
137
-
138
- path.points.push({x:startx+220,y:120+starty});
139
- path.points.push({x:startx+260,y:300+starty});
140
-
141
- path.points.push({x:startx+420,y:100+starty});
142
-
143
- path.points.push({x:startx+260,y:20+starty});
144
- path.points.push({x:startx+250,y:80+starty});
145
- path.points.push({x:startx+200,y:10+starty});
146
- }
147
- /*path.points.push({x:300,y:60});
148
- path.points.push({x:400,y:60});
149
-
150
- path.points.push({x:360,y:130});
151
- //path.points.push({x:320,y:120});
152
-
153
- path.points.push({x:420,y:100});
154
-
155
- path.points.push({x:260,y:60});*/
156
-
157
-
158
- //rect.children.add(path);
159
-
160
- graph.children.add(path);
161
-
162
- //line.canMove(true);
163
- path.canMove(true);
164
- }
165
- }
166
- img.src = '../x.png';
167
-
168
- rect.canMove(true);
169
- }
170
-
171
-
172
- </script>
173
- </html>
package/example/controls/prismatic.html DELETED
@@ -1,63 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <style>
7
- html,body{
8
- margin:0;
9
- padding: 0;
10
- }
11
- #mycanvas_container{
12
- overflow: hidden;
13
- }
14
- </style>
15
-
16
- </head>
17
- <body>
18
- <div id="mycanvas_container"></div>
19
- </body>
20
- <script type="module">
21
- import { jmGraph } from "../../index.js";
22
-
23
- //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
24
- var g = jmGraph.create('mycanvas_container', {
25
- width: 800,
26
- height: 600,
27
- mode: '2d',
28
- style: {
29
- fill: '#000'
30
- }
31
- });
32
-
33
- init(g);
34
-
35
- function init(g){
36
- //g.style.fill = '#000'; //画布背景
37
- var style = {
38
- stroke: '#A2D84B',
39
- fill: 'transparent',
40
- shadow: '0,0,10,#fff'
41
- };
42
- //style.opacity = 0.2;
43
-
44
- //创建
45
- var prismatic = g.createShape('prismatic',{
46
- style:style,
47
- center:{x:200,y:150},
48
- width:120,
49
- height:80
50
- });
51
- //prismatic.canMove(true);
52
- g.children.add(prismatic);
53
-
54
-
55
- function update() {
56
- if(g.needUpdate) g.redraw();
57
- requestAnimationFrame(update);
58
- }
59
-
60
- update();
61
- }
62
- </script>
63
- </html>
package/example/controls/rect.html DELETED
@@ -1,64 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <style>
7
- html,body{
8
- margin:0;
9
- padding: 0;
10
- }
11
- #mycanvas_container{
12
- overflow: hidden;
13
- }
14
- </style>
15
- </head>
16
- <body>
17
- <div id="mycanvas_container"></div>
18
- </body>
19
- <script type="module">
20
- import { jmGraph } from "../../index.js";
21
-
22
- var container = document.getElementById('mycanvas_container');
23
-
24
- //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
25
- var g = jmGraph.create('mycanvas_container', {
26
- width: 800,
27
- height: 600,
28
- mode: '2d',
29
- style: {
30
- fill: '#000'
31
- }
32
- });
33
- init(g);
34
-
35
-
36
- function init(g){
37
- //g.style.fill = '#000'; //画布背景
38
- var style = {
39
- stroke: 'red',
40
- fill: 'yellow',
41
- lineWidth: 1.1 //边线宽
42
- };
43
- //style.opacity = 0.2;
44
-
45
- //创建
46
- var rect = g.createShape('rect', {
47
- style: style,
48
- position: {x:200, y:150},
49
- width: 120,
50
- height: 80
51
- });
52
-
53
- g.children.add(rect);
54
- rect.canMove(true);
55
-
56
- function update() {
57
- if(g.needUpdate) g.redraw();
58
- requestAnimationFrame(update);
59
- }
60
-
61
- update();
62
- }
63
- </script>
64
- </html>
package/example/controls/resize.html DELETED
@@ -1,112 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <style>
7
- html,body{
8
- margin:0;
9
- padding: 0;
10
- }
11
- #mycanvas_container{
12
- overflow: hidden;
13
- text-align: center;
14
- }
15
-
16
- </style>
17
- </head>
18
- <body>
19
- <div id="mycanvas_container"></div>
20
- <button onclick="zoomIn()">放大</button>
21
- <button onclick="zoomOut()">缩小</button>
22
- <button onclick="zoomActual()">复原</button>
23
- </body>
24
- <script type="module">
25
- import { jmGraph } from "../../index.js";
26
- import jmResize from '../../src/shapes/jmResize.js';
27
-
28
- var container = document.getElementById('mycanvas_container');
29
-
30
- //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
31
- var g = window.graph = jmGraph.create('mycanvas_container', {
32
- width: 800,
33
- height: 600,
34
- mode: '2d',
35
- autoRefresh: true,
36
- style: {
37
- fill: '#000',
38
- }
39
- });
40
- init(g);
41
-
42
-
43
- function init(g){
44
- //g.style.fill = '#000'; //画布背景
45
- var style = {
46
- stroke: 'red',
47
- fill: 'yellow',
48
- lineWidth: 2, //边线宽
49
- rotation: {
50
- angle: 0
51
- },
52
- //小方块样式
53
- rectStyle: {
54
- stroke: 'green', //小方块边颜色
55
- fill: '#ccc',//小方块填充色
56
- lineWidth: 1.1, //小方块线宽
57
- close: true
58
- }
59
- };
60
- //style.opacity = 0.2;
61
-
62
- //创建一个resize
63
- var resize = g.createShape(jmResize, {
64
- style: style,
65
- position: {x:200, y:150},
66
- width: 120,
67
- height: 80
68
- });
69
- //大小改变事件
70
- resize.on('resize', function() {
71
- console.log( Date.now(), arguments);
72
- });
73
- resize.canMove(true);
74
- g.children.add(resize);
75
-
76
- g.on('update', (time) => {
77
- //style.rotation.angle += 0.01;
78
- //g.needUpdate = true;
79
- });
80
- }
81
-
82
-
83
- </script>
84
- <script>
85
- var curentScale = {x: 1, y: 1};
86
- function zoomIn() {
87
- window.graph && window.graph.scale(1.1, 1.1);
88
- //window.graph && window.graph.resize(window.graph.width * 1.1, window.graph.height * 1.1);
89
- //curentScale.x += 0.1;
90
- //curentScale.y += 0.1;
91
- //window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);
92
- }
93
-
94
- function zoomOut() {
95
- window.graph && window.graph.scale(0.9, 0.9);
96
- //window.graph && window.graph.resize(window.graph.width * 0.9, window.graph.height * 0.9);
97
- //curentScale.x -= 0.1;
98
- //curentScale.y -= 0.1;
99
- //window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);
100
-
101
- }
102
-
103
- function zoomActual() {
104
- window.graph && window.graph.zoomActual();
105
- //window.graph && window.graph.resize(800, 600);
106
- //curentScale.x = 1;
107
- //curentScale.y = 1;
108
- //window.graph && (window.graph.canvas.style.transform = `scale(${curentScale.x}, ${curentScale.y})`);
109
-
110
- }
111
- </script>
112
- </html>