From fac437b8c1eb4dcd38ae795a159d42c7d308f241 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Tue, 19 Apr 2022 13:55:26 +0800
Subject: [PATCH] fix: traffic graph adapt to different fps
---
src/components/layout/traffic-graph.tsx | 40 ++++++++++++++-----------
1 file changed, 22 insertions(+), 18 deletions(-)
diff --git a/src/components/layout/traffic-graph.tsx b/src/components/layout/traffic-graph.tsx
index a6a1a0e..0a9d376 100644
--- a/src/components/layout/traffic-graph.tsx
+++ b/src/components/layout/traffic-graph.tsx
@@ -12,7 +12,6 @@ const upLineWidth = 4;
const downLineAlpha = 1;
const downLineWidth = 4;
-const duration = 16 / 1000;
const defaultList = Array(maxPoint + 2).fill({ up: 0, down: 0 });
type TrafficData = { up: number; down: number };
@@ -107,10 +106,9 @@ const TrafficGraph = (props: Props) => {
return 1;
};
- const drawBezier = (list: number[]) => {
- const o = dx * Math.min(1, countRef.current * duration);
+ const drawBezier = (list: number[], offset: number) => {
const points = list.map((y, i) => [
- (dx * (i - 1) - o + 3) | 0,
+ (dx * (i - 1) - offset + 3) | 0,
countY(y),
]);
@@ -132,9 +130,11 @@ const TrafficGraph = (props: Props) => {
}
};
- const drawLine = (list: number[]) => {
- const o = dx * Math.min(1, countRef.current * duration);
- const points = list.map((y, i) => [(dx * (i - 1) - o) | 0, countY(y)]);
+ const drawLine = (list: number[], offset: number) => {
+ const points = list.map((y, i) => [
+ (dx * (i - 1) - offset) | 0,
+ countY(y),
+ ]);
context.moveTo(points[0][0], points[0][1]);
@@ -144,7 +144,17 @@ const TrafficGraph = (props: Props) => {
}
};
- const drawGraph = () => {
+ const drawGraph = (lastTime: number) => {
+ const listUp = listRef.current.map((v) => v.up);
+ const listDown = listRef.current.map((v) => v.down);
+ const lineStyle = styleRef.current;
+
+ const now = Date.now();
+ const diff = now - lastTime;
+ const temp = Math.min((diff / 1000) * dx + countRef.current, dx);
+ const offset = countRef.current === 0 ? 0 : temp;
+ countRef.current = temp;
+
context.clearRect(0, 0, width, height);
// Reference lines
@@ -159,15 +169,11 @@ const TrafficGraph = (props: Props) => {
context.stroke();
context.closePath();
- const listUp = listRef.current.map((v) => v.up);
- const listDown = listRef.current.map((v) => v.down);
- const lineStyle = styleRef.current;
-
context.beginPath();
context.globalAlpha = upLineAlpha;
context.lineWidth = upLineWidth;
context.strokeStyle = upLineColor;
- lineStyle ? drawBezier(listUp) : drawLine(listUp);
+ lineStyle ? drawBezier(listUp, offset) : drawLine(listUp, offset);
context.stroke();
context.closePath();
@@ -175,16 +181,14 @@ const TrafficGraph = (props: Props) => {
context.globalAlpha = downLineAlpha;
context.lineWidth = downLineWidth;
context.strokeStyle = downLineColor;
- lineStyle ? drawBezier(listDown) : drawLine(listDown);
+ lineStyle ? drawBezier(listDown, offset) : drawLine(listDown, offset);
context.stroke();
context.closePath();
- countRef.current += 1;
-
- raf = requestAnimationFrame(drawGraph);
+ raf = requestAnimationFrame(() => drawGraph(now));
};
- drawGraph();
+ drawGraph(Date.now());
return () => {
cancelAnimationFrame(raf);
--
GitLab