jmgraph 3.2.6 → 3.2.7

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 (71) hide show
  1. package/build/gulpfile.js +143 -0
  2. package/build/package-lock.json +19282 -0
  3. package/build/package.json +71 -0
  4. package/dist/jmgraph.core.min.js +1 -1
  5. package/dist/jmgraph.core.min.js.map +1 -1
  6. package/dist/jmgraph.js +29 -4
  7. package/dist/jmgraph.min.js +1 -1
  8. package/docs/_config.yml +1 -0
  9. package/docs/about.html +41 -0
  10. package/docs/api/jmGraph.md +2302 -0
  11. package/docs/css/index.css +131 -0
  12. package/docs/images/ball.gif +0 -0
  13. package/docs/images/bezier.gif +0 -0
  14. package/docs/images/cell.gif +0 -0
  15. package/docs/images/chart.gif +0 -0
  16. package/docs/images/editor.gif +0 -0
  17. package/docs/images/sort.gif +0 -0
  18. package/docs/index.html +80 -0
  19. package/docs/js/helper.js +89 -0
  20. package/docs/js/jquery.min.js +6 -0
  21. package/example/ball.html +223 -0
  22. package/example/base.html +112 -0
  23. package/example/canvas.html +54 -0
  24. package/example/cell.html +284 -0
  25. package/example/controls/arc.html +126 -0
  26. package/example/controls/arrowline.html +77 -0
  27. package/example/controls/bezier.html +223 -0
  28. package/example/controls/img.html +90 -0
  29. package/example/controls/label.html +85 -0
  30. package/example/controls/line.html +170 -0
  31. package/example/controls/prismatic.html +63 -0
  32. package/example/controls/rect.html +64 -0
  33. package/example/controls/resize.html +75 -0
  34. package/example/controls/test.html +136 -0
  35. package/example/es.html +70 -0
  36. package/example/es5module.html +64 -0
  37. package/example/heartarc.html +116 -0
  38. package/example/index.html +46 -0
  39. package/example/js/require.js +5 -0
  40. package/example/love/img/bling/bling.tps +265 -0
  41. package/example/love/img/bling.json +87 -0
  42. package/example/love/img/bling.tps +295 -0
  43. package/example/love/img/doc/bling.gif +0 -0
  44. package/example/love/img/love.json +95 -0
  45. package/example/love/img/love.tps +315 -0
  46. package/example/love/img/music/bg.mp3 +0 -0
  47. package/example/love/img/music/bg_2019130144035.mp3 +0 -0
  48. package/example/love/img/music/f.mp3 +0 -0
  49. package/example/love/img/music/fail.mp3 +0 -0
  50. package/example/love/img/music/s.mp3 +0 -0
  51. package/example/love/img/music/s_201913014415.mp3 +0 -0
  52. package/example/love/img/qq/qq.tps +399 -0
  53. package/example/love/img/qq.json +242 -0
  54. package/example/love/index.html +40 -0
  55. package/example/love/js/game.js +558 -0
  56. package/example/music.html +192 -0
  57. package/example/node/test.js +138 -0
  58. package/example/pdf.html +187 -0
  59. package/example/progress.html +173 -0
  60. package/example/pso.html +148 -0
  61. package/example/sort.html +816 -0
  62. package/example/tweenjs.html +84 -0
  63. package/example/webgl.html +255 -0
  64. package/example/xfj/img/dr_die.gif +0 -0
  65. package/example/xfj/index.html +332 -0
  66. package/example/xfj/shake.js +49 -0
  67. package/example/xfj/testori.html +76 -0
  68. package/package.json +1 -1
  69. package/src/core/jmControl.js +3 -2
  70. package/src/core/jmGradient.js +4 -0
  71. package/src/core/jmGraph.js +6 -4
