jmgraph 3.2.16 → 3.2.18

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 (77) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +251 -428
  3. package/build/gulpfile.js +142 -142
  4. package/build/package-lock.json +10666 -0
  5. package/build/package.json +71 -71
  6. package/dev.js +9 -9
  7. package/dist/jmgraph.core.min.js +1 -1
  8. package/dist/jmgraph.core.min.js.map +1 -1
  9. package/dist/jmgraph.js +3500 -2668
  10. package/dist/jmgraph.min.js +1 -1
  11. package/example/ball.html +216 -216
  12. package/example/base.html +111 -111
  13. package/example/canvas.html +53 -53
  14. package/example/cell.html +283 -283
  15. package/example/controls/arc.html +128 -128
  16. package/example/controls/arrowline.html +77 -77
  17. package/example/controls/bezier.html +298 -298
  18. package/example/controls/img.html +96 -96
  19. package/example/controls/label.html +86 -86
  20. package/example/controls/line.html +172 -172
  21. package/example/controls/prismatic.html +62 -62
  22. package/example/controls/rect.html +63 -63
  23. package/example/controls/resize.html +111 -111
  24. package/example/controls/test.html +359 -359
  25. package/example/es.html +69 -69
  26. package/example/es5module.html +62 -63
  27. package/example/heartarc.html +115 -115
  28. package/example/index.html +46 -46
  29. package/example/js/require.js +4 -4
  30. package/example/love/img/bling/bling.tps +265 -265
  31. package/example/love/img/bling.json +87 -87
  32. package/example/love/img/bling.tps +295 -295
  33. package/example/love/img/love.json +95 -95
  34. package/example/love/img/love.tps +315 -315
  35. package/example/love/img/qq/qq.tps +399 -399
  36. package/example/love/img/qq.json +242 -242
  37. package/example/love/index.html +40 -40
  38. package/example/love/js/game.js +558 -558
  39. package/example/music.html +210 -210
  40. package/example/node/test.js +137 -137
  41. package/example/pdf.html +186 -186
  42. package/example/progress.html +172 -172
  43. package/example/pso.html +147 -147
  44. package/example/sort.html +804 -815
  45. package/example/tweenjs.html +83 -83
  46. package/example/webgl.html +278 -278
  47. package/example/xfj/index.html +331 -331
  48. package/example/xfj/shake.js +48 -48
  49. package/example/xfj/testori.html +75 -75
  50. package/index.js +99 -99
  51. package/package.json +58 -56
  52. package/src/core/jmControl.js +1376 -1531
  53. package/src/core/jmEvents.js +240 -281
  54. package/src/core/jmGradient.js +231 -231
  55. package/src/core/jmGraph.js +569 -569
  56. package/src/core/jmList.js +92 -157
  57. package/src/core/jmObject.js +83 -103
  58. package/src/core/jmPath.js +35 -35
  59. package/src/core/jmProperty.js +71 -110
  60. package/src/core/jmShadow.js +65 -65
  61. package/src/core/jmUtils.js +906 -919
  62. package/src/lib/earcut.js +680 -680
  63. package/src/lib/earcut.md +73 -73
  64. package/src/lib/webgl/base.js +522 -452
  65. package/src/lib/webgl/core/buffer.js +48 -48
  66. package/src/lib/webgl/core/mapSize.js +40 -40
  67. package/src/lib/webgl/core/mapType.js +43 -43
  68. package/src/lib/webgl/core/program.js +138 -138
  69. package/src/lib/webgl/core/shader.js +13 -13
  70. package/src/lib/webgl/core/texture.js +60 -60
  71. package/src/lib/webgl/gradient.js +168 -168
  72. package/src/lib/webgl/index.js +137 -11
  73. package/src/lib/webgl/path.js +568 -561
  74. package/src/shapes/jmArrowLine.js +36 -36
  75. package/src/shapes/jmImage.js +244 -244
  76. package/src/shapes/jmLabel.js +271 -271
  77. package/src/shapes/jmResize.js +332 -330
