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/music.html
CHANGED
|
@@ -1,211 +1,211 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
|
|
6
|
-
<title>music-jmgraph</title>
|
|
7
|
-
<style>
|
|
8
|
-
html,body{
|
|
9
|
-
color: #9DA0AD;
|
|
10
|
-
background-color: #272822;
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
}
|
|
13
|
-
</style>
|
|
14
|
-
</head>
|
|
15
|
-
<body>
|
|
16
|
-
<div style="border-radius: 10px; border: 1px solid #ccc; box-shadow: #fff 0 0 10px; background-color: rgba(255,255,255,0.2); color:#000; width: 400px; height: 200px; position: fixed; top: 40%; left: 40%">
|
|
17
|
-
<span>请选择音频文件</span> <br />
|
|
18
|
-
<input type="file" id="my_sound" /> <br />
|
|
19
|
-
<input type="checkbox" id="chk_loop" checked="true" /> <span>循环播放</span><br />
|
|
20
|
-
<button id="btn_play">播放</button> <br />
|
|
21
|
-
<span id="txtstatus"></span><br />
|
|
22
|
-
</div>
|
|
23
|
-
<canvas id="sound_canvas"></canvas>
|
|
24
|
-
<script type="module">
|
|
25
|
-
import jmGraph from "../index.js";
|
|
26
|
-
(function(){
|
|
27
|
-
//初始化jmgraph
|
|
28
|
-
var graph = new jmGraph('sound_canvas', {
|
|
29
|
-
mode: 'webgl',
|
|
30
|
-
width: window.innerWidth,
|
|
31
|
-
height: window.innerHeight * 0.95,
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
|
|
35
|
-
//动画用到
|
|
36
|
-
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
|
|
37
|
-
|
|
38
|
-
if(typeof window.AudioContext == 'undefined') {
|
|
39
|
-
alert('不支持');
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
var audioContext = null;
|
|
43
|
-
//音频容器
|
|
44
|
-
var audioBufferSouceNode, analyser, currentAudioData = null;
|
|
45
|
-
|
|
46
|
-
//读取音频文件
|
|
47
|
-
window.readSound = function(file) {
|
|
48
|
-
var fr = new FileReader();
|
|
49
|
-
fr.onload = function(e) {
|
|
50
|
-
//解码文件
|
|
51
|
-
decodeAudio(e.target.result);
|
|
52
|
-
//currentAudioData = e.target.result;
|
|
53
|
-
}
|
|
54
|
-
fr.readAsArrayBuffer(file);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
//解码
|
|
58
|
-
function decodeAudio(data) {
|
|
59
|
-
if(!audioContext) {
|
|
60
|
-
audioContext = new window.AudioContext();
|
|
61
|
-
audioContext.onstatechange = function(e) {
|
|
62
|
-
console.log(e);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
currentAudioData = data.slice(0);
|
|
67
|
-
|
|
68
|
-
log('解码中...');
|
|
69
|
-
audioContext.decodeAudioData(data, function(buffer){
|
|
70
|
-
log('解码成功');
|
|
71
|
-
play(buffer); //播放
|
|
72
|
-
}, function(e){
|
|
73
|
-
log('解码失败,' + e.message);
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
//播放
|
|
78
|
-
function play(buffer) {
|
|
79
|
-
//如果 已在播放,则中止
|
|
80
|
-
if(audioBufferSouceNode) {
|
|
81
|
-
audioBufferSouceNode.stop();
|
|
82
|
-
}
|
|
83
|
-
//AudioBufferSourceNode
|
|
84
|
-
audioBufferSouceNode = audioContext.createBufferSource();
|
|
85
|
-
audioBufferSouceNode.buffer = buffer;
|
|
86
|
-
audioBufferSouceNode.loop = document.getElementById('chk_loop').checked; // 循环
|
|
87
|
-
|
|
88
|
-
audioBufferSouceNode.onended = function(e) {
|
|
89
|
-
log('播放结束', e);
|
|
90
|
-
}
|
|
91
|
-
////连接到扬声器
|
|
92
|
-
//audioBufferSouceNode.connect(audioContext.destination);
|
|
93
|
-
//处理频谱
|
|
94
|
-
createAnalyser(audioBufferSouceNode);
|
|
95
|
-
//开始播放
|
|
96
|
-
audioBufferSouceNode.start(0);
|
|
97
|
-
log('播放中');
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
//生成频谱分析
|
|
101
|
-
function createAnalyser(souceNode) {
|
|
102
|
-
if(analyser) {
|
|
103
|
-
analyser.disconnect(audioContext.destination);
|
|
104
|
-
}
|
|
105
|
-
//频谱能量分析器
|
|
106
|
-
analyser = audioContext.createAnalyser();
|
|
107
|
-
souceNode.connect(analyser);
|
|
108
|
-
|
|
109
|
-
//扬声器
|
|
110
|
-
analyser.connect(audioContext.destination);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
//画频谱能量图
|
|
114
|
-
function drawAnalyserData() {
|
|
115
|
-
if(analyser) {
|
|
116
|
-
//获取频率能量值
|
|
117
|
-
var array = new Uint8Array(analyser.frequencyBinCount);
|
|
118
|
-
analyser.getByteFrequencyData(array);
|
|
119
|
-
var arrper = 10;
|
|
120
|
-
var count = Math.floor(array.length / arrper);
|
|
121
|
-
//每个柱子的宽度
|
|
122
|
-
var w = graph.width / count;
|
|
123
|
-
|
|
124
|
-
var perh = graph.height / 300;
|
|
125
|
-
|
|
126
|
-
for(var i=0;i<count; i++) {
|
|
127
|
-
var start = i*arrper;
|
|
128
|
-
var end = start + arrper;
|
|
129
|
-
var arr = array.slice(start, end);
|
|
130
|
-
var sum = 0;
|
|
131
|
-
arr.forEach(p=>sum+=p);
|
|
132
|
-
|
|
133
|
-
var h = perh * sum/arr.length;
|
|
134
|
-
var bar = graph.children.get(i);
|
|
135
|
-
var y = graph.height - h;
|
|
136
|
-
|
|
137
|
-
if(!bar) {
|
|
138
|
-
var x = i * (w + 4);
|
|
139
|
-
bar = graph.createShape('rect', {
|
|
140
|
-
position: {
|
|
141
|
-
x, y
|
|
142
|
-
},
|
|
143
|
-
width: w,
|
|
144
|
-
height: h,
|
|
145
|
-
style: {
|
|
146
|
-
//stroke: '#cccccc',
|
|
147
|
-
// linear-gradient(x1 y1 x2 y2, color1 step, color2 step, ...)
|
|
148
|
-
fill: '#B2F70D'//'linear-gradient(0 0 0 100%, #0D8E21 1, #B2F70D 0.5, #D6FA03 0)'
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
graph.children.add(bar);
|
|
152
|
-
}
|
|
153
|
-
else {
|
|
154
|
-
bar.height = h;
|
|
155
|
-
}
|
|
156
|
-
bar.position.y = y;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
graph.redraw();
|
|
160
|
-
}
|
|
161
|
-
window.requestAnimationFrame(drawAnalyserData);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
bindEvent();
|
|
165
|
-
|
|
166
|
-
drawAnalyserData(analyser);//绘制漂亮的频谱图
|
|
167
|
-
|
|
168
|
-
log('加载中mp3...');
|
|
169
|
-
loadSoundFile('data/ringing_short.mp3', function(buffer) {
|
|
170
|
-
//decodeAudio(buffer);
|
|
171
|
-
currentAudioData = buffer;
|
|
172
|
-
log('加载完成');
|
|
173
|
-
});
|
|
174
|
-
|
|
175
|
-
function bindEvent() {
|
|
176
|
-
//选择文件
|
|
177
|
-
document.getElementById('my_sound').onchange = function(e) {
|
|
178
|
-
if(this.files.length) {
|
|
179
|
-
var file = this.files[0];
|
|
180
|
-
window.readSound(file);
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
document.getElementById('btn_play').onclick = function(e) {
|
|
184
|
-
if(currentAudioData) {
|
|
185
|
-
decodeAudio(currentAudioData);
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
})();
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
//获取远程音频文件
|
|
193
|
-
function loadSoundFile(url,callback) {
|
|
194
|
-
var request = new XMLHttpRequest();
|
|
195
|
-
request.open('GET', url, true);
|
|
196
|
-
request.responseType = 'arraybuffer';
|
|
197
|
-
//音频获取
|
|
198
|
-
request.onload = function() {
|
|
199
|
-
var arraybuffer = request.response;
|
|
200
|
-
callback && callback(arraybuffer);
|
|
201
|
-
}
|
|
202
|
-
request.send();
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
function log(msg) {
|
|
206
|
-
document.getElementById('txtstatus').innerHTML = msg;
|
|
207
|
-
console.log(...arguments);
|
|
208
|
-
}
|
|
209
|
-
</script>
|
|
210
|
-
</body>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
|
|
6
|
+
<title>music-jmgraph</title>
|
|
7
|
+
<style>
|
|
8
|
+
html,body{
|
|
9
|
+
color: #9DA0AD;
|
|
10
|
+
background-color: #272822;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
}
|
|
13
|
+
</style>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<div style="border-radius: 10px; border: 1px solid #ccc; box-shadow: #fff 0 0 10px; background-color: rgba(255,255,255,0.2); color:#000; width: 400px; height: 200px; position: fixed; top: 40%; left: 40%">
|
|
17
|
+
<span>请选择音频文件</span> <br />
|
|
18
|
+
<input type="file" id="my_sound" /> <br />
|
|
19
|
+
<input type="checkbox" id="chk_loop" checked="true" /> <span>循环播放</span><br />
|
|
20
|
+
<button id="btn_play">播放</button> <br />
|
|
21
|
+
<span id="txtstatus"></span><br />
|
|
22
|
+
</div>
|
|
23
|
+
<canvas id="sound_canvas"></canvas>
|
|
24
|
+
<script type="module">
|
|
25
|
+
import jmGraph from "../index.js";
|
|
26
|
+
(function(){
|
|
27
|
+
//初始化jmgraph
|
|
28
|
+
var graph = new jmGraph('sound_canvas', {
|
|
29
|
+
mode: 'webgl',
|
|
30
|
+
width: window.innerWidth,
|
|
31
|
+
height: window.innerHeight * 0.95,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
|
|
35
|
+
//动画用到
|
|
36
|
+
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
|
|
37
|
+
|
|
38
|
+
if(typeof window.AudioContext == 'undefined') {
|
|
39
|
+
alert('不支持');
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
var audioContext = null;
|
|
43
|
+
//音频容器
|
|
44
|
+
var audioBufferSouceNode, analyser, currentAudioData = null;
|
|
45
|
+
|
|
46
|
+
//读取音频文件
|
|
47
|
+
window.readSound = function(file) {
|
|
48
|
+
var fr = new FileReader();
|
|
49
|
+
fr.onload = function(e) {
|
|
50
|
+
//解码文件
|
|
51
|
+
decodeAudio(e.target.result);
|
|
52
|
+
//currentAudioData = e.target.result;
|
|
53
|
+
}
|
|
54
|
+
fr.readAsArrayBuffer(file);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
//解码
|
|
58
|
+
function decodeAudio(data) {
|
|
59
|
+
if(!audioContext) {
|
|
60
|
+
audioContext = new window.AudioContext();
|
|
61
|
+
audioContext.onstatechange = function(e) {
|
|
62
|
+
console.log(e);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
currentAudioData = data.slice(0);
|
|
67
|
+
|
|
68
|
+
log('解码中...');
|
|
69
|
+
audioContext.decodeAudioData(data, function(buffer){
|
|
70
|
+
log('解码成功');
|
|
71
|
+
play(buffer); //播放
|
|
72
|
+
}, function(e){
|
|
73
|
+
log('解码失败,' + e.message);
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
//播放
|
|
78
|
+
function play(buffer) {
|
|
79
|
+
//如果 已在播放,则中止
|
|
80
|
+
if(audioBufferSouceNode) {
|
|
81
|
+
audioBufferSouceNode.stop();
|
|
82
|
+
}
|
|
83
|
+
//AudioBufferSourceNode
|
|
84
|
+
audioBufferSouceNode = audioContext.createBufferSource();
|
|
85
|
+
audioBufferSouceNode.buffer = buffer;
|
|
86
|
+
audioBufferSouceNode.loop = document.getElementById('chk_loop').checked; // 循环
|
|
87
|
+
|
|
88
|
+
audioBufferSouceNode.onended = function(e) {
|
|
89
|
+
log('播放结束', e);
|
|
90
|
+
}
|
|
91
|
+
////连接到扬声器
|
|
92
|
+
//audioBufferSouceNode.connect(audioContext.destination);
|
|
93
|
+
//处理频谱
|
|
94
|
+
createAnalyser(audioBufferSouceNode);
|
|
95
|
+
//开始播放
|
|
96
|
+
audioBufferSouceNode.start(0);
|
|
97
|
+
log('播放中');
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
//生成频谱分析
|
|
101
|
+
function createAnalyser(souceNode) {
|
|
102
|
+
if(analyser) {
|
|
103
|
+
analyser.disconnect(audioContext.destination);
|
|
104
|
+
}
|
|
105
|
+
//频谱能量分析器
|
|
106
|
+
analyser = audioContext.createAnalyser();
|
|
107
|
+
souceNode.connect(analyser);
|
|
108
|
+
|
|
109
|
+
//扬声器
|
|
110
|
+
analyser.connect(audioContext.destination);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
//画频谱能量图
|
|
114
|
+
function drawAnalyserData() {
|
|
115
|
+
if(analyser) {
|
|
116
|
+
//获取频率能量值
|
|
117
|
+
var array = new Uint8Array(analyser.frequencyBinCount);
|
|
118
|
+
analyser.getByteFrequencyData(array);
|
|
119
|
+
var arrper = 10;
|
|
120
|
+
var count = Math.floor(array.length / arrper);
|
|
121
|
+
//每个柱子的宽度
|
|
122
|
+
var w = graph.width / count;
|
|
123
|
+
|
|
124
|
+
var perh = graph.height / 300;
|
|
125
|
+
|
|
126
|
+
for(var i=0;i<count; i++) {
|
|
127
|
+
var start = i*arrper;
|
|
128
|
+
var end = start + arrper;
|
|
129
|
+
var arr = array.slice(start, end);
|
|
130
|
+
var sum = 0;
|
|
131
|
+
arr.forEach(p=>sum+=p);
|
|
132
|
+
|
|
133
|
+
var h = perh * sum/arr.length;
|
|
134
|
+
var bar = graph.children.get(i);
|
|
135
|
+
var y = graph.height - h;
|
|
136
|
+
|
|
137
|
+
if(!bar) {
|
|
138
|
+
var x = i * (w + 4);
|
|
139
|
+
bar = graph.createShape('rect', {
|
|
140
|
+
position: {
|
|
141
|
+
x, y
|
|
142
|
+
},
|
|
143
|
+
width: w,
|
|
144
|
+
height: h,
|
|
145
|
+
style: {
|
|
146
|
+
//stroke: '#cccccc',
|
|
147
|
+
// linear-gradient(x1 y1 x2 y2, color1 step, color2 step, ...)
|
|
148
|
+
fill: '#B2F70D'//'linear-gradient(0 0 0 100%, #0D8E21 1, #B2F70D 0.5, #D6FA03 0)'
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
graph.children.add(bar);
|
|
152
|
+
}
|
|
153
|
+
else {
|
|
154
|
+
bar.height = h;
|
|
155
|
+
}
|
|
156
|
+
bar.position.y = y;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
graph.redraw();
|
|
160
|
+
}
|
|
161
|
+
window.requestAnimationFrame(drawAnalyserData);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
bindEvent();
|
|
165
|
+
|
|
166
|
+
drawAnalyserData(analyser);//绘制漂亮的频谱图
|
|
167
|
+
|
|
168
|
+
log('加载中mp3...');
|
|
169
|
+
loadSoundFile('data/ringing_short.mp3', function(buffer) {
|
|
170
|
+
//decodeAudio(buffer);
|
|
171
|
+
currentAudioData = buffer;
|
|
172
|
+
log('加载完成');
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
function bindEvent() {
|
|
176
|
+
//选择文件
|
|
177
|
+
document.getElementById('my_sound').onchange = function(e) {
|
|
178
|
+
if(this.files.length) {
|
|
179
|
+
var file = this.files[0];
|
|
180
|
+
window.readSound(file);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
document.getElementById('btn_play').onclick = function(e) {
|
|
184
|
+
if(currentAudioData) {
|
|
185
|
+
decodeAudio(currentAudioData);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
})();
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
//获取远程音频文件
|
|
193
|
+
function loadSoundFile(url,callback) {
|
|
194
|
+
var request = new XMLHttpRequest();
|
|
195
|
+
request.open('GET', url, true);
|
|
196
|
+
request.responseType = 'arraybuffer';
|
|
197
|
+
//音频获取
|
|
198
|
+
request.onload = function() {
|
|
199
|
+
var arraybuffer = request.response;
|
|
200
|
+
callback && callback(arraybuffer);
|
|
201
|
+
}
|
|
202
|
+
request.send();
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
function log(msg) {
|
|
206
|
+
document.getElementById('txtstatus').innerHTML = msg;
|
|
207
|
+
console.log(...arguments);
|
|
208
|
+
}
|
|
209
|
+
</script>
|
|
210
|
+
</body>
|
|
211
211
|
</html>
|