purgatory/clash-verge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: optimize traffic graph quadratic curve

Browse Source
This commit is contained in:
GyDi 2022-04-16 22:32:44 +08:00
parent 1b8d70322b
commit ab7313cbc4
No known key found for this signature in database
GPG Key ID: 1C95E0D3467B3084
1 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/layout/traffic-graph.tsx
View File

@ -13,7 +13,7 @@ const downLineAlpha = 1;
const downLineWidth = 4; const downLineWidth = 4;
const duration = 16 / 1000; const duration = 16 / 1000;
const defaultList = Array(maxPoint + 1).fill({ up: 0, down: 0 }); const defaultList = Array(maxPoint + 2).fill({ up: 0, down: 0 });
type TrafficData = { up: number; down: number }; type TrafficData = { up: number; down: number };
@ -47,7 +47,7 @@ const TrafficGraph = (props: Props) => {
cache = null; cache = null;
const list = listRef.current; const list = listRef.current;
if (list.length > maxPoint + 1) list.shift(); if (list.length > maxPoint + 2) list.shift();
list.push(data); list.push(data);
countRef.current = 0; countRef.current = 0;
@ -108,50 +108,40 @@ const TrafficGraph = (props: Props) => {
}; };
const drawBezier = (list: number[]) => { const drawBezier = (list: number[]) => {
const count = countRef.current; const o = dx * Math.min(1, countRef.current * duration);
const offset = Math.min(1, count * duration); const points = list.map((y, i) => [
const offsetX = dx * offset; (dx * (i - 1) - o + 3) | 0,
countY(y),
]);
let lx = 0; let x = points[0][0];
let ly = height; let y = points[0][1];
let llx = 0;
let lly = height;
list.forEach((val, index) => { context.moveTo(x, y);
const x = (dx * index - offsetX) | 0;
const y = countY(val);
const s = 0.25;
if (index === 0) context.moveTo(x, y); for (let i = 1; i < points.length; i++) {
else { const p1 = points[i];
let nx = (dx * (index + 1)) | 0; const p2 = points[i + 1] || p1;
let ny = index < maxPoint - 1 ? countY(list[index + 1]) | 0 : 0;
const ax = (lx + (x - llx) * s) | 0;
const ay = (ly + (y - lly) * s) | 0;
const bx = (x - (nx - lx) * s) | 0;
const by = (y - (ny - ly) * s) | 0;
context.bezierCurveTo(ax, ay, bx, by, x, y);
}
llx = lx; const x1 = (p1[0] + p2[0]) / 2;
lly = ly; const y1 = (p1[1] + p2[1]) / 2;
lx = x;
ly = y; context.quadraticCurveTo(p1[0], p1[1], x1, y1);
}); x = x1;
y = y1;
}
}; };
const drawLine = (list: number[]) => { const drawLine = (list: number[]) => {
const count = countRef.current; const o = dx * Math.min(1, countRef.current * duration);
const offset = Math.min(1, count * duration); const points = list.map((y, i) => [(dx * (i - 1) - o) | 0, countY(y)]);
const offsetX = dx * offset;
list.forEach((val, index) => { context.moveTo(points[0][0], points[0][1]);
const x = (dx * index - offsetX) | 0;
const y = countY(val);
if (index === 0) context.moveTo(x, y); for (let i = 1; i < points.length; i++) {
else context.lineTo(x, y); const p = points[i];
}); context.lineTo(p[0], p[1]);
}
}; };
const drawGraph = () => { const drawGraph = () => {
@ -177,7 +167,7 @@ const TrafficGraph = (props: Props) => {
context.globalAlpha = upLineAlpha; context.globalAlpha = upLineAlpha;
context.lineWidth = upLineWidth; context.lineWidth = upLineWidth;
context.strokeStyle = upLineColor; context.strokeStyle = upLineColor;
lineStyle ? drawLine(listUp) : drawBezier(listUp); lineStyle ? drawBezier(listUp) : drawLine(listUp);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
@ -185,7 +175,7 @@ const TrafficGraph = (props: Props) => {
context.globalAlpha = downLineAlpha; context.globalAlpha = downLineAlpha;
context.lineWidth = downLineWidth; context.lineWidth = downLineWidth;
context.strokeStyle = downLineColor; context.strokeStyle = downLineColor;
lineStyle ? drawLine(listDown) : drawBezier(listDown); lineStyle ? drawBezier(listDown) : drawLine(listDown);
context.stroke(); context.stroke();
context.closePath(); context.closePath();