package/example/controls/arc.html CHANGED
@@ -1,129 +1,129 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
-
6
- <meta name="viewport" content="width=device-width,initial-scale=1">
7
-
8
- <style>
9
- html,body{
10
- margin:0;
11
- padding: 0;
12
- overflow: auto;
13
- }
14
- #mycanvas_container{
15
- overflow: scroll;
16
- }
17
- </style>
18
- </head>
19
- <body>
20
- <div id="mycanvas_container"></div>
21
- </body>
22
- <script type="module">
23
- import jmGraph from "../../index.js";
24
- var container = document.getElementById('mycanvas_container');
25
-
26
- //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
27
- var g = jmGraph.create('mycanvas_container', {
28
- width: 800,
29
- height: 600,
30
- mode: '2d',
31
- autoRefresh: true,
32
- style: {
33
- fill: '#000'
34
- }
35
- });
36
-
37
- init(g);
38
-
39
-
40
- function init(g){
41
- //g.style.fill = '#000'; //画布背景
42
- var style = {
43
- stroke: '#ccc',
44
- fill: 'yellow',
45
- lineWidth: 4, //边线宽
46
- rotation: {
47
- angle: 0
48
- }
49
- };
50
- //style.opacity = 0.2;
51
-
52
- //创建一个椭圆
53
- var arc1 = g.createShape('arc', {
54
- style: style,
55
- center: {x:100, y:150},
56
- width: 120,
57
- height: 80
58
- });
59
- g.children.add(arc1);
60
- arc1.canMove(true);
61
-
62
-
63
-
64
- //实圆
65
- style = g.util.clone(style);
66
- style.stroke = 'red';
67
- //创建一个全圆
68
- var arc2 = g.createShape('arc', {
69
- style: style,
70
- center: {x:280, y:150},
71
- radius: 50
72
- });
73
- g.children.add(arc2);
74
-
75
- //圆弧
76
- style = g.util.clone(style);
77
- style.stroke = 'green';
78
- delete style.fill;//圆弧不设为实心
79
- //创建一个圆弧
80
- var arc3 = g.createShape('arc', {
81
- style: style,
82
- center: {x:400, y:150},
83
- start: 0,
84
- end: Math.PI / 2,
85
- radius: 50
86
- });
87
-
88
- g.children.add(arc3);
89
- var arc4 = g.createShape('arc', {
90
- style: style,
91
- center: {x:540, y:150},
92
- start: 0,
93
- end: Math.PI / 2,
94
- radius: 50,
95
- anticlockwise: true //顺时针
96
- });
97
- g.children.add(arc4);
98
-
99
- //这种个是直接调用canvas画的，性能会好一点
100
- var circle = g.createShape('circle', {
101
- style: style,
102
- center: {x:200, y:400},
103
- radius: 50
104
- });
105
- g.children.add(circle);
106
-
107
- //圆环
108
- style = g.util.clone(style);
109
- style.fill = 'blue';
110
- style.close = true; //如果是满圆，即end = Math.PI*2 时，把这个设为false
111
- var harc = g.createShape('harc', {
112
- style: style,
113
- center: {x:400, y:400},
114
- minRadius: 40,
115
- maxRadius: 80,
116
- start: 0,
117
- end: Math.PI / 4,
118
- anticlockwise: true //false 顺时针，true 逆时针
119
- });
120
- g.children.add(harc);
121
- harc.canMove(true);
122
-
123
- g.on('update', (time) => {
124
- style.rotation.angle += 0.01;
125
- g.needUpdate = true;
126
- });
127
- }
128
- </script>
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
+
6
+ <meta name="viewport" content="width=device-width,initial-scale=1">
7
+
8
+ <style>
9
+ html,body{
10
+ margin:0;
11
+ padding: 0;
12
+ overflow: auto;
13
+ }
14
+ #mycanvas_container{
15
+ overflow: scroll;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <div id="mycanvas_container"></div>
21
+ </body>
22
+ <script type="module">
23
+ import jmGraph from "../../index.js";
24
+ var container = document.getElementById('mycanvas_container');
25
+
26
+ //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
27
+ var g = jmGraph.create('mycanvas_container', {
28
+ width: 800,
29
+ height: 600,
30
+ mode: '2d',
31
+ autoRefresh: true,
32
+ style: {
33
+ fill: '#000'
34
+ }
35
+ });
36
+
37
+ init(g);
38
+
39
+
40
+ function init(g){
41
+ //g.style.fill = '#000'; //画布背景
42
+ var style = {
43
+ stroke: '#ccc',
44
+ fill: 'yellow',
45
+ lineWidth: 4, //边线宽
46
+ rotation: {
47
+ angle: 0
48
+ }
49
+ };
50
+ //style.opacity = 0.2;
51
+
52
+ //创建一个椭圆
53
+ var arc1 = g.createShape('arc', {
54
+ style: style,
55
+ center: {x:100, y:150},
56
+ width: 120,
57
+ height: 80
58
+ });
59
+ g.children.add(arc1);
60
+ arc1.canMove(true);
61
+
62
+
63
+
64
+ //实圆
65
+ style = g.util.clone(style);
66
+ style.stroke = 'red';
67
+ //创建一个全圆
68
+ var arc2 = g.createShape('arc', {
69
+ style: style,
70
+ center: {x:280, y:150},
71
+ radius: 50
72
+ });
73
+ g.children.add(arc2);
74
+
75
+ //圆弧
76
+ style = g.util.clone(style);
77
+ style.stroke = 'green';
78
+ delete style.fill;//圆弧不设为实心
79
+ //创建一个圆弧
80
+ var arc3 = g.createShape('arc', {
81
+ style: style,
82
+ center: {x:400, y:150},
83
+ start: 0,
84
+ end: Math.PI / 2,
85
+ radius: 50
86
+ });
87
+
88
+ g.children.add(arc3);
89
+ var arc4 = g.createShape('arc', {
90
+ style: style,
91
+ center: {x:540, y:150},
92
+ start: 0,
93
+ end: Math.PI / 2,
94
+ radius: 50,
95
+ anticlockwise: true //顺时针
96
+ });
97
+ g.children.add(arc4);
98
+
99
+ //这种个是直接调用canvas画的，性能会好一点
100
+ var circle = g.createShape('circle', {
101
+ style: style,
102
+ center: {x:200, y:400},
103
+ radius: 50
104
+ });
105
+ g.children.add(circle);
106
+
107
+ //圆环
108
+ style = g.util.clone(style);
109
+ style.fill = 'blue';
110
+ style.close = true; //如果是满圆，即end = Math.PI*2 时，把这个设为false
111
+ var harc = g.createShape('harc', {
112
+ style: style,
113
+ center: {x:400, y:400},
114
+ minRadius: 40,
115
+ maxRadius: 80,
116
+ start: 0,
117
+ end: Math.PI / 4,
118
+ anticlockwise: true //false 顺时针，true 逆时针
119
+ });
120
+ g.children.add(harc);
121
+ harc.canMove(true);
122
+
123
+ g.on('update', (time) => {
124
+ style.rotation.angle += 0.01;
125
+ g.needUpdate = true;
126
+ });
127
+ }
128
+ </script>
129
129
  </html>
