⚡️ 使用节流提升画圆性能

package.json

@@ -1,7 +1,7 @@
 {
     "name": "verkfi",
     "version": "1.5.3",
-    "devVersion": "716",
+    "devVersion": "717",
     "dev": true,
     "description": "Platform for Neila's something useless tools.",
     "private": true,

src/app/components/matrix/base.ts

@@ -5,8 +5,7 @@ import {
 import {
     Palette
 } from "@mui/material";
-export default function drawMatrixBase(edge: number, n: number, blocks: block[], cache: block[], posBlock: block[], posCache: block[], palette: Palette) {
-    const onlyPos = blocks.toString() === cache.toString();
+export default function drawMatrixBase(edge: number, n: number, blocks: block[], cache: block[], posBlock: block[], posCache: block[], palette: Palette, onlyPos: boolean) {
     if (!onlyPos) console.time("渲染圆");
     const canvas = (document.getElementsByTagName("canvas")[0] as HTMLCanvasElement) || document.createElement("canvas"),
         size = edge / n,
@@ -28,17 +27,11 @@ export default function drawMatrixBase(edge: number, n: number, blocks: block[],
     const dos: [block[], string][] = [[posCache, palette.background.default], [blocks, "#FF0000"], [posBlock, palette.primary[palette.mode]]];
     dos.forEach((item, index) => {
         cxt.fillStyle = item[1];
-        const path = new Path2D(), pBlock = item[0];
+        const path = new Path2D(), pBlock = item[0].map(item => item.toString());
         for (let i = 0; i <= n; i++) {
             for (let j = 0; j < n; j++) {
-                let have: boolean = false;
-                pBlock.forEach(value => {
-                    if (value[0] == i && value[1] == j) {
-                        have = true;
-                    }
-                });
-                if (have) {
-                    index == 0 ? cxt.clearRect(size * j, size * i, size, size) : path.rect(size * j, size * i, size, size);
+                if (pBlock.includes([i, j].toString())) {
+                    path.rect(size * j, size * i, size, size);
                 }
             }
         }

src/app/components/matrix/matrix.ts

@@ -9,23 +9,21 @@ export var logger = new LpLogger({
     level: "log"
 });
 export type block = [number, number];
-export default function drawMatrix(blocks: block[], g: number, posX: number, posZ: number, posCache: block, cache: block[], palette: Palette) {
+export default function drawMatrix(blocks: block[], g: number, posX: number, posZ: number, posCache: block, cache: block[], palette: Palette, onlyPos: boolean) {
     var b = window.getComputedStyle(document.getElementById("canvascontainer").parentElement.children[0]),
         w = Number(b.width.replace("px", "")),
         h = Number(b.height.replace("px", "")),
         e = Math.max(w, h),
         nowPos: block = [posX, posZ],
         cachePosBlock: block[] = [],
         posBlock: block[] = [];
-    [nowPos, posCache].forEach((item, index) => ["X", "Z"].forEach((item2, index2) => {
+    [nowPos, posCache].forEach((item, index) => {
         let i: number = 0;
         while (i < (g * 2 + 1)) {
-            let block: block = index2 == 0 ? [i, item[index2] - 1] : [item[index2] - 1, i];
-            index == 0 ? posBlock.push(block) : cachePosBlock.push(block);
+            const calcBlock: block[] = [[i, item[0] - 1], [item[1] - 1, i]];
+            index == 0 /* 判断是否为当前位置 */ ? posBlock.push(...calcBlock) : cachePosBlock.push(...calcBlock);
             i++;
         }
-    }));
-    posBlock = removeIn2(posBlock, blocks) as block[];
-    cachePosBlock = removeIn2(cachePosBlock, blocks) as block[];
-    drawMatrixBase(e, g * 2 + 1, blocks, cache, posBlock, cachePosBlock, palette);
+    });
+    drawMatrixBase(e, g * 2 + 1, blocks, cache, posBlock, cachePosBlock, palette, onlyPos);
 }

src/app/components/throttle.ts

@@ -0,0 +1,22 @@
+/**
+ * 节流  
+ * 在事件被触发后，在规定时间内无论在怎么触发只会调用一次函数，直到时间结束
+ * @param {Function} func 要执行的函数
+ * @param {number} delay 时间
+ * @return {Function} 
+ */
+export default function throttle(func: Function, delay: number): (...args) => void {
+    let timer = null;
+    return function (...args) {
+        // let args=arguments 也可以写成这种或...args也是代表我们传过来的实参
+        if (!timer) {
+            timer = setTimeout(() => {
+                func.apply(this, args);
+                timer = null;
+            }, delay)
+        }
+        // 当我们第一次触发事件，定时器不存在时就执行函数，当我们再次点击时，因为定时器存在，
+        // 所以无法再进入函数调用(无论事件如何执行),那么只能等定时器事件结束，
+        // 我们让timer=null，回到第一次的状态,就又重新开始新的一轮
+    }
+}

src/app/tools/cylinder/page.tsx

@@ -15,6 +15,7 @@ import {
     FormGroup,
     Switch
 } from "@mui/material";
+import throttle from '../../components/throttle';
 import {
     useTheme
 } from '@mui/material/styles';
@@ -32,23 +33,21 @@ function Cylinder(): JSX.Element {
         [filled, setFilled] = useState<boolean>(true),
         [posX, setPosX] = useState<number>(1),
         [posZ, setPosZ] = useState<number>(1),
-        [cache, setCache] = useState<block[]>([[1, 1]]),
-        [posCache, setPosCache] = useState<block>([1, 1]),
+        [posCache, setPosCache] = useState<block>([1,1]),
         theme = useTheme();
-    useEffect(() => {
+    var cache: block[] = [[1, 1]];
+    const updatePos = throttle((X: number, Z: number) => {
         const blocks = makeCylinder(radiusX, radiusZ, thickness, filled);
-        setCache(blocks.slice(0));
-        setPosCache([posX, posZ]);
-        drawMatrix(blocks.slice(0), Math.max(radiusX, radiusZ), posX, posZ, posCache, cache, theme.palette);
-    }, [posX, posZ]);
+        drawMatrix(blocks.slice(0), Math.max(radiusX, radiusZ), X, Z, posCache, cache, theme.palette, true);
+        setPosCache([X, Z]);
+        cache = blocks.slice(0);
+    }, 17 /* 1000(ms, = 1s) / 60(60fps) = 17(ms) */);
     useEffect(() => {
         const g = Math.max(radiusX, radiusZ),
             blocks = makeCylinder(radiusX, radiusZ, thickness, filled);
-        setCache(blocks.slice(0));
-        setPosCache([posX, posZ]);
-        setPosX(g);
-        setPosZ(g);
-        drawMatrix(blocks.slice(0), Math.max(radiusX, radiusZ), posX, posZ, posCache, cache, theme.palette);
+        drawMatrix(blocks.slice(0), g, g, g, posCache, cache, theme.palette, false);
+        setPosCache([g, g]);
+        cache = blocks.slice(0);
     }, [radiusX, radiusZ, thickness, filled]);
     return (
         <>
@@ -115,11 +114,19 @@ function Cylinder(): JSX.Element {
                         <TextField label="X" value={posX} type="number" InputLabelProps={{
                             shrink: true,
                             inputMode: 'numeric'
-                        }} onChange={event => setPosX(Number(event.target.value))} />
+                        }} onChange={event => {
+                            const value = Number(event.target.value);
+                            setPosX(value);
+                            updatePos(value, posZ);
+                        }} />
                         <TextField label="Y" value={posZ} type="number" InputLabelProps={{
                             shrink: true,
                             inputMode: 'numeric'
-                        }} onChange={event => setPosZ(Number(event.target.value))} />
+                        }} onChange={event => {
+                            const value = Number(event.target.value);
+                            setPosZ(value);
+                            updatePos(posZ, value);
+                        }} />
                     </Grid>
                 </Grid>
             </FormGroup>
@@ -136,6 +143,7 @@ function Cylinder(): JSX.Element {
                 if (posZ !== z) {
                     setPosZ(z);
                 }
+                updatePos(x, z);
             }}>
                 <canvas id="canvas" width={1} height={1} />
             </div>