jmgraph 3.2.6 → 3.2.8
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/README.md +0 -1
- package/build/gulpfile.js +143 -0
- package/build/package-lock.json +19282 -0
- package/build/package.json +71 -0
- package/dist/jmgraph.core.min.js +1 -1
- package/dist/jmgraph.core.min.js.map +1 -1
- package/dist/jmgraph.js +2865 -331
- package/dist/jmgraph.min.js +1 -1
- package/example/ball.html +217 -0
- package/example/base.html +112 -0
- package/example/canvas.html +54 -0
- package/example/cell.html +284 -0
- package/example/controls/arc.html +129 -0
- package/example/controls/arrowline.html +78 -0
- package/example/controls/bezier.html +223 -0
- package/example/controls/img.html +97 -0
- package/example/controls/label.html +87 -0
- package/example/controls/line.html +173 -0
- package/example/controls/prismatic.html +63 -0
- package/example/controls/rect.html +64 -0
- package/example/controls/resize.html +112 -0
- package/example/controls/test.html +136 -0
- package/example/es.html +70 -0
- package/example/es5module.html +64 -0
- package/example/heartarc.html +116 -0
- package/example/index.html +47 -0
- package/example/js/require.js +5 -0
- package/example/love/img/bling/bling.tps +265 -0
- package/example/love/img/bling.json +87 -0
- package/example/love/img/bling.tps +295 -0
- package/example/love/img/doc/bling.gif +0 -0
- package/example/love/img/love.json +95 -0
- package/example/love/img/love.tps +315 -0
- package/example/love/img/qq/qq.tps +399 -0
- package/example/love/img/qq.json +242 -0
- package/example/love/index.html +40 -0
- package/example/love/js/game.js +558 -0
- package/example/music.html +211 -0
- package/example/node/test.js +138 -0
- package/example/pdf.html +187 -0
- package/example/progress.html +173 -0
- package/example/pso.html +148 -0
- package/example/sort.html +816 -0
- package/example/tweenjs.html +84 -0
- package/example/webgl.html +278 -0
- package/example/xfj/img/dr_die.gif +0 -0
- package/example/xfj/index.html +332 -0
- package/example/xfj/shake.js +49 -0
- package/example/xfj/testori.html +76 -0
- package/package.json +56 -56
- package/src/core/jmControl.js +127 -97
- package/src/core/jmEvents.js +2 -2
- package/src/core/jmGradient.js +9 -3
- package/src/core/jmGraph.js +16 -24
- package/src/core/jmPath.js +1 -17
- package/src/core/jmUtils.js +6 -0
- package/src/lib/webgl/base.js +253 -1
- package/src/lib/webgl/core/buffer.js +2 -1
- package/src/lib/webgl/core/program.js +2 -2
- package/src/lib/webgl/core/texture.js +8 -8
- package/src/lib/webgl/gradient.js +11 -38
- package/src/lib/webgl/path.js +118 -235
- package/src/shapes/jmImage.js +18 -3
- package/src/shapes/jmLabel.js +84 -38
- package/src/shapes/jmRect.js +5 -2
|
@@ -0,0 +1,173 @@
|
|
|
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>
|
|
@@ -0,0 +1,63 @@
|
|
|
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>
|
|
@@ -0,0 +1,64 @@
|
|
|
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>
|
|
@@ -0,0 +1,112 @@
|
|
|
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: 'transparent',//小方块填充色
|
|
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(arguments);
|
|
72
|
+
});
|
|
73
|
+
resize.canMove(true);
|
|
74
|
+
g.children.add(resize);
|
|
75
|
+
|
|
76
|
+
g.on('update', (time) => {
|
|
77
|
+
//style.rotation.angle += 0.001;
|
|
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>
|
|
@@ -0,0 +1,136 @@
|
|
|
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
|
+
import {jmPath} from "../../src/core/jmPath.js";
|
|
23
|
+
/**
|
|
24
|
+
* 测试
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
class jmTest extends jmPath {
|
|
28
|
+
constructor(params) {
|
|
29
|
+
if(!params) params = {};
|
|
30
|
+
super(params);
|
|
31
|
+
this.center = params.center || {x:0, y:0};
|
|
32
|
+
this.radius = params.radius || 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
//定义属性
|
|
36
|
+
/**
|
|
37
|
+
* 中心点
|
|
38
|
+
* point格式：{x:0,y:0,m:true}
|
|
39
|
+
* @property center
|
|
40
|
+
* @type {point}
|
|
41
|
+
*/
|
|
42
|
+
get center() {
|
|
43
|
+
return this.property('center');
|
|
44
|
+
}
|
|
45
|
+
set center(v) {
|
|
46
|
+
return this.property('center', v);
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* 中心点
|
|
50
|
+
* point格式：{x:0,y:0,m:true}
|
|
51
|
+
* @property center
|
|
52
|
+
* @type {point}
|
|
53
|
+
*/
|
|
54
|
+
get radius() {
|
|
55
|
+
return this.property('radius');
|
|
56
|
+
}
|
|
57
|
+
set radius(v) {
|
|
58
|
+
return this.property('radius', v);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* 初始化图形点
|
|
63
|
+
* 控件都是由点形成
|
|
64
|
+
*
|
|
65
|
+
* @method initPoint
|
|
66
|
+
* @private
|
|
67
|
+
* @for jmArc
|
|
68
|
+
*/
|
|
69
|
+
initPoints() {
|
|
70
|
+
//可以获取当前控件的左上坐标，可以用来画相对位置
|
|
71
|
+
var location = this.getLocation();//获取位置参数
|
|
72
|
+
|
|
73
|
+
var cx = location.center.x ;
|
|
74
|
+
var cy = location.center.y ;
|
|
75
|
+
|
|
76
|
+
this.points = [];
|
|
77
|
+
|
|
78
|
+
//简单的画一个X
|
|
79
|
+
|
|
80
|
+
//根据半径计算x,y偏移量
|
|
81
|
+
//由于是圆，偏移量相同
|
|
82
|
+
var offw = Math.sqrt(location.radius * location.radius / 2);
|
|
83
|
+
//左上角到右下角对角线
|
|
84
|
+
this.points.push({x:cx - offw, y:cy-offw}, {x:cx + offw, y:cy+offw});
|
|
85
|
+
|
|
86
|
+
//左下角到右上角对角线
|
|
87
|
+
//画完上面的线后，需要重新移到这条线的起点，指定m:true即可
|
|
88
|
+
this.points.push({x:cx - offw, y:cy+offw, m:true}, {x:cx + offw, y:cy-offw});
|
|
89
|
+
|
|
90
|
+
return this.points;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
var container = document.getElementById('mycanvas_container');
|
|
96
|
+
|
|
97
|
+
var g = jmGraph.create(container, {
|
|
98
|
+
width: 800,
|
|
99
|
+
height: 600,
|
|
100
|
+
mode: '2d',
|
|
101
|
+
style: {
|
|
102
|
+
fill: '#000'
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
init(g);
|
|
107
|
+
|
|
108
|
+
function init(g){
|
|
109
|
+
|
|
110
|
+
var style = {
|
|
111
|
+
stroke: '#23f24e',
|
|
112
|
+
lineWidth: 5,
|
|
113
|
+
shadow: '0,0,20,#fff'
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
//style.opacity = 0.2;
|
|
117
|
+
|
|
118
|
+
//创建一个自定义的控件
|
|
119
|
+
var t = g.createShape(jmTest, {
|
|
120
|
+
style: style,
|
|
121
|
+
center: {x:100,y:100},
|
|
122
|
+
radius: 20,
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
g.children.add(t);
|
|
126
|
+
t.canMove(true);
|
|
127
|
+
|
|
128
|
+
function update() {
|
|
129
|
+
if(g.needUpdate) g.redraw();
|
|
130
|
+
requestAnimationFrame(update);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
update();
|
|
134
|
+
}
|
|
135
|
+
</script>
|
|
136
|
+
</html>
|
package/example/es.html
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
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
|
+
canvas {
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
}
|
|
14
|
+
#mycanvas_container{
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div id="mycanvas_container"></div>
|
|
21
|
+
</body>
|
|
22
|
+
<script type="module">
|
|
23
|
+
//import jmGraph from "../dist/jmgraph.es6.js";
|
|
24
|
+
import jmGraph from "../index.js";
|
|
25
|
+
|
|
26
|
+
var container = document.getElementById('mycanvas_container');
|
|
27
|
+
|
|
28
|
+
var g = new jmGraph(container, {
|
|
29
|
+
width: 800,
|
|
30
|
+
height: 600,
|
|
31
|
+
style: {
|
|
32
|
+
fill: '#000'
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
init(g);
|
|
36
|
+
|
|
37
|
+
function init(g){
|
|
38
|
+
//g.style.fill = '#000'; //画布背景
|
|
39
|
+
var style = {
|
|
40
|
+
stroke:'#46BF86',
|
|
41
|
+
fill: '#556662',
|
|
42
|
+
lineWidth: 2
|
|
43
|
+
};
|
|
44
|
+
style.shadow = '0,0,10,#fff';
|
|
45
|
+
//style.opacity = 0.2;
|
|
46
|
+
//style.lineCap = 'round';
|
|
47
|
+
|
|
48
|
+
//创建一个方块
|
|
49
|
+
var rect = g.createShape('rect', {
|
|
50
|
+
style:style,
|
|
51
|
+
position: {x:100,y:100},
|
|
52
|
+
width:100,
|
|
53
|
+
height:100
|
|
54
|
+
});
|
|
55
|
+
g.children.add(rect);
|
|
56
|
+
rect.canMove(true);
|
|
57
|
+
|
|
58
|
+
rect.on('click', function(e) {
|
|
59
|
+
alert('click');
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
function update() {
|
|
63
|
+
if(g.needUpdate) g.redraw();
|
|
64
|
+
requestAnimationFrame(update);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
update();
|
|
68
|
+
}
|
|
69
|
+
</script>
|
|
70
|
+
</html>
|
|
@@ -0,0 +1,64 @@
|
|
|
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
|
+
<script type="text/javascript" src="js/require.js"></script>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<div id="mycanvas_container"></div>
|
|
19
|
+
</body>
|
|
20
|
+
<script>
|
|
21
|
+
require(['../dist/jmgraph.js'], function(m) {
|
|
22
|
+
var g = new m.jmGraph(container, {
|
|
23
|
+
width: 800,
|
|
24
|
+
height: 600,
|
|
25
|
+
style: {
|
|
26
|
+
fill: '#000'
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
init(g);
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
var container = document.getElementById('mycanvas_container');
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
function init(g){
|
|
36
|
+
//g.style.fill = '#000'; //画布背景
|
|
37
|
+
var style = {
|
|
38
|
+
stroke:'#46BF86',
|
|
39
|
+
fill: '#556662',
|
|
40
|
+
lineWidth: 2
|
|
41
|
+
};
|
|
42
|
+
style.shadow = '0,0,10,#fff';
|
|
43
|
+
//style.opacity = 0.2;
|
|
44
|
+
//style.lineCap = 'round';
|
|
45
|
+
|
|
46
|
+
//创建一个方块
|
|
47
|
+
var rect = g.createShape('rect', {
|
|
48
|
+
style:style,
|
|
49
|
+
position: {x:100,y:100},
|
|
50
|
+
width:100,
|
|
51
|
+
height:100
|
|
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>
|