package/example/controls/arc.html ADDED
@@ -0,0 +1,126 @@
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
+ style: {
32
+ fill: '#000'
33
+ }
34
+ });
35
+
36
+ init(g);
37
+
38
+
39
+ function init(g){
40
+ //g.style.fill = '#000'; //画布背景
41
+ var style = {
42
+ stroke: '#ccc',
43
+ fill: 'yellow',
44
+ lineWidth: 4, //边线宽
45
+ };
46
+ //style.opacity = 0.2;
47
+
48
+ //创建一个椭圆
49
+ var arc1 = g.createShape('arc', {
50
+ style: style,
51
+ center: {x:100, y:150},
52
+ width: 120,
53
+ height: 80
54
+ });
55
+ g.children.add(arc1);
56
+ arc1.canMove(true);
57
+
58
+
59
+
60
+ //实圆
61
+ style = g.util.clone(style);
62
+ style.stroke = 'red';
63
+ //创建一个全圆
64
+ var arc2 = g.createShape('arc', {
65
+ style: style,
66
+ center: {x:280, y:150},
67
+ radius: 50
68
+ });
69
+ g.children.add(arc2);
70
+
71
+ //圆弧
72
+ style = g.util.clone(style);
73
+ style.stroke = 'green';
74
+ delete style.fill;//圆弧不设为实心
75
+ //创建一个圆弧
76
+ var arc3 = g.createShape('arc', {
77
+ style: style,
78
+ center: {x:400, y:150},
79
+ start: 0,
80
+ end: Math.PI / 2,
81
+ radius: 50
82
+ });
83
+
84
+ g.children.add(arc3);
85
+ var arc4 = g.createShape('arc', {
86
+ style: style,
87
+ center: {x:540, y:150},
88
+ start: 0,
89
+ end: Math.PI / 2,
90
+ radius: 50,
91
+ anticlockwise: true //顺时针
92
+ });
93
+ g.children.add(arc4);
94
+
95
+ //这种个是直接调用canvas画的，性能会好一点
96
+ var circle = g.createShape('circle', {
97
+ style: style,
98
+ center: {x:200, y:400},
99
+ radius: 50
100
+ });
101
+ g.children.add(circle);
102
+
103
+ //圆环
104
+ style = g.util.clone(style);
105
+ style.fill = 'blue';
106
+ style.close = true; //如果是满圆，即end = Math.PI*2 时，把这个设为false
107
+ var harc = g.createShape('harc', {
108
+ style: style,
109
+ center: {x:400, y:400},
110
+ minRadius: 40,
111
+ maxRadius: 80,
112
+ start: 0,
113
+ end: Math.PI / 4,
114
+ anticlockwise: true //false 顺时针，true 逆时针
115
+ });
116
+ g.children.add(harc);
117
+
118
+ function update() {
119
+ g.needUpdate && g.redraw();
120
+ requestAnimationFrame(update);
121
+ }
122
+
123
+ update();
124
+ }
125
+ </script>
126
+ </html>
package/example/controls/arrowline.html ADDED
@@ -0,0 +1,77 @@
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
+ style: {
28
+ fill: '#000'
29
+ }
30
+ });
31
+
32
+ init(g);
33
+
34
+ function init(g){
35
+ //g.style.fill = '#000'; //画布背景
36
+ var style = {
37
+ lineType: 'dotted', //虚线
38
+ dashLength: 10,
39
+ stroke: '#48EA08'
40
+ };
41
+ style.shadow = '0,0,10,#fff';
42
+ //style.opacity = 0.2;
43
+
44
+ //创建
45
+ var shape = g.createShape('arrowline',{
46
+ style:style,
47
+ start: {x:100,y:100},
48
+ end: {x: 200, y: 350}
49
+ //height:100
50
+ });
51
+
52
+ g.children.add(shape);
53
+
54
+ style = g.util.clone(style);
55
+ style.fill = '#48EA08'; //实心箭头
56
+ //创建
57
+ //一起结束点和一个角度angle可以决定一个箭头，如果不填angle，则会用start和end来计算角度
58
+ var arrow = g.createShape('arrow',{
59
+ style:style,
60
+ start: {x:150, y:120},
61
+ end: {x: 160, y: 150},
62
+ //angle: Math.PI/2, //箭头角度 可以不填
63
+ //offsetX: 5, //箭头X偏移量
64
+ //offsetY: 8 //箭头Y偏移量
65
+ });
66
+
67
+ g.children.add(arrow);
68
+
69
+ function update() {
70
+ g.redraw();
71
+ //requestAnimationFrame(update);
72
+ }
73
+
74
+ update();
75
+ }
76
+ </script>
77
+ </html>
package/example/controls/bezier.html ADDED
@@ -0,0 +1,223 @@
1
+ <!doctype html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
6
+ <meta name="viewport" content="width=device-width,initial-scale=1">
7
+ <title>贝塞尔曲线</title>
8
+ </head>
9
+
10
+ <body style="width:100%;margin:10px auto;border:1px solid blue;">
11
+ 可用鼠标移动节点位置
12
+ <br />
13
+ <div id="mycanvas" style="border:1px solid red;margin:10px;width:1024px;height:300px;"></div>
14
+ <div id="mycanvas2" style="border:1px solid red;margin:10px;width:1024px;height:500px;"></div>
15
+ </body>
16
+
17
+ </html>
18
+
19
+ <script type="module">
20
+ import jmGraph from "../../index.js";
21
+
22
+ var psize = 6;
23
+ var style = {
24
+ stroke: 'rgb(120,20,80)',
25
+ lineWidth: 3
26
+ };
27
+ style.shadow = '4,4,6,rgb(39,40,34)';
28
+
29
+
30
+
31
+ //初始化jmgraph
32
+ var g1 = jmGraph.create('mycanvas', {
33
+ mode: '2d'
34
+ });
35
+
36
+ init1(g1);
37
+
38
+ function init1(graph1) {
39
+ var lstyle = graph1.util.clone(style);
40
+ lstyle.stroke = 'rgba(131,237,111,0.7)';
41
+ lstyle.lineWidth = 1;
42
+ var pstyle = graph1.util.clone(style);
43
+ pstyle.fill = 'rgb(191,216,44)';
44
+
45
+ var p0 = { x: 160, y: 200 };
46
+ var p1 = { x: 200, y: 80 };
47
+ var p2 = { x: 400, y: 100 };
48
+ var p3 = { x: 420, y: 210 };
49
+ var p4 = { x: 500, y: 120 };
50
+
51
+ //一个固定的bezier曲线
52
+ var bezier = graph1.createShape('bezier', { style: style, points: [p0, p1, p2, p3, p4] });
53
+ graph1.children.add(bezier);
54
+ bezier.canMove(true);
55
+
56
+
57
+ var path = graph1.createShape('path', { style: lstyle, points: [p0, p1, p2, p3, p4] });
58
+ graph1.children.add(path);
59
+ path.canMove(true);
60
+
61
+
62
+
63
+ var p0arc = graph1.createShape('arc', { style: pstyle, center: p0, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
64
+ graph1.children.add(p0arc);
65
+ p0arc.canMove(true);
66
+ var p1arc = graph1.createShape('arc', { style: pstyle, center: p1, radius: psize, width: psize, height: psize, start: 0, end: Math.PI * 2, anticlockwise: true });
67
+ graph1.children.add(p1arc);
68
+ p1arc.canMove(true);
69
+ var p2arc = graph1.createShape('arc', { style: pstyle, center: p2, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
70
+ graph1.children.add(p2arc);
71
+ p2arc.canMove(true);
72
+ var p3arc = graph1.createShape('arc', { style: pstyle, center: p3, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
73
+ graph1.children.add(p3arc);
74
+ p3arc.canMove(true);
75
+ var p4arc = graph1.createShape('arc', { style: pstyle, center: p4, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
76
+ graph1.children.add(p4arc);
77
+ p4arc.canMove(true);
78
+ }
79
+
80
+
81
+ //初始化jmgraph
82
+ var g2 = jmGraph.create('mycanvas2', {
83
+ mode: '2d'
84
+ });
85
+
86
+
87
+
88
+ function init2(graph2) {
89
+ var lstyle = graph2.util.clone(style);
90
+ lstyle.stroke = 'rgba(131,237,111,0.7)';
91
+ lstyle.lineWidth = 1;
92
+ var pstyle = graph2.util.clone(style);
93
+ pstyle.fill = 'rgb(191,216,44)';
94
+
95
+ //动画部分
96
+ var mp0 = { x: 160, y: 300 };
97
+ var mp1 = { x: 200, y: 130 };
98
+ var mp2 = { x: 400, y: 80 };
99
+ var mp3 = { x: 420, y: 300 };
100
+ var mp4 = { x: 500, y: 320 };
101
+ var mp5 = { x: 600, y: 81 };
102
+ var mp6 = { x: 700, y: 90 };
103
+ var mp7 = { x: 650, y: 320 };
104
+ var mp8 = { x: 760, y: 350 };
105
+ var mp9 = { x: 800, y: 60 };
106
+ var mlstyle = graph2.util.clone(lstyle);
107
+ mlstyle.lineWidth = 2;
108
+ mlstyle.stroke = '#086C0A';
109
+ delete mlstyle.shadow;
110
+ var mpath = graph2.createShape('path', { style: mlstyle, points: [mp0, mp1, mp2, mp3, mp4, mp5, mp6, mp7, mp8, mp9] });
111
+ graph2.children.add(mpath);
112
+ //mpath.canMove(true);
113
+ var p0arc = graph2.createShape('arc', { style: pstyle, center: mp0, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
114
+ graph2.children.add(p0arc);
115
+ p0arc.canMove(true);
116
+ var p1arc = graph2.createShape('arc', { style: pstyle, center: mp1, radius: psize, width: psize, height: psize, start: 0, end: Math.PI * 2, anticlockwise: true });
117
+ graph2.children.add(p1arc);
118
+ p1arc.canMove(true);
119
+ var p2arc = graph2.createShape('arc', { style: pstyle, center: mp2, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
120
+ graph2.children.add(p2arc);
121
+ p2arc.canMove(true);
122
+ var p3arc = graph2.createShape('arc', { style: pstyle, center: mp3, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
123
+ graph2.children.add(p3arc);
124
+ p3arc.canMove(true);
125
+ var p4arc = graph2.createShape('arc', { style: pstyle, center: mp4, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
126
+ graph2.children.add(p4arc);
127
+ p4arc.canMove(true);
128
+ var p5arc = graph2.createShape('arc', { style: pstyle, center: mp5, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
129
+ graph2.children.add(p5arc);
130
+ p5arc.canMove(true);
131
+ var p6arc = graph2.createShape('arc', { style: pstyle, center: mp6, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
132
+ graph2.children.add(p6arc);
133
+ p6arc.canMove(true);
134
+ var p7arc = graph2.createShape('arc', { style: pstyle, center: mp7, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
135
+ graph2.children.add(p7arc);
136
+ p7arc.canMove(true);
137
+ var p8arc = graph2.createShape('arc', { style: pstyle, center: mp8, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
138
+ graph2.children.add(p8arc);
139
+ p8arc.canMove(true);
140
+ var p9arc = graph2.createShape('arc', { style: pstyle, center: mp9, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
141
+ graph2.children.add(p9arc);
142
+ p9arc.canMove(true);
143
+
144
+ style.zIndex = 100;
145
+ var mbezierpath = graph2.createShape('path', { style: style });
146
+ graph2.children.add(mbezierpath);
147
+
148
+ var arrstyle = graph2.util.clone(style);
149
+ var arr = graph2.createShape('arrow', { style: arrstyle });
150
+ graph2.children.add(arr);
151
+
152
+ var chplines = [];
153
+ var chpstyle = graph2.util.clone(mlstyle);
154
+ chpstyle.lineWidth = 1;
155
+ chpstyle.stroke = 'rgb(142,142,15)';
156
+ function getpoint(ps, t, index) {
157
+ if (ps.length == 1) return ps[0];
158
+ if (ps.length == 2) {
159
+ var p = {};
160
+ p.x = (ps[1].x - ps[0].x) * t + ps[0].x;
161
+ p.y = (ps[1].y - ps[0].y) * t + ps[0].y;
162
+ return p;
163
+ }
164
+ if (ps.length > 2) {
165
+ var ppp;
166
+ if (chplines.length <= index) {
167
+ ppp = chplines[index] = graph2.createShape('path', { style: chpstyle });
168
+ graph2.children.add(ppp);
169
+ }
170
+ else {
171
+ ppp = chplines[index];
172
+ }
173
+ ppp.points = [];
174
+ for (var i = 0; i < ps.length - 1; i++) {
175
+ var p = getpoint([ps[i], ps[i + 1]], t);
176
+ if (p) {
177
+ ppp.points.push(p);
178
+ }
179
+ }
180
+ index++;
181
+ return getpoint(ppp.points, t, index);
182
+ }
183
+ }
184
+
185
+ var t = 0;
186
+ var dir = 0;
187
+ var speed = 0.02;
188
+ setInterval(function () {
189
+ if (t > 1) {
190
+ t = 1;
191
+ dir = 1;
192
+ mbezierpath.points = [];
193
+ }
194
+ else if (t < 0) {
195
+ t = 0;
196
+ dir = 0;
197
+ mbezierpath.points = [];
198
+ }
199
+ /*for(var i in chplines) {
200
+ graph2.children.remove(chplines[i]);
201
+ delete chplines[i];
202
+ }*/
203
+ var mp = getpoint(mpath.points, t, 0);
204
+ mbezierpath.points.push(mp);
205
+
206
+ if (mbezierpath.points.length > 1) {
207
+ arr.start = mbezierpath.points[mbezierpath.points.length - 2];
208
+ arr.end = mbezierpath.points[mbezierpath.points.length - 1];
209
+ }
210
+ t = dir == 0 ? (t + speed) : (t - speed);
211
+ }, 50);
212
+ }
213
+
214
+ init2(g2);
215
+
216
+ //实时更新画布
217
+ function update() {
218
+ if(g1.needUpdate) g1.redraw();
219
+ if(g2.needUpdate) g2.redraw();
220
+ requestAnimationFrame(update);
221
+ }
222
+ update();
223
+ </script>
package/example/controls/img.html ADDED
@@ -0,0 +1,90 @@
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
+ background-color: #000;;
11
+ }
12
+ #mycanvas_container{
13
+ overflow: hidden;
14
+ }
15
+ </style>
16
+ </head>
17
+ <body>
18
+ <div id="mycanvas_container"></div>
19
+ </body>
20
+ <script type="module">
21
+ import jmGraph from "../../index.js";
22
+
23
+ var container = document.getElementById('mycanvas_container');
24
+
25
+ //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
26
+ var g = jmGraph.create('mycanvas_container', {
27
+ width: 800,
28
+ height: 600,
29
+ style: {
30
+ //fill: '#000'
31
+ },
32
+ mode: '2d'
33
+ });
34
+
35
+ init(g);
36
+
37
+ function init(g){
38
+
39
+ //g.style.fill = '#000'; //画布背景
40
+ var style = {
41
+ //src: '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png'
42
+ //stroke: 'red'
43
+ };
44
+ style.shadow = '0,0,10,#fff';
45
+ //style.opacity = 0.2;
46
+
47
+ //创建一个image
48
+ var img = g.createShape('image',{
49
+ style:style,
50
+ position: {x:100,y:100},
51
+ image: '../qrcode.jpg'
52
+ });
53
+ //img.image = '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png';
54
+ g.children.add(img);
55
+ img.canMove(true);
56
+
57
+ //截取logo
58
+ var img2 = g.createShape('image',{
59
+ style:style,
60
+ position: {x:500,y:200},
61
+
62
+ //伸展或缩小图像
63
+ width: 100,
64
+ height: 60,
65
+ image: '../x.png',
66
+ sourcePosition: {x:0, y:0}, //截取起点
67
+ sourceWidth: 60, //截取宽度，如果不填则用原图宽
68
+ sourceHeight: 60 //截取高度，如果不填则用原图高
69
+ });
70
+ g.children.add(img2);
71
+ img2.canMove(true);
72
+
73
+ var style = {
74
+ stroke: 'red',
75
+ fill: 'yellow',
76
+ lineWidth: 2 //边线宽
77
+ };
78
+ //style.opacity = 0.2;
79
+
80
+
81
+
82
+ function update() {
83
+ g.needUpdate && g.redraw();
84
+ requestAnimationFrame(update);
85
+ }
86
+
87
+ update();
88
+ }
89
+ </script>
90
+ </html>
package/example/controls/label.html ADDED
@@ -0,0 +1,85 @@
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
+ <!--<script type="text/javascript" src="../../dist/jmgraph.min.js"></script>-->
17
+ </head>
18
+ <body>
19
+ <div id="mycanvas_container"></div>
20
+ </body>
21
+ <script type="module">
22
+ import { jmGraph } from "../../index.js";
23
+ import jmLabel from '../../src/shapes/jmLabel.js';
24
+
25
+ var container = document.getElementById('mycanvas_container');
26
+
27
+ //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
28
+ var g = jmGraph.create('mycanvas_container', {
29
+ width: 800,
30
+ height: 600,
31
+ mode: '2d',
32
+ style: {
33
+ fill: '#000'
34
+ }
35
+ });
36
+ init(g);
37
+
38
+ function init(g){
39
+ //g.style.fill = '#000'; //画布背景
40
+ var style = {
41
+ stroke: '#effaaa',
42
+ fill: '#fff',
43
+ textAlign: 'right',
44
+ textBaseline: 'middle',
45
+ fontFamily: "Arial",
46
+ fontSize: 24,
47
+ border: {
48
+ left:1,
49
+ top:1,
50
+ right:1,
51
+ bottom:1,
52
+ style: {
53
+ stroke: 'red'
54
+ }
55
+ },
56
+ shadow: '0,0,10,#fff'
57
+ };
58
+ //style.opacity = 0.2;
59
+
60
+ //创建一个label
61
+ var label = g.createShape(jmLabel,{
62
+ style:style,
63
+ //position:{x:200,y:150},
64
+ center: {x: 250, y: 250},
65
+ text:'test label',
66
+ //width:120,
67
+ height:80
68
+ });
69
+ g.children.add(label);
70
+ label.canMove(true);
71
+
72
+ g.bind('touchleave', (args) => {
73
+ console.log('touchleave', args);
74
+ });
75
+
76
+
77
+ function update() {
78
+ if(g.needUpdate) g.redraw();
79
+ requestAnimationFrame(update);
80
+ }
81
+
82
+ update();
83
+ }
84
+ </script>
85
+ </html>