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.
- package/LICENSE +21 -21
- package/README.md +251 -428
- package/build/gulpfile.js +142 -142
- package/build/package-lock.json +10666 -0
- package/build/package.json +71 -71
- package/dev.js +9 -9
- package/dist/jmgraph.core.min.js +1 -1
- package/dist/jmgraph.core.min.js.map +1 -1
- package/dist/jmgraph.js +3500 -2668
- package/dist/jmgraph.min.js +1 -1
- package/example/ball.html +216 -216
- package/example/base.html +111 -111
- package/example/canvas.html +53 -53
- package/example/cell.html +283 -283
- package/example/controls/arc.html +128 -128
- package/example/controls/arrowline.html +77 -77
- package/example/controls/bezier.html +298 -298
- package/example/controls/img.html +96 -96
- package/example/controls/label.html +86 -86
- package/example/controls/line.html +172 -172
- package/example/controls/prismatic.html +62 -62
- package/example/controls/rect.html +63 -63
- package/example/controls/resize.html +111 -111
- package/example/controls/test.html +359 -359
- package/example/es.html +69 -69
- package/example/es5module.html +62 -63
- package/example/heartarc.html +115 -115
- package/example/index.html +46 -46
- package/example/js/require.js +4 -4
- package/example/love/img/bling/bling.tps +265 -265
- package/example/love/img/bling.json +87 -87
- package/example/love/img/bling.tps +295 -295
- package/example/love/img/love.json +95 -95
- package/example/love/img/love.tps +315 -315
- package/example/love/img/qq/qq.tps +399 -399
- package/example/love/img/qq.json +242 -242
- package/example/love/index.html +40 -40
- package/example/love/js/game.js +558 -558
- package/example/music.html +210 -210
- package/example/node/test.js +137 -137
- package/example/pdf.html +186 -186
- package/example/progress.html +172 -172
- package/example/pso.html +147 -147
- package/example/sort.html +804 -815
- package/example/tweenjs.html +83 -83
- package/example/webgl.html +278 -278
- package/example/xfj/index.html +331 -331
- package/example/xfj/shake.js +48 -48
- package/example/xfj/testori.html +75 -75
- package/index.js +99 -99
- package/package.json +58 -56
- package/src/core/jmControl.js +1376 -1531
- package/src/core/jmEvents.js +240 -281
- package/src/core/jmGradient.js +231 -231
- package/src/core/jmGraph.js +569 -569
- package/src/core/jmList.js +92 -157
- package/src/core/jmObject.js +83 -103
- package/src/core/jmPath.js +35 -35
- package/src/core/jmProperty.js +71 -110
- package/src/core/jmShadow.js +65 -65
- package/src/core/jmUtils.js +906 -919
- package/src/lib/earcut.js +680 -680
- package/src/lib/earcut.md +73 -73
- package/src/lib/webgl/base.js +522 -452
- package/src/lib/webgl/core/buffer.js +48 -48
- package/src/lib/webgl/core/mapSize.js +40 -40
- package/src/lib/webgl/core/mapType.js +43 -43
- package/src/lib/webgl/core/program.js +138 -138
- package/src/lib/webgl/core/shader.js +13 -13
- package/src/lib/webgl/core/texture.js +60 -60
- package/src/lib/webgl/gradient.js +168 -168
- package/src/lib/webgl/index.js +137 -11
- package/src/lib/webgl/path.js +568 -561
- package/src/shapes/jmArrowLine.js +36 -36
- package/src/shapes/jmImage.js +244 -244
- package/src/shapes/jmLabel.js +271 -271
- package/src/shapes/jmResize.js +332 -330
package/example/tweenjs.html
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
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
|
-
<script type="text/javascript" src="../dist/jmgraph.min.js"></script>
|
|
7
|
-
<script src="//code.createjs.com/1.0.0/tweenjs.min.js"></script>
|
|
8
|
-
</head>
|
|
9
|
-
<body style="margin:10px auto;">
|
|
10
|
-
<div id="mycanvas" width="1200" height="600" style="border:1px solid red;margin:10px;background-color:#000;"></div>
|
|
11
|
-
</body>
|
|
12
|
-
</html>
|
|
13
|
-
|
|
14
|
-
<script type="text/javascript">
|
|
15
|
-
//初始化jmgraph
|
|
16
|
-
var g = jmGraph.create('mycanvas', {
|
|
17
|
-
height: 600
|
|
18
|
-
});
|
|
19
|
-
init(g);
|
|
20
|
-
|
|
21
|
-
//实时更新画布
|
|
22
|
-
function update() {
|
|
23
|
-
|
|
24
|
-
if(g.needUpdate) g.redraw();
|
|
25
|
-
requestAnimationFrame(update);
|
|
26
|
-
}
|
|
27
|
-
update();
|
|
28
|
-
|
|
29
|
-
function init(graph){
|
|
30
|
-
var style = {
|
|
31
|
-
stroke:'rgb(120,20,80)',
|
|
32
|
-
lineWidth:6,
|
|
33
|
-
close:true,
|
|
34
|
-
zIndex:1
|
|
35
|
-
};
|
|
36
|
-
var bg = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
|
|
37
|
-
bg.addStop(0,'green');
|
|
38
|
-
bg.addStop('0.2','blue');
|
|
39
|
-
bg.addStop(0.8,'yellow');
|
|
40
|
-
bg.addStop(1,'red');
|
|
41
|
-
style.fill = 'radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue 0.2, yellow 0.8, red 1)';
|
|
42
|
-
style.shadow = graph.createShadow(0,0,20,'rgb(255,255,255)');
|
|
43
|
-
var arc = graph.createShape('arc',{style:style,center:{x:250,y:250},width:200,height: 200,start:0,end:Math.PI * 2});
|
|
44
|
-
|
|
45
|
-
arc.bind('mouseover',function(evt) {
|
|
46
|
-
this.style.stroke = 'rgba(88,200,155,0.5)';
|
|
47
|
-
});
|
|
48
|
-
arc.bind('mouseleave',function(evt) {
|
|
49
|
-
this.style.stroke = 'rgb(120,20,80)';
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
//arc.bind('touchstart',function(evt) {
|
|
53
|
-
//this.style.stroke = 'rgba(88,200,155,0.5)';
|
|
54
|
-
//graph.refresh();
|
|
55
|
-
//});
|
|
56
|
-
|
|
57
|
-
graph.children.add(arc);
|
|
58
|
-
arc.canMove(true);
|
|
59
|
-
|
|
60
|
-
style = g.util.clone(style);
|
|
61
|
-
style.stroke = 'rgb(255,255,255)';
|
|
62
|
-
style.close=false;
|
|
63
|
-
style.zIndex = 3;
|
|
64
|
-
delete style.shadow;
|
|
65
|
-
delete style.fill;
|
|
66
|
-
|
|
67
|
-
var step = Math.PI / 25;
|
|
68
|
-
var bluestop = 0.5;
|
|
69
|
-
var bluedir = 0;
|
|
70
|
-
var yellowstop = 0.8;
|
|
71
|
-
var yellowdir = 0;
|
|
72
|
-
var childarc = graph.createShape('arc',{style:style,center:{x:arc.width / 2,y:arc.height / 2},start:0,end: Math.PI / 3,radius:arc.width / 2,anticlockwise:false});
|
|
73
|
-
arc.children.add(childarc);
|
|
74
|
-
|
|
75
|
-
createjs.Tween.get(childarc, { loop: true })
|
|
76
|
-
.to({ startAngle: Math.PI*2, endAngle: Math.PI*7/3 }, 5000, createjs.Ease.getPowInOut(2))
|
|
77
|
-
.to({ startAngle: 0, endAngle: Math.PI / 3 }, 5000, createjs.Ease.getPowInOut(4));
|
|
78
|
-
|
|
79
|
-
createjs.Tween.get(arc.center, { loop: true })
|
|
80
|
-
.to({ x: graph.width - 200}, 5000, createjs.Ease.getPowInOut(2))
|
|
81
|
-
.to({ x: 250}, 5000, createjs.Ease.getPowInOut(4));
|
|
82
|
-
|
|
83
|
-
}
|
|
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
|
+
<script type="text/javascript" src="../dist/jmgraph.min.js"></script>
|
|
7
|
+
<script src="//code.createjs.com/1.0.0/tweenjs.min.js"></script>
|
|
8
|
+
</head>
|
|
9
|
+
<body style="margin:10px auto;">
|
|
10
|
+
<div id="mycanvas" width="1200" height="600" style="border:1px solid red;margin:10px;background-color:#000;"></div>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
13
|
+
|
|
14
|
+
<script type="text/javascript">
|
|
15
|
+
//初始化jmgraph
|
|
16
|
+
var g = jmGraph.create('mycanvas', {
|
|
17
|
+
height: 600
|
|
18
|
+
});
|
|
19
|
+
init(g);
|
|
20
|
+
|
|
21
|
+
//实时更新画布
|
|
22
|
+
function update() {
|
|
23
|
+
|
|
24
|
+
if(g.needUpdate) g.redraw();
|
|
25
|
+
requestAnimationFrame(update);
|
|
26
|
+
}
|
|
27
|
+
update();
|
|
28
|
+
|
|
29
|
+
function init(graph){
|
|
30
|
+
var style = {
|
|
31
|
+
stroke:'rgb(120,20,80)',
|
|
32
|
+
lineWidth:6,
|
|
33
|
+
close:true,
|
|
34
|
+
zIndex:1
|
|
35
|
+
};
|
|
36
|
+
var bg = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
|
|
37
|
+
bg.addStop(0,'green');
|
|
38
|
+
bg.addStop('0.2','blue');
|
|
39
|
+
bg.addStop(0.8,'yellow');
|
|
40
|
+
bg.addStop(1,'red');
|
|
41
|
+
style.fill = 'radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue 0.2, yellow 0.8, red 1)';
|
|
42
|
+
style.shadow = graph.createShadow(0,0,20,'rgb(255,255,255)');
|
|
43
|
+
var arc = graph.createShape('arc',{style:style,center:{x:250,y:250},width:200,height: 200,start:0,end:Math.PI * 2});
|
|
44
|
+
|
|
45
|
+
arc.bind('mouseover',function(evt) {
|
|
46
|
+
this.style.stroke = 'rgba(88,200,155,0.5)';
|
|
47
|
+
});
|
|
48
|
+
arc.bind('mouseleave',function(evt) {
|
|
49
|
+
this.style.stroke = 'rgb(120,20,80)';
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
//arc.bind('touchstart',function(evt) {
|
|
53
|
+
//this.style.stroke = 'rgba(88,200,155,0.5)';
|
|
54
|
+
//graph.refresh();
|
|
55
|
+
//});
|
|
56
|
+
|
|
57
|
+
graph.children.add(arc);
|
|
58
|
+
arc.canMove(true);
|
|
59
|
+
|
|
60
|
+
style = g.util.clone(style);
|
|
61
|
+
style.stroke = 'rgb(255,255,255)';
|
|
62
|
+
style.close=false;
|
|
63
|
+
style.zIndex = 3;
|
|
64
|
+
delete style.shadow;
|
|
65
|
+
delete style.fill;
|
|
66
|
+
|
|
67
|
+
var step = Math.PI / 25;
|
|
68
|
+
var bluestop = 0.5;
|
|
69
|
+
var bluedir = 0;
|
|
70
|
+
var yellowstop = 0.8;
|
|
71
|
+
var yellowdir = 0;
|
|
72
|
+
var childarc = graph.createShape('arc',{style:style,center:{x:arc.width / 2,y:arc.height / 2},start:0,end: Math.PI / 3,radius:arc.width / 2,anticlockwise:false});
|
|
73
|
+
arc.children.add(childarc);
|
|
74
|
+
|
|
75
|
+
createjs.Tween.get(childarc, { loop: true })
|
|
76
|
+
.to({ startAngle: Math.PI*2, endAngle: Math.PI*7/3 }, 5000, createjs.Ease.getPowInOut(2))
|
|
77
|
+
.to({ startAngle: 0, endAngle: Math.PI / 3 }, 5000, createjs.Ease.getPowInOut(4));
|
|
78
|
+
|
|
79
|
+
createjs.Tween.get(arc.center, { loop: true })
|
|
80
|
+
.to({ x: graph.width - 200}, 5000, createjs.Ease.getPowInOut(2))
|
|
81
|
+
.to({ x: 250}, 5000, createjs.Ease.getPowInOut(4));
|
|
82
|
+
|
|
83
|
+
}
|
|
84
84
|
</script>
|