package/example/controls/arrowline.html CHANGED
@@ -1,78 +1,78 @@
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
- var container = document.getElementById('mycanvas_container');
22
-
23
- //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
24
- var g = jmGraph.create('mycanvas_container', {
25
- width: 800,
26
- height: 600,
27
- mode: 'webgl',
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
- lineType: 'dotted', //虚线
39
- dashLength: 10,
40
- stroke: '#48EA08'
41
- };
42
- style.shadow = '0,0,10,#fff';
43
- //style.opacity = 0.2;
44
-
45
- //创建
46
- var shape = g.createShape('arrowline',{
47
- style:style,
48
- start: {x:100,y:100},
49
- end: {x: 200, y: 350}
50
- //height:100
51
- });
52
-
53
- g.children.add(shape);
54
-
55
- style = g.util.clone(style);
56
- style.fill = '#48EA08'; //实心箭头
57
- //创建
58
- //一起结束点和一个角度angle可以决定一个箭头，如果不填angle，则会用start和end来计算角度
59
- var arrow = g.createShape('arrow',{
60
- style:style,
61
- start: {x:150, y:120},
62
- end: {x: 160, y: 150},
63
- //angle: Math.PI/2, //箭头角度 可以不填
64
- //offsetX: 5, //箭头X偏移量
65
- //offsetY: 8 //箭头Y偏移量
66
- });
67
-
68
- g.children.add(arrow);
69
-
70
- function update() {
71
- g.redraw();
72
- //requestAnimationFrame(update);
73
- }
74
-
75
- update();
76
- }
77
- </script>
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
+ var container = document.getElementById('mycanvas_container');
22
+
23
+ //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
24
+ var g = jmGraph.create('mycanvas_container', {
25
+ width: 800,
26
+ height: 600,
27
+ mode: 'webgl',
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
+ lineType: 'dotted', //虚线
39
+ dashLength: 10,
40
+ stroke: '#48EA08'
41
+ };
42
+ style.shadow = '0,0,10,#fff';
43
+ //style.opacity = 0.2;
44
+
45
+ //创建
46
+ var shape = g.createShape('arrowline',{
47
+ style:style,
48
+ start: {x:100,y:100},
49
+ end: {x: 200, y: 350}
50
+ //height:100
51
+ });
52
+
53
+ g.children.add(shape);
54
+
55
+ style = g.util.clone(style);
56
+ style.fill = '#48EA08'; //实心箭头
57
+ //创建
58
+ //一起结束点和一个角度angle可以决定一个箭头，如果不填angle，则会用start和end来计算角度
59
+ var arrow = g.createShape('arrow',{
60
+ style:style,
61
+ start: {x:150, y:120},
62
+ end: {x: 160, y: 150},
63
+ //angle: Math.PI/2, //箭头角度 可以不填
64
+ //offsetX: 5, //箭头X偏移量
65
+ //offsetY: 8 //箭头Y偏移量
66
+ });
67
+
68
+ g.children.add(arrow);
69
+
70
+ function update() {
71
+ g.redraw();
72
+ //requestAnimationFrame(update);
73
+ }
74
+
75
+ update();
76
+ }
77
+ </script>
78
78
  </html>