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.
- package/README.md +174 -2
- package/dist/jmgraph.core.min.js +1 -1
- package/dist/jmgraph.core.min.js.map +1 -1
- package/dist/jmgraph.js +1640 -135
- package/dist/jmgraph.min.js +1 -1
- package/index.js +13 -2
- package/package.json +1 -1
- package/src/core/jmGraph.js +453 -4
- package/src/core/jmLayer.js +142 -0
- package/src/core/jmPath.js +55 -0
- package/src/shapes/jmEllipse.js +91 -0
- package/src/shapes/jmLabel.js +127 -15
- package/src/shapes/jmPolygon.js +129 -0
- package/src/shapes/jmStar.js +160 -0
- package/example/ball.html +0 -217
- package/example/base.html +0 -112
- package/example/canvas.html +0 -54
- package/example/cell.html +0 -284
- package/example/controls/arc.html +0 -129
- package/example/controls/arrowline.html +0 -78
- package/example/controls/bezier.html +0 -299
- package/example/controls/img.html +0 -97
- package/example/controls/label.html +0 -87
- package/example/controls/line.html +0 -173
- package/example/controls/prismatic.html +0 -63
- package/example/controls/rect.html +0 -64
- package/example/controls/resize.html +0 -112
- package/example/controls/test.html +0 -360
- package/example/es.html +0 -70
- package/example/es5module.html +0 -63
- package/example/heartarc.html +0 -116
- package/example/index.html +0 -47
- package/example/js/require.js +0 -5
- package/example/love/img/bling/bling.tps +0 -265
- package/example/love/img/bling.json +0 -87
- package/example/love/img/bling.tps +0 -295
- package/example/love/img/doc/bling.gif +0 -0
- package/example/love/img/love.json +0 -95
- package/example/love/img/love.tps +0 -315
- package/example/love/img/qq/qq.tps +0 -399
- package/example/love/img/qq.json +0 -242
- package/example/love/index.html +0 -40
- package/example/love/js/game.js +0 -558
- package/example/music.html +0 -211
- package/example/node/test.js +0 -138
- package/example/pdf.html +0 -187
- package/example/progress.html +0 -173
- package/example/pso.html +0 -148
- package/example/sort.html +0 -805
- package/example/tweenjs.html +0 -84
- package/example/webgl.html +0 -278
- package/example/xfj/img/dr_die.gif +0 -0
- package/example/xfj/index.html +0 -332
- package/example/xfj/shake.js +0 -49
- package/example/xfj/testori.html +0 -76
|
@@ -1,129 +0,0 @@
|
|
|
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
|
-
</html>
|
|
@@ -1,78 +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
|
-
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
|
-
</html>
|
|
@@ -1,299 +0,0 @@
|
|
|
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
|
-
drawManualArc(graph1);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
//初始化jmgraph
|
|
84
|
-
var g2 = jmGraph.create('mycanvas2', {
|
|
85
|
-
mode: '2d'
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
function init2(graph2) {
|
|
91
|
-
var lstyle = graph2.util.clone(style);
|
|
92
|
-
lstyle.stroke = 'rgba(131,237,111,0.7)';
|
|
93
|
-
lstyle.lineWidth = 1;
|
|
94
|
-
var pstyle = graph2.util.clone(style);
|
|
95
|
-
pstyle.fill = 'rgb(191,216,44)';
|
|
96
|
-
|
|
97
|
-
//动画部分
|
|
98
|
-
var mp0 = { x: 160, y: 300 };
|
|
99
|
-
var mp1 = { x: 200, y: 130 };
|
|
100
|
-
var mp2 = { x: 400, y: 80 };
|
|
101
|
-
var mp3 = { x: 420, y: 300 };
|
|
102
|
-
var mp4 = { x: 500, y: 320 };
|
|
103
|
-
var mp5 = { x: 600, y: 81 };
|
|
104
|
-
var mp6 = { x: 700, y: 90 };
|
|
105
|
-
var mp7 = { x: 650, y: 320 };
|
|
106
|
-
var mp8 = { x: 760, y: 350 };
|
|
107
|
-
var mp9 = { x: 800, y: 60 };
|
|
108
|
-
var mlstyle = graph2.util.clone(lstyle);
|
|
109
|
-
mlstyle.lineWidth = 2;
|
|
110
|
-
mlstyle.stroke = '#086C0A';
|
|
111
|
-
delete mlstyle.shadow;
|
|
112
|
-
var mpath = graph2.createShape('path', { style: mlstyle, points: [mp0, mp1, mp2, mp3, mp4, mp5, mp6, mp7, mp8, mp9] });
|
|
113
|
-
graph2.children.add(mpath);
|
|
114
|
-
//mpath.canMove(true);
|
|
115
|
-
var p0arc = graph2.createShape('arc', { style: pstyle, center: mp0, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
116
|
-
graph2.children.add(p0arc);
|
|
117
|
-
p0arc.canMove(true);
|
|
118
|
-
var p1arc = graph2.createShape('arc', { style: pstyle, center: mp1, radius: psize, width: psize, height: psize, start: 0, end: Math.PI * 2, anticlockwise: true });
|
|
119
|
-
graph2.children.add(p1arc);
|
|
120
|
-
p1arc.canMove(true);
|
|
121
|
-
var p2arc = graph2.createShape('arc', { style: pstyle, center: mp2, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
122
|
-
graph2.children.add(p2arc);
|
|
123
|
-
p2arc.canMove(true);
|
|
124
|
-
var p3arc = graph2.createShape('arc', { style: pstyle, center: mp3, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
125
|
-
graph2.children.add(p3arc);
|
|
126
|
-
p3arc.canMove(true);
|
|
127
|
-
var p4arc = graph2.createShape('arc', { style: pstyle, center: mp4, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
128
|
-
graph2.children.add(p4arc);
|
|
129
|
-
p4arc.canMove(true);
|
|
130
|
-
var p5arc = graph2.createShape('arc', { style: pstyle, center: mp5, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
131
|
-
graph2.children.add(p5arc);
|
|
132
|
-
p5arc.canMove(true);
|
|
133
|
-
var p6arc = graph2.createShape('arc', { style: pstyle, center: mp6, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
134
|
-
graph2.children.add(p6arc);
|
|
135
|
-
p6arc.canMove(true);
|
|
136
|
-
var p7arc = graph2.createShape('arc', { style: pstyle, center: mp7, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
137
|
-
graph2.children.add(p7arc);
|
|
138
|
-
p7arc.canMove(true);
|
|
139
|
-
var p8arc = graph2.createShape('arc', { style: pstyle, center: mp8, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
140
|
-
graph2.children.add(p8arc);
|
|
141
|
-
p8arc.canMove(true);
|
|
142
|
-
var p9arc = graph2.createShape('arc', { style: pstyle, center: mp9, radius: psize, start: 0, end: Math.PI * 2, width: psize, height: psize });
|
|
143
|
-
graph2.children.add(p9arc);
|
|
144
|
-
p9arc.canMove(true);
|
|
145
|
-
|
|
146
|
-
style.zIndex = 100;
|
|
147
|
-
var mbezierpath = graph2.createShape('path', { style: style });
|
|
148
|
-
graph2.children.add(mbezierpath);
|
|
149
|
-
|
|
150
|
-
var arrstyle = graph2.util.clone(style);
|
|
151
|
-
var arr = graph2.createShape('arrow', { style: arrstyle });
|
|
152
|
-
graph2.children.add(arr);
|
|
153
|
-
|
|
154
|
-
var chplines = [];
|
|
155
|
-
var chpstyle = graph2.util.clone(mlstyle);
|
|
156
|
-
chpstyle.lineWidth = 1;
|
|
157
|
-
chpstyle.stroke = 'rgb(142,142,15)';
|
|
158
|
-
function getpoint(ps, t, index) {
|
|
159
|
-
if (ps.length == 1) return ps[0];
|
|
160
|
-
if (ps.length == 2) {
|
|
161
|
-
var p = {};
|
|
162
|
-
p.x = (ps[1].x - ps[0].x) * t + ps[0].x;
|
|
163
|
-
p.y = (ps[1].y - ps[0].y) * t + ps[0].y;
|
|
164
|
-
return p;
|
|
165
|
-
}
|
|
166
|
-
if (ps.length > 2) {
|
|
167
|
-
var ppp;
|
|
168
|
-
if (chplines.length <= index) {
|
|
169
|
-
ppp = chplines[index] = graph2.createShape('path', { style: chpstyle });
|
|
170
|
-
graph2.children.add(ppp);
|
|
171
|
-
}
|
|
172
|
-
else {
|
|
173
|
-
ppp = chplines[index];
|
|
174
|
-
}
|
|
175
|
-
ppp.points = [];
|
|
176
|
-
for (var i = 0; i < ps.length - 1; i++) {
|
|
177
|
-
var p = getpoint([ps[i], ps[i + 1]], t);
|
|
178
|
-
if (p) {
|
|
179
|
-
ppp.points.push(p);
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
index++;
|
|
183
|
-
return getpoint(ppp.points, t, index);
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
var t = 0;
|
|
188
|
-
var dir = 0;
|
|
189
|
-
var speed = 0.02;
|
|
190
|
-
setInterval(function () {
|
|
191
|
-
if (t > 1) {
|
|
192
|
-
t = 1;
|
|
193
|
-
dir = 1;
|
|
194
|
-
mbezierpath.points = [];
|
|
195
|
-
}
|
|
196
|
-
else if (t < 0) {
|
|
197
|
-
t = 0;
|
|
198
|
-
dir = 0;
|
|
199
|
-
mbezierpath.points = [];
|
|
200
|
-
}
|
|
201
|
-
/*for(var i in chplines) {
|
|
202
|
-
graph2.children.remove(chplines[i]);
|
|
203
|
-
delete chplines[i];
|
|
204
|
-
}*/
|
|
205
|
-
var mp = getpoint(mpath.points, t, 0);
|
|
206
|
-
mbezierpath.points.push(mp);
|
|
207
|
-
|
|
208
|
-
if (mbezierpath.points.length > 1) {
|
|
209
|
-
arr.start = mbezierpath.points[mbezierpath.points.length - 2];
|
|
210
|
-
arr.end = mbezierpath.points[mbezierpath.points.length - 1];
|
|
211
|
-
}
|
|
212
|
-
t = dir == 0 ? (t + speed) : (t - speed);
|
|
213
|
-
}, 50);
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
init2(g2);
|
|
217
|
-
|
|
218
|
-
// 手绘式圆
|
|
219
|
-
function drawManualArc(g) {
|
|
220
|
-
const baseRadius = 60; // 基础半径
|
|
221
|
-
const points = 12; // 分割成多少点，减少点数以避免毛刺
|
|
222
|
-
const variance = 20; // 半径的随机偏移量
|
|
223
|
-
const center = {
|
|
224
|
-
x: 600, y: 100
|
|
225
|
-
};
|
|
226
|
-
|
|
227
|
-
// 生成半径偏移的函数，使用简单的正弦函数模拟平滑变化
|
|
228
|
-
function getRadius(angleIndex, totalPoints) {
|
|
229
|
-
const angle = (angleIndex / totalPoints) * Math.PI * 2;
|
|
230
|
-
// 使用正弦函数创建周期性变化
|
|
231
|
-
const noise = Math.sin(angle * 1) * (variance / 2); // 3决定波动次数，可调节
|
|
232
|
-
// 添加随机偏移
|
|
233
|
-
const randomOffset = (Math.random() - 0.5) * (variance / 2);
|
|
234
|
-
return baseRadius + noise + randomOffset;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
var p = g.createShape('path', { style: {
|
|
238
|
-
stroke: 'rgb(120,20,80)',
|
|
239
|
-
lineWidth: 3,
|
|
240
|
-
close: true,
|
|
241
|
-
}, points: [] });
|
|
242
|
-
|
|
243
|
-
//一个固定的bezier曲线
|
|
244
|
-
var bezier = g.createShape('bezier', { style: style, points: [] });
|
|
245
|
-
let start = {
|
|
246
|
-
x: 0,
|
|
247
|
-
y: 0
|
|
248
|
-
};
|
|
249
|
-
for (let i = 0; i <= points; i++) {
|
|
250
|
-
const angleIndex = i % points;
|
|
251
|
-
const angle = (angleIndex / points) * Math.PI * 2;
|
|
252
|
-
const r = getRadius(angleIndex, points);
|
|
253
|
-
const x = center.x + r * Math.cos(angle);
|
|
254
|
-
const y = center.y + r * Math.sin(angle);
|
|
255
|
-
|
|
256
|
-
if (i === 0) {
|
|
257
|
-
start = {
|
|
258
|
-
x, y
|
|
259
|
-
};
|
|
260
|
-
} else {
|
|
261
|
-
// 使用二次贝塞尔曲线连接点
|
|
262
|
-
const prevIndex = (i - 1) % points;
|
|
263
|
-
const prevAngle = (prevIndex / points) * Math.PI * 2;
|
|
264
|
-
const prevR = getRadius(prevIndex, points);
|
|
265
|
-
const prevX = center.x + prevR * Math.cos(prevAngle);
|
|
266
|
-
const prevY = center.y + prevR * Math.sin(prevAngle);
|
|
267
|
-
|
|
268
|
-
// 控制点为当前点和前一个点的中点，加上偏移量
|
|
269
|
-
const cpX = (prevX + x) / 2;
|
|
270
|
-
const cpY = (prevY + y) / 2;
|
|
271
|
-
bezier.cpoints = [
|
|
272
|
-
start,{
|
|
273
|
-
x: prevX,
|
|
274
|
-
y: prevY
|
|
275
|
-
}, {
|
|
276
|
-
x: cpX,
|
|
277
|
-
y: cpY
|
|
278
|
-
}]
|
|
279
|
-
//ctx.quadraticCurveTo(prevX, prevY, cpX, cpY);
|
|
280
|
-
p.points.push(...bezier.initPoints());
|
|
281
|
-
start = {
|
|
282
|
-
x: cpX,
|
|
283
|
-
y: cpY
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
//p.points.push(start);
|
|
288
|
-
console.log(p.points)
|
|
289
|
-
g.children.add(p);
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
//实时更新画布
|
|
293
|
-
function update() {
|
|
294
|
-
if(g1.needUpdate) g1.redraw();
|
|
295
|
-
if(g2.needUpdate) g2.redraw();
|
|
296
|
-
requestAnimationFrame(update);
|
|
297
|
-
}
|
|
298
|
-
update();
|
|
299
|
-
</script>
|
|
@@ -1,97 +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
|
-
background-color: #000;
|
|
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
|
-
autoRefresh: true
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
init(g);
|
|
37
|
-
|
|
38
|
-
function init(g){
|
|
39
|
-
|
|
40
|
-
//g.style.fill = '#000'; //画布背景
|
|
41
|
-
var style = {
|
|
42
|
-
//src: '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png'
|
|
43
|
-
//stroke: 'red',
|
|
44
|
-
rotation: {
|
|
45
|
-
angle: 0
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
|
-
style.shadow = '0,0,20,#fff';
|
|
49
|
-
//style.opacity = 0.2;
|
|
50
|
-
|
|
51
|
-
//创建一个image
|
|
52
|
-
var img = g.createShape('image',{
|
|
53
|
-
style:style,
|
|
54
|
-
//伸展或缩小图像
|
|
55
|
-
width: 200,
|
|
56
|
-
position: {x:100,y:100},
|
|
57
|
-
image: '../qrcode.jpg'
|
|
58
|
-
});
|
|
59
|
-
//img.image = '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png';
|
|
60
|
-
g.children.add(img);
|
|
61
|
-
img.canMove(true);
|
|
62
|
-
|
|
63
|
-
//创建一个image
|
|
64
|
-
var img3 = g.createShape('image',{
|
|
65
|
-
style: g.utils.clone(style),
|
|
66
|
-
//伸展或缩小图像
|
|
67
|
-
width: 200,
|
|
68
|
-
position: {x:100,y:100},
|
|
69
|
-
image: '../qrcode.jpg'
|
|
70
|
-
});
|
|
71
|
-
//img.image = '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png';
|
|
72
|
-
g.children.add(img3);
|
|
73
|
-
|
|
74
|
-
//截取logo
|
|
75
|
-
var img2 = g.createShape('image',{
|
|
76
|
-
style: style,
|
|
77
|
-
position: {x:100,y:100},
|
|
78
|
-
|
|
79
|
-
//伸展或缩小图像
|
|
80
|
-
width: 100,
|
|
81
|
-
height: 60,
|
|
82
|
-
image: '../x.png',
|
|
83
|
-
sourcePosition: {x:0, y:0}, //截取起点
|
|
84
|
-
sourceWidth: 192, //截取宽度，如果不填则用原图宽
|
|
85
|
-
sourceHeight: 192 //截取高度，如果不填则用原图高
|
|
86
|
-
});
|
|
87
|
-
g.children.add(img2);
|
|
88
|
-
img2.canMove(true);
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
g.on('update', (time) => {
|
|
92
|
-
style.rotation.angle += 0.01;
|
|
93
|
-
g.needUpdate = true;
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
</script>
|
|
97
|
-
</html>
|
|
@@ -1,87 +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
|
-
<!--<script type="text/javascript" src="../../dist/jmgraph.min.js"></script>-->
|
|
17
|
-
</head>
|
|
18
|
-
<body>
|
|
19
|
-
<div id="mycanvas_container"></div>
|
|
20
|
-
<canvas id="textureCanvas"></canvas>
|
|
21
|
-
</body>
|
|
22
|
-
<script type="module">
|
|
23
|
-
import { jmGraph } from "../../index.js";
|
|
24
|
-
import jmLabel from '../../src/shapes/jmLabel.js';
|
|
25
|
-
|
|
26
|
-
var container = document.getElementById('mycanvas_container');
|
|
27
|
-
const textureCanvas = document.getElementById('textureCanvas');
|
|
28
|
-
|
|
29
|
-
//开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
|
|
30
|
-
var g = jmGraph.create('mycanvas_container', {
|
|
31
|
-
width: 800,
|
|
32
|
-
height: 600,
|
|
33
|
-
mode: 'webgl',
|
|
34
|
-
style: {
|
|
35
|
-
fill: '#000'
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
init(g);
|
|
39
|
-
|
|
40
|
-
function init(g){
|
|
41
|
-
//g.style.fill = '#000'; //画布背景
|
|
42
|
-
var style = {
|
|
43
|
-
stroke: 'green',
|
|
44
|
-
fill: 'yellow',
|
|
45
|
-
textAlign: 'right',
|
|
46
|
-
textBaseline: 'middle',
|
|
47
|
-
fontFamily: "Arial",
|
|
48
|
-
fontSize: 24,
|
|
49
|
-
border: {
|
|
50
|
-
left:1,
|
|
51
|
-
top:1,
|
|
52
|
-
right:1,
|
|
53
|
-
bottom:1,
|
|
54
|
-
style: {
|
|
55
|
-
stroke: 'red'
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
shadow: '0,0,10,#fff'
|
|
59
|
-
};
|
|
60
|
-
//style.opacity = 0.2;
|
|
61
|
-
|
|
62
|
-
//创建一个label
|
|
63
|
-
var label = g.createShape(jmLabel,{
|
|
64
|
-
style:style,
|
|
65
|
-
//position:{x:200,y:150},
|
|
66
|
-
center: {x: 250, y: 250},
|
|
67
|
-
text:'test label',
|
|
68
|
-
//width:120,
|
|
69
|
-
height:80
|
|
70
|
-
});
|
|
71
|
-
g.children.add(label);
|
|
72
|
-
label.canMove(true);
|
|
73
|
-
|
|
74
|
-
g.bind('touchleave', (args) => {
|
|
75
|
-
console.log('touchleave', args);
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
function update() {
|
|
80
|
-
if(g.needUpdate) g.redraw();
|
|
81
|
-
requestAnimationFrame(update);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
update();
|
|
85
|
-
}
|
|
86
|
-
</script>
|
|
87
|
-
</html>
|