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
|
@@ -1,299 +1,299 @@
|
|
|
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();
|
|
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
299
|
</script>
|