-
Notifications
You must be signed in to change notification settings - Fork 0
/
digital.js
111 lines (95 loc) · 3.15 KB
/
digital.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
// 保存页面数据缓存
let global_data;
let cur_path = [];
let time_clock = null;
// 解析头部
function parserHead(array_buffer) {
// 数据头部
let head = {};
let head_length = Array.prototype.indexOf.call(new Int8Array(array_buffer), 0);
try {
let head_raw = String.fromCharCode.apply(null, new Int8Array(array_buffer, 0, head_length));
let head_arr = head_raw.split(',');
for (let j = 0; j < head_arr.length; j++) {
let pair = head_arr[j].split(':');
head[pair[0]] = pair[1];
}
} catch (err) {
console.error('解析数据头部发生错误', err);
}
return { head, head_length };
}
// 解析Body
function parserBody(array_buffer) {
let { head, head_length } = parserHead(array_buffer);
let offset = head_length + 1; // 1 - 分隔符 '\0'
let result = [];
// 每一页的点数量
let page_point_cnt = [
head.p1, head.p2, head.p3, head.p4,
head.p5, head.p6, head.p7, head.p8
];
page_point_cnt = page_point_cnt.map(item => Number(item))
// 分别处理每一页
for (let i = 0; i < page_point_cnt.length; i++) {
result[i] = [];
// 处理第i+1页的数据
for (let j = 0; j < page_point_cnt[i]; j++) {
let dv = new DataView(array_buffer, offset + j * 10, 10);
let x = dv.getUint16(0, false);
let y = dv.getUint16(2, false);
let p = dv.getUint16(4, false);
let t = dv.getUint32(6, false);
result[i].push({ x, y, p, t });
}
// 计算下一页的偏移量
offset = offset + page_point_cnt[i] * 10;
}
return result;
}
// 绘制页面
function drawDigitalPage(index){
let canvas = document.getElementById('digital-page')
let ctx = canvas.getContext('2d')
let page = global_data[index];
let progress = document.getElementById('progress');
// 清除当前正在绘制的路径
if(cur_path.length > 0){
cur_path.forEach(draw_path => clearTimeout(draw_path));
cur_path.splice(0);
}
if(time_clock){
clearInterval(time_clock);
time_clock = null;
}
ctx.clearRect(0, 0, 700, 990);
ctx.strokeStyle = 'black';
ctx.beginPath();
let start_time = page[0].t;
for(let i = 0; i < page.length; i++){
let draw_path = setTimeout(() => {
if(page[i].p === 0){
ctx.moveTo(Math.round(page[i].x / 30),Math.round( page[i].y/30))
}else{
ctx.lineTo(Math.round(page[i].x / 30),Math.round( page[i].y/30))
}
ctx.stroke();
}, page[i].t - start_time);
cur_path.push(draw_path)
}
ctx.closePath();
let time_clock_start = Date.now();
progress.max = page[page.length-1].t-start_time;
time_clock = setInterval(() => {
progress.value=Date.now() - time_clock_start;
if(progress.value === progress.max){
clearInterval(time_clock);
time_clock = null;
}
}, 1);
}
// 获取数据
fetch('digital.data')
.then(response => response.arrayBuffer())
.then(parserBody)
.then(data => global_data = data)